/* ============================================================================
   CASE STUDY — editorial layout for /cases/*.html
   Reuses base + components + section tokens; adds case-specific pieces.
   ============================================================================ */

/* Breadcrumb */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-body-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

    .breadcrumb a {
        color: var(--color-text-secondary);
        transition: color var(--dur-base);
    }

        .breadcrumb a:hover {
            color: var(--color-primary);
        }

    .breadcrumb svg {
        width: 14px;
        height: 14px;
        opacity: .6;
    }

/* Hero */
.case-hero {
    padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem) clamp(2rem, 1rem + 4vw, 3.5rem);
}

.case-hero__head {
    max-width: 56rem;
}

.case-hero h1 {
    font-size: var(--fs-h1);
    margin: var(--space-4) 0 var(--space-5);
}

.case-hero__sub {
    font-size: var(--fs-body-lg);
    color: var(--color-text-secondary);
    max-width: 50ch;
}

.case-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-top: var(--space-10);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}

    .case-meta div {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .case-meta dt, .case-meta .k {
        font-size: var(--fs-caption);
        font-weight: var(--fw-semibold);
        letter-spacing: var(--ls-wider);
        text-transform: uppercase;
        color: var(--color-text-muted);
    }

    .case-meta dd, .case-meta .v {
        font-weight: var(--fw-semibold);
        color: var(--color-text-strong);
    }

/* Placeholder media */
.media-ph {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border);
    background: linear-gradient(135deg, var(--blue-100), var(--blue-50));
    color: var(--blue-700);
    overflow: hidden;
}

    .media-ph::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(120% 120% at 80% 10%, rgba(18,90,240,.18), transparent 60%);
    }

.media-ph__label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
}

    .media-ph__label svg {
        width: 18px;
        height: 18px;
    }

.case-hero .media-ph {
    margin-top: var(--space-10);
}

/* ---------------------------------------------------------------------------
   SPLIT CASE LAYOUT — full-width head, then sticky brief (left) + gallery (right)
   --------------------------------------------------------------------------- */
/* Full-width head: breadcrumb, title, description */
.case-head {
    padding-block: clamp(2.5rem, 1.5rem + 5vw, 4.5rem) var(--space-10);
}

.case-head__inner {
    max-width: 56rem;
}

.case-head .breadcrumb {
    margin-bottom: var(--space-6);
}

.case-head h1 {
    font-size: var(--fs-h1);
    margin: var(--space-3) 0 var(--space-5);
}

.case-head__lede {
    font-size: var(--fs-body-lg);
    color: var(--color-text-secondary);
    max-width: 58ch;
}

.case-split {
    padding-block: 0 var(--space-20);
}

.case-split__inner {
    display: grid;
    gap: var(--space-10);
    align-items: start;
}

@media (min-width: 960px) {
    .case-split__inner {
        grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
        gap: var(--space-16);
    }
    /* Sticky shell: the brief scrolls internally, the CTA stays pinned to the bottom
       so it is reachable at any viewport height. */
    .case-split__aside {
        position: sticky;
        top: calc(var(--header-h) + var(--space-6));
        max-height: calc(100dvh - var(--header-h) - var(--space-16));
        display: flex;
        flex-direction: column;
    }

    .case-split__scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--color-border-strong) transparent;
        padding-right: var(--space-3);
    }

        .case-split__scroll::-webkit-scrollbar {
            width: 6px;
        }

        .case-split__scroll::-webkit-scrollbar-thumb {
            background: var(--color-border-strong);
            border-radius: var(--radius-pill);
        }

        .case-split__scroll::-webkit-scrollbar-track {
            background: transparent;
        }

    .case-split__cta {
        flex: none;
        margin-top: 0;
        padding-top: var(--space-5);
        border-top: 1px solid var(--color-border);
    }
}

/* Brief column — meta sits flush at the top, so it drops the shared divider */
.case-split__aside .case-meta {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.case-meta--stack {
    flex-direction: column;
    gap: var(--space-3);
}

    .case-meta--stack div {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-4);
    }

    .case-meta--stack dd {
        text-align: right;
    }

.case-brief {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.case-brief__item h2 {
    font-family: var(--font-body);
    font-size: var(--fs-overline);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.case-brief__item p {
    color: var(--color-text-secondary);
}

.case-split__cta {
    margin-top: var(--space-8);
}

/* Gallery column */
.case-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.case-gallery__label {
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.case-gallery__stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.case-gallery__grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(2, 1fr);
}

.case-shot {
    display: block;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

    .case-shot:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
    }

    .case-shot img {
        display: block;
        width: 100%;
        height: auto;
    }
/* Phone screens: crop to a phone-shaped frame so the column stays scannable */
.case-shot--phone img {
    aspect-ratio: 9 / 16;
    object-fit: cover;
    object-position: top center;
}

.case-shot__caption {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--fs-body-sm);
    color: var(--color-text-muted);
}

/* Generic prose column */
.prose {
    max-width: var(--container-narrow);
}

.prose-lead {
    font-size: var(--fs-h4);
    font-weight: var(--fw-medium);
    color: var(--color-text-strong);
    font-family: var(--font-heading);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
}

/* Info cards (context: problem / audience / goal) */
.info-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
}

    .info-card h3 {
        font-size: var(--fs-h5);
        margin-bottom: var(--space-3);
    }

    .info-card p {
        color: var(--color-text-secondary);
    }

/* Numbered steps (approach) */
.steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: 52rem;
}

.step {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
}

.step__num {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg);
    background: var(--color-primary-subtle);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
}

.step h3 {
    font-size: var(--fs-h5);
    margin-bottom: var(--space-1);
}

.step p {
    color: var(--color-text-secondary);
}

/* Visuals */
.case-visuals {
    display: grid;
    gap: var(--space-8);
}

    .case-visuals figure {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        margin: 0;
    }

    .case-visuals figcaption {
        font-size: var(--fs-body-sm);
        color: var(--color-text-muted);
    }

/* Outcome */
.results {
    display: grid;
    gap: var(--space-4);
    max-width: 46rem;
}

    .results li {
        position: relative;
        padding-left: var(--space-8);
        color: var(--color-text);
    }

        .results li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 2px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--color-primary-subtle);
        }

        .results li svg {
            position: absolute;
            left: 4px;
            top: 6px;
            width: 14px;
            height: 14px;
            color: var(--color-primary);
        }

.impact {
    margin-top: var(--space-10);
    padding: var(--space-8);
    background: var(--color-primary-subtle);
    border-radius: var(--radius-2xl);
}

    .impact p {
        font-family: var(--font-heading);
        font-weight: var(--fw-medium);
        font-size: var(--fs-h5);
        color: var(--blue-800);
        line-height: var(--lh-snug);
    }

/* Learnings */
.learnings {
    display: grid;
    gap: var(--space-4);
    max-width: 46rem;
    counter-reset: l;
}

    .learnings li {
        position: relative;
        padding-left: var(--space-10);
        color: var(--color-text-secondary);
    }

        .learnings li::before {
            counter-increment: l;
            content: counter(l, decimal-leading-zero);
            position: absolute;
            left: 0;
            top: -2px;
            font-family: var(--font-heading);
            font-weight: var(--fw-bold);
            color: var(--color-primary);
        }

/* Final CTA */
.case-cta {
    text-align: center;
}

    .case-cta .band-cta {
        margin-top: 0;
    }

/* Layout helpers */
.section__head--left {
    text-align: left;
    margin-inline: 0;
    max-width: 100%;
}

    .section__head--left p {
        margin-inline: 0;
    }

.eyebrow--muted {
    color: var(--color-text-muted);
}

.mt-10 {
    margin-top: var(--space-10);
}

.contact__ctas--center {
    justify-content: center;
}

@media (min-width: 720px) {
    .case-visuals--2 {
        grid-template-columns: repeat(2, 1fr);
    }
}