/* Home page -- page-specific section styles. Header, footer, buttons and
   the wave-divider primitive live in public/css/site.css (shared, loaded
   before this file). Loaded on index.html only.

   FLUID-ENGINE GRID (Phase 7 fix 2, 17.09.26)
   -------------------------------------------
   All five home sections are Squarespace "fluid engine" sections on
   live: one CSS grid per section, a fixed row count, 11px gaps, two
   flexible gutter columns, and an explicit grid-area per block, at two
   breakpoints (<768px: 8 columns, rows minmax(24px, auto); >=768px: 24
   columns, rows minmax(container-width * 0.0215, auto)). Rows only grow
   when a block's content is taller than the rows it spans, so a
   section's height = its reserved rows + gaps + any growth + padding.

   Fix 1 (1a5e03f) folded heading + text + button into one grid item,
   used fixed desktop font sizes (the 1440 values) and a constant phone
   min-height. That matched at 375/1440 only: at 820/1024 the 36px
   heading wrapped far more than live's 27.8px one and the combined
   item stretched the rows, leaving 350-400px of blank space. This file
   now reproduces live exactly instead of approximating it:
     - one .fe-block per live block, placed with live's own grid-area
       line numbers (raw capture: claude-workspace/working-files/
       website-netlify-migration/wayfinder/raw/home.html);
     - live's column/row formulas, including the "inset" variant the
       hero-video section uses (2vw side padding, container 100vw-8vw);
     - live's Squarespace 7.1 type formulas (below), so wrapping -- and
       therefore row growth -- tracks the viewport as live does;
     - section padding from live's own formulas (header height, 2vw,
       6.6vmax, 1vmax, 6vw/8vw divider space).
   Checked against live with Playwright at 360/375/414 (and 375x667)
   and 800/820/900/1024 (x768 and x1366)/1180/1280/1440/1920 -- section
   heights and block boxes within a few px; see the Phase 7 fix 2 report.
   Same method as bray-new-student-offer.css (Phase 6 fix 2).

   Site variables live uses: --sqs-site-gutter 2vw, --sqs-mobile-site-
   gutter 6vw, --sqs-site-max-width 1400px.

   Type (live's formulas; X = 2.8 h2, 2.2 h3, 1.5 marquee, 1.4 large):
     phone (portrait, <768px): (X - 1) * 0.012 * min(100vh, 900px) + 1rem
     otherwise: min((X - 1) * 1.2vw + 1rem,
                    max((X - 1) * 0.012 * 1400px + 1rem, X * 1rem))
   Heading line-height = 1.2 * (1 + (1 - X) / 25); large text 1.5;
   marquee 1.4. */

/* ---------- The grid ---------- */
.fe {
  --grid-gutter: calc(6vw - 11px);
  --cell-max-width: calc((1400px - 11px * 7) / 8);
  display: grid;
  position: relative;
  grid-template-columns:
    minmax(var(--grid-gutter), 1fr)
    repeat(8, minmax(0, var(--cell-max-width)))
    minmax(var(--grid-gutter), 1fr);
  row-gap: 11px;
  column-gap: 11px;
  overflow-x: hidden;
  overflow-x: clip;
}
@media (min-width: 768px) {
  .fe {
    --grid-gutter: calc(2vw - 11px);
    --cell-max-width: calc((1400px - 11px * 23) / 24);
    --container-width: min(1400px, calc(100vw - 2vw * 2));
    --row: calc(var(--container-width) * 0.0215);
    grid-template-columns:
      minmax(var(--grid-gutter), 1fr)
      repeat(24, minmax(0, var(--cell-max-width)))
      minmax(var(--grid-gutter), 1fr);
  }
  /* live .background-width--inset: --inset-padding = 2 * gutter */
  .fe--inset { --container-width: min(1400px, calc(100vw - 2vw * 2 - 2vw * 2)); }
}

.fe-block {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}
.fe-block > * { flex: 0 0 auto; margin: 0; }

/* Button blocks: live's button (a flex box, padding 0 20.8px) fills its
   whole block, both ways -- 59px tall on phones (2 x 24px rows + gap),
   2 x row + gap on desktop (44.8px at 820, 70.4px at 1440). */
.fe-btn-block { justify-content: center; }
.fe-btn-block > .btn {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  padding: 0 20.8px;
  line-height: normal;
  text-align: center;
}

/* ---------- Type ---------- */
.hero-heading,
.about-heading,
.podcast-heading,
.marquee-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: normal;
}
.hero-heading { line-height: 1.1424; font-size: calc(1.2 * 0.012 * min(100vh, 900px) + 1rem); }
.about-heading,
.podcast-heading { line-height: 1.1136; font-size: calc(1.8 * 0.012 * min(100vh, 900px) + 1rem); }
.marquee-heading { line-height: 1.4; font-size: calc(0.5 * 0.012 * min(100vh, 900px) + 1rem); }
.hero-copy,
.about-copy { line-height: 1.5; font-size: calc(0.4 * 0.012 * min(100vh, 900px) + 1rem); }
@media (min-width: 768px), (orientation: landscape) {
  .hero-heading { font-size: min(calc(1.2 * 1.2vw + 1rem), max(calc(1.2 * 0.012 * 1400px + 1rem), 2.2rem)); }
  .about-heading,
  .podcast-heading { font-size: min(calc(1.8 * 1.2vw + 1rem), max(calc(1.8 * 0.012 * 1400px + 1rem), 2.8rem)); }
  .marquee-heading { font-size: min(calc(0.5 * 1.2vw + 1rem), max(calc(0.5 * 0.012 * 1400px + 1rem), 1.5rem)); }
  .hero-copy,
  .about-copy { font-size: min(calc(0.4 * 1.2vw + 1rem), max(calc(0.4 * 0.012 * 1400px + 1rem), 1.4rem)); }
}
/* Live colours (computed, 375/820/1440): the whole hero heading is
   darkAccent orange (one sqsrte-text-color--darkAccent span), not just
   "FREEDOM". */
.hero-heading { color: var(--orange); }
.hero-copy strong u { color: var(--text-navy); }
.hero-copy em { color: var(--orange); }

/* ---------- Dividers ----------
   site.css's shared .wave primitive is in normal flow; here it straddles
   each section's bottom edge instead (half above, half below) so it
   never adds to the section's height, as live. */
.hero-video-section .wave,
.hero-section .wave,
.about-section .wave,
.instagram-section .wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  z-index: 2;
}

/* ---------- Section 0: hero video (inset) ----------
   padding-top = header height + 2vw. Header height is live's own:
   37px + 12vw under 800px; 49px row + 1.1vw above and below from 800px
   (site.css's formula), except 800-875px, where live's nav wraps to two
   lines and the row is 54.375px (Playwright sweep 17.09.26: 875 -> 73.63,
   876 -> 68.25). padding-bottom = 6.6vmax + the 8vw divider space. */
.hero-video-section {
  background: var(--hero-cream);
  position: relative;
  overflow: visible;
  padding: calc(37px + 12vw + 2vw) 2vw calc(6.6vmax + 8vw);
  /* Live's Squarespace preset for this section is section-height--small
     (data-driven, section-level, confirmed via live's own site.css bundle:
     `.page-section.section-height--small{min-height:33vh}`, not visible in
     static HTML). It only binds when the video's own height (fixed 234px on
     phones, below ~500px wide) is shorter than 33vh -- e.g. at narrow width
     + tall viewport, or wide-short viewport windows. This block is plain
     flow (no flex), so the extra room lands below the video, before this
     padding-bottom, matching live's vertical-alignment--top. */
  min-height: 33vh;
}
@media (min-width: 800px) {
  .hero-video-section { padding-top: calc(48.96875px + 2.20052vw + 2vw); }
}
@media (min-width: 800px) and (max-width: 875.98px) {
  .hero-video-section { padding-top: calc(54.34375px + 2.20052vw + 2vw); }
}
.fe-hv { grid-template-rows: repeat(7, minmax(24px, auto)); }
.b-hv-video { grid-area: 1/2/8/10; z-index: 1; }
@media (min-width: 768px) {
  .fe-hv { grid-template-rows: repeat(15, minmax(var(--row), auto)); }
  .b-hv-video { grid-area: 1/5/16/23; }
}
/* Live videos: square corners. object-fit: cover (the frames are
   exactly 16:9) stops a sub-pixel letterbox showing as a dark edge. */
.fe-block video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: #000;
}

/* ---------- Section 1: hero content ----------
   Live background is the plain page colour (#FCF9F7) at every width --
   the cream belongs to the hero-video section above only. */
.hero-section {
  background: var(--body-bg);
  position: relative;
  overflow: visible;
  padding: 0 0 6vw;
}
.fe-hc { grid-template-rows: repeat(22, minmax(24px, auto)); }
.b-hc-video { grid-area: 2/2/10/10; z-index: 5; }
.b-hc-heading { grid-area: 9/2/15/10; z-index: 1; }
.b-hc-text { grid-area: 13/2/20/10; z-index: 4; }
.b-hc-button { grid-area: 20/2/22/6; z-index: 3; }
@media (min-width: 768px) {
  .fe-hc { grid-template-rows: repeat(18, minmax(var(--row), auto)); }
  .b-hc-video { grid-area: 3/3/13/14; }
  .b-hc-heading { grid-area: 2/15/7/24; justify-content: flex-end; }
  .b-hc-text { grid-area: 7/15/14/23; }
  .b-hc-button { grid-area: 15/15/17/20; }
}

/* ---------- Section 2: About ----------
   Live colours: background #F9AD7D (not the --about-peach token), black
   button with #F9AD7D text; photo in a 40px-radius frame. */
.about-section {
  background: #F9AD7D;
  color: var(--text-black);
  position: relative;
  overflow: visible;
  padding: 0 0 6vw;
}
.fe-ab { grid-template-rows: repeat(21, minmax(24px, auto)); }
.b-ab-image { grid-area: 1/2/13/10; z-index: 0; justify-content: center; }
.b-ab-heading { grid-area: 13/2/15/8; z-index: 1; }
.b-ab-text { grid-area: 15/2/19/10; z-index: 4; }
.b-ab-button { grid-area: 19/2/21/6; z-index: 3; }
@media (min-width: 768px) {
  .fe-ab { grid-template-rows: repeat(19, minmax(var(--row), auto)); }
  .b-ab-image { grid-area: 3/14/19/25; }
  .b-ab-heading { grid-area: 4/3/7/12; justify-content: flex-end; }
  .b-ab-text { grid-area: 7/3/11/11; }
  .b-ab-button { grid-area: 11/3/13/8; }
}
.b-ab-button > .btn-dark { color: #F9AD7D; }
/* Live's photo is a square that fits inside its block (side = the
   smaller of the block's width and height, centred) and never grows the
   rows. On desktop and on phones up to ~465px wide that is the block's
   width; wider phone-layout screens (e.g. 740x360 landscape) are capped
   by the block's 409px height, as live. */
.about-photo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: 40px;
}

/* ---------- Section 3: Instagram ----------
   padding 6.6vmax top and bottom (live section-height--medium), plus
   the 6vw divider space. */
.instagram-section {
  background: var(--body-bg);
  position: relative;
  overflow: visible;
  padding: 6.6vmax 0 calc(6.6vmax + 6vw);
}
.fe-ig { grid-template-rows: repeat(29, minmax(24px, auto)); }
.b-ig-marquee { grid-area: 1/2/3/10; z-index: 2; justify-content: center; }
.b-ig-gallery { grid-area: 3/2/27/10; z-index: 4; }
.b-ig-button { grid-area: 28/2/30/7; z-index: 3; }
@media (min-width: 768px) {
  .fe-ig { grid-template-rows: repeat(37, minmax(var(--row), auto)); }
  .b-ig-marquee { grid-area: 1/2/4/26; }
  .b-ig-gallery { grid-area: 4/3/36/25; }
  .b-ig-button { grid-area: 36/11/38/17; }
}
/* Marquee line: one long unbroken line, clipped by the grid at the
   section edges (live's Marquee block). */
.marquee-heading { white-space: nowrap; }
/* Scroll animation (defect fix, 18.09.26 -- see site.css's own
   @keyframes marquee-scroll-right comment for the full source
   evidence). The text is already repeated 3x in the markup (index.html)
   -- -33.3333% = 1/3 of this link's own rendered width, one repeat
   unit, so the loop never visibly seams. display: inline-block is
   required for the transform to apply at all (a plain inline `<a>`
   ignores `transform` per spec); nothing else about its box changes
   (still shrink-to-fit, single line). Duration set to hold live's own
   ~120px/s (data-animation-speed="2" x 60px/s -- see site.css) against
   this link's own rendered repeat-unit width at each breakpoint
   (measured against THIS build's own rendering, not live's: 279.86px/3
   mobile, 316.88px/3 desktop -- live's text/font differs slightly from
   a straight SVG-path measurement, so this is the closer, direct
   source for what this build itself needs to move). */
.marquee-heading a {
  display: inline-block;
  --marquee-shift: -33.3333%;
  animation: marquee-scroll-right 2.3s linear infinite;
}
@media (min-width: 768px), (orientation: landscape) {
  .marquee-heading a { animation-duration: 2.6s; }
}
.marquee-heading a:hover { animation-play-state: paused; } /* matches live's data-paused-on-hover="true" */

/* Gallery: live's Squarespace grid gallery -- slides (W + 20px) / N wide
   with a 20px right/bottom margin inside, 2:3 tiles, N = 2 on phones and
   3 from 768px. That is a grid with 20px gaps plus 20px below the last
   row (it counts toward the block's height, and so toward row growth:
   at 414px live's gallery outgrows its rows by 5.75px). Each image fills
   its tile the way live's "content-fill" does: scaled to the tile's
   height, centred, overflow hidden. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding-bottom: 20px;
}
@media (min-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.gallery-tile {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.gallery-tile img {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
}

/* The 6th tile is the live Instagram Reel (ticket 10 to-do 1): a
   thumbnail with a play overlay that swaps in the real embed on click
   (public/js/site.js). */
.gallery-reel { cursor: pointer; }
.gallery-reel-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.15);
}
.gallery-reel-play svg { width: 44px; height: 44px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); }
.gallery-reel.is-playing .gallery-reel-play,
.gallery-reel.is-playing img { display: none; }
.gallery-reel iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Live's outline button here: 1px solid black, black text, 400 weight. */
.b-ig-button > .btn-outline {
  border: 1px solid #000;
  color: #000;
}

/* ---------- Section 4: Podcast ----------
   padding 1vmax top and bottom, no divider. */
.podcast-section {
  background: var(--body-bg);
  padding: 1vmax 0;
}
.fe-pc { grid-template-rows: repeat(18, minmax(24px, auto)); }
.b-pc-heading { grid-area: 2/2/5/10; z-index: 0; }
.b-pc-embed { grid-area: 6/2/18/10; z-index: 1; }
@media (min-width: 768px) {
  .fe-pc { grid-template-rows: repeat(18, minmax(var(--row), auto)); }
  .b-pc-heading { grid-area: 3/6/7/23; }
  .b-pc-embed { grid-area: 8/7/19/21; }
}
/* Live: the 800x400 Spotify iframe sits inline, so its block is 407px
   tall (400 + the line's descender space). From 768px it keeps its
   800px width and the grid clips it at the section edge, as live. On
   phones it is held to the block width instead (a Phase 3 decision:
   live clips it at the screen edge there). */
.b-pc-embed iframe {
  display: block;
  width: 800px;
  max-width: 100%;
  height: 400px;
  margin-bottom: 7px;
  border: none;
}
@media (min-width: 768px) {
  .b-pc-embed iframe { max-width: none; }
}