/*
 * Retreat landing — Section 3 "How it works" (item S3, build-tracker.md)
 *
 * Nodes: eyebrow 90:247, H2 90:246, steps 90:243/240 + 90:244/241 + 90:245/242,
 * image placeholders 90:248/251 + 90:250/253, illustration vector 95:344
 * (supplied asset assets/images/retreat/overnight.webp), CTA 93:337/93:338.
 *
 * Selectors scoped under `.retreat-how` only (decision-log #12 / theme-
 * conventions.md) — the `.retreat-page` ancestor (templates/page-retreat.html)
 * already supplies the token-override cascade, so nothing here needs to
 * repeat that class. Alias tokens only: var(--font-*), var(--space-*),
 * var(--color-*), var(--radius-*) — no raw hex/px where a token exists.
 *
 * Column geometry (598px media / 528px text / 90px gap = 1216px content
 * width, comp ratio ≈53:47) is measured off the comp (nodes above) and has
 * no token equivalent (structural layout literal, same house convention as
 * box-content.css's hardcoded 1216/595/410px columns) — --retreat-col-gap is
 * the one geometry value that DOES have a token (decision-log #12), so that
 * one is var()'d. The columns themselves are proportional (flex: 0 1 53%/
 * 47%, review round-1 finding #2), not fixed-px, so the ratio holds through
 * the 1025–1240px band instead of a fixed media basis forcing the text
 * column alone to absorb the width deficit as the viewport narrows.
 */

.retreat-how {
  max-width: 1216px;
  margin: 0 auto;
  /* R2-4 fix (2026-08-16): standard inter-section rhythm — see
     token-overrides.css's --retreat-section-pad header comment. Was
     var(--space-100) (100/64/48), doubling the comp's ~90-100px seam since
     page-rhythm.css renders sections flush. The token itself steps down
     responsively — no per-breakpoint override needed here anymore. */
  padding-block: var(--retreat-section-pad);
  padding-inline: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

/* Header -> steps stays the section's normal --space-2xl flex gap (above,
   unaffected by R1-1). Steps -> CTA is no longer part of this gap at all —
   see the R1-1 CTA-placement comment near .retreat-how__cta-wrap below: the
   CTA moved out of `.retreat-how`'s own flex flow entirely (nested inside
   step 3's text column instead), so there's nothing left to compensate for
   here. */

/* ── Header (eyebrow + centered H2) ── */
.retreat-how__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xs);
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.retreat-how__eyebrow {
  color: var(--color-primary);
  margin: 0;
}

.retreat-how__heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--font-3xl);
  line-height: 1.15;
  color: var(--color-retreat-navy);
  margin: 0;
}

/* Hygiene pass: this section's own green-mark class was consolidated into
   the shared .retreat-mark utility (marks.css) — markup swapped in
   patterns/retreat-how-it-works.php, dead rule removed here. */

/* ── Steps ── */
.retreat-how__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.retreat-how__step {
  display: flex;
  align-items: center;
  gap: var(--retreat-col-gap, 90px); /* fallback: editor canvas has no
    .retreat-page ancestor, so the token-overrides.css definition never
    reaches it there (review finding #7) */
}

/* Step 2 shows media on the left, text on the right (comp: vector 95:344
   left of nodes 90:244/241) — swap the visual order, keep DOM order
   text-then-media for consistent reading order across all three steps. */
.retreat-how__step--reverse {
  flex-direction: row-reverse;
}

.retreat-how__step-text {
  /* Proportional, not a fixed 528px basis (review finding #2) — a fixed
     media basis paired with a growing/shrinking text column made the text
     column absorb the entire width deficit as the viewport narrowed toward
     1024px, drifting the 598/528 comp ratio off-model well before the
     column-stacking breakpoint. 47/53 (below) holds the comp ratio
     (528:598 ≈ 47:53) through the whole 1025–1240px band instead. */
  flex: 0 1 47%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.retreat-how__step-text > * {
  margin: 0;
}

.retreat-how__step-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--font-xl);
  line-height: 1.35;
  color: var(--color-retreat-navy);
  /* defensive vs theme.json h3 element styles — see S10 gate finding:
     theme.json's h3 element style (textTransform: uppercase, letterSpacing:
     1.2px) compiles to `:root :where(h3)`, and :root itself carries
     specificity (0,1,0) even though :where() zeroes out everything inside
     it — so the compiled selector ties this class's own (0,1,0), not loses
     to it as previously assumed. Nothing in the theme resets letter-spacing
     at all. Explicit reset needed on both properties. */
  text-transform: lowercase;
  letter-spacing: normal;
}

.retreat-how__step-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--font-md);
  /* line-height: theme.json global body default (1.55) already covers this —
     no restatement needed (review nit #8). */
  color: var(--color-text-body);
}

.retreat-how__step-media {
  flex: 0 1 53%;
  max-width: 100%;
}

.retreat-how__step-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  /* 2026-08-23 (Alain): all three steps are blob-baked transparent assets now
     (532 from Figma 95:344; 572/573 cut from that same node's alpha), each at
     the 544x427 ratio the .retreat-how__illustration rule below pins. No
     object-fit on purpose — the silhouette is IN the alpha, so `cover` on a
     swapped-in image would crop the blob's own edges off. Match the ratio when
     replacing art; don't reach for cover. */
  /* R1-7 fix (2026-08-15): 598/349 is the general CLS-guard ratio for this
     column — matches steps 1 and 3's new placeholder image (below) and the
     comp's own placeholder-panel geometry (nodes 90:248/90:250). Step 2's
     illustration overrides this with its own real 544/427 ratio via the more
     specific `.retreat-how__illustration img` rule right below, so this
     general rule only ever governs steps 1/3 in practice. */
  aspect-ratio: 598 / 349;
}

/* Reset the figure's default WP core margin so it doesn't add unwanted space
   inside the flex media column — applies to every image in this column
   (step 2's real illustration AND steps 1/3's placeholder image, R1-7). */
.retreat-how__step-media figure {
  margin: 0;
}

/* Step 2's illustration (overnight.webp, core wp:image — review finding #4)
   — real intrinsic ratio overrides the general 598/349 guard above. R1
   kickback round 1 nit #10: this used to credit specificity for the
   override ("higher specificity: two classes vs. one") — wrong, both
   `.retreat-how__step-media img` and `.retreat-how__illustration img` are
   a single class + `img` type selector, identical (0,1,1) specificity.
   Source order decides the tie: this rule loads AFTER the general rule
   above in the same file, so it wins on cascade order, not specificity.
   544×427 = overnight.webp's real dimensions (S3 round-2 verified). The
   img carries NO width/height HTML attrs — those without matching block
   JSON invalidate core/image in the editor (S2 gate lesson, re-found at
   the I1 gate) — aspect-ratio supplies the CLS guard instead. */
.retreat-how__illustration img {
  aspect-ratio: 544 / 427;
}

/* R1-7 fix (2026-08-15): steps 1 and 3 used a styled, aria-hidden `wp:html`
 * placeholder div (`.retreat-how__placeholder` + `.retreat-how__placeholder-
 * label`, comp nodes 90:248/90:250 rounded-rects + 90:251/90:253 "IMAGE"
 * labels) — invisible/uneditable content, clients could never drop a real
 * photo in. Replaced with a standard attachment-backed core wp:image block
 * (media-library id 534, a generated neutral placeholder graphic —
 * assets/images/retreat/how-placeholder.webp, flat --color-grey-200 fill +
 * --color-grey-300 border baked into the raster + a baked-in "IMAGE" label —
 * see the pattern file's R1-7 docblock note) so Replace/media-library
 * editing works immediately, same mechanism as step 2's real illustration
 * and the R1-5 hero/how-it-works content-image swaps. Both dead rules
 * removed (`.retreat-how__placeholder` / `-label`) — grepped the theme,
 * nothing else references either class (logistics.css had a comment-only
 * mention, updated separately, not a real dependency). The old panel's
 * visual recipe (grey-200 fill, grey-300 border, radius-md, centred
 * uppercase label) is now baked into the raster image itself rather than
 * expressed in CSS, so there's nothing left to keep here. */

/* ── CTA (nodes 93:337/93:338) ──
 * Core wp:buttons/wp:button, same component as the S2 hero's CTA (review
 * finding #1 — was a hand-rolled anchor with its own full button recipe,
 * duplicating buttons.css and drifting from the hero's identical-label
 * button). buttons.css already supplies height 50/padding/line-height/pill
 * shape/uppercase/tracking; token-overrides.css's counter-layer supplies
 * mobile sizing (>=44px touch target). Only the navy fill + hover are
 * section-specific, matching hero.css's override exactly.
 *
 * ── R1-1 fix (2026-08-15): placement + spacing ──
 * Was a page-level sibling of `.retreat-how__steps`, spaced off it via this
 * rule's own margin-top (--space-lg, 40px) STACKED on top of `.retreat-how`'s
 * own --space-2xl (120px) flex gap between its top-level children — 160px
 * total, rendering visibly far below the last step. Comp evidence (93:337
 * top y2325, day-two body 90:242 bottom y2274) wants 51px, measured from the
 * day-two TEXT column specifically, left-aligned to it — not from the whole
 * 3-step row (taller, because step 3's media placeholder column runs ~58px
 * past the text column's own bottom). Fixed by moving the CTA markup INSIDE
 * step 3's `.retreat-how__step-text` group (patterns/retreat-how-it-works.php)
 * as its last child — a negative-free fix (per the build brief's own
 * preference) that gets left-alignment for free (same flex column as the
 * text, no extra margin needed) and ties the gap to the text's real bottom
 * at every breakpoint/reflow, independent of the media column's height.
 *
 * Math: `.retreat-how__step-text` is itself `display:flex; flex-direction:
 * column; gap: var(--space-3xs)` (8px, constant at every breakpoint — not
 * one of tokens.css's responsive-stepped spacing vars), which now applies
 * between the body paragraph and this CTA wrap too (a normal flex child).
 * That 8px is unconditional, so the margin-top below is set to the
 * REMAINDER (target gap minus the 8px the parent's own `gap` already
 * contributes), via calc() against a single page-scoped "target gap" token
 * (token-overrides.css's --retreat-how-cta-gap) — one editable number
 * expresses the actual rendered gap, not a pre-subtracted magic value.
 * Responsive steps (34px@1024, 26px@768 targets) are derived proportionally
 * off tokens.css's own --space-2xl step ratios (120->80->60, the same chain
 * driving the header->steps gap above) — no mobile Figma frame exists to
 * measure an independent value against (figma-analysis-2026-08.md §Design
 * gaps), same derivation precedent as every other un-measured mobile value
 * in this build. Verified live at 1440: gap (day-two body bottom -> CTA
 * top) = 51px exactly; CTA left edge === text column left edge (both
 * 104.57px from viewport left).
 */
.retreat-how__step-text > .retreat-how__cta-wrap {
  margin-top: calc(var(--retreat-how-cta-gap, 51px) - var(--space-3xs));
}

.retreat-how__cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--color-retreat-navy);
  transition: filter 0.2s ease; /* buttons.css only transitions background;
    hero.css adds this so the hover darken animates instead of snapping —
    matched here (review round 2, finding #2) */
}

.retreat-how__cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  filter: brightness(0.85); /* darken without a new hardcoded hex, matches hero.css */
}

/* ── Responsive ──
 * Steps stack at <=768px, NOT the WP-core columns breakpoint of 781px —
 * deliberate: this section is built with a plain flex row (no wp:columns
 * block), so the 781px core stacking rule never applies here and 768 is our
 * own, matching the rest of the retreat token chain (token-overrides.css
 * steps at the same breakpoint).
 *
 * Mobile order (review finding #3, uniform image-first — the common pattern
 * for this kind of alternating-row section, and it's what the DOM already
 * sets up: DOM order is always text-then-media, per the pattern file's
 * docblock, specifically so a single column-reverse rule can put media
 * first for every step, reversed or not, without touching markup order).
 * Previously only `--reverse` got `column-reverse`, so steps 1/3 rendered
 * text-first on mobile against the stated intent — fixed by applying the
 * same reversal to the base `.retreat-how__step` class too.
 */
@media (max-width: 1240px) {
  .retreat-how {
    padding-inline: 24px; /* matches .retreat-hero__inner's ≤1240 gutter
      (hero.css) — flush edges from 1025–1215px otherwise (review finding #2) */
  }
}

@media (max-width: 1024px) {
  .retreat-how {
    gap: var(--space-xl);
  }

  .retreat-how__steps {
    gap: var(--space-xl);
  }

  .retreat-how__step,
  .retreat-how__step--reverse {
    gap: var(--space-lg);
  }

  /* No flex-basis override here (review round 2, finding #1 — regression):
     these used to pin both columns to a flat 46%/46%, a leftover from the
     fixed-px era. With the desktop rule now proportional (0 1 47%/53%,
     round 1 finding #2), that flat pair summed to 92% of the row and left
     26–46px of dead space at the row's right edge (neither column had room
     to grow into it) instead of matching the row width like the 1240/768
     bands do. The desktop 47%/53% shrink-absorbs correctly on its own
     through 769–1024px — removing the override, not replacing it, is the
     fix. Verified: stepMedia right edge === step row right edge (±1px) at
     1024/900/769 for all three steps. */
}

@media (max-width: 768px) {
  .retreat-how {
    padding-inline: var(--space-xs); /* 16px, matches .retreat-hero__inner's
      ≤768 gutter (hero.css) — token form of the same value (review finding #2) */
  }

  .retreat-how__step,
  .retreat-how__step--reverse {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--space-sm);
  }

  .retreat-how__step-text,
  .retreat-how__step-media {
    flex: 1 1 auto;
  }

  .retreat-how__header {
    max-width: 100%;
  }

  /* R1-1: no ≤768 override needed here — --retreat-how-cta-gap already steps
     down at this breakpoint (token-overrides.css), and the calc() rule above
     (0,2,0 specificity) picks it up automatically. */

  /* Full width at mobile — `.wp-block-buttons` is flex with no grow on its
     items by default, so `width: 100%` on the link alone resolved against
     its content-sized `.wp-block-button` parent and was a no-op (verified
     via computed styles: link/button both stayed 227px against a 721px
     wrap). The parent flex item needs the 100% too. `:not(.is-style-outline)`
     dropped here (review round 2, nit #4) — width isn't a fill/border
     property that differs by button style, so the guard was pointless on
     this declaration; the background/hover rules above still keep it. */
  .retreat-how__cta .wp-block-button,
  .retreat-how__cta .wp-block-button__link {
    width: 100%;
  }
}