/* ================================================================
 * Block: Case cards — case_cards
 * Design: Figma "GS - LP Design - Service" §9 CASES
 * Tokens: assets/css/tokens.css only (gaps listed in build report).
 * ================================================================ */

.block-case-cards {
    /* Block-local tokens (values from Figma; gaps listed in build report) */
    --eyebrow-line-w: 33px;
    --eyebrow-line-h: 2px;
    --eyebrow-fs: 20px;
    --eyebrow-lh: 24px;
    --case-heading-max: 720px;
    --case-card-pad: 32px;
    --case-card-border: 1px solid rgba(26, 31, 58, 0.10);
    --case-tag-border: 1px solid rgba(26, 31, 58, 0.30);
    --case-desc-color: rgba(26, 31, 58, 0.75);
    --fs-case-title: 20px;
    --fs-case-body: 16px;
    --case-grid-gap: 32px;

    background-color: var(--color-white);
}

.block-case-cards__container {
    max-width: calc(var(--container-service) + 2 * var(--container-pad));
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.block-case-cards__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-15);
    max-width: var(--case-heading-max);
}

.block-case-cards__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--eyebrow-fs);
    font-weight: var(--fw-light);
    line-height: var(--eyebrow-lh);
    text-transform: uppercase;
    color: var(--color-whimsical-blue);
}

.block-case-cards__eyebrow::before {
    content: '';
    flex-shrink: 0;
    width: var(--eyebrow-line-w);
    height: var(--eyebrow-line-h);
    background-color: var(--color-whimsical-blue);
}

.block-case-cards__heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-display-50);
    font-weight: var(--fw-heading);
    line-height: var(--lh-heading);
    color: var(--color-yankees-blue);
}

.block-case-cards__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--case-grid-gap);
    margin-top: calc(var(--case-grid-gap) + var(--space-4));
}

.block-case-cards__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--case-card-pad);
    background-color: var(--color-cultured);
    border: var(--case-card-border);
    border-radius: var(--radius-lg);
}

.block-case-cards__client {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--eyebrow-fs);
    font-weight: var(--fw-light);
    line-height: var(--eyebrow-lh);
    text-transform: uppercase;
    color: var(--color-whimsical-blue);
}

.block-case-cards__card-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.block-case-cards__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-case-title);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h3);
    color: var(--color-yankees-blue);
}

.block-case-cards__metric {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-case-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-stat-label);
    color: var(--color-yankees-blue);
}

.block-case-cards__desc {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-case-body);
    font-weight: var(--fw-light);
    line-height: var(--lh-relaxed);
    color: var(--case-desc-color);
}

.block-case-cards__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.block-case-cards__tag {
    padding: var(--pill-pad-y) var(--pill-pad-x);
    border: var(--case-tag-border);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--fs-case-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-stat-label);
    color: var(--color-yankees-blue);
}

.block-case-cards__link,
.block-case-cards__bottom-link {
    font-family: var(--font-body);
    font-size: var(--fs-case-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-stat-label);
    color: var(--color-pitch-violet);
    text-decoration: none;
}

.block-case-cards__bottom-link {
    display: inline-block;
    margin-top: var(--case-grid-gap);
}

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

@media (min-width: 1100px) {
    .block-case-cards__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}