/**
 * Retreat — terms of purchase (page 617, /rewrite-your-story-retreat/terms/).
 *
 * Linked from the Stripe checkout page, so this is read by people mid-purchase,
 * often on a phone, deciding whether to hand over $1,950. It is set for reading:
 * a narrow measure, real spacing between clauses, and a dates table that stays
 * legible when it has to scroll. Deliberately NOT the landing page's marketing
 * rhythm — the sales argument is made elsewhere, this page just has to be clear.
 *
 * Glob-picked by inc/enqueue.php's sections/retreat/*.css loop, so it needs no
 * enqueue edit (enqueue.php is frozen for this build — theme-conventions #4).
 * It loads because page 617's _wp_page_template is `page-retreat`, which is the
 * gate's template arm; the same arm already carries 584 (thank-you) and 600
 * (waitlist).
 *
 * Two inherited behaviours this file has to answer for:
 *   1. page-rhythm.css zeroes margin-block on the DIRECT children of
 *      .retreat-page's post-content, so both sections below own their vertical
 *      space via padding-block, never margin.
 *   2. theme.json's root blockGap is 0, so nested blocks arrive with no gap at
 *      all. The flow rule under .retreat-terms__body supplies it here rather
 *      than relying on any global .page-content rule — page-retreat.html
 *      deliberately omits that wrapper class.
 */

/* ── Header band ───────────────────────────────────────────────────────── */

.retreat-terms__head {
  margin: 0;
}

/* Top corners square: the band sits flush under the site header, same reason
   and same specificity fight as thank-you.css's band (bands.css's
   .retreat-band--blue.retreat-band--rounded is (0,2,0), so this needs the
   compound selector plus later source order to win). */
.retreat-terms__head.retreat-band--rounded {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.retreat-terms__head-inner {
  max-width: 1216px;
  margin: 0 auto;
  padding-block: var(--space-64);
  padding-inline: 24px;
}

.retreat-terms__head-inner,
.retreat-terms__head-inner .retreat-terms__title,
.retreat-terms__head-inner .retreat-terms__eyebrow {
  color: var(--color-white);
}

.retreat-terms__title {
  margin-block: var(--space-2xs) 0;
}

/* The retreat's own facts, restated on the page someone lands on from Stripe —
   what they are agreeing to should be visible without going back a page. */
.retreat-terms__facts {
  margin-block: var(--space-sm) 0;
  max-width: 46ch;
  color: var(--color-white);
  font-size: var(--font-md);
}

/* ── Body ──────────────────────────────────────────────────────────────── */

/* Same container geometry as the header band's inner wrapper (1216 + 24px
   gutter), so the body copy starts on the SAME left edge as the band title
   above it — node-verified at 1440/1024/768/375. */
.retreat-terms__body {
  max-width: 1216px;
  margin-inline: auto;
  padding-block: calc(var(--retreat-section-pad) * 2);
  padding-inline: 24px;
}

/* Measure in rem, NOT ch, and flush left rather than centred.
   `ch` resolves against each element's own font-size, so the first cut of
   this rule (68ch + margin-inline:auto) gave the h2s a wider measure than
   the paragraphs and then centred both — a ragged left edge, measured at
   36px of stagger at 1440 and 62px at 768. One rem-based measure keeps
   every child on one edge regardless of its font-size. */
.retreat-terms__body > * {
  max-width: 42rem;
  margin-inline: 0;
}

/* blockGap is 0 site-wide (see header comment) — this is the page's only
   source of spacing between clauses. Owned here, in one place. */
.retreat-terms__body > * + * {
  margin-block-start: var(--space-sm);
}

.retreat-terms__body > h2 {
  margin-block-start: var(--space-xl);
  font-size: var(--font-xl);
}

.retreat-terms__body > h2:first-child {
  margin-block-start: 0;
}

.retreat-terms__body ul {
  padding-inline-start: 1.25em;
}

.retreat-terms__body li + li {
  margin-block-start: var(--space-2xs);
}

/* ── Dates table ───────────────────────────────────────────────────────── */

/* Shares the body's reading measure; the min-width below is what keeps the
   three columns honest, with a scroll instead of a crush once the viewport
   is narrower than the table. */
.retreat-terms__dates {
  overflow-x: auto;
}

.retreat-terms__dates table {
  min-width: 32rem;
  border-collapse: collapse;
}

.retreat-terms__dates th,
.retreat-terms__dates td {
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--color-border-light);
  text-align: left;
  vertical-align: top;
}

.retreat-terms__dates thead th {
  background-color: var(--color-grey-100);
  color: var(--color-text-dark);
}

/* ── Acceptance ────────────────────────────────────────────────────────── */

/* The clause the Stripe checkbox refers back to. Called out so that someone
   arriving from the payment page can find it without reading the whole page. */
.retreat-terms__accept {
  max-width: 42rem;
  margin-block-start: var(--space-xl);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background-color: var(--color-grey-100);
}

.retreat-terms__accept > * + * {
  margin-block-start: var(--space-2xs);
}

@media (max-width: 768px) {
  .retreat-terms__head-inner,
  .retreat-terms__body {
    padding-inline: var(--space-xs);
  }

  .retreat-terms__head-inner {
    padding-block: var(--space-48);
  }
}