/*
 * Retreat landing — Section 4 "What you will leave with" (item S4, build-tracker.md)
 *
 * Nodes: panel 91:272 (white, r20, shadow), H2 91:274 "what you will leave
 * with." (green period via shared .retreat-mark, marks.css), body 91:273
 * (two-paragraph centered copy block).
 *
 * Geometry read off the Figma frame (get_metadata on frame 1:561, v1 @1440):
 * panel x=115 w=1213 (≈ the theme's 1216px content max-width, same as
 * .retreat-hero__inner / .retreat-how — left-edge alignment asserted at
 * self-verify); H2 top 47px into the panel; body top 2606 vs H2 bottom 2583
 * = 24px gap in the comp — rendered as var(--space-sm), which is 22px under
 * the retreat page scale (token-overrides.css overrides --space-sm to 22px
 * inside .retreat-page); nearest page token, not a new literal. Body box
 * x=196 w=1050 vs panel x=115 w=1213 = 81/82px horizontal inset each side
 * (var(--space-80), 80px, within a page-layout rounding tolerance — same
 * token family as the section gutter, not a new literal — and the single
 * source of the body column's width: no separate max-width on the body
 * group, so the inset can't drift out of sync with the padding); panel
 * bottom padding measures 56px vs top's
 * 47px, both close enough to the single --space-48 token (48px) to use one
 * value symmetrically rather than inventing a second — the panel isn't a
 * fixed height so this loses no accuracy in browser (comp height 312 is a
 * hug, not a design-real min-height). --space-48/--space-80 already step
 * down at 1024/768 in tokens.css (:root, no .retreat-page scope, so no
 * fallback needed) — no media queries required in this file for the panel
 * padding itself.
 *
 * Two body paragraphs: Figma's own markup carries an explicit 16px margin
 * between them (`mb-[16px]` in the design-context export) = var(--space-xs),
 * so they're grouped in their own flex column at that gap rather than
 * sharing the panel's --space-sm heading-to-body gap.
 *
 * Selectors scoped under `.retreat-leave-with` only (decision-log #12 /
 * theme-conventions.md) — `.retreat-page` ancestor already supplies the
 * token-override cascade.
 */

.retreat-leave-with {
  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;
}

.retreat-leave-with__panel {
  background: var(--color-white);
  border-radius: var(--radius-md); /* 20px — matches the comp exactly */
  box-shadow: var(--shadow-card);
  padding-block: var(--space-48);
  padding-inline: var(--space-80);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
}

.retreat-leave-with__heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--font-3xl); /* 40 / 34@1024 / 28@768 via token-overrides.css */
  line-height: 1.15;
  color: var(--color-retreat-navy);
  margin: 0;
}

/* Green punctuation mark uses the shared .retreat-mark utility
   (sections/retreat/marks.css) — no per-section duplicate here. */

.retreat-leave-with__body-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs); /* 16px — matches the comp's inter-paragraph margin */
  /* No max-width here (review fix): the panel's --space-80 padding-inline is
     already the single source of the body column's width (panel inner box
     1213 - 160 = 1053px, ~ comp's measured 1050px). A second, raw-literal
     1050px cap disagreed with that above ~1226px viewport, shaving the real
     inset to 83px instead of the documented 80. */
}

.retreat-leave-with__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 matches the
     comp's 28px/18px ratio — no restatement needed (same call as S3's
     step-body, how-it-works.css). */
  color: var(--color-text-body);
  margin: 0;
}

/* ── Responsive ──
 * Section gutters match .retreat-hero__inner / .retreat-how exactly, so the
 * panel's left/right edge lines up with every other section on the page.
 * Panel-internal padding needs no media queries here — --space-48/--space-80
 * already step down at 1024/768 in tokens.css.
 */
@media (max-width: 1240px) {
  .retreat-leave-with {
    padding-inline: 24px;
  }
}

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

  /* No panel gap override here (review fix): --space-sm already steps to
     18px at this breakpoint via token-overrides.css — that's the single
     source, same call as dropping the body-group max-width above. */
}