/* ============================================================
   COACH MICRO-SITE — the dossier treatment for a single coach.
   Concept adapted from the SomaticJourney practitioner profile
   (a "specimen sheet": portrait + dossier + visible provenance +
   outbound booking) but worn in WW's WARM register: cream grounds,
   Iowan headlines, 35-FTR, the rationed gradient, the level-circle
   kit, and the warm-whisper photo grade. Reuses .spec-row,
   .tint-field, .level-circle from components.css.
   If approved, fold into components.css and roll across all coaches.
   ============================================================ */

/* A tighter section rhythm — used between the hero and the prose. */
.section--tight { padding-block: clamp(var(--space-6), 5vw, var(--space-8)); }

/* Concise rhythm — the micro-site is a quick dossier, not a long read, so the
   whole page runs on a markedly tighter vertical rhythm than a content page. */
.coach-page .section { padding-block: clamp(var(--space-4), 5vw, var(--space-6)); }
/* Tighter type rhythm: smaller lede, closer headers, less air between paragraphs. */
.coach-page .section-head { margin-bottom: var(--space-3); }
.coach-page .lede { font-size: clamp(var(--text-base), 2vw, var(--text-lg)); line-height: 1.4; }
.coach-page .reading > p { margin-top: var(--space-2); }
/* Buttons: lower height, width kept (per direction) — height down, not width. */
.coach-page .btn { padding-block: var(--space-0-75); padding-inline: var(--space-4); }

/* Declarative lead — the plain entity sentence (for readers AND answer engines),
   kept subtle so the one-liner quote still carries the voice. */
.coach-hero__lead {
    font-family: var(--font-text);
    font-size: var(--text-base);
    line-height: var(--lh-body);
    color: var(--ink);
    max-width: 38ch;
    margin: var(--space-3) 0 0;
}

/* Compact FAQ — short Q&A, visible (so the FAQPage schema is legitimate),
   on a hairline rhythm so it stays quiet. */
.coach-faq { border-top: var(--border-hairline); margin-top: var(--space-5, 40px); }
.coach-faq__item { padding-block: var(--space-3); border-bottom: var(--border-hairline); }
.coach-faq__q {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: var(--lh-heading);
    margin: 0 0 var(--space-1);
}
.coach-faq__a {
    font-family: var(--font-text);
    font-size: var(--text-sm);
    line-height: var(--lh-body);
    color: var(--ink-muted);
    margin: 0;
    max-width: 60ch;
}

/* Functional image — portrait + "the space" + "at work". The warm-whisper
   grade + cream mat = the one-family treatment we approved. A small
   structural-voice caption gives the "specimen sheet" precision. */
.coach-shot {
    position: relative;
    margin: 0;
    background: var(--surface-base);          /* cream mat */
    padding: var(--space-1-25);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-3);
}
.coach-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
    filter: var(--photo-grade);               /* warm whisper */
}
.coach-shot--portrait img { aspect-ratio: 4 / 5; }
.coach-shot--wide img     { aspect-ratio: 16 / 9; }
.coach-shot__fig {
    position: absolute;
    left: var(--space-3);
    bottom: var(--space-3);
    font-family: var(--font-structure);
    font-weight: var(--weight-extrabold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

/* Dummy-image placeholder, styled to read as an intentional slot (not broken).
   Carries the same caption + radius as a real shot. */
.coach-shot--dummy {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    background: var(--gradient-tint);
    border: var(--border-hairline);
    color: var(--ink-muted);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    text-align: center;
    padding: var(--space-4);
}
.coach-shot--dummy.coach-shot--wide { aspect-ratio: 16 / 9; }

/* ── HERO / DOSSIER ─────────────────────────────────────────────── */
.coach-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: start;
}
@media (min-width: 900px) {
    .coach-hero { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-12); }
}
.coach-hero__id {
    font-family: var(--font-structure);
    font-weight: var(--weight-extrabold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--accent-link);
    margin-bottom: var(--space-2);
}
.coach-hero__name {
    font-family: var(--font-display);
    font-size: clamp(var(--text-2xl), 6vw, 4rem);
    line-height: 1.0;
    letter-spacing: -0.01em;
    margin: 0;
}
.coach-hero__oneliner {
    font-family: var(--font-display);
    font-size: clamp(var(--text-lg), 2.4vw, var(--text-2xl));
    line-height: 1.25;
    color: var(--accent-link);
    max-width: 26ch;
    margin: var(--space-4) 0 0;
}

/* The dossier — reuses .spec-row but SUBTLE: a quiet precise data block, not
   body-sized. Smaller label + value, tighter rhythm, narrower label column. */
.coach-dossier { margin-top: var(--space-5, 40px); border-top: var(--border-hairline); }
.coach-dossier .spec-row {
    padding-block: var(--space-1-25);
    grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr);
    gap: var(--space-3);
}
.coach-dossier .spec-row__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-meta);
}
.coach-dossier .spec-row__value {
    font-size: var(--text-sm);
    line-height: var(--lh-caption);
}

.coach-hero__cta { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: center; }

/* ── SLIM CHIPS — Peter's note: smaller, more elegant, less high. ──
   Override of .chip: hairline outline, tighter vertical padding, no fill. */
.section-coach-focus .chip,
.coach-chip {
    padding: var(--space-0-5) var(--space-2);
    font-size: var(--text-xs);
    font-family: var(--font-ui);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-meta);
    background: transparent;
    border: var(--border-hairline);
    color: var(--ink-muted);
    line-height: 1.4;
}

/* ── PROVENANCE — the WW-native "how they're qualified" block. The visible
   trust signal: levels completed (level-circle kit) + certification line.
   This is WW's analogue of SJ's curation/peer-review provenance. */
.coach-levels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-4) 0 var(--space-3);
}
.coach-levels .level-circle--fill { box-shadow: var(--elevation-1); }
.coach-prov-note {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: var(--lh-caption);
}

/* ── GOOGLE REVIEWS — external, restrained. Corroborates the coach without
   star-mush. Pulls from the coach's Google Business Profile (integration:
   Places/Business Profile API → cached JSON; placeholder content until wired). */
.gscore { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.gscore__mark {
    font-family: var(--font-structure);
    font-weight: var(--weight-extrabold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--ink-muted);
}
.gscore__stars { color: var(--accent-link); letter-spacing: 0.1em; }
.gscore__num { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--ink); }

.review-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-4);
}
@media (min-width: 760px) { .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
.review-quote { margin: 0; }
.review-quote p {
    font-family: var(--font-display);
    font-size: var(--text-base);
    line-height: 1.3;
    color: var(--ink);
    margin: 0;
}
.review-quote cite {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--font-structure);
    font-weight: var(--weight-extrabold);
    font-size: var(--text-xs);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--ink-muted);
}

/* ── WARM-DARK CLOSING BAND — the book-cover inspiration, rationed to ONE
   grounding section. The gradient finally gets to be the hero. ── */
.coach-cta-dark {
    background: var(--surface-deep, #20263F);   /* shared "blue anchor" token */
    color: var(--ink-on-deep, var(--ink-on-deep));
    border-radius: var(--radius-lg);
    text-align: center;
    padding: clamp(var(--space-8), 9vw, var(--space-16)) clamp(var(--space-4), 6vw, var(--space-12));
}
.coach-cta-dark__eyebrow {
    font-family: var(--font-structure);
    font-weight: var(--weight-extrabold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ink-on-deep-muted);
}
.coach-cta-dark__head {
    font-family: var(--font-display);
    font-size: clamp(var(--text-2xl), 6vw, 3.5rem);
    line-height: 1.05;
    margin: var(--space-2) auto var(--space-4);
    max-width: 18ch;
    background: var(--gradient-action);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.coach-cta-dark__sub {
    font-family: var(--font-text);
    font-size: var(--text-base);
    color: var(--ink-on-deep-body);
    max-width: 40ch;
    margin: 0 auto var(--space-6);
    line-height: var(--lh-body);
}
.coach-cta-dark .safety-line { color: var(--ink-on-deep-muted); }
/* Subtle, elegant button on dark — a low hairline-ghost, not a bright pill.
   The gradient already plays in the headline; the CTA stays quiet. */
.coach-cta-dark .btn-ghost-light {
    background: transparent;
    color: var(--ink-on-deep);
    border: 1px solid var(--ink-on-deep-faint);
    box-shadow: none;
    font-size: var(--text-sm);
    padding: var(--space-0-75) var(--space-4);   /* low + elegant; width kept */
}
.coach-cta-dark .btn-ghost-light:hover {
    border-color: var(--ink-on-deep);
    transform: translateY(-1px);
}
.coach-cta-dark .free-intro-link {
    display: inline-block;
    margin-top: var(--space-4);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--ink-on-deep-body);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.coach-cta-dark .free-intro-link:hover { color: var(--ink-on-deep); }