/*
 * Retreat landing — S2: Hero + Info Bar (patterns/retreat-hero.php)
 *
 * Figma nodes: bg 90:30 (blue grain band, built via the F1 .retreat-band--blue
 * utility — decision-log #14, no raster export), logo 90:52 (exported SVG,
 * assets/images/retreat/rewrite-logo.svg), eyebrow 90:82, H1 90:44, body 90:83,
 * CTA 90:94, blob 90:93 (supplied hero-image.webp, decision-log #15), stats
 * 90:146-148 / 90:35+45+86 / 90:37+47+88 / 90:39+49+90.
 *
 * Tokens only (theme-conventions.md) — comp-vs-theme scale drifts resolve via
 * .retreat-page's alias overrides in token-overrides.css (decision-log #12);
 * this file never re-declares those, only consumes var(--font-*)/var(--space-*).
 *
 * ── S2 fix round 1 (2026-08-14, review gate kickback) — summary of changes ──
 * #1 44/56 column split now set via block width attrs + inline flex-basis
 *    (theme convention, matches 7 other patterns) instead of flex%, which
 *    core's own (0,3,0) column rule was beating. #2 eyebrow corrected to
 *    white/16px per figma-analysis's documented hero exception (was wrongly
 *    blue-22). #3 H1 letter-spacing reset to 0 (theme.json's -1.5px is tuned
 *    for 64px, not this comp's 40px). #4 stat body full white, not .82
 *    opacity (band-only exception, contrast measured live). #5 focus-visible
 *    ring recolored for band contrast. #6 stacked row-gap no longer inherits
 *    the 90px column gap. #8 stat bars are a CSS ::before now, not 4 wp:html
 *    blocks. Mark span moved to the new shared sections/retreat/marks.css.
 *
 * ── S2 fix round 2 (2026-08-14, reviewer-prescribed kickback) ──
 * Round 1's image fix (JSON width/height attrs + `is-resized` + inline
 * `style="width:N;height:N"`) was WP's real resize markup, but that inline
 * style is unitless and invalid CSS — both declarations were silently
 * discarded, so it "worked" only because this file's own `img { width;
 * height:auto }` rules were doing the actual sizing, with ZERO real CLS
 * protection. Reverted both images to the theme's plain, dimension-free
 * form (matches every other image pattern in the theme); intrinsic sizing
 * now comes from `aspect-ratio` here instead, which reserves the box
 * pre-load without ever hard-pinning a px width that would overflow at
 * narrow breakpoints.
 */

/* ── Outer band ── */
.retreat-hero {
  /* .retreat-band--blue + .retreat-band--rounded (bands.css) supply the grain
     background + corners (R1-2 fix, 2026-08-15: 100px, node-verified via
     90:34's exact `rounded-bl-[100px]/rounded-br-[100px]` — was wrongly
     r20 pre-R1-2). Top corners squared (Alain, 2026-08-15): the hero sits
     flush under the site header, and the rounded top corners were visible as
     notches on scroll. Bottom 100px stays — reads as the band's deliberate
     edge against the white section below. */
  margin: 0;
}

/* Compound selector: bands.css's .retreat-band--blue.retreat-band--rounded is
   (0,2,0), so the top-corner reset needs equal specificity + later source
   order (hero.css globs after bands.css) to win. */
.retreat-hero.retreat-band--rounded {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.retreat-hero__inner {
  /* Matches the theme's own .container convention (global.css): max-width +
     margin:auto only, no desktop padding — whitespace comes from centering.
     Figma page margins are 112px at 1440, which this reproduces exactly:
     (1440 - 1216) / 2 = 112. */
  max-width: 1216px;
  margin: 0 auto;
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-xl); /* comp: stats-bottom to band-bottom ≈ 72px, exact token match */
}

@media (max-width: 1240px) {
  .retreat-hero__inner {
    padding-inline: 24px;
  }
}

@media (max-width: 768px) {
  .retreat-hero__inner {
    padding-inline: var(--space-xs); /* fix round 1, finding #10b: was a 16px literal; --space-xs = 16px, not stepped down for retreat mobile, so value is unchanged — token now, not a hardcode */
  }
}

/* ── Copy / media row ──
 * Fix round 1 (finding #1): the 44/56 split used to be `flex: 0 1 44%/56%`
 * on the column elements, but core block-library ships
 * `.wp-block-columns > .wp-block-column { flex-basis: 0; flex-grow: 1 }`
 * (specificity 0,3,0, loaded after theme CSS) which beat this file's
 * `.retreat-hero__row .retreat-hero__copy` (0,2,0) flex rules on BOTH
 * specificity and source order — rendering 50/50 regardless of the % here.
 * Fixed the theme's way (matches 7 other patterns, grep
 * `wp:column {"width"` in patterns/): the split is set as a block attribute
 * in the pattern markup — `{"width":"44%"}` + inline `style="flex-basis:44%"`
 * on the column div. Core ships `[style*="flex-basis"] { flex-grow: 0 }`
 * (block-library/style.css), so the inline style both sets the basis AND
 * kills the flex-grow:1 that would otherwise re-equalize the columns — no
 * CSS needed here at all for the split itself. This file only supplies the
 * gap + vertical centering; the width division lives in the markup.
 */
.retreat-hero__row.wp-block-columns {
  gap: var(--retreat-col-gap); /* 90px page token, decision-log #12 — comp two-col gap ≈104px */
  align-items: center;
}

/* ── Logo lockup ── */
.retreat-hero__logo {
  margin: 0;
}
.retreat-hero__logo img {
  width: 224px;
  height: auto;
  aspect-ratio: 224 / 102; /* fix round 2, finding #1: reserves the intrinsic box before load (CLS) without pinning a hard px height — the image block markup itself carries no width/height (plain form, matches every other image in the theme; WP's own resize markup for those attrs is `is-resized` + inline `style="width:N;height:N"`, which is unitless and invalid CSS, so it was silently discarded and gave zero real CLS protection anyway). */
  display: block;
}

/* ── Eyebrow ──
 * Fix round 1 (finding #2): figma-analysis's "documented exceptions" note
 * (verified against comp node 90:82 via get_design_context) — the HERO
 * eyebrow is WHITE 16px, NOT the blue-22 `.retreat-page .eyebrow` treatment
 * every other section's eyebrow gets (hero sits on the grain band, not a
 * white ground). get_design_context's rendered node returned
 * `text-[16px] text-white`, no tracking-* utility (i.e. no letter-spacing
 * added in the comp) and the literal string "a karmadharma retreat" — so
 * no letter-spacing override and an explicit lowercase (the base `.eyebrow`
 * class this element also carries forces `text-transform: uppercase`, which
 * would otherwise render the literal lowercase copy as caps).
 *
 * 16px has no theme fontSize token (--font-sm = 15px, --font-md = fluid
 * 16-17px, neither pins exactly 16) — using the literal `1rem` per the
 * comp's exact value rather than rounding to a neighboring token.
 *
 * Specificity: token-overrides.css's `.retreat-page .eyebrow` desktop rule
 * (0,2,0, no !important, font-size: var(--font-xl)=22px) and its ≤768
 * counter-layer (0,2,0, !important, var(--font-xl)=20px) are both a shared
 * file — out of this fix round's lane. `.retreat-hero .retreat-hero__eyebrow
 * .eyebrow` (0,3,0) out-specifies the desktop rule outright; the mobile
 * counter-layer is !important, so the font-size declaration below is also
 * !important to hold the hero's 16px at every breakpoint (documented as a
 * constant in figma-analysis, not a responsive step like the general
 * eyebrow). This mirrors this file's existing ≤1024 !important precedent —
 * a confirmed cross-file specificity fight, not a blind override.
 */
.retreat-hero .retreat-hero__eyebrow.eyebrow {
  color: var(--color-white);
  font-size: 1rem !important; /* comp 90:82 = 16px, no matching theme token */
  text-transform: lowercase;
  margin: var(--space-3xs) 0 0; /* logo -> eyebrow ≈8px */
}

/* ── H1 + green mark ── */
.retreat-hero__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--font-3xl);
  line-height: 1.15;
  color: var(--color-white);
  letter-spacing: 0; /* fix round 1, finding #3: theme.json's h1 letter-spacing (-1.5px) is tuned for the 64px site-wide h1 size; this comp's H1 is 40px (--font-3xl) and reads cramped at -1.5px */
  margin: var(--space-lg) 0 0; /* eyebrow -> H1 ≈39px in comp */
  /* text-transform intentionally not set here (fix round 1, finding #10c,
     nit): typography.css/global.css already lowercase h1/h2/h3/h4
     site-wide — this was a redundant duplicate of that rule. */
}
/* .retreat-hero__mark removed — the green punctuation span now uses the
   shared `.retreat-mark` utility (sections/retreat/marks.css, fix round 1
   finding #9); markup updated in patterns/retreat-hero.php. */

/* ── Body copy (3 paragraphs) ── */
.retreat-hero__body {
  margin-top: var(--space-2xs); /* H1 -> body ≈13px in comp */
}
.retreat-hero__body p {
  font-family: var(--font-body);
  font-size: var(--font-md);
  line-height: 1.55;
  color: var(--color-white);
  margin: 0;
}
.retreat-hero__body p + p {
  margin-top: var(--space-sm);
}

/* ── CTA ──
 * buttons.css already ships pill r100, h50, uppercase 18px/+0.9px tracking,
 * white text — only the navy fill is section-specific. Selector matches
 * buttons.css's own specificity (.wp-block-button:not(.is-style-outline)
 * .wp-block-button__link, 3 classes) plus scope, so it wins on specificity,
 * not source order alone. Mobile touch-target sizing (>=44px) comes from
 * token-overrides.css's counter-layer on .wp-block-button__link — no
 * per-section override needed.
 */
.retreat-hero__cta {
  margin-top: var(--space-lg);
}
.retreat-hero__cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--color-retreat-navy);
  transition: filter 0.2s ease; /* fix round 1, finding #10a: hover darken now animates instead of snapping */
}
.retreat-hero__cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  filter: brightness(0.85); /* darken without a new hardcoded hex */
}

/* ── Focus ring on the band ──
 * Fix round 1 (finding #5), attribution corrected round 2 (finding #4):
 * utilities.css:53-56's bare `:focus-visible` gives
 * `outline: 2px solid var(--color-primary)` (#2380E5) everywhere — global.css
 * carries an identical duplicate rule (global.css:177-180, same declarations,
 * a separate theme hygiene issue not in this fix round's lane), but
 * utilities.css is enqueued LATER (inc/enqueue.php registers 'kdpc-utilities'
 * after 'kdpc-global', both depending only on 'kdpc-tokens', so print order
 * follows registration order) — at identical (0,1,0) specificity the
 * later-loaded rule is the one actually cascading, so utilities.css is the
 * real source this override has to beat. Measured
 * against this band's blue-grain gradient (bands.css's
 * --retreat-blue-grain-light #1c72d6 / --retreat-blue-grain #0260c7 /
 * --retreat-blue-grain-dark #0154ac) that blue-on-blue ring sits at
 * ~1.5:1, effectively invisible. Recolored to white, the higher-contrast
 * choice of the two candidates measured (relative-luminance contrast,
 * WCAG formula):
 *   white   vs light-blue #1c72d6 = 4.74:1 · vs mid-blue #0260c7 = 5.99:1
 *   accent  vs light-blue #1c72d6 = 3.49:1 · vs mid-blue #0260c7 = 4.41:1
 * White clears the 3:1 non-text (UI component) threshold at every point in
 * the band gradient with more margin than accent yellow, so white wins.
 * `.retreat-hero a` + the explicit button-link selector both get the (0,2,1)
 * / (0,2,0) specificity needed to beat the bare `:focus-visible` (0,1,0)
 * on its own — no !important.
 */
.retreat-hero a:focus-visible,
.retreat-hero .wp-block-button__link:focus-visible {
  outline-color: var(--color-white);
}

/* ── Hero blob image ── */
.retreat-hero__blob {
  margin: 0;
}
.retreat-hero__blob img {
  width: 100%;
  height: auto;
  /* 2026-08-23 (Alain): hero is back to the Figma blob export (attachment 531,
     hero-image.webp, 657x606 with the silhouette baked into its alpha) — the
     shape is IN the asset, so no fitting and no radius. Do not add either back
     without also changing the image: a rectangle radius on a transparent blob
     is noise, and cover is a no-op while the box matches the asset 1:1. */
  aspect-ratio: 657 / 606; /* fix round 2, finding #1: reserves the intrinsic box before load (CLS) — width stays 100% so the image keeps filling its 44/56-split column responsively at every breakpoint; NOT a hard 657px pin. */
  display: block;
}

/* ── Info stat bar (4 items) ──
 * Gap = --space-md, the figma-analysis token spec's explicit call for
 * "grid/stat rows" (34px desktop / stepped down via token-overrides.css).
 */
.retreat-hero__stats {
  display: grid;
  /* Fix 2026-08-17 (Alain, staging review): stat 4's title
     "Founding cohort: $1,950 +tx" needs 276px and an equal 1fr split only
     gave its copy column 259px, orphaning "+tx" onto a second line while
     the other three titles sat on one. The comp doesn't resolve this — node
     90:49 is an auto-width Figma text node measuring 339px, i.e. it
     overflows its own ~275px column into the right page margin (same
     looseness the decision log already flags for this file). Bounded fix:
     the LAST track takes the extra, since nothing sits to its right. Because
     only track 4 grows, tracks 1-3 keep an identical pitch, so the yellow
     stat bars stay evenly spaced — and at 302px that pitch is actually
     CLOSER to the comp's measured 298.3px than the old 312px. Verified live
     at 1440: title 4 height 62->31 (one line, 289px box vs 276px needed);
     titles 1/3 still one line at 248px; bar pitch 302/302/303; no overflow.
     The <=1024 and <=768 arms below override this track list entirely. */
  grid-template-columns: repeat(3, 1fr) 1.15fr;
  gap: var(--space-md);
  margin-top: var(--space-48); /* CTA -> stats ≈49px in comp, exact token match */
}

.retreat-hero__stat {
  display: flex;
  align-items: stretch;
  gap: var(--space-xs);
}

/* Fix round 1 (finding #8): the yellow left-bar was 4 identical
 * `<!-- wp:html --><div class="retreat-hero__stat-bar"></div><!-- /wp:html -->`
 * blocks in the pattern — editor-fragile (raw HTML blocks) for a purely
 * decorative 4px rule. Replaced with a `::before` pseudo-element on the
 * (already-existing) `.retreat-hero__stat` flex container; as the first
 * generated box in a flex formatting context it participates in layout like
 * the div it replaces, so the gap/alignment rules above are unchanged.
 *
 * 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 (stretch-fill + its own radius value)
 * stays here — see stat-bar.css's header for why radius isn't shared. */
.retreat-hero__stat::before {
  align-self: stretch;
  border-radius: var(--space-4xs); /* 4px, exact comp match */
}

.retreat-hero__stat-copy {
  display: flex;
  flex-direction: column;
}

.retreat-hero__stat-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--font-lg);
  color: var(--color-white);
  margin: 0;
}

.retreat-hero__stat-body {
  font-family: var(--font-body);
  font-size: var(--font-sm);
  color: var(--color-white); /* fix round 1, finding #4: was `opacity: .82` (the F1 proof's navy-panel body treatment); figma-analysis's documented exception says the hero stats sit directly on the grain band and must be full white — the .82 dimming is navy-panel-only. Measured contrast (1440 screenshot, canvas pixel-sample of the rendered band behind the live stat row, ~2700 sample points across all 4 items excluding glyph pixels): 6.38:1 (lightest sampled bg pixel) to 7.47:1 (darkest), avg 6.85:1 — well above the 4.5:1 floor. No scrim needed: the stats row sits at ~80-92% of the band's height, i.e. near bands.css's --retreat-blue-grain-dark end of the gradient, not the light end. */
  margin: var(--space-2xs) 0 0; /* title -> body ≈12px in comp */
}

/* ══════════════════════════════════════
   RESPONSIVE (no mobile Figma frame — derived per figma-analysis-2026-08.md
   §Design gaps; stack copy above blob ≤1024, stats 4-across -> 2x2 ≤1024 ->
   stacked ≤768, per build brief)
   ══════════════════════════════════════ */

@media (max-width: 1024px) {
  /* Fix round 1 (finding #1): comment corrected — this is NOT a source-order
     tie. Two separate fights, both against core block-library rules that
     ship their own !important / high specificity:
       1. `flex-wrap: nowrap !important` on
          `.wp-block-columns:not(.is-not-stacked-on-mobile)` (min-width
          782px query) — an !important the theme must out-specify with its
          own !important, not source order, since !important always beats
          non-!important regardless of load order.
       2. `flex: 1 1 100% !important` here fights core's un-stacked column
          rule at (0,3,0) specificity, AND — since the 44/56 split (finding
          #1 fix) is now an inline `style="flex-basis:44%/56%"` on the
          column div — this arm also has to override that inline flex-basis
          when stacking, which is a second, independent reason the
          !important stays (inline styles otherwise beat any stylesheet
          rule regardless of specificity). */
  .retreat-hero__row.wp-block-columns {
    flex-wrap: wrap !important;
    row-gap: var(--space-lg); /* fix round 1, finding #6: `gap` above (var(--retreat-col-gap), 90px) applies to both axes in a wrapped flex row, so the two-col gap token was also becoming the stacked vertical gap. Row-gap explicitly reset to the section's own vertical rhythm token instead. */
  }
  .retreat-hero__row .retreat-hero__copy,
  .retreat-hero__row .retreat-hero__media {
    flex: 1 1 100% !important;
  }
  /* Copy is already first in DOM order (matches build brief: stack copy
     above blob at <=1024) — no reorder needed. */
  .retreat-hero__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .retreat-hero__stats {
    grid-template-columns: 1fr;
  }
}