/**
 * Process — the cream band. Four panels on `horizontal-handoff`.
 *
 * The component builds its own viewport and track around the panels and reads
 * two custom properties from this file:
 *
 *   --vc-hh-height  how tall the pinned viewport is. 100svh, not 100vh, so it
 *                   does not jump when mobile browser chrome slides away
 *                   mid-handoff.
 *   --vc-hh-gap     the space between panels, which the track applies.
 *
 * Panels are sized in `min()` so a wide panel never exceeds the viewport — if
 * one did, part of it would be unreachable at the end of the travel.
 */

.process__hint {
  margin-top: var(--vc-space-5);
  color: var(--vc-accent);
  font-family: var(--vc-font-mono);
  font-size: var(--vc-text-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The head sits above a full-bleed rail, so it does not need its own bottom
   margin — the rail brings one. */
.process .section__head {
  margin-bottom: 0;
}

/**
 * The rail was inset to line its first panel up with a 76rem shell. There is
 * no shell any more — the page runs edge to edge — so the rail takes the plain
 * gutter and the panel starts where the heading starts.
 */
.process__rail {
  --vc-hh-height: 100svh;
  --vc-hh-gap: var(--vc-space-5);

  margin-top: var(--vc-space-9);
  padding-inline: var(--noir-gutter);
}

@media (min-width: 64rem) {
  .process__rail {
    --vc-hh-gap: var(--vc-space-7);
  }
}

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--vc-space-4);
  width: min(32rem, 84vw);
  padding: var(--vc-space-7) var(--vc-space-6);
  border: var(--noir-rule) solid var(--vc-ink);
  border-radius: 0;
  background: var(--vc-bg);
}

/**
 * Pinned, the track is the full viewport height — but the panel is not.
 *
 * `height: 100%` stretched every panel to the viewport and then centred four
 * short paragraphs inside it, which put most of a screen of nothing between
 * the body and the weeks label and made the shortest panel look broken. The
 * panel is its content's height now.
 *
 * `center` rather than `start`: the track is still viewport-tall, so a panel
 * pinned to its top leaves the same empty screen underneath — the dead space
 * moves rather than goes. Centred, the leftover height sits half above and
 * half below, which is the track breathing instead of the panel gaping.
 */
.vc-horizontal-handoff--pinned .panel {
  align-self: center;
  padding-block: var(--vc-space-9);
}

@media (min-width: 64rem) {
  .panel {
    padding-inline: var(--vc-space-8);
  }
}

/**
 * The accent is 4.76:1 on the band's background — over the 4.5:1 WCAG asks of
 * body text — but it is set at display scale here anyway, because the numeral
 * is the panel's index and a panel you have to read to number is a panel with
 * no number.
 */
.panel__index {
  color: var(--vc-accent);
  font-family: var(--vc-font-display);
  font-size: var(--noir-display-sub);
  font-weight: 400;
  line-height: var(--noir-display-leading);
  letter-spacing: var(--noir-display-tracking);
  /* Numerals, so this changes nothing today — but every Anton string on the
     page carries it, and the one that does not is the one a buyer edits into
     a word. */
  text-transform: uppercase;
}

.panel__title {
  font-family: var(--vc-font-display);
  font-size: var(--vc-text-3xl);
  font-weight: 400;
  letter-spacing: var(--noir-display-tracking);
  line-height: var(--noir-display-leading);
  text-transform: uppercase;
}

.panel__body {
  color: var(--vc-ink-muted);
  font-size: var(--vc-text-base);
}

@media (min-width: 48rem) {
  .panel__body {
    font-size: var(--vc-text-lg);
  }
}

/**
 * 48px clear of the body. `margin-top: auto` used to push this to the bottom
 * of a viewport-tall panel; with the panel sized to its content there is no
 * bottom to push to, so the distance is stated instead. The panel's own
 * `gap` already contributes, hence the subtraction.
 */
.panel__meta {
  margin-top: calc(var(--vc-space-9) - var(--vc-space-4));
  padding-top: var(--vc-space-4);
  border-top: var(--noir-rule) solid var(--vc-ink);
  color: var(--vc-ink-muted);
  font-family: var(--vc-font-mono);
  font-size: var(--vc-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}