/* Thank You (Movement School) — page-specific section styles. Header,
   footer, buttons, fonts and the generic .section/.page-wrap
   primitives already live in public/css/site.css (shared, loaded
   before this file) — not repeated here. Loaded on
   thank-you-movement-school.html only.

   Layout sourced from reference/thank-you-movement-school/
   measurements.json (phone_375 + desktop_1440 boxes). Header/hero
   relationship (reference/header-hero-relationship.json + README
   table, checkpoint 04): no media, no scrim, no divider — the shared
   transparent header default in site.css needs no page-local override.
   Single centred section: h2 + 2 paragraphs, no form. Section total
   height: 992.65625px desktop / 535.90625px phone. */
.tyms-section {
  padding: 176px 22.5px 76px;
  text-align: center;
}
.tyms-section h2 {
  font-size: 33.5392px;
  line-height: 1.11;
  margin: 0 0 46px;
}
.tyms-inner {
  max-width: 660px;
  margin: 0 auto;
  text-align: left;
}
.tyms-inner p {
  font-size: 19.8976px;
  line-height: 1.5;
  margin: 0 0 22px;
}
.tyms-inner p:last-child { margin-bottom: 0; }

/* Tablet-fidelity rebuild (Phase 7 sweep fix, 17.09.26): the old >=800px
   block above was 4 fixed pixel values (padding, font-sizes, a bottom
   padding tuned only to LOOK right at 1440) -- none of them scaled, so
   the page ran +249px too long at 820 and +219px at 1024 against live
   (Phase 7 tablet scan). Replaced with live's own formulas, read from
   its raw HTML/CSS (see the HTML's own comment for the full source):
   real `min-height:66vh` + flex-centering on the section (live's static
   `.section-height--medium` class, confirmed via live's own stylesheet
   bundle, not runtime JS), a real `6.6vmax` padding on the content
   wrapper, and a real 18-row/24-column CSS Grid (row height
   `containerWidth * 0.0215`, 11px gaps) holding the H2 and paragraph
   block at their own live grid-areas -- reproduces live's real
   mechanism (verified against a live Playwright sweep at 768-1920 width
   x 700-2000 height: worst diff 4.3px, most under 2px) instead of a
   hand-tuned constant. Breakpoint moved from 800px to 768px to match
   live's own fluid-engine switch (site-wide convention, see README) --
   the header's OWN height formula still switches separately at 800/876,
   handled by the two media queries below this block. */
@media (min-width: 768px) {
  .tyms-section {
    display: flex;
    align-items: center;
    min-height: 66vh;
    padding: calc(37px + 12vw) 0 0; /* header-height formula only (<800px bucket); see site.css's own header-formula comment */
    text-align: center;
  }
  .tyms-content-wrapper {
    width: 100%;
    padding: 6.6vmax 0; /* live's real content-wrapper padding -- see HTML comment */
  }
  /* Live's real 18-row / 24-column fluid-engine grid for this exact
     block (raw HTML capture, section 65cca56ea676d460a2e88800) -- row
     height and column width both scale with the same
     min(1400px, 100vw - 2vw*2) container-width site.css's other pages
     already use, at a 0.0215 row multiplier and 11px row/column gaps.
     Grid auto-sizes its own height to the row tracks (minmax floor,
     `auto` lets a row grow if content ever needs more than the floor --
     never triggered in this range, both blocks' own content is always
     shorter than their row-span's minimum) -- rows 10-18 render empty,
     reproducing live's own large "invisible" trailing space on a short
     page instead of a hand-tuned bottom padding. */
  .tyms-grid {
    --cell-max-width: calc((1400px - 11px * 23) / 24);
    --grid-gutter: calc(2vw - 11px);
    --container-width: min(1400px, calc(100vw - 2vw * 2));
    display: grid;
    grid-template-columns:
      minmax(var(--grid-gutter), 1fr)
      repeat(24, minmax(0, var(--cell-max-width)))
      minmax(var(--grid-gutter), 1fr);
    grid-template-rows: repeat(18, minmax(calc(var(--container-width) * 0.0215), auto));
    column-gap: 11px;
    row-gap: 11px;
  }
  .tyms-section h2 {
    grid-column: 3 / 25; /* live grid-area 1/3/4/25 */
    grid-row: 1 / 4;
    align-self: start; /* live's block sits at the top of its row-span, not stretched/centred within it */
    margin: 0;
    /* Live's Squarespace type-scale formula (X=1.8 for this H2, fitted
       against a live Playwright sweep 768-1920: exact match at every
       width tested) -- same pattern as contact.css's own H2. */
    font-size: min(calc(1.8 * 1.2vw + 1rem), max(calc(1.8 * 0.012 * 1400px + 1rem), 2.8rem));
    line-height: 1.1136;
  }
  .tyms-inner {
    grid-column: 6 / 22; /* live grid-area 4/6/9/22 */
    grid-row: 4 / 9;
    align-self: start;
    max-width: none;
    margin: 0;
  }
  .tyms-inner p {
    /* X=0.4 -- same fit as contact.css's own body copy, exact match
       against live 768-1920. */
    font-size: min(calc(0.4 * 1.2vw + 1rem), max(calc(0.4 * 0.012 * 1400px + 1rem), 1.4rem));
    line-height: 1.5;
    margin: 0 0 16px; /* live's real value at every width tested (not the old fixed 24px) */
  }
  .tyms-inner p:last-child { margin-bottom: 0; }
}
/* Live's header is 5.375px taller from 800 to 875px (its nav wraps to
   two lines there; Playwright sweep, see home.css/contact.css) -- this
   page's own section padding-top tracks the same header-height formula,
   so it needs the same two-tier override. */
@media (min-width: 800px) and (max-width: 875.98px) {
  .tyms-section { padding-top: calc(54.34375px + 2.20052vw); }
}
@media (min-width: 876px) {
  .tyms-section { padding-top: calc(48.96875px + 2.20052vw); }
}