/* Embrace rebuild: class pages (tools/build_classes.py). Uses the tokens, header, band, faq and footer from home.css. */
.cls-title, .learn, .times, .cls-reviews{ scroll-margin-top:var(--bar-h); }

/* hero: the photo or video alone, full width */
.cls-hero{ position:relative; overflow:hidden; height:max(360px, calc(62vh - var(--bar-h))); border-bottom:3px solid var(--gold); }
.cls-hero-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* title: centered beneath the hero */
.cls-title{ text-align:center; padding-block:3rem clamp(3rem,7vw,5rem); }
.cls-title .wrap{ display:flex; flex-direction:column; align-items:center; }
.cls-title h1{ font-family:var(--display); font-weight:var(--display-w); font-synthesis:none; text-transform:uppercase; line-height:.9; font-size:clamp(3.5rem,9vw,7rem); margin:.6rem 0 1.25rem; }
.cls-title h1{ margin-bottom:.5rem; }
.ages{ font-family:var(--display); font-weight:var(--display-w); font-synthesis:none; font-size:clamp(1.4rem,2.4vw,1.9rem); letter-spacing:.06em; text-transform:uppercase; color:var(--gold); margin-bottom:1.25rem; }
.cls-title .lede{ font-size:1.12rem; max-width:620px; margin-bottom:2rem; }
.cls-title .book{ margin-top:.25rem; }

/* class types: one row each, staggered like the coaches page, with no box around them.
   Photo on one side, the text centered in the other half; .flip mirrors it. */
.types .wrap{ display:grid; gap:3.5rem; }
.type-row{ display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"pic text"; align-items:center; gap:3rem; }
.type-row.flip{ grid-template-areas:"text pic"; }
.type-pic{ grid-area:pic; position:relative; aspect-ratio:1/1; overflow:hidden; }   /* square photos, square corners */
.type-pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.type-text{ grid-area:text; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem; }
.type-text h2{ margin:0 0 .35rem; font-size:clamp(2.6rem,5vw,3.8rem); }
.type-text .type-for{ margin-top:-.35rem; margin-bottom:.35rem; }   /* a subtitle, when a row has one, sits tight under the name */
.type-for{ font-size:1.25rem; color:var(--white); font-weight:600; }
.type-note{ font-size:.85rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--white); background:rgba(245,197,24,.14); border:1px solid rgba(245,197,24,.45); border-radius:999px; padding:.3rem .85rem; margin:0; }
.type-times{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:.9rem;
  font-size:1.1rem; font-family:var(--display); font-weight:var(--display-w); font-synthesis:none; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--gold); color:var(--gold); border-radius:4px; padding:.75rem 1.4rem; transition:background .2s, color .2s;
}
.type-times i{ font-style:normal; transition:transform .2s; }
.type-times:hover{ background:var(--gold); color:#000; }
.type-times:hover i{ transform:translateX(4px); }
@media (max-width:860px){
  .type-row, .type-row.flip{ grid-template-columns:1fr; grid-template-areas:"pic" "text"; }
  .type-row{ gap:1.25rem; }
}

.back{ align-self:flex-start; color:var(--gold); font-weight:600; margin-bottom:1.5rem; }
.back:hover{ text-decoration:underline; text-underline-offset:4px; }

/* what they'll learn: four cards */
.learn-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; margin-top:1rem; }
/* glass cards, like the home page: see-through dark with a blur of what's behind, a faint light edge, and a soft gold glow under them for depth */
.learn-card{
  background:rgba(20,20,22,.55); backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:1.6rem 1.4rem;
  box-shadow:0 18px 40px rgba(0,0,0,.45), 0 0 48px rgba(245,197,24,.10), inset 0 1px 0 rgba(255,255,255,.06);
  transition:box-shadow .4s ease, transform .4s ease;
}
.learn-card:hover{ transform:translateY(-3px); box-shadow:0 24px 50px rgba(0,0,0,.55), 0 0 64px rgba(245,197,24,.18), inset 0 1px 0 rgba(255,255,255,.08); }
.learn-card h3{ margin-bottom:.6rem; }
.learn-card p{ font-size:.95rem; }

/* class times: a bar per academy, like the homepage Locations, with the street map left and the times right */
.room-bars{ display:grid; gap:1.5rem; margin-top:1rem; }
.room-bar{ margin-top:0; grid-template-columns:1fr 1fr; }   /* even halves so the times have room */
.room-bar .loc-photo{ min-height:380px; }
.room-bar .loc-info{ gap:.9rem; }
.room-bar .loc-addr{ font-size:1rem; color:var(--muted); }
.room-bar table{ width:100%; border-collapse:collapse; }
.room-bar tr + tr{ border-top:1px solid var(--line); }
.room-bar th, .room-bar td{ text-align:left; padding:.7rem 0; font-size:.98rem; color:#d8d8da; font-weight:400; }
.room-bar th{ color:var(--white); font-weight:700; width:26%; white-space:nowrap; }
.room-bar td.t{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.85rem; color:var(--gold); width:32%; white-space:nowrap; }
.room-bar .book{ align-self:flex-start; margin-top:.5rem; color:#000; }
.book.small{ font-size:1rem; padding:.7rem 1.4rem; }

/* reviews: three across */
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:1rem; }

@media (max-width:960px){
  .learn-grid{ grid-template-columns:1fr 1fr; }
  .review-grid{ grid-template-columns:1fr; }
}

/* a class at one academy only: its times card sits centered on its own; two reviews split the row */
.review-grid{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }

/* depth: each photo floats on a deep shadow with a soft gold glow behind it (owner pick, style E) */
.type-pic{ overflow:visible; }
/* the glow spills past the photo; clip it at the screen edge so phones don't scroll sideways */
.types{ overflow-x:clip; }
.type-pic::before{ content:""; position:absolute; inset:-22%; z-index:0; background:radial-gradient(closest-side, rgba(245,197,24,.5), rgba(245,197,24,.12) 60%, transparent); filter:blur(18px); pointer-events:none; }
.type-pic img{ z-index:1; box-shadow:0 30px 60px rgba(0,0,0,.7); }
.type-desc{ font-size:1.05rem; line-height:1.65; max-width:460px; color:#d8d8da; }

/* coaches who teach the class, under the free class band; cards match the homepage coaches.
   Four fit across; more scroll sideways (arrows in the page script), fewer sit centered. */
.cls-coaches .wrap{ text-align:center; }
.coach-grid{
  display:flex; justify-content:safe center; gap:1.25rem; margin-top:1rem; text-align:left;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px;
}
.coach-grid::-webkit-scrollbar{ display:none; }
.coach-grid .coach{ flex:0 0 calc((100% - 3 * 1.25rem) / 4); min-width:220px; scroll-snap-align:start; display:block; transition:border-color .2s; }
.coach-grid .coach:hover{ border-color:var(--gold); }
.scroll-nav{ margin-top:1.5rem; }
.scroll-nav[hidden]{ display:none; }

/* member highlights under the reviews: competition and photo cards from the news page */
.hl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:1rem; }
.hl-card{ display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:border-color .2s, transform .2s; }
.hl-card:hover{ border-color:var(--gold); transform:translateY(-3px); }
.hl-pic{ position:relative; aspect-ratio:4/3; }
.hl-pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* an event logo instead of a photo, as on the News page */
.hl-pic.logo{ background:var(--panel); border-bottom:1px solid var(--line); }
.hl-pic.logo img{ inset:2.5rem 2.5rem; width:calc(100% - 5rem); height:calc(100% - 5rem); object-fit:contain; }
.hl-pic .story-tag{ position:absolute; top:.9rem; left:.9rem; background:var(--gold); color:#000; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; padding:.3rem .6rem; border-radius:3px; }
.hl-text{ display:flex; flex-direction:column; gap:.55rem; padding:1.4rem 1.4rem 1.6rem; flex:1; }
.hl-text .story-date{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.hl-text h3{ font-size:1.5rem; }
.hl-text p{ font-size:.95rem; flex:1; }
.hl-text .story-more{ color:var(--gold); font-weight:700; width:fit-content; }
.hl-text .story-more i{ font-style:normal; display:inline-block; transition:transform .2s; }
.hl-text .story-more:hover i{ transform:translateX(4px); }
.member-hl{ text-align:center; margin-top:4.5rem; }
.member-hl h2{ font-size:clamp(3rem,6vw,4.6rem); margin-bottom:1.75rem; }
.member-hl .hl-grid{ text-align:left; }
.member-hl .hl-all{ display:inline-flex; gap:.5rem; margin-top:2rem; font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--gold); color:var(--gold); padding:.8rem 1.3rem; border-radius:4px; transition:background .2s, color .2s; }
.member-hl .hl-all:hover{ background:var(--gold); color:#000; }
.member-hl .hl-all i{ font-style:normal; }
@media (max-width:960px){ .hl-grid{ grid-template-columns:1fr; } }

/* member highlights as a photo gallery: square photos in a row that scrolls sideways */
.gal-track{ display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.gal-track::-webkit-scrollbar{ display:none; }
.gal-shot{ flex:0 0 calc((100% - 3 * 1rem) / 4); min-width:220px; aspect-ratio:1/1; scroll-snap-align:start; border-radius:10px; overflow:hidden; border:1px solid var(--line); transition:border-color .2s; }
.gal-shot:hover{ border-color:var(--gold); }
.gal-shot img{ width:100%; height:100%; object-fit:cover; }

/* one coach: a short profile, photo on the left, summary, bio and history on the right */
.cls-coaches.solo .wrap{ text-align:left; }
.solo-coach{ display:grid; grid-template-columns:minmax(260px,400px) 1fr; gap:3rem; align-items:start; margin-top:1rem; }
.solo-pic{ aspect-ratio:4/5; background:var(--panel); border:1px solid var(--line); border-radius:12px; display:grid; place-items:end center; overflow:hidden; }
.solo-pic img{ width:72%; opacity:.55; }
.solo-pic img.cut, .solo-pic img.shot{ width:100%; height:100%; object-fit:cover; opacity:1; }
.solo-text{ display:flex; flex-direction:column; gap:.45rem; }
.solo-text h3{ font-size:clamp(2.2rem,4vw,3rem); }
.solo-text .role{ color:var(--muted); }
.solo-text .rank{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.solo-sum{ font-size:1.15rem; color:var(--white); font-weight:600; margin-top:.75rem; max-width:620px; }
.solo-bio p{ max-width:640px; line-height:1.7; }
.solo-text h4{ font-family:var(--display); font-weight:var(--display-w); text-transform:uppercase; font-size:1.25rem; letter-spacing:.03em; margin-top:1rem; }
.solo-facts{ list-style:none; display:grid; gap:.5rem; }
.solo-facts li{ padding-left:1rem; border-left:3px solid var(--gold); color:#d8d8da; }
.solo-text .cr-more{ align-self:flex-start; margin-top:1.25rem; display:inline-flex; align-items:center; gap:.6rem; font-size:1rem; font-family:var(--display); font-weight:var(--display-w); letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--gold); color:var(--gold); border-radius:4px; padding:.75rem 1.3rem; transition:background .2s, color .2s; }
.solo-text .cr-more i{ font-style:normal; }
.solo-text .cr-more:hover{ background:var(--gold); color:#000; }
@media (max-width:860px){ .solo-coach{ grid-template-columns:1fr; } }

/* the questions and the free class band run together: no dead space between "Still wondering" and the band */
.faq{ padding-bottom:1.25rem; }
.faq + .band{ padding-top:1.25rem; }
.faq .faq-more{ margin-bottom:0; }

/* two statements instead of four cards (Godfather BJJ): wider cards, bigger type */
.learn.duo .learn-grid{ grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:0; }
.learn.duo .learn-card{ padding:2.5rem 2.25rem; }
.learn.duo .learn-card h3{ font-size:clamp(2rem,3.6vw,2.8rem); margin-bottom:.75rem; }
.learn.duo .learn-card p{ font-size:1.1rem; line-height:1.6; }
@media (max-width:760px){ .learn.duo .learn-grid{ grid-template-columns:1fr; } }
/* two coaches: stacked profiles, the second mirrored */
.solo-coach + .solo-coach{ margin-top:4rem; }
.solo-coach.flip{ grid-template-columns:1fr minmax(260px,400px); }
.solo-coach.flip .solo-pic{ order:2; }
@media (max-width:860px){ .solo-coach.flip{ grid-template-columns:1fr; } .solo-coach.flip .solo-pic{ order:0; } }

/* ── Muay Thai pages (theme='mt'): a deep red black background with the Sak Yant style tiger ──
   The art is the twin tiger Sak Yant (Suea Koo) the owner sent (2026-10-28), recolored to gold on transparent (assets/sak-yant-tigers.png). */
.theme-mt{ --ink:#120708; --panel:#1d0c0e; --line:#3d1c1f; background:var(--ink); }
.theme-mt::before{   /* red glow behind the whole page */
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 85% 35%, rgba(178,24,34,.3), transparent 70%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(178,24,34,.2), transparent 70%);
}
/* the Sak Yant designs, fixed behind the page; the page script fades each up as you scroll to it */
.yant-layer{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.yant-layer img{ position:absolute; opacity:0; transition:opacity .25s linear; will-change:opacity, transform; }
.yt-a{ width:min(560px,44vw); right:4vw; top:12vh; }
.yt-b{ height:62vh; left:3vw; top:20vh; }
.yt-c{ width:min(560px,42vw); right:3vw; top:22vh; }
.yt-d{ height:62vh; left:5vw; top:18vh; }
.yt-e{ width:min(600px,46vw); right:2vw; top:24vh; }
.yt-f{ height:30vh; left:6vw; bottom:10vh; }
.yt-g{ height:30vh; right:6vw; bottom:10vh; }
@media (prefers-reduced-motion: reduce){ .yant-layer img{ opacity:.12; } .yant-layer img:not(.yt-c){ display:none; } }
.theme-mt .bar{ background:#0d0506; }
/* the tiger as a design feature behind the title */
.theme-mt .cls-title{ position:relative; isolation:isolate; overflow:hidden; }
.theme-mt .cls-title::before{
  content:""; position:absolute; z-index:-1; left:50%; top:50%; width:min(620px,90vw); aspect-ratio:811/767; transform:translate(-50%,-50%);
  background:url("/assets/sak-yant-tigers.png") no-repeat center / contain; opacity:.2;
}
.theme-mt .sec.learn, .theme-mt .types, .theme-mt .times, .theme-mt .cls-reviews, .theme-mt .cls-coaches{ background:transparent; }
/* Thailand, the home of Muay Thai, as a red silhouette behind the class row text (assets/thailand.svg, Natural Earth, public domain) */
.theme-mt .type-text{ position:relative; isolation:isolate; }
.theme-mt .type-text::before{
  content:""; position:absolute; z-index:-1; left:50%; top:50%; height:150%; aspect-ratio:400/734; transform:translate(-50%,-50%);
  background:url("/assets/thailand.svg") no-repeat center / contain; opacity:.7;
}

/* Kids Muay Thai: the same Muay Thai pieces on the regular Embrace black, white and yellow, kept simpler and friendlier.
   Rounder corners, only the tigers and the small lucky yants in the background, tiger stripes as a playful edge. */
.theme-mt.kids{ --ink:#0b0b0c; --panel:#141416; --line:#2a2a2e; }
.theme-mt.kids::before{ background:radial-gradient(ellipse 70% 60% at 80% 30%, rgba(245,197,24,.08), transparent 70%); }
.theme-mt.kids .bar{ background:var(--ink); }
.theme-mt.kids .type-text::before{ background-image:url("/assets/thailand-gold.svg"); opacity:.22; }
.theme-mt.kids .learn-card, .theme-mt.kids .room-bar, .theme-mt.kids .review, .theme-mt.kids .solo-pic{ border-radius:22px; }
.theme-mt.kids .type-pic img{ border-radius:22px; }
.theme-mt.kids .book, .theme-mt.kids .type-times, .theme-mt.kids .cr-more{ border-radius:999px; }
.theme-mt.kids .learn-card{ border-top:0; position:relative; overflow:hidden; padding-top:2rem; }
.theme-mt.kids .learn-card::before{   /* tiger stripes along the top of each card */
  content:""; position:absolute; left:0; right:0; top:0; height:10px;
  background:repeating-linear-gradient(115deg, var(--gold) 0 14px, #0b0b0c 14px 22px);
}
.theme-mt.kids .learn-card h3{ font-size:1.6rem; }
.theme-mt.kids .cls-title::before{ opacity:.2; }

/* "Kids" in a kids class title takes the Kids Club logo colors, one letter each */
.kids-word .k1{ color:#ED1C24; } .kids-word .k2{ color:#FFEC09; } .kids-word .k3{ color:#00AEEF; } .kids-word .k4{ color:#00A651; }

/* Kids Club, under the coaches on kids class pages: text on the left, the Kids Club logo on the right, centered */
.kc-promo .wrap{ display:grid; grid-template-columns:1.2fr 1fr; gap:3.5rem; align-items:center; }
.kc-promo h2{ margin:0 0 1rem; }
.kc-promo .lede{ max-width:560px; }
.kc-where{ color:var(--muted); margin:1rem 0 1.75rem; }
.kc-promo .kc-logo{ justify-self:center; width:min(420px,100%); height:auto; }
@media (max-width:860px){ .kc-promo .wrap{ grid-template-columns:1fr; } .kc-promo .kc-logo{ order:-1; width:min(300px,80%); } }
/* a line under the "What our instructors teach" heading (Cardio Kickboxing) */
.learn-lede{ font-size:1.15rem; color:var(--white); max-width:720px; margin:-.75rem 0 1.75rem; }
/* when the free class band comes first and the questions follow (Cardio Kickboxing): one yellow block, no dead space */
.band:has(+ .faq){ padding-bottom:1.5rem; }
.band + .faq{ padding-top:1.5rem; }
.faq:not(:has(+ .band)){ padding-bottom:2.5rem; }

/* Cardio Kickboxing: the photo gallery sits close under the questions and close over the locations */
.gallery-sec{ padding-block:3rem 1.5rem; }
.gallery-sec .member-hl{ margin-top:0; }
.gallery-sec + .times{ padding-top:2.5rem; }
/* the first word of a title in an accent color: "Women" in pink, matching the women's classes on the schedule */
.title-accent{ color:#e879a8; }

/* Women Only BJJ (theme='women'): every accent in the page is pink, the women's color on the schedule.
   The header and footer turn pink on this page too (owner, 2026-10-28); the AKB association logos keep their own colors. */
.theme-women{ --gold:#e879a8; --gold-deep:#c9578a; }   /* the whole page, header and footer included, uses pink for gold */
.theme-women .type-pic::before{ background:radial-gradient(closest-side, rgba(232,121,168,.5), rgba(232,121,168,.12) 60%, transparent); }
.theme-women .band .book{ color:#e879a8; }
/* the big blocks that would be yellow (common questions, the free class band) are a soft white here, with a deeper
   pink for anything that sits on them so it reads clearly; the bright pink stays for accents on black */
.theme-women .faq, .theme-women .band{ background:#fdf6f9; --wpink:#b83a72; }
.theme-women .faq{ border-block:0; }
.theme-women .faq h2, .theme-women .band h2{ color:#1a1a1f; }
.theme-women .faq p, .theme-women .faq summary{ color:#2a2a31; }
.theme-women .faq .lede, .theme-women .faq-more{ color:#5a5a64; }
.theme-women .faq summary:hover{ color:var(--wpink); text-decoration-color:var(--wpink); }
.theme-women .faq summary::after{ color:var(--wpink); text-shadow:none; }
.theme-women .faq-list, .theme-women .faq details{ border-color:#f0d3e0; }
.theme-women .faq-more a{ color:var(--wpink); text-decoration-color:rgba(184,58,114,.4); }
.theme-women .band .book{ background:var(--wpink); color:#fff; }
.theme-women .band .book:hover{ filter:brightness(1.08); }
.theme-women .faq summary:focus-visible{ outline-color:var(--wpink); }

/* header and footer on Women Only BJJ: the gold lines and Embrace E in pink */
.theme-women .bar{ border-bottom-color:rgba(232,121,168,.4); }
.theme-women .mark img{ filter:hue-rotate(-75deg) saturate(.75) brightness(1.05) drop-shadow(0 0 10px rgba(232,121,168,.35)); }
.theme-women .foot{ border-top-color:rgba(232,121,168,.4); }
.theme-women .foot-div{ background:rgba(232,121,168,.4); }

/* phones: learn cards one per row so the text isn't squeezed into a narrow column */
@media (max-width:560px){
  .learn-grid, .learn.duo .learn-grid{ grid-template-columns:1fr; gap:1rem; }
  .learn-card{ padding:1.4rem 1.25rem; }
  .learn.duo .learn-card{ padding:1.75rem 1.4rem; }
}

/* phones and small tablets: map on top, times below. On phones each class is day and time on one line, its name under. */
@media (max-width:860px){
  .room-bar{ grid-template-columns:1fr; }
  .room-bar .loc-photo{ min-height:200px; }
}
@media (max-width:560px){
  .room-bar tr{ display:grid; grid-template-columns:auto 1fr; column-gap:.9rem; padding:.7rem 0; }
  .room-bar th, .room-bar td{ padding:0; width:auto; }
  .room-bar td.t{ text-align:left; }
  .room-bar td:last-child{ grid-column:1 / -1; color:var(--muted); font-size:.92rem; margin-top:.15rem; }
  .room-bar .book{ align-self:stretch; text-align:center; }
}