/* ==============================================================
   W3 — How it works

   Three numbered steps with a chevron between each pair. Both the
   numbering and the chevrons are worth care: one is doubled by
   default, the other must not exist in the markup at all.
   ============================================================== */

.steps {
  background: var(--color-surface);
  color: var(--color-ink);
  padding-block: var(--space-9);
}

.steps__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}


/* --- Header ------------------------------------------------------ */

.steps__header {
  margin-bottom: var(--steps-list-gap);
  text-align: center;
}

.steps__heading {
  margin: 0 0 var(--steps-header-gap);
  font-size: var(--text-section-heading);
  line-height: var(--leading-display);
  color: var(--color-heading-display);
}

/* Each line is a block, so the break is a decision rather than a
   wrapping accident. The space between them in the markup is for the
   accessible name and collapses to nothing here. */
.steps__heading-line { display: block; }

.steps__subheading {
  margin: 0;
  font-size: var(--text-steps-sub);
  line-height: var(--leading-body);
  color: var(--color-ink-muted);
}


/* --- The steps ---------------------------------------------------
   base.css resets `ul` and NOT `ol`, so without this the browser
   draws its own "1." beside a numeral that already says 1. The reset
   is load-bearing here, not housekeeping.
   ------------------------------------------------------------------ */

.steps__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--steps-gap);

  max-width: var(--steps-list-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.steps__item {
  /* Containing block for the chevron, which lives in the gap to the
     item's left. */
  position: relative;
  text-align: center;
}

.steps__number {
  margin: 0 0 var(--steps-number-gap);
  font-size: var(--text-steps-number);
  line-height: var(--leading-none);
}

.steps__text {
  margin: 0;
  font-size: var(--text-steps-text);
  line-height: var(--leading-body);
}


/* --- Chevrons -----------------------------------------------------
   Drawn, not written. A separator element would be a node a screen
   reader walks past for nothing — the same call this project made
   for the promo bar's divider and §13's rules.

   Two borders on a rotated square rather than a glyph or an icon
   font: no dependency, and it inherits a colour.

   Positioned against the NUMERAL's centre, not the item's. The item
   is as tall as its wrapped sentence, so centring on it would drift
   as the copy changed length; the reference aligns the chevron with
   the numerals.
   ------------------------------------------------------------------ */

.steps__item + .steps__item::before {
  content: '';
  position: absolute;
  top: calc(var(--text-steps-number) / 2);
  left: calc(var(--steps-gap) / -2);

  width: var(--steps-chevron);
  height: var(--steps-chevron);
  border-top: 2px solid var(--color-steps-chevron);
  border-right: 2px solid var(--color-steps-chevron);

  transform: translate(-50%, -50%) rotate(45deg);
}


/* --- CTA ----------------------------------------------------------- */

.steps__cta {
  margin-top: var(--steps-cta-gap);
  text-align: center;
}


/* ==============================================================
   W4 — Responsive

   Measured with the gap still fixed at 128px, the row degraded like
   this — and the gap, not the column, was the cause:

       list 1080   col 275   2 lines
       list  905   col 216   2
       list  793   col 179   3
       list  674   col 139   4
       list  534   col  93   5
       list  294   col  13   9 lines, PAGE OVERFLOWS

   Two gaps of 128 took 256px of a 294px list. The column was the
   remainder. Making --steps-gap fluid fixes most of that; below the
   width where three columns still hold a sentence in three lines,
   they stack.

   Container query, not a media query: the list is capped at 1080 and
   centred, and in the style guide sits inside a second padded box —
   the viewport width at which it reaches any given size is not the
   same number in both places. Fourth component to need this.
   ============================================================== */

.steps__inner {
  container-type: inline-size;
}

@container (max-width: 749px) {

  .steps__list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The chevron turns with the layout. A right-pointing arrow between
     items stacked vertically points at nothing — it has to say "then
     downwards" instead. Same glyph, 90 degrees further round, and now
     centred in the row gap above its item rather than the column gap
     beside it. */
  .steps__item + .steps__item::before {
    top: calc(var(--steps-gap) / -2);
    left: 50%;
    transform: translate(-50%, -50%) rotate(135deg);
  }
}