/* ==========================================================================
   CASE STUDIES   body.page-case-studies
   ==========================================================================
   Four bands, #case-a…#case-d (cream / ink alternating): a .cs-head over a
   `row split`, copy (.cs-col) left, the proof right — A and D a bar-compare,
   B a "what changed" list, C before/after panels. Then #testimonials.
   ========================================================================== */

body.page-case-studies {
    .hero__frame { --hero-frame-max: 77.8%; }

    /* Heading block with a rule under it, inset by the gutter (a border would
       overshoot the text) */
    .cs-head {
        position: relative;
        padding-bottom: 44px;
        margin-bottom: 45px;
        h2 { margin: 0; }
        &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: var(--rule-inset, var(--page-gutter));
            right: var(--rule-inset, var(--page-gutter));
            height: 0;
            border-top: 1px solid var(--hairline);
            pointer-events: none;
        }
    }

    /* Left column: labels, copy, a red note, the visual's label, the closing
       caption and the Download button */
    .cs-lbl {
        font-family: var(--type-body);
        font-weight: 700;
        font-size: clamp(1.05rem, 1.25vw, 1.1875rem);
        color: var(--heading);
        line-height: 1.3;
        margin: clamp(1.5rem, 2.6vw, 2.25rem) 0 6px;
        &:first-child { margin-top: 0; }
    }
    .cs-col p { margin: 0; color: var(--body); }
    .cs-note { margin: 0.8rem 0 0; font-size: 0.75rem; font-weight: 500; color: var(--red-800); line-height: 1.4; }
    .cs-vlabel { color: var(--heading); }
    .cs-cap { margin: 1.1rem 0 0; font-size: clamp(1rem, 1.1vw, 1.0625rem); font-weight: 600; color: #11161B; }
    .cs-dl { margin: clamp(1.5rem, 2.4vw, 2.5rem) 0 0; }

    /* the bar charts' closing line has no rule above it */
    .bar-compare .bc-note { border-top: 0; }
}

/* Bar labels are 700 on the light bands, 500 on the ink ones */
:is(#case-a, #case-c) .bc-label { font-weight: 700; }

/* The ink bands (B, D) invert the colours */
:is(#case-b, #case-d) {
    .cs-head::after { border-top-color: var(--hairline-on-dark); }
    .cs-head .eyebrow { color: var(--text-on-dark-dim); }
    .cs-lbl { color: #FFFFFF; }
    .cs-col p { color: var(--text-on-dark-dim); }
    .cs-vlabel { color: #9AA5B3; }
    .cs-cap { color: #FFFFFF; }
    .bar-compare {
        .bc-label,
        .bc-row--hi .bc-label,
        .bc-val,
        .bc-row--hi .bc-val { color: #FFFFFF; }
        .bc-row + .bc-row { border-top-color: var(--hairline-on-dark); }
        .bc-note { color: var(--text-on-dark-dim); }
    }
}

/* B: "what changed", a stacked list with a rule under its label */
#case-b {
    .cs-vlabel:has(+ .cs-changed) {
        padding-bottom: clamp(0.85rem, 1.4vw, 1.15rem);
        margin-bottom: clamp(0.85rem, 1.4vw, 1.15rem);
        border-bottom: 1px solid var(--hairline-on-dark);
    }
    .cs-changed {
        display: flex;
        flex-direction: column;
        .cs-item {
            padding: clamp(0.85rem, 1.4vw, 1.15rem) 0;
            & + .cs-item { border-top: 1px solid var(--hairline-on-dark); }
            &:first-child { padding-top: 0; }
        }
        h4 {
            font-family: var(--type-display); font-weight: 600;
            font-size: clamp(1.2rem, 1.5vw, 1.375rem);
            color: #FFFFFF; margin: 0 0 0.3em; line-height: 1.15;
        }
        p { margin: 0; font-size: 0.9375rem; color: var(--text-on-dark-dim); line-height: 1.5; }
    }
}

/* C: before/after plan-health panels */
#case-c {
    .cs-ba { display: flex; gap: clamp(0.9rem, 1.6vw, 1.4rem); align-items: start; }
    .cs-panel {
        flex: 1 1 0; min-width: 0;
        background: #FFFFFF;
        border: 1px solid var(--hairline);
        border-radius: 10px;
        padding: clamp(1rem, 1.6vw, 1.4rem);
    }
    .cs-ph {
        margin: 0 0 0.8rem;
        font-family: var(--type-body); font-weight: 600;
        font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase;
    }
    .cs-row {
        display: flex; justify-content: space-between; gap: 0.75rem;
        padding: 0.5rem 0; font-size: 0.875rem; line-height: 1.3;
        & + .cs-row { border-top: 1px solid var(--hairline); }
    }
    .cs-k { color: var(--text-muted); }
    .cs-v { font-weight: 600; text-align: right; white-space: nowrap; }
    /* Before reads lighter than After (both above WCAG AA) */
    .cs-panel--before :is(.cs-ph, .cs-v) { color: var(--text-muted); }
    .cs-panel--after {
        border-color: var(--prime);
        .cs-ph { color: var(--prime); }
        .cs-k { color: #072F5A; }
        .cs-v { color: #11161B; }
    }
}
@media only screen and (max-width: 600px) { #case-c .cs-ba { flex-direction: column; } }

/* In their words: photo avatars, left-aligned, a navy rule above each */
#testimonials {
    .tavatar { margin-inline: 0; }
    .tavatar--photo {
        padding: 0; background: none; overflow: hidden;
        img { width: 100%; height: 100%; object-fit: cover; display: block; }
    }
    .tname {
        margin: 0 0 0.5rem;
        font-family: var(--type-body); font-weight: 600;
        font-size: clamp(1.05rem, 1.2vw, 1.25rem);
        color: var(--red-800); line-height: 1.3;
    }
    blockquote p { font-size: clamp(0.95rem, 1.05vw, 1rem); }
    .testimonial-grid > * {
        border-top: 1px solid var(--prime);
        padding-top: clamp(1rem, 1.2vw, 1.4375rem);
    }
}