/**
 * Section: How It Works (how-it-works)
 *
 * Ported from `_mockups/index.html` `.c-steps` / `.c-step` / `.c-how-photo`,
 * which docs/pasia-section-inventory.md names as the source of truth.
 * `book-consultation.html` `.bc-steps` is byte-identical apart from the
 * connector inset, which is arithmetic rather than a second design, and
 * `accreditations.html` `.ac-checks` is the same language permanently stacked.
 *
 * The parked starter stylesheet this replaces is gone. Nothing in it survived:
 * it was a card grid on a different palette with 12px, 30px, 18px, 26px and
 * 16px written into it, and a 64px circular icon well for an icon field that no
 * longer exists.
 *
 * THE STACKED FORM IS THE BASE AND THE ROW IS THE ENHANCEMENT, rather than the
 * other way round. Two reasons. Everything collapses to the stack below 860px,
 * so writing the stack once and adding the row above that breakpoint says each
 * rule once instead of setting it and then unsetting it. And a step count that
 * is not three or four never becomes a row at any width, so the stack is the
 * form more instances land on.
 *
 * NO `animation` AND NO `transition` ANYWHERE IN THIS FILE. Every step carries
 * `.reveal`, which base.css now runs as an `animation` rather than a
 * `transition`, precisely so that a section declaring its own `transition`
 * shorthand can no longer replace the property list and make the element snap
 * in rather than fade. `animation` is the one property that would still collide
 * with the new form, so a section stylesheet must not put its own on a
 * `.reveal` element. Neither arises here: none of the three mock-ups gives a
 * step a hover treatment, so this file needs no motion of its own at all.
 *
 * No `.reveal-dN` in the markup either. Inventory §0 carries an erratum on it:
 * the four delay steps were invented on top of the signed-off design, appear in
 * none of the 27 mock-ups, and have been deleted from base.css.
 *
 * CONTRAST, measured numerically and as composited, not by eye. The band is the
 * default mist ground (#f7f4ee), and the only other surface is the gold numeral:
 *
 *   --ink        #14231f  on --mist                 14.83:1
 *   --ink-soft   #45524d  on --mist                  7.45:1   step body
 *   --gold-deep  #7e622e  on --mist                  5.21:1   the eyebrow, tokens.css
 *   --deep-forest #082f2a on --gold #c99a47           5.65:1   the numeral
 *
 * All clear WCAG AA for normal text. The connector rule is --gold on mist at
 * 2.33:1: it is an atmospheric join between numerals, carries no text and is
 * nothing's only affordance, so 1.4.11 does not reach it.
 *
 * The bare pixel values are component geometry with no token behind them: the
 * numeral's diameter, the 2px rule and the 8px ring that punches the rule out
 * behind each numeral. The diameter is a component-local custom property so
 * the connector's inset can be derived from it rather than repeated as 26px in
 * three places. Every colour, space, radius, shadow and type size is a token,
 * and there is no font-size literal in this file.
 */

/* ---------------------------------------------------------------------------
 * The wide photograph, `.c-how-photo`.
 * ------------------------------------------------------------------------ */
.how-it-works .hiw-photo {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-m);
  margin-bottom: var(--s-6);
}

@media (max-width: 860px) {
  .how-it-works .hiw-photo {
    aspect-ratio: 16 / 9;
  }
}

/* ---------------------------------------------------------------------------
 * The steps. Stacked by default: this is `.ac-checks` at every width, and
 * `.c-steps` / `.bc-steps` below 861px.
 *
 * `--pasia-step-count` is set inline by the renderer on the row form only. The
 * default below is the fallback that keeps the connector's calc() valid if a
 * piece of per-section Custom CSS ever reaches the element and drops it: an
 * unresolvable var() would invalidate the whole declaration at computed-value
 * time and the rule would jump to the container edges.
 * ------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------
 * A long unbroken string anywhere in this section must not widen the page.
 *
 * SET ONCE ON THE SECTION AND INHERITED, rather than on the step list alone,
 * which is where it used to be and which covered half the section. `.hiw-steps`
 * was protected and the section HEAD was not, so a heading or an intro
 * containing one long unbroken word pushed the whole document sideways:
 * measured at 320 on a heading of 57 unbroken characters, `h2` ran 710px past
 * its container and the document scrolled 690px. `.container` clips nothing, so
 * a document-width check does see this one, but only if something adversarial
 * is in the field, which is why it survived a sweep of real content.
 *
 * `anywhere` rather than `break-word` because only `anywhere` is taken into
 * account when the min-content size is computed, and min-content is what a grid
 * track asks for. `minmax(0, 1fr)` on the step's text column answers the track;
 * this answers the word itself. Both are needed and neither substitutes for the
 * other.
 *
 * THE SAME HOLE IS OPEN ONE LAYER UP AND IS NOT THIS FILE'S TO CLOSE.
 * `.head` and `h2` are base.css and have no `overflow-wrap` of their own, so
 * every section with a `.head` has this, and a section stylesheet can only
 * answer for itself. Reported upward.
 * ------------------------------------------------------------------------ */
.how-it-works {
  overflow-wrap: anywhere;
}

.how-it-works .hiw-steps {
  --pasia-step-num: 52px;
  --pasia-step-count: 4;
  position: relative;
  display: grid;
  gap: var(--s-5);
  max-width: 820px;
}

/* The vertical rail, from `.ac-checks::before` and `.c-steps::before`'s mobile
   form. It starts and ends at the first and last numeral's centre. */
.how-it-works .hiw-steps::before {
  content: "";
  position: absolute;
  top: calc(var(--pasia-step-num) / 2);
  bottom: calc(var(--pasia-step-num) / 2);
  left: calc(var(--pasia-step-num) / 2 - 1px);
  width: 2px;
  background: linear-gradient(180deg, var(--gold-tint-20), var(--gold), var(--gold-tint-20));
}

/* ONE STEP HAS NOTHING TO JOIN. The inset above is half a numeral from the
   LIST's box at each end, which lands on the first and last numeral's centre
   for every count above one and lands well past the numeral for a count of
   one. Measured at 320 with one step: the list was 113px tall, the numeral
   occupied 0 to 52, and the rail ran 26 to 87, so 35px of gold rule hung below
   the only step, joined to nothing. Dropped rather than re-derived from the
   last numeral, because the arithmetic is correct for what it was written for.
   `.is-single` is set by the renderer from count(). */
.how-it-works .hiw-steps.is-single::before {
  content: none;
}

.how-it-works .hiw-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--pasia-step-num) minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
}

.how-it-works .hiw-num {
  position: relative;
  z-index: var(--z-raised);
  width: var(--pasia-step-num);
  height: var(--pasia-step-num);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--deep-forest);
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--text-lg);

  /* The ring is the band's own colour and punches the rail out behind the
     numeral, so the rule reads as joining the numerals rather than running
     under them. It follows the band: this section is always mist. */
  box-shadow: var(--shadow-gold), 0 0 0 8px var(--mist);
}

/* Optically settles the text against a numeral half again its height.
   `.ac-check p` uses .55em and `.c-step h3` uses .4em; index.html is the
   canonical page, so .4em wins and the difference is two pixels. */
.how-it-works .hiw-step-text {
  padding-top: .4em;
}

.how-it-works .hiw-step-title {
  font-size: var(--text-lg);
  margin-bottom: var(--s-1);
}

.how-it-works .hiw-step-body {
  color: var(--ink-soft);
  font-size: var(--text-base);
}

/* ---------------------------------------------------------------------------
 * The row form, three or four steps, above the stacking breakpoint.
 *
 * `grid-auto-flow: column` takes the column count from the items themselves,
 * so nothing here has to be told how many there are. The connector still needs
 * the count, because its inset is half a column plus half a numeral:
 * index.html writes calc(12.5% + 26px) for four and book-consultation.html
 * calc(16.666% + 26px) for three, and both are 50% / count.
 * ------------------------------------------------------------------------ */
@media (min-width: 861px) {
  .how-it-works .hiw-steps.is-row {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    max-width: none;
  }

  .how-it-works .hiw-steps.is-row::before {
    top: calc(var(--pasia-step-num) / 2);
    bottom: auto;
    left: calc(50% / var(--pasia-step-count) + var(--pasia-step-num) / 2);
    right: calc(50% / var(--pasia-step-count) + var(--pasia-step-num) / 2);
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--gold-tint-20), var(--gold), var(--gold-tint-20));
  }

  .how-it-works .hiw-steps.is-row .hiw-step {
    display: block;
    text-align: center;
  }

  .how-it-works .hiw-steps.is-row .hiw-num {
    margin-inline: auto;
  }

  .how-it-works .hiw-steps.is-row .hiw-step-text {
    padding-top: 0;
    margin-top: var(--s-3);
  }

  .how-it-works .hiw-steps.is-row .hiw-step-body {
    font-size: var(--text-sm);
    max-width: 26ch;
    margin-inline: auto;
  }
}

/* Below the breakpoint every form is the stack, and `.c-steps` narrows and
   centres itself there so four steps do not read as a full-width column of
   loose rows.
   `.is-row` ONLY, and the scoping is the whole point of this rule rather than
   tidiness. A list that was never a row is `.ac-checks`, which holds its 820px
   measure and its left edge at every width; narrowing it to 420px at 768px
   would change a page the inventory records as banding-correct, and it is not
   visible on a full-page screenshot at that width, which is how it survived
   the first pass. */
@media (max-width: 860px) {
  .how-it-works .hiw-steps.is-row {
    max-width: 420px;
    margin-inline: auto;
  }
}

/* ---------------------------------------------------------------------------
 * The optional button row.
 * ------------------------------------------------------------------------ */
.how-it-works .hiw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: center;
  margin-top: var(--s-6);
}

/* The buttons follow the head, which is the only alignment decision this
   section makes: centred over the row, left over the stack, derived from the
   step count in the renderer and never from a field. No mock-up puts buttons
   under any step block, so there is no reference to match and this is a
   judgement: a centred button row under a left-aligned head and a left-edged
   list reads as a third alignment on one section. `.is-row` is the same test
   the head uses, so the two can never disagree, and the selector is the
   adjacent sibling because `.hiw-actions` follows the <ol> directly. */
.how-it-works .hiw-steps:not(.is-row) + .hiw-actions {
  justify-content: flex-start;
}

/* The smallest phones: two pill buttons side by side overflow 320px. */
@media (max-width: 560px) {
  .how-it-works .hiw-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .how-it-works .hiw-actions .btn {
    justify-content: center;
  }
}