/**
 * Dark pair.
 *
 * Ported from `_mockups/services.html` (`.p-journeys`, `.p-journey`) and
 * `_mockups/process.html` (`.p-qs`, `.p-q`), which are the same object drawn
 * twice, prefixed per inventory §2.2.
 *
 * `pages.css` owns `.dark-band` and `.placeholder-note`. This file adds the two
 * glass panels, the dashed gold line between them, and the actions row. Body
 * copy sets size only – `.dark-band p` already paints it, and re-declaring the
 * colour would need a specificity fight to land in the same place.
 *
 * The divider is the section's whole idea: two routes, one rail. It is drawn on
 * the grid rather than as a panel border so that it does not belong to either
 * side, and it is dropped on narrow screens where the panels stack and a
 * vertical line between them would be a line through them.
 *
 * Breakpoints are literal px because `var()` is invalid inside a media query.
 */

.dark-pair {
  scroll-margin-block-start: var(--sticky-offset);
}

.dark-pair__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.dark-pair__grid::before {
  content: "";
  position: absolute;
  inset-block: 8%;
  inset-inline-start: 50%;
  width: 2px;
  margin-inline-start: -1px;
  background-image: linear-gradient(180deg, var(--on-dark-arc-strong) 55%, transparent 45%);
  background-size: 2px 10px;
  pointer-events: none;
}

.dark-pair__panel {
  background: var(--on-dark-surface-soft);
  border: 1px solid var(--on-dark-hairline-soft);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: flex-start;
}

.dark-pair__kicker {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
}

.dark-pair__panel h3 { font-size: var(--text-xl); }
.dark-pair__panel p { font-size: var(--text-s); }

/* The sentence the reader can hold us to. */
.dark-pair__panel strong {
  color: var(--white);
  font-weight: 600;
}

/* Pushed to the foot of the panel so two panels of unequal copy still line
   their actions up. */
.dark-pair__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-block-start: auto;
  padding-block-start: var(--s-2);
}

/* The placeholder chip is a light chip and has to stay one. `.placeholder-note`
   is one class, `.dark-band p` is one class plus an element, and the chip is a
   <p>, so without the colour here the kit paints the chip's text white on its
   own pale gold fill at 1.07:1. Two classes wins it back to --gold-deep on
   --gold-tint-15 at 5.06:1. Same patch as `.qr-explainer .placeholder-note`. */
.dark-pair__panel .placeholder-note {
  color: var(--gold-deep);
  margin-block-start: auto;
  align-self: flex-start;
}

@media (max-width: 860px) {
  .dark-pair__grid { grid-template-columns: 1fr; }
  .dark-pair__grid::before { display: none; }
}