/* Block: case-study */
.case-study {
    /* Tone palette. Each modifier below only swaps these. */
    --case-study-bg: var(--tgc-cream);
    --case-study-fg: var(--tgc-ink);
    --case-study-muted: var(--tgc-ink-muted);
    --case-study-pill-bg: var(--theme-white);
    --case-study-pill-fg: var(--tgc-ink);
    --case-study-pill-border: var(--tgc-line-soft);
    --case-study-media-bg: var(--tgc-line-soft);

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border-radius: var(--tgc-radius);
    background-color: var(--case-study-bg);
    color: var(--case-study-fg);
}

/* Pale panels: dark type stays. */
.case-study--sky {
    --case-study-bg: #E7F5FF;
}

.case-study--green {
    --case-study-bg: #D9FCE3;
}

.case-study--violet-soft {
    --case-study-bg: var(--tgc-violet-soft);
}

/* Dark panels: type inverts. */
.case-study--ink {
    --case-study-bg: var(--tgc-ink);
    --case-study-fg: var(--theme-white);
    --case-study-muted: rgba(255, 255, 255, 0.82);
    --case-study-pill-bg: #CCCCCC;
    --case-study-pill-border: transparent;
}

.case-study--violet {
    --case-study-bg: var(--tgc-violet);
    --case-study-fg: var(--theme-white);
    --case-study-muted: rgba(255, 255, 255, 0.9);
    --case-study-pill-bg: var(--tgc-violet-soft);
    --case-study-pill-border: transparent;
}

.case-study--green-deep {
    --case-study-bg: #58A87E;
    --case-study-fg: var(--theme-white);
    --case-study-muted: rgba(255, 255, 255, 0.88);
    --case-study-pill-bg: #DEEEE5;
    --case-study-pill-border: transparent;
}

.case-study--media-left .case-study__media {
    order: 1;
}

.case-study--media-left .case-study__panel {
    order: 2;
}

.case-study__panel {
    display: flex;
    flex-direction: column;
    gap: calc(40 * var(--tgc-u));
    padding: calc(34 * var(--tgc-u)) calc(38 * var(--tgc-u)) calc(36 * var(--tgc-u)) calc(30 * var(--tgc-u));
}

.case-study__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
}

.case-study__tag {
    padding: 7px calc(13 * var(--tgc-u));
    border: 1px solid var(--case-study-pill-border);
    border-radius: calc(999 * var(--tgc-u));
    background-color: var(--case-study-pill-bg);
    color: var(--case-study-pill-fg);
    font-size: 9px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Tags sit at the top of the panel, the copy at the foot of it. */
.case-study__content {
    margin-top: auto;
}

.case-study__title {
    margin-bottom: calc(14 * var(--tgc-u));
    font-size: var(--tgc-text-body);
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
}

.case-study__text p {
    margin-bottom: calc(14 * var(--tgc-u));
    font-size: var(--tgc-text-ui);
    line-height: 1.8;
    color: var(--case-study-muted);
}

/* The opening line is the standfirst on every row in the designs. */
.case-study__text > p:first-child {
    font-weight: 600;
    color: var(--case-study-fg);
}

.case-study__text p:last-child {
    margin-bottom: 0;
}

.case-study__text ul,
.case-study__text ol {
    margin: 0 0 calc(14 * var(--tgc-u)) calc(18 * var(--tgc-u));
}

.case-study__text li {
    margin-bottom: 6px;
    font-size: var(--tgc-text-ui);
    line-height: 1.7;
    color: var(--case-study-muted);
}

.case-study__cta {
    margin-top: calc(22 * var(--tgc-u));
}

/*
 * The 21:20 ratio is a floor, not a fixed size: when the copy runs longer the
 * row grows and the image stretches with it to fill the panel's full height.
 * The explicit width keeps the ratio from resizing the column instead.
 */
.case-study__media {
    position: relative;
    align-self: stretch;
    width: 100%;
    aspect-ratio: 21 / 20;
    background-color: var(--case-study-media-bg);
}

.case-study__image,
.case-study__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.case-study__image {
    display: block;
    object-fit: cover;
}

/*
 * No project photography exists yet. The placeholder holds the exact footprint
 * a real screenshot will take, so dropping one in later moves nothing.
 */
.case-study__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: calc(24 * var(--tgc-u));
    box-shadow: inset 0 0 0 1px rgba(20, 22, 28, 0.06);
    text-align: center;
}

.case-study__placeholder-label {
    font-size: var(--tgc-text-body);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tgc-ink);
}

.case-study__placeholder-note {
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tgc-ink-muted);
}

@media (max-width: 900px) {
    .case-study {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Single column: the copy always leads, whichever side the media was on. */
    .case-study--media-left .case-study__media,
    .case-study--media-left .case-study__panel {
        order: 0;
    }

    .case-study__panel {
        gap: calc(24 * var(--tgc-u));
        padding: calc(26 * var(--tgc-u)) calc(24 * var(--tgc-u)) calc(30 * var(--tgc-u));
    }

    .case-study__content {
        margin-top: 0;
    }

    .case-study__media {
        aspect-ratio: 16 / 10;
    }
}