/*
 * Retreat landing — Section 10 "What this isn't" (item S10, build-tracker.md)
 *
 * Nodes: eyebrow 90:104 "what this isn't" (blue 22 uppercase — the STANDARD
 * on-white eyebrow treatment; figma-analysis §Documented exceptions notes
 * only the HERO eyebrow (90:82) deviates to white/16px), H2 90:102 "we
 * don't have all the answers." (navy + green period via .retreat-mark,
 * marks.css), intro 90:120 (two-line "Space. Tools. People. We got those. /
 * Presence. Curiosity. Wisdom. You bring those."), 5 white cards r20 +
 * --shadow-card: containers 90:107/113/108 (row 1) + 90:114/91:266 (row 2),
 * headings 90:119/122/121/123+91:267 (lowercase + green period via
 * .retreat-mark), bodies 90:124/135/125/136+91:268. Copy verbatim — node
 * names in get_metadata carry the exact text, cross-checked against
 * get_design_context, 2026-08-14.
 *
 * Geometry (measured off the comp via get_metadata, not guessed):
 *   eyebrow (y6260,h24) -> H2 (y6292) gap = 8px = --space-3xs
 *   H2 (y6292,h46) -> intro (y6346) gap = 8px = --space-3xs
 *   intro (y6346,h60) -> card row 1 (y6453) gap = 47px, closest token
 *     --space-48 (48px)
 *   Card row 1: x=112/526/936, y=6453, w~390 each. Card row 2 (2 cards
 *     only): x=112/526, y=6775 — SAME x-origins as row 1, i.e. row 2 sits
 *     left-aligned under columns 1-2, not centered — matches a 3-col CSS
 *     grid with 5 items (browser default packs the partial last row from
 *     the start), no extra centering rule needed.
 *   Row gap: 6775 - 6453 - 288(card h) = 34px = --space-md (page-override
 *     token, decision-log #12 — exact match).
 *   Column gap: 526 - 112 - 392 = 22px = --space-sm (page-override token —
 *     exact match). Card box: white bg, radius 20 (--radius-md), shadow
 *     0 4px 20px 10px rgba(0,0,0,.1) (--shadow-card, tokens.css:91).
 *   Card internal padding: measured via card-heading text-node LEFT inset
 *     only (x is reliable; text-node y/height is inflated by an oversized
 *     Figma leading value — see card-heading note below — so vertical
 *     insets aren't). Card 1 heading x151 - card x112 = 39px; card 2
 *     heading x565 - card x526 = 39px; card 3 heading x966 - card x936 =
 *     30px (this file's own eyeballed placement, not auto-layout — a few
 *     px of inter-card variance). Average ~36px, closest page token
 *     --space-md (34px) — used on all four sides rather than --space-sm
 *     (22px, further off and already spoken for as the grid's column gap).
 *
 * Grid built as a plain CSS grid (not wp:columns) per the S2/S3 gate lesson
 * ("CSS grid -> your own div structure with explicit grid rules is fine,
 * core columns rules won't apply") — core's 781px column-stacking rule is
 * therefore N/A here. Tiers are this file's own media queries: 3-col
 * >=1024px, 2-col 769-1023px, 1-col <=768px (S10 gate finding, round 1:
 * 1-col moved here from <=480 to match every other retreat section's
 * single-column breakpoint — see the tier comments near the media queries
 * below for the full reasoning).
 *
 * Selectors scoped under `.retreat-isnt` only (decision-log #12 / theme-
 * conventions.md) — the `.retreat-page` ancestor (templates/page-retreat.html)
 * already supplies the token-override cascade, so nothing here repeats that
 * class. Alias tokens only: var(--font-*), var(--space-*), var(--color-*),
 * var(--radius-*) — no raw hex/px where a token exists.
 *
 * Card heading (22px desktop) uses var(--font-xl) (page-override token).
 * These compose as core h3 blocks (.wp-block-heading), so the shared mobile
 * counter-layer in token-overrides.css (decision-log #12 mobile-override-
 * contract, "h3/h4 join the existing --font-xl arm") already steps them to
 * 20px at <=768px — no per-section mobile heading rule needed here.
 *
 * text-transform/letter-spacing (S10 gate finding, round 1): theme.json's
 * global h3 element style (textTransform: uppercase, letterSpacing: 1.2px,
 * theme.json:159-171) compiles to `:root :where(h3)`. :where() zeroes the
 * specificity of everything inside it, but :root is itself a pseudo-class
 * outside the :where() — so the compiled selector's specificity is (0,1,0)
 * from :root alone, NOT zero. That ties this class's own (0,1,0), it
 * doesn't lose to it — a previous version of this comment claimed the
 * class won outright on specificity, which was wrong. Nothing in the theme
 * resets letter-spacing at all, at any specificity. Both properties are
 * therefore explicitly reset below (same fix applied cross-lane to
 * how-it-works.css's .retreat-how__step-title, which shares the identical
 * defect — S3 is gated, so that's a one-line authorized exception, not a
 * lane violation).
 *
 * Line-height 1.35 (not the comp's literal leading value): get_design_context
 * reports `leading-[46px]` on both the H2 (40px font) and every card heading
 * (22px font) alike — a shared Figma text-style leading carried over
 * unmodified per size, not a deliberate 2x+ line-height on the smaller
 * headings. Normalized to theme.json's own documented h3 line-height (1.35,
 * theme.json:164), same call S3 made for step-title.
 *
 * Card body font-size (S10 gate finding, round 1): measured directly —
 * get_design_context on 90:124 AND 90:125 both report text-[16px]
 * (Roboto Slab Regular, leading-[26px]). 16px sits 1px from --font-sm
 * (15px) and 2px from --font-md (18px, the token every OTHER retreat body
 * copy block uses — S3 step-body, S4 leave-with body) — --font-sm is the
 * closer alias and is what's used below. This card body is deliberately
 * smaller than the single-panel bodies elsewhere in the comp, not an
 * under-documented guess.
 *
 * Card body copy color: the comp specifies literal black (#000000, see
 * get_design_context node 90:124) but per theme-conventions.md tokens-not-
 * hex this uses --color-text-body (#414B5A) instead — the same token S3's
 * step-body uses (how-it-works.css:119); #414B5A on white clears 4.5:1 by a
 * wide margin (S3 lesson: grey-700 not grey-500 — text-body is darker than
 * either grey token, not a grey-scale contrast question at all here).
 *
 * Eyebrow contrast (S10 gate finding, round 1 — NOT fixed here): the
 * `.eyebrow` treatment (--color-primary, #2380E5 on white) measures 3.97:1,
 * under the 4.5:1 text minimum. This is the shared on-white eyebrow
 * treatment (S3 has the identical value) — inherited, not introduced here.
 * Logged as a build-level decision, not a per-section fix.
 */

.retreat-isnt {
  max-width: 1216px;
  margin: 0 auto;
  /* R2-4 fix (2026-08-16): this section carries TWO documented rhythm
     exceptions, both comp-verified, neither using the shared
     --retreat-section-pad standard other sections consume:
     TOP — who-for->isnt measures 128px in the comp (frame 1:561), well
       above the ~96-100px standard the uniform token produces elsewhere
       (who-for's own padding-bottom is the standard --retreat-section-pad,
       48px desktop — verified live first, came up 32px short of 128 with
       both sides at the standard). var(--space-80) closes it exactly:
       48 (who-for bottom, unchanged) + 80 (isnt top) = 128px, exact comp
       match, and --space-80 already has its own tokens.css responsive
       chain (80/60/48) so this steps down without a separate media query.
     BOTTOM — comp measures a deliberately larger 228px break before the
       join finale band (vs. the ~90-100px standard elsewhere) — join is a
       full-bleed band with zero external top padding (bands.css), so this
       section's own padding-bottom IS the entire isnt->join seam.
       calc(--space-2xl + --space-100) = 220px desktop (120+100), within
       the brief's ±20px comp tolerance of 228; both operands already have
       their own tokens.css responsive chains (2xl: 120/80/60, 100:
       100/64/48) so this also steps down (144@1024/108@768) without a
       separate media override. */
  padding-top: var(--space-80);
  padding-bottom: calc(var(--space-2xl) + var(--space-100));
  padding-inline: 0;
}

.retreat-isnt__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xs);
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-48);
}

.retreat-isnt__eyebrow {
  /* --color-primary on white = 3.97:1, under 4.5:1 — shared treatment
     (S3 has it too), logged not fixed here; see docblock. */
  color: var(--color-primary);
  margin: 0;
}

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

.retreat-isnt__intro {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--font-md);
  /* ASSUMED, not rendering-verified (browser bridge down all session):
     comp measures 30px leading at 18px font = 1.667; theme global body
     default is 1.55 (theme.json:129), a visible difference on paper across
     two short centered lines. 1.65 rounds close to the comp value — kept
     as an explicit value like the heading rules above do for their
     comp-measured line-heights, pending the deferred visual pass. */
  line-height: 1.65;
  color: var(--color-text-dark);
  margin: 0;
}

.retreat-isnt__grid {
  display: grid;
  /* minmax(0,1fr) not bare 1fr: bare 1fr's implicit min-width:auto lets an
     unbreakable child (long word, wide inline element) blow the column out
     past its share of the grid — minmax(0,1fr) removes that floor. */
  /* 2026-08-24 (Peter): the "we do not have a recipe" card was removed,
     leaving 4 cards. 3-across put 3 on row 1 and a left-aligned orphan
     pair on row 2; 2-across gives an even 2x2. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md) var(--space-sm);
}

.retreat-isnt__card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.retreat-isnt__card-heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--font-xl);
  line-height: 1.35;
  color: var(--color-retreat-navy);
  margin: 0;
  /* defensive vs theme.json h3 element styles — see docblock note above */
  text-transform: lowercase;
  letter-spacing: normal;
}

.retreat-isnt__card-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--font-sm);
  color: var(--color-text-body);
  margin: 0;
}

@media (max-width: 1240px) {
  .retreat-isnt {
    padding-inline: 24px; /* matches .retreat-hero__inner's / .retreat-how's
      <=1240 gutter (hero.css, how-it-works.css) — flush left edge across
      all retreat sections from 1025-1240px */
  }
}

/* .retreat-isnt__header's own margin-bottom override was removed here
   (S10 gate finding, round 1): --space-48 already steps 48/40/32 through
   the token chain at this width, so a flat --space-md pin inverted the
   rhythm (header gap == grid row-gap) instead of stepping with it. (R2-4,
   2026-08-16: the empty @media(1024px) block this comment used to live in
   was removed — nothing else lived there once its padding-block override
   was pulled up into the base rule's calc() above.) */

/* Grid tiers: 3-col (base rule above, unconditional) holds through
   1024px inclusive; 2-col starts at 1023px, not 1024 — deliberate, not a
   stray off-by-one. The base 3-col rule and this media-query rule target
   the same selector/specificity, so whichever is later in source order
   wins at any width both would match; max-width:1023 keeps the two ranges
   from ever overlapping at all (1024px only ever matches the base rule),
   instead of relying on source order to arbitrate a shared 1024px
   boundary the way the other retreat files' spacing tiers do (those are
   fine either way since both sides of their boundary carry the same
   value; a column-count flip is not). */
/* The old <=1023 arm (3-col -> 2-col) is retired: the base grid is now 2-col,
 * so it declared the value it was already inheriting. The <=768 flip to a
 * single column below is the only remaining step. */

@media (max-width: 768px) {
  .retreat-isnt {
    padding-inline: var(--space-xs); /* matches .retreat-hero__inner's /
      .retreat-how's <=768 gutter — token form of the same value */
  }

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

  /* 1-col breakpoint moved here from <=480 (S10 gate finding, round 1):
     every other retreat section goes single-column at <=768, and the
     481-768 2-col band squeezed card text to a ~175px measure (~25 chars/
     line) — aligning with the section family instead of a bespoke tier. */
  .retreat-isnt__grid {
    grid-template-columns: 1fr;
  }
}