/* ==========================================================================
   Double Five BJJ Tyler — design tokens & base styles
   Tokens pulled from Figma variables (file: Double Five)
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Tomorrow:ital,wght@0,400;0,600;1,600;1,700;1,800&family=Archivo:ital,wght@0,400;0,600;0,700;0,800&family=Poppins:wght@400&family=Lato:wght@400;700&family=Inter:ital,wght@0,400;0,600;0,700&family=DM+Sans:wght@400;500&display=swap");

:root {
  /* Colors */
  --color-black: #010101;
  --color-white: #ffffff;
  --color-gold: #cca958;
  --color-dark-grey: #242424;
  --color-text-grey: #868686;
  --color-grey-03: #b3b8b8;
  --color-neutral-03: #d8d8d8;
  --color-neutral-10: #171717;

  /* Surfaces */
  --bg-body: var(--color-black);
  --bg-elevated: var(--color-dark-grey);
  --text-primary: var(--color-white);
  --text-muted: var(--color-grey-03);
  --text-on-light: var(--color-black);

  /* Typography */
  --font-display: "Tomorrow", sans-serif;
  --font-nav: "Archivo", sans-serif;
  --font-subhead: "Poppins", sans-serif;
  --font-label: "Lato", sans-serif;
  --font-quote: "Inter", sans-serif;
  --font-contact: "DM Sans", sans-serif;

  /* Layout */
  --container-max: 1200px;
  --radius: 0px; /* Figma uses sharp corners throughout (cornerRadius: 0 on buttons, cards, photos) */
  --nav-height: 68px;
}

/* Light-section override (hero on Home uses a white background per design) */
.section-light {
  --bg-body: var(--color-white);
  --text-primary: var(--color-black);
  --text-muted: #6c6c6c;
  background: var(--bg-body);
  color: var(--text-primary);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-nav);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  margin: 0 0 16px;
  line-height: 1.15;
}

h1 { font-size: clamp(2.5rem, 6vw, 5rem); text-transform: uppercase; }
h2 { font-size: clamp(2rem, 4.5vw, 4.25rem); }
h3 { font-size: clamp(1.5rem, 3vw, 3rem); }

p { margin: 0 0 16px; color: var(--text-muted); }

.eyebrow {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-grey-03);
  display: block;
  margin-bottom: 12px;
}

.btn {
  /* Pointed ends (elongated hexagon). --btn-point is how far each point sticks out — about 45% of
     the 40px height. Horizontal padding grows by the same amount so the label keeps its room. */
  --btn-point: 18px;
  /* Every button is 40px tall */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  box-sizing: border-box;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0 calc(18px + var(--btn-point));
  border-radius: 0;
  border: 0;
  background: var(--color-gold);
  color: var(--color-black);
  cursor: pointer;
  clip-path: polygon(
    var(--btn-point) 0, calc(100% - var(--btn-point)) 0, 100% 50%,
    calc(100% - var(--btn-point)) 100%, var(--btn-point) 100%, 0 50%
  );
  transition: background 0.2s ease, color 0.2s ease;
}

/* The clipped shape can't show an outline border, so hover lightens the fill instead */
.btn:hover { background: #dcbd6f; color: var(--color-black); }

/* Focus ring drawn inside the shape (anything outside would be clipped away) */
.btn:focus-visible { outline: 2px solid var(--color-black); outline-offset: -6px; }

.btn-outline {
  background: var(--color-white);
  color: var(--color-black);
}

.btn-outline:hover { background: var(--color-gold); color: var(--color-black); }

.btn-light {
  background: var(--color-white);
  color: var(--color-black);
}

.btn-light:hover { background: var(--color-gold); color: var(--color-black); }

/* ---- Navigation ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-black);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Logo and nav links grouped together on the left, per Figma */
.nav-left {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-header .brand img { width: 42px; height: 42px; }

.nav-links {
  list-style: none;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-white);
}

.nav-links a[aria-current="page"] { color: var(--color-gold); }

/* Register button inside the mobile menu only (desktop shows .nav-cta instead) */
.nav-links__cta { padding-top: 6px; }
.nav-links .nav-links__cta .btn { display: flex; color: var(--color-black); font-family: var(--font-display); }
.nav-links .nav-links__cta .btn:hover { color: var(--color-black); }
@media (min-width: 900px) { .nav-links__cta { display: none; } }

/* Phone number left of the Register button. Below 900px only the icon shows (tap-to-call). */
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--color-white);
  white-space: nowrap;
}

.nav-phone:hover { color: var(--color-gold); }
.nav-phone__number { display: none; }
@media (min-width: 900px) { .nav-phone__number { display: inline; } }

.nav-cta { display: none; }
@media (min-width: 900px) { .nav-cta { display: inline-flex; } }

/* Compact CTA in the nav specifically — Figma's nav button is much smaller
   than the hero/footer/CTA-band buttons (32px tall vs. ~44px). */
/* Top-navigation button: 32px tall (everything else is 40px), point scaled to match */
.btn-nav {
  --btn-point: 14px;
  height: 32px;
  padding: 0 calc(14px + var(--btn-point));
  font-size: 0.78rem;
}

/* Hamburger: three 32px bars that morph into an X while the menu is open */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 10px 0 10px 8px;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 32px;
  height: 2px;
  background: var(--color-white);
  transition: transform 0.3s ease, opacity 0.2s ease;
}

/* bar spacing = 2px height + 6px gap = 8px */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-of-type(2) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-of-type(3) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-of-type(4) { transform: translateY(-8px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .nav-toggle__bar { transition: none; }
}

@media (min-width: 900px) {
  .nav-toggle { display: none; }
}

/* Mobile menu: a full-width panel under the header that slides in from the left.
   It stays rendered but off-screen + visibility:hidden when closed, so it can animate
   and isn't focusable/clickable while hidden. */
@media (max-width: 899px) {
  .nav-links {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    /* Full remaining viewport height below the header (dvh accounts for mobile browser bars) */
    height: calc(100vh - var(--nav-height));
    height: calc(100dvh - var(--nav-height));
    overflow-y: auto;
    flex-direction: column;
    background: var(--color-black);
    padding: 40px;
    gap: 42px;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.35s ease, visibility 0s linear 0.35s;
  }

  .nav-links.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.35s ease;
  }

  .nav-links a:not(.btn) { font-size: 28px; line-height: 1; } /* tight rows so the slice edge can be steep */

  /* Items slide in from the left one after another (top to bottom) as the panel opens.
     Each link slides out from behind a static, menu-colored mask whose right edge is cut at
     an angle, so the text looks like it's being sliced out of thin air. The mask stays put
     (it's on the <li>); only the link moves. On close everything resets with no delay. */
  .nav-links > li {
    position: relative;
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .nav-links > li::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    right: calc(100% + 2px); /* angled edge ends just left of where the text lands */
    width: 420px;
    background: var(--color-black);
    clip-path: polygon(0 0, 100% 0, calc(100% - 48px) 100%, 0 100%); /* 48px run over a 28px row ≈ 60° slice; kept inside the 40px gutter so the cut happens on-screen */
    pointer-events: none;
  }

  .nav-links > li > a {
    display: inline-block; /* transforms don't apply to inline elements */
    transform: translateX(-320px);
    transition: transform 0.15s ease;
  }

  .nav-links.is-open > li {
    opacity: 1;
    transition: opacity 0.5s ease var(--stagger, 0s);
  }

  .nav-links.is-open > li > a {
    transform: translateX(0);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--stagger, 0s);
  }

  /* First item waits for the panel's 0.35s slide to finish, so every item starts hidden
     under a shape that's already in place; then 0.05s between items. */
  .nav-links > li:nth-child(1) { --stagger: 0.35s; }
  .nav-links > li:nth-child(2) { --stagger: 0.40s; }
  .nav-links > li:nth-child(3) { --stagger: 0.45s; }
  .nav-links > li:nth-child(4) { --stagger: 0.50s; }
  .nav-links > li:nth-child(5) { --stagger: 0.55s; }
  .nav-links > li:nth-child(6) { --stagger: 0.60s; }
  .nav-links__cta { padding-top: 12px; }
  .nav-links__cta::before { display: none; } /* slice mask is for text only; the button just slides in */

  /* Stop the page behind the open menu from scrolling */
  body.menu-open { overflow: hidden; }
  body.menu-open .review-badge { visibility: hidden; }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .nav-links, .nav-links.is-open,
  .nav-links > li, .nav-links.is-open > li,
  .nav-links > li > a, .nav-links.is-open > li > a { transition: none !important; }
}

/* ---- Page hero (subpages: image background + oversized outline title) ---- */
.page-hero {
  position: relative;
  /* Figma 42:17586 — 453px tall at 1440 wide */
  height: clamp(260px, 31.5vw, 453px);
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: var(--focus, 50%) center;
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.8);
}

/* Title is left-aligned in a 1350px column (wider than the site's 1200px container),
   sitting 20px above the bottom edge. width:100% stops the flex item from shrinking
   to the text and centering itself. */
.page-hero .container {
  position: relative;
  width: 100%;
  max-width: calc(1350px + 48px);
  padding-bottom: 20px;
  text-align: left;
}

.page-hero h1 {
  color: transparent;
  -webkit-text-stroke: 2px var(--color-white);
  font-size: clamp(3.5rem, 10vw, 9rem); /* 144px at desktop */
  line-height: 0.75; /* trims the line box to roughly cap height, like Figma's text-box-trim */
  margin: 0;
}

/* ---- Home hero (light section) ----
   Spacing matches Figma's auto-layout values exactly:
   60px top padding; 16px between eyebrow/heading/description;
   32px before the button; 80px before the photo collage. */
.home-hero {
  text-align: center;
  padding: 60px 0 80px;
}

.home-hero .eyebrow-italic {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-on-light);
  display: block;
  margin-bottom: 16px;
}

.home-hero h1 { color: var(--text-on-light); margin-bottom: 16px; font-size: clamp(30px, 6vw, 5rem); } /* 30px on phones → 80px desktop */

.home-hero p {
  max-width: 640px;
  margin: 0 auto 32px;
  color: #6c6c6c;
}

/* ---- Hero photo carousel (Figma 216:956) ----
   Everything is sized in "design pixels" of the 1276px-wide Figma frame (--u), so the strip scales
   with the viewport (with a floor so it isn't tiny on phones). Slides are parallelograms that
   overlap by 126 so a thin black gap shows between them. The track is centered; because the total
   width never changes (8 narrow + 1 wide), shifting by one slot = one narrow slide minus the overlap. */
.hero-carousel {
  --u: max(calc(100vw / 1276), 0.45px);
  --slide-h: calc(527 * var(--u));
  --narrow: calc(310 * var(--u));
  --wide: calc(591 * var(--u));
  --overlap: calc(126 * var(--u));
  --slant: calc(143 * var(--u));
  --step: calc(var(--narrow) - var(--overlap));
  --shift: 0px;
  position: relative;
  height: calc(var(--slide-h) + 28 * var(--u));
  background: var(--color-black);
  overflow: hidden;
}

.hero-carousel__track {
  position: absolute;
  top: calc(14 * var(--u));
  left: 50%;
  display: flex;
  height: var(--slide-h);
  transform: translateX(calc(-50% + var(--shift)));
}

.hero-carousel__slide {
  flex: none;
  width: var(--narrow);
  height: 100%;
  margin-right: calc(-1 * var(--overlap));
  clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  /* Side photos: blurred + black & white so the in-focus center photo (full color) stands out */
  filter: blur(5px) grayscale(1);
}

.hero-carousel__slide:last-child { margin-right: 0; }
.hero-carousel__slide.is-center { width: var(--wide); filter: blur(0) grayscale(0); } /* same function list so the change animates cleanly */

.hero-carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* While advancing: widths, blur and the track slide together. A steep ease-in-out (quint) over
   0.7s keeps it snappy — quick launch, hard stop — rather than a long glide. */
.hero-carousel.is-moving .hero-carousel__track { transition: transform 0.7s cubic-bezier(0.83, 0, 0.17, 1); }
.hero-carousel.is-moving .hero-carousel__slide { transition: width 0.7s cubic-bezier(0.83, 0, 0.17, 1), filter 0.5s ease; }

/* ---- Generic section spacing ---- */
.section { padding: 88px 0; }
.text-center { text-align: center; }

.bg-elevated { background: var(--color-dark-grey); }
.bg-journey { background: var(--color-neutral-10); }

/* ---- Value ticker (scrolling banner below the hero) ---- */
.value-ticker {
  overflow: hidden;
  padding: 24px 0;
}

.value-ticker__track {
  display: flex;
  width: max-content;
  animation: value-ticker-scroll 28s linear infinite;
}

.value-ticker__group {
  display: flex;
  align-items: center;
  flex: none;
}

.value-ticker__item {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--color-white);
  white-space: nowrap;
  padding: 0 28px;
}

.value-ticker__icon {
  flex: none;
  width: 32px;
  height: 32px;
}

@keyframes value-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .value-ticker__track { animation: none; }
  .value-ticker { overflow-x: auto; }
}

/* ---- Pain-point tag grid ---- */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
}

/* Figma lays these out as 3 columns, filled top-to-bottom per column
   (not left-to-right row by row), so use column auto-flow to match. */
@media (min-width: 700px) {
  .pain-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
  }
}

.pain-grid li {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-grey-03);
  display: flex;
  align-items: center;
  gap: 10px;
}

.pain-grid li::before {
  content: "";
  width: 14px;
  height: 14px;
  background: url("/assets/images/x-icon.svg") no-repeat center / contain;
  flex: none;
}

/* ---- Testimonials ---- */
.testimonial-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }

.testimonial-card {
  background: var(--color-neutral-10);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.testimonial-stars { margin-bottom: 22px; }

.testimonial-card p {
  font-family: var(--font-quote);
  color: var(--color-neutral-03);
  font-size: 14.5px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin: 0 0 24px;
}

/* Author pinned to the bottom so names line up across a row */
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.testimonial-author .avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-quote);
  font-weight: 600;
  font-size: 1rem;
  flex: none;
}

.testimonial-author .name { font-family: var(--font-quote); font-weight: 600; font-size: 1rem; color: var(--color-white); }

/* ---- Program cards ---- */
.program-card {
  display: grid;
  gap: 32px;
  align-items: center;
  padding: 56px 0;
}

@media (min-width: 900px) {
  .program-card { grid-template-columns: 1fr 1fr; gap: 80px; }
  .program-card.reverse .program-card__media { order: 2; }
}

.program-card__media {
  min-width: 0; /* let the grid track shrink instead of pushing into the text column */
}

.program-card__media img {
  border-radius: var(--radius);
  width: 100%;
  /* Natural ratio of the supplied program photos (two panels side by side) */
  aspect-ratio: 1176 / 645;
  object-fit: cover;
  /* These photos have transparent corner triangles around the angled cut —
     leave transparent so the keyart medallion behind shows through instead
     of being blocked by a solid fill. */
  background: transparent;
  /* Brand mask: slants the outer left and right edges of any photo, so a plain rectangular
     replacement still gets the angled look. Angle measured from the original 1176×645 artwork.
     No center gap — if a photo wants the split-panel look, it's built into the image itself. */
  clip-path: polygon(16.75% 0, 100% 0, 83.33% 100%, 0 100%);
}

.program-card__media.placeholder {
  border-radius: var(--radius);
  width: 100%;
  aspect-ratio: 1176 / 645;
  background: var(--color-dark-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-grey);
  font-family: var(--font-nav);
  font-size: 0.9rem;
  text-align: center;
  padding: 24px;
}

.program-card ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: grid;
  gap: 14px;
}

.program-card ul li {
  display: flex;
  gap: 10px;
  color: var(--color-grey-03);
  font-size: 0.95rem;
}

.program-card ul li::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background: url("/assets/images/double-chev-icon.svg") no-repeat center / contain;
  flex: none;
}
.program-card ul li strong { color: var(--color-white); font-weight: 700; }

.program-card .quote {
  margin-top: 16px;
  font-family: var(--font-quote);
  font-style: italic;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-white);
}

/* ---- Journey steps ---- */
.journey-title {
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.1;
  max-width: 16ch; /* wraps to "Your Double Five / Tyler Journey" */
  margin: 0 auto 64px;
}

.journey {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
  text-align: center;
}

@media (min-width: 900px) { .journey { grid-template-columns: repeat(5, 1fr); gap: 32px; } }

/* Large italic outline numerals — gold 1px stroke, hollow so the section bg shows through */
.journey-step .step-number {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(5rem, 9vw, 8.5rem);
  color: transparent;
  -webkit-text-stroke: 1px var(--color-gold);
  display: block;
  line-height: 1;
  margin-bottom: 28px;
}

.journey-step h4 {
  font-size: 1.35rem;
  margin-bottom: 16px;
}

.journey-step p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-neutral-03);
  max-width: 280px;
  margin: 0 auto;
}

/* ---- CTA band with photo ---- */
.keyart-bg {
  background-size: cover;
  background-position: var(--focus, 50%) center;
  background-repeat: no-repeat;
}

/* Big uppercase statement bands on the home page (shrink-back quote + mission).
   Figma H2: 68px Tomorrow SemiBold Italic, 1.25 line height, grey/white/gold word treatment. */
.statement .container { max-width: calc(var(--container-max) + 48px); } /* full 1200px text column, as in Figma */
.statement h2 { font-size: clamp(2rem, 4.75vw, 4.25rem); text-transform: uppercase; line-height: 1.25; margin: 0; } /* 68px at 1440 */

/* Figma 167:1053 — 640px tall at 1440; text box 1082px wide */
.shrink-back { padding: clamp(96px, 13.3vw, 192px) 0; }
.shrink-back h2 { max-width: 1082px; }

/* Figma 42:10268 — 300px top/bottom padding (855px tall at 1440) */
.mission { padding: clamp(120px, 20.8vw, 300px) 0; }

.cta-band {
  position: relative;
  background-size: cover;
  background-position: var(--focus, 50%) center;
  /* Figma 42:11726 — tall photo band, content pinned to the bottom (80px) */
  min-height: clamp(420px, 47vw, 680px);
  display: flex;
  align-items: flex-end;
  padding: 80px 0;
  text-align: center;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(1,1,1,0.5);
}

.cta-band .container {
  position: relative;
  width: 100%;
  max-width: calc(var(--container-max) + 48px); /* text column is a full 1200px in Figma */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.cta-band h2 {
  text-transform: uppercase;
  font-size: clamp(1.75rem, 3.62vw, 3.25rem); /* 52px at desktop */
  line-height: 1.25;
  margin: 0;
}



/* ---- Events preview (home) & Events list (events page) ---- */
.events-list {
  display: grid;
  gap: 20px;
}

.event-card {
  background: var(--color-neutral-10);
  border-radius: var(--radius);
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}

@media (max-width: 700px) {
  .event-card { grid-template-columns: 1fr; }
  .event-card .btn { justify-self: start; }
}

.event-card h3 {
  font-size: 1.4rem;
  margin-bottom: 6px;
}

.event-meta {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--color-white);
  margin-bottom: 8px;
}

.event-card .event-description p {
  font-size: 0.9rem;
  margin: 0 0 10px;
}
.event-card .event-description > :last-child { margin-bottom: 0; }

/* "- " lines in an event description become a list with the program cards' double-chevron bullets */
.event-card .event-description ul {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: grid;
  gap: 6px;
}
.event-card .event-description li {
  display: flex;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.event-card .event-description li::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-top: 5px;
  background: url("/assets/images/double-chev-icon.svg") no-repeat center / contain;
  flex: none;
}

.events-empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--color-grey-03);
}

.events-empty a { color: var(--color-gold); }

/* ---- Schedule table ---- */
.schedule-table-wrap { overflow-x: auto; }

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  /* Gold frame around the whole table. Outline (inset by 1px) sits on top of the
     collapsed cell borders, which would otherwise win over a table border. */
  outline: 1px solid var(--color-gold);
  outline-offset: -1px;
}

.schedule-table th, .schedule-table td {
  border: 1px solid #333333; /* solid grey, no transparency */
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  font-size: 0.9rem;
}

.schedule-table th {
  background: var(--color-gold);
  color: var(--color-black);
  font-family: var(--font-nav);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.schedule-table td .class-name { font-weight: 700; display: block; margin-bottom: 4px; }
.schedule-table td .class-time { color: var(--color-grey-03); font-size: 0.82rem; }
.schedule-table td.has-class { background: var(--color-neutral-10); font-size: 13px; }

/* Class-type badges. Colors come from the studio's class-type list (CMS → Class schedule), chosen
   from a fixed palette that always works with black text — see the swatch widget in admin/index.html. */
.class-badge {
  display: block;
  width: fit-content;
  margin-top: 6px;
  padding: 3px 6px;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-black);
  background: var(--badge-color, var(--color-grey-03));
}


/* Time column: always one line, 13px, column shrinks to fit the text */
.schedule-table th:first-child,
.schedule-table td.time { width: 1%; white-space: nowrap; }
.schedule-table td.time .class-name { font-size: 13px; margin-bottom: 0; }

.schedule-legend {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 32px;
}

@media (min-width: 700px) { .schedule-legend { grid-template-columns: repeat(5, 1fr); } }

.schedule-legend li {
  font-size: 0.95rem;
  color: var(--color-white);
}

.schedule-legend .eyebrow { margin-bottom: 4px; }

/* ---- About page ---- */
.story-title { font-size: clamp(2rem, 5vw, 3rem); } /* 48px at desktop */

.bio-block {
  display: grid;
  gap: 32px;
  align-items: center;
}

@media (min-width: 900px) { .bio-block { grid-template-columns: 1fr 1fr; } }

/* Professor Rock bio — Figma 42:11777: Dark Grey section, 60px top / 100px bottom padding,
   80px between columns, 24px between label / name / bio. */
.bio-section { padding: 60px 0 100px; }
.bio-section .container { max-width: calc(var(--container-max) + 48px); } /* full 1200px content width, as in Figma */

@media (min-width: 900px) { .bio-block { gap: 80px; } }

.bio-copy { display: flex; flex-direction: column; gap: 24px; }
.bio-copy > * { margin: 0; }

.bio-copy .role {
  display: block;
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-grey-03);
}

.bio-copy h3 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.25; } /* 48px at desktop */

.bio-copy p {
  font-family: var(--font-nav);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-grey-03);
}

/* ---- Keyart-behind-photo treatment (decorative circular medallion behind
   program and bio photos, per Figma's "Keyart-Double-Five-Circle" graphic) ---- */
.keyart-photo {
  position: relative;
}

.keyart-photo {
  overflow: visible;
}

.keyart-photo::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 108%;
  aspect-ratio: 1 / 1;
  max-width: 480px;
  /* --keyart-rotate is driven by scroll position in main.js (clockwise on scroll down) */
  transform: translate(-50%, -50%) rotate(var(--keyart-rotate, 0deg));
  will-change: transform;
  background-color: var(--color-neutral-10);
  -webkit-mask-image: url("/assets/images/keyart-circle.svg");
  mask-image: url("/assets/images/keyart-circle.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  z-index: 0;
  pointer-events: none;
}

.keyart-photo img,
.keyart-photo .program-card__media {
  position: relative;
  z-index: 1;
}

/* The key art circle is larger than its photo (and on phones reaches up into the heading above),
   so section headings and text columns sit on a layer above it — the art always stays behind. */
.section > .container > h2,
.program-card > :not(.program-card__media),
.bio-copy {
  position: relative;
  z-index: 1;
}

/* Quote now sits below the keyart-photo wrapper (not inside it), so the
   medallion centers on the image alone instead of image+quote combined. */
.program-card__media .quote {
  position: relative;
  z-index: 1;
}

/* Photo is portrait and narrower than the column, so the keyart medallion shows on both sides */
/* Figma: 314×449 photo on a 542px key art circle */
.bio-block .keyart-photo img { width: 314px; max-width: 100%; margin: 0 auto; aspect-ratio: 314 / 449; object-fit: cover; }
.bio-block .keyart-photo::before { width: min(542px, 92vw); max-width: none; }
/* Phones: shrink the photo so the key art ring still frames it, keeping Figma's photo:circle ratio (314:542) */
@media (max-width: 899px) { .bio-block .keyart-photo img { width: calc(min(542px, 92vw) * 0.58); } }
/* Figma 42:11777 — bio section sits on Dark Grey (#242424, via .bg-elevated), so its key art is Rich Black */
.bio-block .keyart-photo::before { background-color: var(--color-black); }

/* ---- Footer ----
   Structure per Figma: a full-width map, then a content row (logo + contact
   on the left, Register button on the right, space-between). ---- */
.site-footer {
  background: var(--color-dark-grey);
  padding: 56px 0;
}

.footer-map {
  width: 100%;
  aspect-ratio: 1312 / 459;
  margin-bottom: 56px;
  background: var(--color-black);
}

/* Phones: the wide map shape gets too short, so add 56px to its natural height */
@media (max-width: 699px) {
  .footer-map { aspect-ratio: auto; height: calc((100vw - 48px) * 459 / 1312 + 56px); }
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
}

.footer-brand-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
}

.footer-brand { display: flex; align-items: center; gap: 8px; flex: none; }
.footer-brand img { width: 112px; height: 112px; }

/* Desktop: logos match the height of the contact block beside them (name + 3 contact lines +
   social icons = 181px). If that block's content changes, update this number to match. */
@media (min-width: 900px) {
  .footer-brand img { width: 181px; height: 181px; }
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-contact);
  font-size: 1.05rem;
}

.footer-contact .name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--color-white);
  margin-bottom: 4px;
}

.footer-contact a,
.footer-contact span {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-contact img { flex: none; }

.social-links {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.social-links a { opacity: 0.85; transition: opacity 0.2s ease; }
.social-links a:hover { opacity: 1; }

/* ---- Utility ---- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-gold);
  color: var(--color-black);
  padding: 12px 20px;
  z-index: 200;
}

.skip-link:focus { left: 12px; top: 12px; }

/* ---- Floating Google reviews badge ---- */
.review-badge {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 150;
  display: flex;
  align-items: stretch;
  background: var(--color-neutral-10);
  border: 1px solid rgba(204, 169, 88, 0.35);
  border-left: 3px solid var(--color-gold);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  color: var(--color-white);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.review-badge.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }

.review-badge__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px 6px 12px;
}

.review-badge__google { flex: none; }

.review-badge__body { display: flex; flex-direction: column; line-height: 1.1; }
.review-badge__top { display: flex; align-items: center; gap: 6px; }

.review-badge__rating {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1rem;
}

.review-badge__stars { color: var(--color-gold); font-size: 0.9rem; letter-spacing: 1px; }



.review-badge__close {
  align-self: flex-start;
  background: none;
  border: 0;
  color: var(--color-text-grey);
  font-size: 1rem;
  line-height: 1;
  padding: 4px 7px;
  cursor: pointer;
}

.review-badge__close:hover { color: var(--color-white); }

@media (max-width: 600px) {
  .review-badge { left: 12px; bottom: 12px; }
  .review-badge__link { gap: 8px; padding: 5px 2px 5px 10px; }
  .review-badge__google { width: 20px; height: 20px; }
  .review-badge__rating { font-size: 0.9rem; }
  .review-badge__stars { font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .review-badge { transition: none; }
}

/* ---- Heading reveal animations (home page) ----
   .slice-in — same motion as the mobile menu items: each line slides 320px in from the left
   and is revealed along an angled edge (~60°) just left of where it lands. Instead of an
   opaque mask (which would cover photos next to some headings), each line is clipped to the
   right of that angled line with clip-path (set per line in main.js), so it works on any
   background.
   .slide-up — same rules and timing, but each line rises into place from just below its own
   line box, clipped top and bottom so it appears out of nowhere.
   main.js splits headings into their rendered lines and toggles .is-in as they scroll into /
   out of view. Only active once JS has run (html.slice-ready), so headings stay visible
   without JS. */
.slice-ready :is(.slice-in, .slide-up):not(.is-split) { visibility: hidden; } /* until fonts load and lines are measured */
.slice-ready :is(.slice-in, .slide-up) .slice-line { display: block; }
.slice-ready :is(.slice-in, .slide-up) .slice-clip { display: inline-block; vertical-align: top; }

.slice-ready :is(.slice-in, .slide-up) .slice-text {
  display: inline-block;
  opacity: 0;
}

.slice-ready .slice-in .slice-text { transform: translateX(-320px); }

/* Clip only above/below the line (a little room for italic ascenders/descenders); the text
   starts fully below that window. */
.slice-ready .slide-up .slice-clip { clip-path: inset(-0.1em -100vw -0.2em -100vw); }
.slice-ready .slide-up .slice-text { transform: translateY(125%); }

/* Page-hero titles use a 0.75 line-height (trimmed to cap height), so the glyphs overflow their
   line box — give the clip window more room and start the text further down. */
.slice-ready .page-hero .slide-up .slice-clip { clip-path: inset(-0.35em -100vw -0.35em -100vw); }
.slice-ready .page-hero .slide-up .slice-text { transform: translateY(200%); }

.slice-ready :is(.slice-in, .slide-up).is-in .slice-text {
  opacity: 1;
  transform: translate(0, 0);
  transition:
    opacity 0.5s ease var(--stagger, 0s),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--stagger, 0s);
}

/* .reveal-up / .reveal-side — a whole block rises (or slides in from the side) and fades in as
   one unit, with the same easing/timing as the heading reveals. Blocks entering together go one
   at a time (0.12s apart, set in main.js); replays on scroll like the headings.
   .reveal-side slides from the left by default; .from-right slides from the right. */
.slice-ready .reveal-up {
  opacity: 0;
  transform: translateY(48px);
}

.slice-ready .reveal-side {
  opacity: 0;
  transform: translateX(-120px);
}

.slice-ready .reveal-side.from-right { transform: translateX(120px); }

/* Elements sliding in from the side would otherwise widen the page on phones.
   (clip, not hidden, so it doesn't create a scroll container.) */
main { overflow-x: clip; }

.slice-ready :is(.reveal-up, .reveal-side).is-in {
  opacity: 1;
  transform: translate(0, 0);
  transition:
    opacity 0.5s ease var(--stagger, 0s),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--stagger, 0s);
}

/* Buttons keep their hover color fade alongside the reveal */
.slice-ready .btn.reveal-up.is-in {
  transition:
    opacity 0.5s ease var(--stagger, 0s),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--stagger, 0s),
    background 0.2s ease,
    color 0.2s ease;
}

/* .zoom-bg — the section's background photo (set inline as background-image) is copied onto a
   ::after layer that sits behind the dark overlay (::before) and the content. It starts zoomed in
   slightly and eases back to its normal size when the section scrolls into view (toggled by
   main.js like the other reveals, so it replays). The section's own copy of the image is hidden
   so only the scaling layer shows. Without JS / with reduced motion it just sits at normal size. */
.zoom-bg {
  isolation: isolate;
  overflow: hidden;
  background-size: 0 0;
  background-repeat: no-repeat;
}

.zoom-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: inherit;
  background-size: cover;
  background-position: var(--focus, 50%) center;
}

.slice-ready .zoom-bg::after { transform: scale(1.12); }

.slice-ready .zoom-bg.is-in::after {
  transform: scale(1);
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* .letters-up (used with .slide-up) — instead of each line rising as a whole, each letter rises
   out of its line's mask on its own, rippling left to right (Figma prototype 216:780). The line
   clip from .slide-up is the mask; the line itself stays put and the letters move. */
html.slice-ready .letters-up.slide-up .slice-text {
  opacity: 1;
  transform: none;
  white-space: nowrap; /* letters are inline-blocks — don't let a line re-wrap between them */
}

.slice-ready .letters-up .slice-char {
  display: inline-block;
  /* Italic glyphs lean past their own box; while a letter is animating, browsers (Safari
     especially) render it as its own layer clipped to that box, shaving off the slanted edge.
     Extra padding gives the glyph room, and matching negative margins keep the spacing identical. */
  padding: 0.15em 0.2em;
  margin: -0.15em -0.2em;
  transform: translateY(125%);
}

.slice-ready .page-hero .letters-up .slice-char { transform: translateY(200%); }

.slice-ready .letters-up.is-in .slice-char {
  transform: none; /* 'none' (not translateY(0)) so no layer lingers after the letters land */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--stagger, 0s);
}