/* =========================================================================
   Coach Landing — /coaches/
   Mobile first (390px). Breakpoints: 768px, 1024px.
   All tokens from design-system.css. Mirrors home.css conventions —
   alternating section backgrounds (--color-bg / --color-surface), Barlow
   Condensed uppercase headings, DM Sans body, --space-16 / --space-20
   section padding.
   ========================================================================= */

/* ── Section 1: Hero ────────────────────────────────────────────────────── */

/* Theme-agnostic visual block — recruitment photo + 78% black overlay below.
   Same layered-backgrounds pattern as .wf-home-hero. Pin local color tokens
   so the [data-theme] toggle doesn't flip the headline + subline to dark
   text on the dark overlay. background-color is the fallback if the JPG
   404s. min-height capped at 70vh mobile / 80vh desktop so the next section
   stays in view on first paint. */
.wf-coaches-hero {
    --color-text:       #E8EDF5;
    --color-text-muted: #8892A4;

    position:            relative;
    display:             flex;
    align-items:         center;
    justify-content:     center;
    min-height:          70vh;
    padding:             var(--space-16) 0;
    background-color:    var(--color-bg);
    background-image:    url('../images/coach-join-bg.jpg');
    background-size:     cover;
    background-position: center;
}

.wf-coaches-hero::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     rgba(0, 0, 0, 0.78);
    z-index:        0;
    pointer-events: none;
}

.wf-coaches-hero__content {
    position:      relative;  /* sit above the ::before overlay */
    z-index:       1;
    text-align:    center;
    max-width:     720px;
    margin-inline: auto;
}

.wf-coaches-hero__headline {
    font-family:    var(--font-heading);
    font-size:      var(--text-4xl);
    font-weight:    800;
    text-transform: uppercase;
    color:          var(--color-text);
    letter-spacing: 0.02em;
    line-height:    1.1;
    margin:         0 0 var(--space-4);
}

.wf-coaches-hero__subline {
    font-size:     var(--text-lg);
    color:         var(--color-text-muted);
    line-height:   1.5;
    margin:        0 0 var(--space-8);
    max-width:     52ch;
    margin-inline: auto;
}

.wf-coaches-hero__cta {
    font-size: var(--text-lg);
    padding:   var(--space-4) var(--space-8);
}

/* ── Section 2: What You Get ───────────────────────────────────────────── */

.wf-coaches-features {
    padding:    var(--space-16) 0;
    background: var(--color-surface);
}

.wf-coaches-features__heading {
    font-family:    var(--font-heading);
    font-size:      var(--text-3xl);
    font-weight:    700;
    text-transform: uppercase;
    color:          var(--color-text);
    text-align:     center;
    margin:         0 0 var(--space-10);
}

.wf-coaches-features__grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--space-6);
}

.wf-coaches-feature {
    background:    var(--color-surface-2);
    padding:       var(--space-6);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.wf-coaches-feature__title {
    font-family:    var(--font-heading);
    font-size:      var(--text-xl);
    font-weight:    700;
    text-transform: uppercase;
    color:          var(--color-primary);
    letter-spacing: 0.02em;
    margin:         0 0 var(--space-3);
}

.wf-coaches-feature__text {
    font-size:   var(--text-base);
    color:       var(--color-text-muted);
    line-height: 1.6;
    margin:      0;
}

/* ── Section 3: Closing CTA ────────────────────────────────────────────── */

.wf-coaches-closing {
    padding:    var(--space-20) 0;
    background: var(--color-surface-2);
}

.wf-coaches-closing .wf-container {
    text-align: center;
}

.wf-coaches-closing__headline {
    font-family:    var(--font-heading);
    font-size:      var(--text-3xl);
    font-weight:    700;
    text-transform: uppercase;
    color:          var(--color-text);
    line-height:    1.2;
    margin:         0 0 var(--space-8);
    max-width:      30ch;
    margin-inline:  auto;
}

.wf-coaches-closing__cta {
    font-size: var(--text-lg);
    padding:   var(--space-4) var(--space-8);
}

/* ── Desktop ──────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
    .wf-coaches-hero {
        min-height: 80vh;
        padding:    var(--space-24) 0;
    }

    .wf-coaches-hero__headline {
        font-size: var(--text-6xl);
    }

    .wf-coaches-features__grid {
        grid-template-columns: 1fr 1fr;
        gap:                   var(--space-6);
    }

    .wf-coaches-closing__headline {
        font-size: var(--text-4xl);
    }
}