/* ═══════════════════════════════════════════════════════════
   COACHES — page stylesheet  (extracted from inline <style>, V3 R1)
   Owner: coaches.html page owner. Loads AFTER tokens/layout/components.
   Migration contract: canonical-spec-v3.md.
   - Hero folds onto the shared .njt-page-hero component (+ page-level ghost/badge).
   - Section headers → .njt-section__* ; chips → .njt-chip ; stats → .njt-stats--glass-hud ;
     testimonials → .njt-testimonials-carousel (shared navigation.js drives it).
   - Palette fork purged: NO #A61C6D / #8B1A5A / #C72884 / #FF4DB3 / #00FF66 / #E2001A.
     Accents come only from the brand trio + sanctioned tokens (--magenta-300, --signal-green,
     --paper/--ink light-zone set).
═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   1. HERO — page-level layer on .njt-page-hero (components.css §13)
───────────────────────────────────────── */
.coaches-hero {                       /* co-class on .njt-page-hero */
  min-height: max(440px, 60vh);       /* A14: was `height: 60vh` + min-height */
  isolation: isolate;
}
/* Copy-side wash. The training photo is busiest exactly where the copy sits —
   cones, tyre stacks and a run of white barriers directly behind the headline and
   breadcrumb — and the shared scrim only darkens the floor, so the upper-left was
   white-on-mid-grey. Painted on the section rather than on __bg so it holds still
   while the photo pans; z-index 2 keeps it over the photo and under the content. */
.coaches-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(8, 0, 5, 0.92) 0%,
      rgba(12, 0, 7, 0.78) 34%,
      rgba(18, 0, 11, 0.34) 58%,
      rgba(24, 0, 14, 0) 82%),
    linear-gradient(180deg,
      rgba(18, 0, 11, 0.7) 0%,
      rgba(18, 0, 11, 0) 28%);
}
.coaches-hero .njt-page-hero__bg {
  background-image: url('../assets/07-training/honda-racing-thailand-training-overhead.jpg');
  animation: coaches-hero-pan 30s infinite alternate linear;
}
@media (prefers-reduced-motion: reduce) {
  .coaches-hero .njt-page-hero__bg { animation: none; }
}
/* Ghost kinetic word — decorative, sits behind the content block */
.coaches-hero__kinetic {
  position: absolute;
  right: 2vw;
  bottom: -1vw;
  z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(6rem, 16vw, 15rem);
  font-weight: 900;
  font-style: italic;
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: transparent;
  /* Was 0.08 — under the new wash it read as a rendering artefact rather than a
     deliberate ghost, so the stroke is lifted just enough to look intended. */
  -webkit-text-stroke: 1.5px rgba(255, 215, 0, 0.16);
  white-space: nowrap;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.coaches-hero__badge {                /* gold pill above the title */
  margin-bottom: 16px;
}
.coaches-hero__accent-line {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  z-index: 4;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--magenta) 70%, transparent);
}
@keyframes coaches-hero-pan {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(-2%, 1%); }
}

/* ─────────────────────────────────────────
   2. SHARED — page section rhythm + lead paragraph
───────────────────────────────────────── */
.coaches-section {
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden;
}
.coaches-section--dark     { background: var(--black-true); }
.coaches-section--gradient { background: var(--bg-gradient-v); }

.coaches-lead {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-white-80);
  line-height: 1.75;
  max-width: 760px;
  margin: 16px auto 0;
}
.njt-section__header--left .coaches-lead { margin-left: 0; }

/* Canonical glow-orb (tokens.css) placement helpers for this page */
.coaches-section .glow-orb--tr { top: -160px; right: -120px; }
.coaches-section .glow-orb--bl { bottom: -160px; left: -120px; }

/* ─────────────────────────────────────────
   3. PHILOSOPHY — compressed manifesto (was a verbatim copy of training §1.2).
   Differentiated from training: no photo-bento, links back to the full philosophy.
───────────────────────────────────────── */
/* §G8 — the 4-icon-card grid was a weaker duplicate of training's photo-bento.
   It is now ONE pull-quote plus a link to the full philosophy (training owns it). */
.coaches-manifesto {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  border: 0;
  padding: 0;
}
.coaches-manifesto__quote {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.45;
  color: var(--text-white);
  margin: 24px auto 0;
  max-width: 26ch;
  text-wrap: balance;
  position: relative;
}
.coaches-manifesto__quote::before {
  content: '\201C';
  font-family: Georgia, serif;
  font-size: 96px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.28;
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%);
}
.coaches-manifesto__accent {
  background: var(--magenta-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.coaches-manifesto__by {
  margin-top: 24px;
  font-family: var(--font-body);
  font-size: var(--text-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-white-60);
}

.coaches-philosophy__cta { text-align: center; }
.coaches-philosophy__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 36px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gold);
  letter-spacing: 0.01em;
}
.coaches-philosophy__link svg { width: 18px; height: 18px; transition: transform var(--transition); }
.coaches-philosophy__link:hover { color: var(--magenta-300); }
.coaches-philosophy__link:hover svg { transform: translateX(4px); }

/* ─────────────────────────────────────────
   4. COACH PROFILES — full-width alternating feature rows (image 38% / dossier 62%).
   Portraits are ZOOM-CROPPED to the clean photo half of each source poster
   (the baked-text/collage half + the top experience badge are pushed outside the frame).
───────────────────────────────────────── */
.coach-profiles {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 8px;
}
.coach-profile {
  display: flex;
  align-items: center;
  gap: 44px;
  padding: 32px;
  background: var(--surface-feature);
  -webkit-backdrop-filter: blur(var(--blur-card));
  backdrop-filter: blur(var(--blur-card));
  border: 1px solid rgba(255, 215, 0, 0.14);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.coach-profile:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 0, 121, 0.5);
  box-shadow: 0 28px 60px rgba(212, 0, 121, 0.18);
}
.coach-profile--reverse { flex-direction: row-reverse; }

.coach-profile__portrait {
  flex: 0 0 38%;
  max-width: 38%;
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid rgba(212, 0, 121, 0.28);
  background: var(--racing-plum);
}
.coach-profile__portrait::after {   /* subtle bottom scrim for depth */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(42, 0, 24, 0.45) 100%);
  pointer-events: none;
}
.coach-profile__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* zoom-crop onto the coach; per-coach vars below tune the framing */
  transform: scale(var(--pz, 2.6));
  transform-origin: var(--px, 84%) var(--py, 32%);
  filter: grayscale(16%);
  transition: filter var(--transition);
}
.coach-profile:hover .coach-profile__portrait img { filter: grayscale(0%); }
/* Per-coach crop framing (both source posters carry the clean portrait on the RIGHT;
   the zoom pushes the baked headline/collage half + the top experience badge outside the frame) */
.coach-profile--ball   .coach-profile__portrait img { --pz: 4.2; --px: 88%; --py: 32%; }
.coach-profile--amnuay .coach-profile__portrait img { --pz: 4.0; --px: 87%; --py: 30%; }

.coach-profile__dossier { flex: 1 1 auto; min-width: 0; }
.coach-profile__role {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: var(--text-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.coach-profile__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.2;
  color: var(--text-white);
  margin-bottom: 4px;
}
.coach-profile__fullname {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--text-white-60);
  margin-bottom: 16px;
}
.coach-profile__bio {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-white-80);
  line-height: 1.75;
  margin-bottom: 20px;
}
.coach-profile__credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
/* Credential pills reuse the canonical --magenta chip (magenta-300 text = AA on plum). */
.coach-profile__credentials .njt-chip { font-size: 13px; padding: 6px 14px; }
.coach-profile__credentials .njt-chip svg { width: 14px; height: 14px; flex: 0 0 auto; }
.coach-profile__spec-label {
  font-family: var(--font-heading);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-white-40);
  margin-bottom: 10px;
}
.coach-profile__specialties {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ─────────────────────────────────────────
   5. CREDENTIALS STRIP — migrated to the canonical .njt-stats--glass-hud (components.css §2),
   killing the off-token magenta gradient + the second "light-on-magenta" stats language.
   The hud's -80px hero overlap is neutralised for this standalone band.
───────────────────────────────────────── */
.coaches-stats-section {
  padding: var(--section-pad) 0;
  background: var(--bg-dark);
}
.coaches-stats-section .njt-stats--glass-hud {
  margin-top: 0;
  padding: 0 32px;
}

/* ─────────────────────────────────────────
   6. COACHING APPROACH — DELIBERATE on-brand LIGHT interlude.
   Choice (documented): light zone kept (not returned to dark) using the sanctioned
   --paper/--ink light-zone tokens, racing-yellow number discs, plum ink type, and a
   gold/plum checkered racing motif top & bottom — so it reads as EEST, not corporate-SaaS.
───────────────────────────────────────── */
.coaches-approach {
  position: relative;
  padding: 0;
  background: var(--paper);
}
.coaches-approach__checker {
  height: 18px;
  background-color: var(--gold);
  background-image:
    linear-gradient(45deg, var(--racing-plum) 25%, transparent 25% 75%, var(--racing-plum) 75%),
    linear-gradient(45deg, var(--racing-plum) 25%, transparent 25% 75%, var(--racing-plum) 75%);
  background-position: 0 0, 18px 18px;
  background-size: 36px 36px;
}
.coaches-approach__inner { padding: var(--section-pad) 0; }
.coaches-approach .njt-section__overline {
  color: var(--magenta);           /* magenta on paper = AA; gold would fail on light */
}
.coaches-approach .njt-section__overline--lines::before,
.coaches-approach .njt-section__overline--lines::after {
  background: linear-gradient(90deg, transparent, rgba(212, 0, 121, 0.6));
}
.coaches-approach .njt-section__overline--lines::before {
  background: linear-gradient(90deg, rgba(212, 0, 121, 0.6), transparent);
}
.coaches-approach .njt-section__title { color: var(--ink); }
.coaches-approach__lead {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--ink-soft);
  line-height: 1.75;
  max-width: 720px;
  margin: 16px auto 0;
}
/* Coaching approach — converged onto the canonical .njt-journey connector
   geometry (R3, retires the coaches-approach__timeline/__num/__card fork).
   Light-zone overrides only: gold coin + ink number, canonical gradient rail. */
.coaches-approach .njt-journey { background: none; padding: 0; overflow: visible; }
.coaches-approach .njt-journey__track--approach {
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.coaches-approach .njt-journey__track--approach::before {
  top: 27px;                 /* center of the 54px coin */
  left: 12.5%; right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, var(--racing-yellow), var(--magenta), var(--racing-yellow));
}
.coaches-approach .njt-journey__icon {
  width: 54px; height: 54px;
  margin: 0 auto 18px;
  background: var(--gold);
  border: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 22px;
  box-shadow: 0 6px 16px rgba(255, 215, 0, 0.35), 0 0 0 6px var(--paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.coaches-approach .njt-journey__node:hover .njt-journey__icon {
  transform: none;
  border: none;
  box-shadow: 0 6px 16px rgba(255, 215, 0, 0.35), 0 0 0 6px var(--paper);
}
.coaches-approach .njt-journey__name {
  color: var(--ink);
  font-weight: 700;
  font-size: 1.05rem;
}
.coaches-approach .njt-journey__desc {
  color: var(--ink-soft);
  font-size: var(--text-small);
}

/* ─────────────────────────────────────────
   7. STUDENT VOICES — canonical testimonial carousel (components.css §7 + navigation.js).
   Page extras only: role sub-line + quote glyph switched to the display typeface
   (drops the Georgia serif; HOUSE-RULES §5). Faux-italic is gone (canonical quote is upright).
───────────────────────────────────────── */
.coaches-section .njt-testimonial__quote::before {
  font-family: var(--font-display);   /* was Georgia serif */
  font-style: italic;
}
.njt-testimonial__role {
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--text-white-60);
  margin-top: 4px;
}

/* ─────────────────────────────────────────
   8. FINAL CTA — campaign CTA (page-level; no canonical component exists yet).
   Re-tokened: white→gold headline (was silver), gold benefit checks (was #E2001A),
   --signal-green live dot (was neon #00FF66). Structure matches the sitewide pattern.
───────────────────────────────────────── */
/* Campaign CTA de-forked → css/components.css §36 (GOAL-V3 R1 integrator, punch 2). */

/* ─────────────────────────────────────────
   9. WIDTH NORMALIZATION — every section matches header width (1400px, 32px gutters)
───────────────────────────────────────── */
.coaches-section .container.container--wide,
.coaches-stats-section .container.container--wide,
.coaches-approach .container.container--wide {
  padding-left: 32px;
  padding-right: 32px;
}

/* ─────────────────────────────────────────
   10. RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 1024px) {
  .coaches-values { grid-template-columns: repeat(2, 1fr); }
  .coaches-approach .njt-journey__track--approach { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .coaches-approach .njt-journey__track--approach::before { display: none; }
  .coach-profile__portrait { flex-basis: 42%; max-width: 42%; }
}

@media (max-width: 768px) {
  .coaches-hero { min-height: max(400px, 56vh); }   /* A14 */
  .coaches-hero__kinetic { font-size: 26vw; bottom: 0; }

  .coaches-values { grid-template-columns: 1fr; }

  .coach-profile,
  .coach-profile--reverse { flex-direction: column; gap: 24px; padding: 24px; }
  .coach-profile__portrait { flex-basis: auto; max-width: 320px; width: 100%; margin: 0 auto; }

  .coaches-approach .njt-journey__track--approach { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }

}

@media (max-width: 480px) {
  .coaches-approach .njt-journey__icon { width: 48px; height: 48px; font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GOAL-V4 §G8 — COACHES ELEVATION
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero H1 rendered at the shared component's 48px while every other route's
   hero sits on --text-display-xl — the *proof* route read as the smallest.
   Re-based onto the canonical clamp (CONVENTIONS #19: never re-hardcode). */
.coaches-hero .njt-page-hero__title {
  font-size: var(--text-display-xl);
  line-height: 1.05;
  text-wrap: balance;
  max-width: 16ch;
  /* Cones and kerb lines still pass behind the descenders; the shadow keeps the
     letterforms detached from them without darkening the photo further. */
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.6);
}
.coaches-hero .njt-page-hero__subtitle {
  max-width: 62ch;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
.coaches-hero { padding-bottom: 56px; }
.coaches-hero .njt-page-hero__ctas { margin-top: 28px; }

/* Per-coach CTA — the profile rows had no action of their own. */
.coach-profile__cta { margin-top: 24px; }
.coach-profile__cta .btn-cta { justify-content: center; }

/* Testimonials had been flattened to a bare quote on black. Restore a real
   card surface (composed from the token surface recipe, not a new colour).
   The card is a centred composition, but the quote glyph was still parked in the
   top-left corner from the component default, reading as a stray mark beside
   centred type; and a flat near-black panel on a near-black section left the
   card edge doing all the work. Glyph moves onto the centre axis, the surface
   gains a plum-to-black rake with a gold bloom at the top, and a hairline now
   separates the claim from who made it. */
.coaches-section .njt-testimonials-carousel { max-width: 860px; }
.coaches-section .njt-testimonial.is-active {
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(255, 215, 0, 0.09) 0%, transparent 62%),
    linear-gradient(180deg, rgba(46, 8, 29, 0.95) 0%, rgba(10, 0, 6, 0.95) 100%);
  -webkit-backdrop-filter: blur(var(--blur-card));
  backdrop-filter: blur(var(--blur-card));
  border: 1px solid rgba(255, 215, 0, 0.16);
  border-top: 2px solid rgba(255, 215, 0, 0.5);
  border-radius: var(--radius-md);
  padding: 58px 48px 38px;
  box-shadow: var(--shadow-elevated), 0 0 44px rgba(255, 215, 0, 0.06);
}
.coaches-section .njt-testimonial__quote {
  padding: 0;
  /* 860px of 20px type ran to a ~90-character measure and broke to a two-word
     last line; 58ch keeps the rag even. */
  max-width: 58ch;
  margin: 0 auto 22px;
  font-size: 21px;
  color: var(--text-white);
}
.coaches-section .njt-testimonial__quote::before {
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 64px;
  opacity: 0.5;
}
.coaches-section .njt-testimonial__author {
  position: relative;
  padding-top: 22px;
  font-size: 16px;
}
.coaches-section .njt-testimonial__author::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.coaches-section .njt-testimonial__role {
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--text-white-60);
  margin-top: 6px;
}
.coaches-section .njt-testimonials__dots { margin-top: 28px; }

@media (max-width: 767px) {
  .coaches-hero .njt-page-hero__ctas { flex-direction: column; align-items: stretch; }
  .coaches-hero .njt-page-hero__ctas .btn-cta { justify-content: center; }
  .coaches-section .njt-testimonial.is-active { padding: 40px 22px 26px; }
}

/* .njt-nw promoted to css/components.css (A1, round 2) — page copy removed. */