/*
 * Retreat landing — T1: Thank-you page (Stripe redirect target)
 * (build-tracker.md item T1, patterns/retreat-thank-you.php)
 *
 * Figma: file FQLacTBUz4BDUx5IiRRXEl, frame 2022:2 "Thank You — v1", read via
 * get_metadata + get_design_context immediately before build (2026-08-24).
 * Geometry matched the orchestrator's known-good snapshot exactly (logo
 * y=310, eyebrow y=414, H1 y=473, bar x=94/y=471/h=97, "what happens next"
 * y=876, item gaps 72px, contact line 2045:2 y=1492, CTA y=1636, frame
 * h=2651) — no drift between the pre-build and pre-verify reads (see handoff).
 *
 * Nodes 2022:3 (top strip) and 2022:5 (bottom block) are screenshot
 * placeholders standing in for the theme's real header/footer — NOT built
 * here, the page-retreat template + site chrome already render both.
 *
 * Scope: this file is glob-enqueued onto every `.retreat-page` template,
 * including page 494 (main retreat page) and /retreat-style-proof — NOT
 * ancestor-scoped to `.retreat-thankyou` alone, despite the class name.
 * Every selector below is a `.retreat-thankyou*`-prefixed BEM class, and
 * the "what happens next" block is a SIBLING of `.retreat-thankyou` (not a
 * descendant) styled through those same unscoped BEM class names — safety
 * relies on those names being unique across the retreat pattern set, not
 * on any ancestor selector. Verified 2026-08-24 (kickback R1 #8): no
 * selector here matches anything rendered on 494 or /retreat-style-proof.
 * This page reuses the SAME page-scoped template as the main retreat page
 * (templates/page-retreat.html, assigned to this page too) so
 * `.retreat-page`'s alias-token overrides (token-overrides.css) already
 * cascade in — this file never redeclares those, only consumes
 * var(--font-*)/var(--space-*)/var(--color-*). `.retreat-band--blue`/
 * `.retreat-band--rounded` (bands.css) and `.retreat-mark` (marks.css) are
 * reused as-is, not reimplemented.
 */

/* ── Band (logo + eyebrow + H1 + accent bar + illustration) ── */
.retreat-thankyou__band {
  margin: 0;
}

/* Top corners square (matches hero.css: sits flush under the site header on
   this page too), bottom 100px stays — same compound-selector fight as
   hero.css (bands.css's .retreat-band--blue.retreat-band--rounded is (0,2,0),
   needs equal specificity + later source order to win the top-corner reset). */
.retreat-thankyou__band.retreat-band--rounded {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.retreat-thankyou__inner {
  max-width: 1216px;
  margin: 0 auto;
  /* Vertical centering: comp's text block (logo->bar, ~258px tall) and
     illustration (529.58px tall) are both centered in the 693px band
     (measured top/bottom clearance ~81/82px either side of the taller
     illustration — no token lands on 81px, structural literal, same house
     convention as how-it-works.css's 598/528/90 column geometry). */
  padding-block: 81px;
}

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

@media (max-width: 768px) {
  .retreat-thankyou__inner {
    padding-inline: var(--space-xs);
    /* padding-block NOT redeclared here: the <=1024px block below already
       sets padding-block: var(--space-xl) on this same selector at equal
       specificity, and since it appears LATER in the file it's the value
       that actually wins at every width <=768 too. Redeclaring the same
       property here would be dead weight (a future edit to this value
       would silently no-op behind the 1024 rule) — see kickback R1 #4. */
  }
}

.retreat-thankyou__row.wp-block-columns {
  gap: var(--retreat-col-gap, 90px);
  /* This align-items: center never actually wins — WP core prints an inline
     `.wp-block-columns { align-items: initial !important; }` block-supports
     reset (confirmed live via CSSOM, same gotcha already logged in
     join.css's identical rule) that beats this regardless of selector
     specificity. Kept as documented intent (harmless). The real fix is
     align-self on the shorter column (.retreat-thankyou__copy below) —
     core's reset only touches the row's align-items, never a child's
     align-self, same mechanism Gutenberg's own per-column vertical-
     alignment toolbar control uses. */
  align-items: center;
}

/* Comp: the copy column (logo->bar, ~258px) is vertically centered against
   the taller media column (~531px) within the row — measured live via the
   fix above: offset from row top (531-258)/2 ≈ 136px matches the comp's own
   logo-top-minus-band-top delta (218px) once the row's own top padding
   (81px) is added back. */
.retreat-thankyou__copy {
  align-self: center;
}

/* ── Logo lockup (brand chrome, theme asset — same as hero.css) ── */
.retreat-thankyou__logo {
  margin: 0;
}
.retreat-thankyou__logo img {
  width: 224px;
  height: auto;
  aspect-ratio: 224 / 102;
  display: block;
}

/* ── Eyebrow — white 16px lowercase, band exception (matches hero.css's
   documented hero-eyebrow exception, node-verified: get_design_context
   returned text-white text-[16px], comp characters already lowercase). ── */
.retreat-thankyou .retreat-thankyou__eyebrow.eyebrow {
  color: var(--color-white);
  font-size: 1rem !important; /* comp = 16px, no matching theme token; !important
    needed to beat token-overrides.css's .retreat-page .eyebrow mobile
    counter-layer, same precedent as hero.css */
  text-transform: lowercase;
  margin: var(--space-3xs) 0 0;
}

/* ── H1 + accent bar ──
 * Bar (node 2022:43, x=94) sits 18px LEFT of the page's standard 112px
 * content edge — outside the normal flow, not a flex sibling that would
 * push the H1 rightward. Implemented as an absolutely-positioned ::before
 * on a relative wrapper around the H1 alone, offset -18px, so the H1 stays
 * flush with the logo/eyebrow above it (all three at the same 112px edge,
 * comp-verified) while the bar bleeds into the margin exactly as the comp
 * shows. bg/radius match the comp exactly (#ffdb38 = --color-accent, 2px
 * radius — NOT the 4px the other page's stat-bars use, this is its own
 * one-off decorative rule per node 2022:43).
 */
.retreat-thankyou__title-wrap {
  position: relative;
  margin: var(--space-lg) 0 0; /* eyebrow -> H1, matches hero.css's analogous gap */
}
.retreat-thankyou__title-wrap::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 0;
  width: var(--space-4xs); /* 4px, exact comp match (hero.css:291 precedent) */
  height: 100%; /* comp measures 97px on this 2-line H1 (40px/1.15); 100%
    computes to 92px live. Kept as 100% rather than a fixed px so the bar
    stays correct if the H1 ever re-wraps (e.g. copy edit, narrower
    viewport) instead of silently under/over-running a hardcoded height —
    the 5px delta reads as within comp tolerance at this weight. */
  background: var(--color-accent);
  border-radius: 2px; /* --radius-sm is 12px (theme.json), not a match —
    literal stays, one-off decorative value per node 2022:43 (see above) */
}

.retreat-thankyou__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--font-3xl);
  line-height: 1.15; /* comp: 46px measured line-height on 40px type = 1.15 */
  color: var(--color-white);
  letter-spacing: 0;
  margin: 0;
}

/* ── Illustration ── */
.retreat-thankyou__media {
  display: flex;
  justify-content: flex-end;
}
.retreat-thankyou__media img {
  width: 100%;
  max-width: 555px; /* comp box width (node 2025:7, 555.3px) */
  height: auto;
  aspect-ratio: 1183 / 1132; /* asset intrinsic (exported from Figma with
    alpha preserved, decision-log #20 — no object-fit: the blob silhouette
    is baked into the asset's own alpha, cover would crop it on any swap) */
  display: block;
}

/* ── "What happens next" section ── */
.retreat-thankyou__next {
  max-width: 1216px;
  margin: 0 auto;
  padding-block: 91px 110px; /* comp: band-bottom (785) -> eyebrow top (876)
    = 91px top. Bottom = comp CTA-bottom (1686) -> footer-band top (1796) =
    110px. The earlier `0` here assumed the CTA carried its own bottom gap —
    it does not (`.wp-block-buttons` margin-bottom computes to 0), so the
    button rendered flush against the site footer. VERIFIED live 2026-08-24:
    CTA-bottom -> footer-top was 0px before this, 110px after. */
  padding-inline: 0;
}

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

@media (max-width: 768px) {
  .retreat-thankyou__next {
    padding-inline: var(--space-xs);
    /* symmetric on mobile — 110px of trailing space is desktop-only rhythm */
    padding-block: var(--space-xl);
  }
}

.retreat-thankyou__eyebrow-blue.eyebrow {
  color: var(--color-primary);
  margin: 0;
}

.retreat-thankyou__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: var(--space-4xs) 0 0; /* comp: eyebrow bottom -> H2 top ≈6px, nearest token */
}

/* ── Numbered list (1/2/3) ── */
.retreat-thankyou__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl); /* comp: 72px item-to-item rhythm (body bottom ->
    next number top), exact token match */
  margin-top: 52px; /* comp: H2 bottom -> item-1 number top = 52px, no
    matching token */
}

.retreat-thankyou__step {
  display: flex;
  gap: 0; /* no flex gap — the number's own fixed column width (below)
    already reproduces the comp's 112->180 = 68px offset in full; adding a
    gap on top would double-count it */
}

.retreat-thankyou__step-number {
  flex: 0 0 auto;
  width: 68px; /* comp: number column (112) -> text column (180) = 68px;
    number itself left-aligned within it, matching the comp's number/title
    baseline relationship */
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--font-3xl);
  line-height: 1.15;
  color: var(--color-success);
  margin: 0;
}

.retreat-thankyou__step-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.retreat-thankyou__step-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: 28px; /* comp = 28px exact (get_design_context), no matching
    theme token (--font-xl=22/24, --font-2xl=32) */
  line-height: 1.2143; /* comp: 34px measured on 28px type */
  color: var(--color-retreat-navy);
  text-transform: lowercase; /* defensive vs theme.json's h3 uppercase
    element style, same tie-break as how-it-works.css's step-title (h3
    compiles to :root :where(h3), ties this class's own specificity) */
  letter-spacing: normal;
  margin: 0;
}

.retreat-thankyou__step-text {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--font-md);
  line-height: 1.55;
  color: var(--color-retreat-navy); /* comp body copy on this page is navy,
    not the site-wide --color-text-body grey (get_design_context confirmed
    #1c2161 on every body paragraph, not just headings) */
  margin: 0;
}

/* ── Standalone contact line (node 2045:2) — same left indent as the
   numbered items' text column (68px = number-column width), not part of
   any single numbered item. ── */
/* ── Inline links (contact email, venue) ──
 * Mirrors `.retreat-logistics__stat-link` in logistics.css — colour inherits
 * from the surrounding copy so links don't introduce a second navy, and
 * skip-ink keeps descenders legible under the rule. Deliberately NOT bold:
 * logistics.css adds --fw-bold because its link is a standalone stat value;
 * here both links sit inside running body copy. */
.retreat-thankyou__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

.retreat-thankyou__contact {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--font-md);
  line-height: 1.55;
  color: var(--color-retreat-navy);
  margin: var(--space-48) 0 0 68px; /* comp: item-3 body bottom -> contact
    line top = 48px, exact --space-48 token match */
}

/* ── CTA ── */
.retreat-thankyou__cta {
  margin: 96px 0 0; /* comp: contact line bottom -> CTA top = 96px, no
    matching token */
}
.retreat-thankyou__cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--color-retreat-navy);
  transition: filter 0.2s ease;
}
.retreat-thankyou__cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background: var(--color-retreat-navy); /* re-asserted, not just relying on
    source order: buttons.css:30's own :hover rule is (0,4,0), same
    specificity as our base rule above, and only loses today because the
    retreat glob happens to sort after buttons.css. Without this the navy
    hover would be one file-rename away from breaking (documented history
    of cross-file specificity fights on this page). */
  filter: brightness(0.85);
}

/* ══════════════════════════════════════
   RESPONSIVE (no mobile Figma frame — derived per figma-analysis-2026-08.md
   §Design gaps, same house convention as every other retreat section:
   stack copy above illustration <=1024, band content centered, numbered
   list stays single-column at every width since it's already narrow enough)
   ══════════════════════════════════════ */

@media (max-width: 1024px) {
  .retreat-thankyou__row.wp-block-columns {
    flex-wrap: wrap !important; /* core's !important on the un-stacked rule
      needs an !important to beat, same fight as hero.css */
    row-gap: var(--space-lg);
  }
  /* !important required on both rules below: the 44%/56% split is an
     inline style="flex-basis:44%/56%" on the column divs (wp:column
     {"width":...}), which beats any stylesheet rule regardless of
     specificity — !important is the only thing that out-ranks an inline
     style. Same fight, same fix, as hero.css:329-335 and join.css:374-377. */
  .retreat-thankyou__row .retreat-thankyou__copy,
  .retreat-thankyou__row .retreat-thankyou__media-col {
    flex: 1 1 100% !important;
  }
  .retreat-thankyou__media {
    justify-content: flex-start;
  }
  .retreat-thankyou__inner {
    padding-block: var(--space-xl);
  }
}

@media (max-width: 768px) {
  /* Accent bar: .retreat-thankyou__inner's padding-inline drops to
     var(--space-xs) (16px) at this width, while the bar's -18px offset is
     fixed relative to the H1 column — 16 - 18 = -2px past the band's own
     overflow:hidden edge (bands.css:107), clipping 2 of the bar's 4px.
     Pull the bar to left:0 (never negative, never clipped) and push the H1
     right by the same 18px so the bar-to-text gap the comp shows is
     preserved exactly (kickback R1 #1). */
  .retreat-thankyou__title-wrap::before {
    left: 0;
  }
  .retreat-thankyou__title {
    padding-left: 18px;
  }
  .retreat-thankyou__step {
    gap: var(--space-3xs);
  }
  .retreat-thankyou__step-number {
    width: 40px;
    /* font-size NOT redeclared here: it's byte-identical to the base rule
       above, and --font-3xl already steps down to 28px@768 via
       token-overrides.css's .retreat-page cascade — this is a <p>, so no
       theme !important could reach it anyway. Redeclaring here was dead
       weight (kickback R1 #5). */
  }
  .retreat-thankyou__contact {
    /* comp intent per the base rule's own comment: same left indent as the
       numbered items' text column. At this width that column is
       40px (number width) + var(--space-3xs) (the step's gap, added
       above) = 48px, not the number width alone — this was previously
       hardcoded to 40px and drifted 8px off .retreat-thankyou__step-body
       (kickback R1 #2). */
    margin-left: calc(40px + var(--space-3xs));
  }
  .retreat-thankyou__cta {
    margin-top: var(--space-xl);
  }
  .retreat-thankyou__cta .wp-block-button,
  .retreat-thankyou__cta .wp-block-button__link {
    width: 100%;
  }
}