/*
 * RAVL 2026 — /how-it-works, and only /how-it-works. PR26-747, sections PR26-787 to 792.
 *
 * Loaded after `ravl-2026.css` by `views/layouts/page-2026.hbs`, through the route's
 * `pageStylesheet`. Everything shared — tokens, type, the band shell, cards, buttons, the closing
 * band, nav and footer — is in that sheet and is not repeated here.
 *
 * Three things went INTO the foundations while this page was built, rather than being written
 * here, because a second page wanting them is exactly the test:
 *
 *   --ash / .rv-band--ash   the #FAFAFA ground this page's hero render exports on
 *   .rv-card--plain         the process card without a tint
 *   .rv-close*              the closing band, which had been sitting in `home-2026.css`
 *                           looking like home page furniture because there was one page
 */

/* ============================================================ HERO — PR26-787
   Long, roughly 2,200px, because the order is headline -> render -> lede -> three steps ->
   second render -> closing line. That is Andy's order and the length is a consequence of it, not
   an accident — but it is the first thing to look at if the page feels slow to get going.

   The band's own `overflow: hidden` is what lets the bleed image run to the page edges without
   ever widening the document. */
.hiw-hero {
    padding-top: calc(var(--nav-h) + 88px);
    padding-bottom: 104px;
}

/* Centred, and capped at a measure rather than the full 1240 column: at 80px a headline running
   the whole column is four words a line and reads as a wall. */
.hiw-hero__h {
    max-width: 1000px;
    margin-inline: auto;
    font-size: 80px;
    text-align: center;
}

.hiw-hero__lede { margin-top: 44px; max-width: 640px; }
.hiw-hero__coda { margin-top: 56px; max-width: 720px; }

/* ============================================================ THE RENDERS
   `object-fit: cover` on a fixed-height window, rather than the artboard's absolutely-positioned
   image at a fixed negative offset.

   IT IS THE SAME CROP AND IT SURVIVES A RESIZE. The artboard draws an 810px-tall image in a 600px
   window at `top: -105px`, which trims 13% off the top and 13% off the bottom — empty ground, not
   composition: the subject occupies only the middle 51% of the frame vertically, which is why the
   hero grew a dead band at full height. A 600/810 cover crop removes exactly the same 13% at each
   edge, and goes on doing it at 1200px and at 400px, where a fixed -105px offset would not. */
.hiw-shot { position: relative; overflow: hidden; }

.hiw-shot img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

/* Full bleed to the page edges, out through the band's padding. */
.hiw-shot--bleed {
    height: 600px;
    margin: 36px calc(var(--margin) * -1) 0;
}

/* Inset, not bled: 1100 wide inside the 1240 column, which is the artboard's `left: 170px` in a
   1440 stage. */
.hiw-shot--dinner {
    height: 540px;
    max-width: 1100px;
    margin: 64px auto 0;
}

/* ============================================================ THE THREE STEPS
   `.rv-card--plain` supplies the box — hairline, 20px radius, padding, white fill. Only the
   arrangement is here: numeral, then label, then body, stacked, with no rule between them. The
   home page's process card puts the numeral and the label on one line above a hairline; this is
   the same card in a different arrangement, not a second card.

   Equal columns rather than `1fr` each, so three cards of unequal copy stay the same width. */
.hiw-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 300px));
    justify-content: center;
    gap: 20px;
    margin: 56px 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

/* 28px/600 is large text, where the AA threshold is 3:1 — `--accent` is 4.70:1 on white and
   clears it comfortably. The same colour at the 13px body size below would not, which is why the
   body is `--body` and not a tinted grey. */
.hiw-step__no { display: block; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--accent); }
.hiw-step__label { margin: 6px 0 0; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.hiw-step__body { margin: 10px 0 0; font-size: 13px; line-height: 1.65; color: var(--body); }

/* ============================================================ THE FOUR EDITORIAL SECTIONS
   Headline left, copy right. The design puts a product screenshot in the right column of three of
   these four; until real captures exist (PR26-788, 789, 790 — and the frames must never be mocked)
   the copy takes that column instead, which is why the split is 5/7 rather than half and half.

   WHEN THE SCREENSHOTS ARRIVE the section gains `.hiw-split--framed` and a third child, and the
   two text columns collapse back into one under the headline. That rule is written below rather
   than left to be invented later. */
.hiw-split {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 40px 72px;
    align-items: start;
}

.hiw-split__body > .rv-body + .rv-body { margin-top: 22px; }

.hiw-split__action { margin: 34px 0 0; }

/* The framed form, for the day there is something to put in the frame. */
.hiw-split--framed { grid-template-columns: 1fr 310px; }
.hiw-split--framed .hiw-split__head { grid-column: 1; }
.hiw-split--framed .hiw-split__body { grid-column: 1; }

/* The phone frame itself: 310x630 at 36px radius. On a paper band it takes the page ground and on
   a white band the paper, so it separates from whichever band it is on — a frame the same value
   as its ground is a frame nobody can see. */
.hiw-frame {
    grid-row: 1 / span 2;
    width: 310px;
    height: 630px;
    border-radius: 36px;
    border: 1px solid var(--line);
    background: var(--paper);
    overflow: hidden;
}

.rv-band--paper .hiw-frame { background: var(--page); }

.hiw-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================================================
   BREAKPOINTS — the same four steps as `ravl-2026.css`, which owns the shared half.
   ============================================================================================ */

@media (max-width: 1439px) {
    .hiw-hero__h { font-size: clamp(54px, 5.8vw, 80px); }
    .hiw-shot--bleed { height: 46vw; max-height: 600px; }
    .hiw-shot--dinner { height: 40vw; max-height: 540px; }
}

@media (max-width: 1099px) {
    /* One column. The headline stops being a column of its own and becomes what it is on a narrow
       screen: the thing above the paragraph. */
    .hiw-split { grid-template-columns: 1fr; gap: 28px; }
    .hiw-split--framed { grid-template-columns: 1fr; }
    .hiw-split--framed .hiw-frame { grid-row: auto; margin-inline: auto; }

    /* Three 300px cards do not fit; two-up leaves an orphan, so it is one per row with the
       numeral beside the label rather than above it — half the height, and the three still read
       as a sequence. */
    .hiw-steps { grid-template-columns: minmax(0, 520px); gap: 14px; }
    .hiw-step { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: baseline; }
    .hiw-step__no { grid-row: 1 / span 2; }
    .hiw-step__label { margin: 0; }
    .hiw-step__body { grid-column: 2; }
}

@media (max-width: 767px) {
    .hiw-hero { padding-top: calc(var(--nav-h) + 48px); padding-bottom: 72px; }
    .hiw-hero__h { font-size: clamp(36px, 10vw, 54px); line-height: 1.02; }
    .hiw-hero__lede { margin-top: 32px; }
    .hiw-hero__coda { margin-top: 40px; }

    /* The bleed window gets shallower rather than shorter-and-wider: at a phone's width a 46vw
       window is 180px tall and the two figures disappear into it. 62vw keeps them legible. */
    .hiw-shot--bleed { height: 62vw; margin-top: 28px; }
    .hiw-shot--dinner { height: 58vw; margin-top: 40px; }

    .hiw-steps { grid-template-columns: 1fr; }
    .hiw-split__action { margin-top: 28px; }
    .hiw-split__action .rv-btn { width: 100%; }

    .hiw-frame { width: 100%; max-width: 310px; height: auto; aspect-ratio: 310 / 630; }
}