/*
 * Retreat landing — Section 9 "Who this is for" + Important note
 * (item S9, build-tracker.md)
 *
 * Nodes: header 90:99 (eyebrow 90:101, H2 90:100 "this room is for you
 * if:" — green colon via the shared .retreat-mark class, marks.css), left
 * column checklist 90:85 (5 items, plain disc bullets) + CTA 90:143-145
 * "Reserve your spot", right column travels paragraph 90:84 (2 <p>s) +
 * Important note callout (bar 90:141, heading 90:142, body 90:140).
 * Full geometry/measurement notes live in the pattern file's docblock
 * (patterns/retreat-who-for.php) — this file only restates the resulting
 * token choices inline where non-obvious.
 *
 * Selectors scoped under `.retreat-who-for` only (decision-log #12 / theme-
 * conventions.md) — the `.retreat-page` ancestor (templates/page-retreat.html)
 * already supplies the token-override cascade. Alias tokens only:
 * var(--font-*), var(--space-*), var(--color-*), var(--radius-*) — no raw
 * hex/px where a token exists.
 *
 * Layout: header is LEFT-ALIGNED (not centered like S3/S10's header
 * treatment) — confirmed via get_design_context geometry + screenshot, a
 * deliberate departure for this section. Two columns below via a plain CSS
 * grid + own divs (per the S2/S3 gate lesson: core wp:columns' 781px
 * stacking rule doesn't apply to a hand-built grid, so this section owns
 * its own stacking breakpoint, matching the rest of the retreat family's
 * <=768px convention). CTA sits in the LEFT column below the checklist —
 * NOT below the note (right column) — verified by x-position: CTA x113
 * matches the checklist's x102-112 column, the note's bar/heading/body sit
 * at x767-795, matching the paragraph column. Easy to get backwards from
 * the comp thumbnail alone; geometry settles it.
 *
 * Round 1 gate fix #2/#4: the CTA is a direct grid child now (not nested
 * inside col-left), explicitly placed at column 1 / row 2 on desktop —
 * see the "Two-column grid" comment below for why, and the <=768px media
 * query for the mobile `order` reassignment (Important note before CTA,
 * a reviewer ruling — crisis disclaimer ahead of the ask).
 */

.retreat-who-for {
  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. */
  padding-block: var(--retreat-section-pad);
  padding-inline: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm); /* header -> columns, ~23.5px measured avg, see docblock */
}

/* ── Header (left-aligned eyebrow + H2) ── */
.retreat-who-for__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs); /* eyebrow -> H2, 8px measured exact */
}

.retreat-who-for__eyebrow {
  /* --color-primary on white = 3.97:1, under 4.5:1 — shared treatment
     across every retreat section eyebrow (S3/S10 have it too), logged as a
     build-level decision, not re-litigated per section. */
  color: var(--color-primary);
  margin: 0;
}

.retreat-who-for__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;
}

/* Green punctuation mark on the H2's trailing colon uses the shared
   .retreat-mark utility (marks.css) — no per-section duplicate here. */

/* ── Two-column grid ──
 * Round 1 gate fix #2: the CTA is now a DIRECT grid item, a sibling of
 * col-left/col-right, not nested inside col-left's flex column. That's
 * what makes the mobile `order` reorder (below) possible — CSS `order`
 * only reorders direct grid children, and a flex-nested grandchild can't
 * be pulled out from under its parent's flex gap independently. Desktop
 * placement: col-left (checklist) in column 1 / row 1, the CTA in column
 * 1 / row 2 directly beneath it, col-right (travels + note) spanning both
 * rows in column 2 via `grid-row: 1 / 3` — visually identical to the old
 * col-left-wraps-both-children layout, structurally different underneath.
 */
.retreat-who-for__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--retreat-col-gap, 90px); /* fallback: editor canvas has
    no .retreat-page ancestor, so the token-overrides.css definition never
    reaches it there (S3 precedent — how-it-works.css / logistics.css) */
  row-gap: var(--space-lg); /* checklist -> CTA, column 1 only (see docblock
    below) — not reliably measurable from the comp's raw boxes (they
    overlap), ASSUMED from how-it-works.css's analogous steps-to-CTA gap,
    see pattern docblock for the full note */
}

.retreat-who-for__col-left {
  grid-column: 1;
  grid-row: 1;
}

.retreat-who-for__cta {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}

/* CTA — hero-parity treatment (S3 lesson): same navy fill + animated hover
   darken as the S2 hero and S3 how-it-works CTAs, not buttons.css's default
   snap. */
.retreat-who-for__cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--color-retreat-navy);
  transition: filter 0.2s ease;
}

.retreat-who-for__cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  filter: brightness(0.85);
}

/* ── Checklist ──
 * Round 1 gate fix #3: reset.css's `ul.wp-block-list { list-style: disc;
 * padding-left: 1.25em }` is (0,1,1) specificity — the bare
 * `.retreat-who-for__checklist` class alone is (0,1,0) and LOSES outright,
 * which is why the list text sat ~22px right of the section's left edge
 * instead of flush with the H2 above it. Qualified to `ul.retreat-who-for__
 * checklist` (0,1,1) to TIE reset.css's selector; sections/*.css loads
 * after reset.css in enqueue.php, so the tie resolves here on source order.
 *
 * Comp geometry (pattern docblock): the checklist's own box starts 10px
 * LEFT of the section edge (x102 vs x112) while the text itself sits flush
 * at x112 — i.e. the comp's disc markers hang left of the text column, not
 * a false 22px offset. `padding-left: 0` + `list-style-position: outside`
 * reproduces exactly that: with zero reserved padding, outside markers
 * render past the ul's own left edge, so the TEXT (not the marker) is what
 * lines up with the H2 above it. At <=768 (mobile.css block below) padding
 * comes back so the marker doesn't clip the viewport edge.
 *
 * List mechanism: dropped `display: flex` on the `<ul>` — list markers
 * inside a flex formatting context are unreliable in WebKit (Safari/iOS
 * has historically mispositioned or dropped `::marker` boxes on flex
 * items). Normal block flow + `li + li { margin-top }` gets the same
 * visual item gap without touching list-item layout at all.
 */
ul.retreat-who-for__checklist {
  padding-left: 0;
  list-style-position: outside;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--font-md);
  color: var(--color-text-body); /* comp specifies literal #000 — tokens-not-
    hex substitution, same call S10's card body made (what-this-isnt.css) */
  margin: 0;
}

.retreat-who-for__checklist li {
  margin: 0; /* neutralizes reset.css's .wp-block-list li { margin-bottom:
    0.35em } so li+li below is the single source of the item gap, not a
    stack of two different spacing rules */
}

.retreat-who-for__checklist li + li {
  margin-top: var(--space-sm); /* ~22.75px measured, matches modules/for-
    you.css's own checklist item gap — see pattern docblock for the
    line-count math */
}

.retreat-who-for__col-right {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-md); /* paragraph -> note, 32px measured exact */
}

.retreat-who-for__travels-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs); /* inter-paragraph gap — same token/reasoning as
    leave-with.css's two-paragraph body group */
}

.retreat-who-for__travels {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--font-md);
  /* line-height: theme global body default (1.55) already matches the
     comp's 28px/18px ratio — no restatement needed (same call as S3/S4). */
  color: var(--color-text-body); /* comp #000 -> token, see checklist note above */
  margin: 0;
}

/* ── Important note callout ──
 * Round 1 gate fix #1: the bar was a `wp:html` div — reverses the
 * established ruling from hero.css fix round 1, finding #8 (4 identical
 * wp:html bar blocks replaced with a single `::before` pseudo-element on
 * the flex container; same pattern reused at retreat-logistics__stat). As
 * the first generated box in a flex formatting context, `::before`
 * participates in layout exactly like the div it replaces, so the gap/
 * align-items rules are unchanged — just no extra DOM/markup block.
 *
 * Yellow bar — decorative separator on white (documented band exception,
 * figma-analysis "NOTE on the color matrix"), exempt from 1.4.11 (non-text
 * contrast) as it doesn't convey information alone — the "Important note:"
 * heading text does that. Same rationale as retreat-logistics__stat's bar.
 */
.retreat-who-for__note {
  display: flex;
  /* Fix 2026-08-17 (Alain, staging review), was --space-sm (22px computed,
     "bar -> text, 28px measured"): the body's third sentence needs 542px and
     a 22px gutter left it 537px, so "it." fell alone onto a fourth line.
     --space-xs (16px) is the SAME bar->text gutter .retreat-hero__stat
     already uses on this page, so this reads as consistency, not a one-off
     nudge — and it hands the body exactly the 542px it needs, restoring the
     comp's own 3-line block (node 90:140, height 84 = 3 lines). Verified
     live at 1440: 4 lines (496/504/521/16) -> 3 (496/504/542), block height
     112 -> 84. The fit has ~0px slack by construction, which is why
     .retreat-who-for__note-body also carries text-wrap: pretty below — see
     there. */
  gap: var(--space-xs);
}

/* Hygiene pass: shared box geometry + colour (content/display/width/
 * background/flex-shrink) moved to sections/retreat/stat-bar.css. Only the
 * geometry local to this call site stays here — see stat-bar.css's header
 * for why radius isn't shared. */
.retreat-who-for__note::before {
  align-self: stretch; /* bar fills the row height (comp: 146px against
    heading+body content) instead of a hardcoded height that would break
    when the text reflows at narrower widths */
  border-radius: var(--radius-pill);
}

.retreat-who-for__note-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs); /* heading -> body: raw boxes show 0px (shared
    inflated Figma leading artifact, same as what-this-isnt.css's card
    headings) — used the header's own label-gap token for a small real gap */
}

.retreat-who-for__note-heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--font-xl);
  line-height: 1.35; /* normalized from the comp's shared 46px leading
    artifact, same call as retreat-isnt__card-heading (what-this-isnt.css) */
  color: var(--color-retreat-navy);
  margin: 0;
  /* defensive vs theme.json h3 element style (uppercase + 1.2px tracking,
     S3/S10 lesson) — this copy is Title Case ("Important note:"), so reset
     to `none` rather than `lowercase` (lowercase would wrongly fold the
     capital I). letter-spacing reset as the other sections do. */
  text-transform: none;
  letter-spacing: normal;
}

.retreat-who-for__note-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--font-md);
  color: var(--color-text-body); /* comp #000 -> token */
  margin: 0;
  /* Orphan guard (2026-08-17), paired with the gutter fix on
     .retreat-who-for__note above. That fix wins the 5px that lets sentence 3
     hold one line, but with ~0px slack — any font-metric difference (another
     OS, a fallback face before Roboto Slab loads) puts it back over and
     re-orphans "it.". `pretty` is the browser's own last-line repair: it
     reflows to avoid a short final line, so the worst case degrades to
     "for it." rather than a lone word. Verified live at 537px (the
     pre-fix width): last line 16px -> 45px. Unsupported browsers just get
     today's behaviour — no layout risk, nothing to fall back to. */
  text-wrap: pretty;
}

/* ── Responsive ──
 * Section gutters match .retreat-hero__inner / .retreat-how / .retreat-isnt
 * exactly, so this section's left edge lines up with every other section.
 */
@media (max-width: 1240px) {
  .retreat-who-for {
    padding-inline: 24px;
  }
}

@media (max-width: 768px) {
  .retreat-who-for {
    padding-inline: var(--space-xs);
  }

  /* Stack to one column, matching every other retreat section's <=768px
     single-column breakpoint (what-this-isnt.css finding, round 1). No
     mobile frame exists for this section (figma-analysis "Design gaps"),
     so which column reads first (checklist before travels/note) is still
     a derived default pending designer review — but the CTA's position
     relative to the Important note is a firm reviewer ruling, not a
     guess: see the `order` block below. */
  .retreat-who-for__columns {
    grid-template-columns: 1fr;
    row-gap: var(--space-lg);
    column-gap: 0;
  }

  /* Reviewer ruling (2026-08-15, S9 gate round 1): stacked mobile order
     puts the Important note BEFORE the CTA — the crisis disclaimer needs
     to be read before the ask, not after (WCAG 1.3.2 meaningful sequence:
     the stacked reading order should preserve the same relationship the
     two-column layout implies). Mechanism: explicit `order` on the grid's
     three direct items (round 1 gate fix #2 made the CTA a direct item,
     which is what makes this possible at all). CTA remains the section's
     only focusable element and its DOM position doesn't move, so this
     visual reorder doesn't create a tab-order inversion — there's nothing
     else in the section to tab through relative to it. grid-column/row
     reset to auto so the desktop explicit placement above doesn't fight
     the single-column stack. */
  .retreat-who-for__col-left {
    grid-column: 1;
    grid-row: auto;
    order: 1;
  }

  .retreat-who-for__col-right {
    grid-column: 1;
    grid-row: auto;
    order: 2;
  }

  .retreat-who-for__cta {
    grid-column: 1;
    grid-row: auto;
    order: 3;
  }

  /* Checklist marker clearance (round 1 gate fix #3): desktop lets the
     disc hang left of the section edge via `padding-left: 0` (comp-
     faithful — see the Checklist comment above). At this width the
     section's own padding-inline is already down to --space-xs (16px), so
     an outside marker with zero UL padding would render right at (or
     past) the viewport edge.
     NOT fixed with `padding-left` here (deviates from the literal fix
     note, documented): adding UL padding shifts the checklist TEXT right
     along with the marker, breaking flush alignment with the H2 above it
     — which the re-verify pass explicitly checks at this breakpoint too.
     `list-style-position: inside` instead: the marker renders AS PART OF
     the first line's inline content, inside the LI's own box, so it can
     never overflow past the box edge — no clipping risk — while the box
     itself (and therefore the text) stays exactly where it was, flush
     with the heading. Verified: li.getBoundingClientRect().left still
     equals the H2's at this breakpoint. */
  ul.retreat-who-for__checklist {
    list-style-position: inside;
  }

  /* Mobile full-width CTA, for family parity with .retreat-how__cta-wrap
     (how-it-works.css) — this section previously left its CTA content-
     width only, inconsistent with its siblings. `.wp-block-buttons` is
     flex with no grow on its items by default, so `width: 100%` on the
     link alone resolves against its content-sized `.wp-block-button`
     parent and is a no-op; the parent flex item needs the 100% too (same
     finding how-it-works.css logged in its own round 2 review). */
  .retreat-who-for__cta .wp-block-button,
  .retreat-who-for__cta .wp-block-button__link {
    width: 100%;
  }
}