/*
Copyright (c) 2025-2026 Systèmes Calibre Inc. All rights reserved.
Proprietary and confidential. See LICENSE at the repository root.

Coaching page only (coaching.html), linked after style.css. Every section uses a shared component from style.css;
this file only tunes them for this page. Nothing here restyles a shared class outside a .coach-* scope.

  1  Hero: "You drive." at full width, lede and actions on one row
  2  Who it's for (a .chapter with the same .h2-md head as the next one, the sentence set as a Besley 700 statement),
     then the interview (.chapter): both on the 5/7 split the rest of this page uses (What you leave with, the Q&A)
  3  What a session is: head and lede side by side, two beats with run-in heads, then v3's sentence of the things your
     AI will do, in body type (review 07: as a list of amber Besley items it read as a promise, and as links)
  4  What you leave with: heading left, rule list right
  5  Practical things (three columns) and the Q&A, on sage
  6  How to start: the CTA band, with Phil's portrait
*/

/* ---------- 1  Hero (padding is the shared .page-hero's, like every inner page) ---------- */
.coach-hero .page-title {
  max-width: none;
  font-size: clamp(4.5rem, 12.6vw, 11.75rem);
  line-height: var(--lh-one-line);      /* one line on desktop, and no descenders in "You drive." */
  letter-spacing: -0.035em;
}
.coach-hero-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px 64px; align-items: end;
  margin-top: 44px;
}
.coach-hero-row .page-lede { margin-top: 0; max-width: 30rem; font-size: 1.625rem; line-height: 1.4; color: var(--on-forest); }
.coach-hero-row .actions { margin-top: 0; align-items: center; gap: 14px 32px; }

@media (max-width: 960px) {
  .coach-hero-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .coach-hero .page-title { font-size: 3.9rem; }   /* the widest that keeps "You drive." on one line at 390px */
  .coach-hero-row { margin-top: 26px; gap: 28px; }
  .coach-hero-row .page-lede { font-size: 1.3125rem; }
  .coach-hero-row .actions { flex-direction: column; align-items: stretch; margin-top: 0; }
  .coach-hero-row .actions .link { align-self: center; }
}

/* ---------- 2  Who it's for, then the interview (its own flush-top section, so the two read as one white run;
   88px between them is the shared .side-head + .side-head spacing) ---------- */
.coach-who { padding-bottom: 88px; }
.coach-who .chapter-body .chapter-big {
  max-width: 24em;
  font: 700 clamp(1.5rem, 2.45vw, 2.125rem)/1.3 var(--display);
  color: var(--forest); letter-spacing: -0.012em;
  text-wrap: pretty;
}
@media (max-width: 760px) { .coach-who { padding-bottom: 64px; } }
@media (max-width: 640px) {
  .coach-who .chapter-body .chapter-big { font-size: 1.4375rem; line-height: 1.34; }
}

/* ---------- 3  What a session is ---------- */
.coach-session-head {
  max-width: none;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 28px 72px; align-items: end;
}
.coach-session-head .section-lede { margin-top: 0; max-width: 30rem; }

.coach-beats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; }
.coach-beats p {
  border-top: 2px solid var(--amber); padding-top: 28px;
  font-size: 1.1875rem; line-height: 1.6; color: var(--on-forest-dim);
  text-wrap: pretty;
}
/* Run-in heads, as on Home's steps: "You drive." is the h1, so it is never set again as a head of its own */
.coach-beats .lead-in { font-size: 1.1em; line-height: 1.3; color: var(--on-forest); }

/* v3's own sentence, in body type and ink: examples, not a promise, and nothing that looks like a link */
.coach-uses {
  margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--line-forest);
  max-width: 44rem; font-size: var(--fs-lede); line-height: 1.55; color: var(--on-forest); text-wrap: pretty;
}
@media (max-width: 960px) {
  .coach-session-head { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .coach-beats { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .coach-beats p { font-size: 1.125rem; padding-top: 22px; }
  .coach-uses { margin-top: 48px; font-size: 1.1875rem; }
}

/* ---------- 4  What you leave with ---------- */
.coach-duo {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px 80px; align-items: start;
}
.coach-leave > li { font-size: 1.25rem; line-height: 1.55; padding-block: 24px; text-wrap: pretty; }
.coach-leave > li::before { top: calc(24px + 0.78em); }
.coach-leave strong { font-weight: 700; color: var(--forest); }
@media (max-width: 960px) { .coach-duo { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .coach-leave > li { font-size: 1.125rem; padding-block: 18px; }
  .coach-leave > li::before { top: calc(18px + 0.8em); }
}

/* ---------- 5  Practical things and the Q&A (both on one sage band) ---------- */
.coach-practical-section { padding-bottom: 88px; }
.coach-practical {
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px;
}
.coach-practical > div { border-top: 2px solid var(--forest); padding-top: 26px; }
.coach-practical .h3 { font-size: 1.5rem; line-height: 1.15; }
.coach-practical p { margin-top: 12px; font-size: 1.125rem; line-height: 1.6; max-width: 26rem; text-wrap: pretty; }
.coach-practical .note-row { margin-top: 16px; }

.coach-qa .qa-q { font-size: clamp(2rem, 3.3vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; }
.coach-qa .qa-item { border-bottom: 0; padding-bottom: 0; }
.coach-qa .qa-a p { font-size: 1.25rem; }
.coach-qa .qa-a .coach-qa-no {
  font: 900 clamp(3rem, 5vw, 4.5rem)/0.9 var(--display);
  color: var(--forest); letter-spacing: -0.03em;
}
.coach-qa .qa-a .coach-qa-no + p { margin-top: 20px; }
.coach-qa .qa-a a {
  color: var(--forest); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--amber-dot); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.coach-qa .qa-a a:hover { text-decoration-color: var(--forest); }
@media (max-width: 900px) { .coach-practical { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; } }
@media (max-width: 860px) { .coach-qa .qa-item { row-gap: 32px; } }
@media (max-width: 640px) {
  .coach-practical-section { padding-bottom: 56px; }
  .coach-qa .qa-a p { font-size: 1.125rem; }
  .coach-qa .qa-a .coach-qa-no { font-size: 3rem; }
}

/* ---------- 6  How to start ---------- */
.coach-start-photo { width: 128px; height: 128px; margin: 0 0 36px; }  /* the round portrait itself is the shared .avatar */
.coach-start .note-row { margin-top: 20px; }
@media (max-width: 640px) {
  .coach-start-photo { width: 104px; height: 104px; margin-bottom: 28px; }
}

/* The four things I ask in the interview (Coaching #interview): a tighter rule list inside the chapter body */
.interview-asks { margin: 4px 0 28px; }
.interview-asks > li { padding-top: 14px; padding-bottom: 14px; }