/* ============================================================
   Location Spoke — Stats
   File: assets/css/spoke/spoke-stats.css
   Scope: .spoke-stats__* classes only
   Figma: node 2194:202 — cream section holding a navy rounded
   pill band with up to 4 stat pairs (large value + small label).
   Uses --spoke-* tokens from spoke-base.css. Desktop width 1440px.
   ============================================================ */

.spoke-stats {
    background: var(--spoke-cream);
    padding: 0 0 50px;
}

.spoke-stats__band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spoke-gap-cards);
    background: var(--spoke-navy);
    border-radius: var(--spoke-radius-pill);
    padding: 50px 100px;
}

.spoke-stats__item {
    text-align: left;
}

.spoke-stats__value {
    font-family: var(--spoke-font-serif);
    font-size: 48px;
    font-weight: 400;
    /* 48px * 1.3333 = 64px line box, matching the Figma text-frame height. */
    line-height: 1.3333;
    letter-spacing: -0.04em;
    color: var(--spoke-cream);
    /* Figma centres each value over its label; the item hugs the label width
       in the desktop flex row, so text-align does the work. Reset below 1024px
       where the items stretch to a fixed column width. */
    text-align: center;
    margin-bottom: 5px;
}

.spoke-stats__label {
    font-family: var(--spoke-font-sans);
    font-size: 16px;
    font-weight: 500;
    line-height: 22.5px;
    letter-spacing: -0.04em;
    color: var(--spoke-stat-label);
}


/* ============================
   RESPONSIVE — STATS
   ============================ */

@media (max-width: 1024px) {
    .spoke-stats__band {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 32px 48px;
        padding: 40px 48px;
    }

    .spoke-stats__item {
        flex: 0 0 calc(50% - 24px);
    }

    .spoke-stats__value {
        font-size: 40px;
        /* Items become fixed-width columns here, so centring the value would
           no longer align it to the label. Fall back to left. */
        text-align: left;
    }
}

@media (max-width: 768px) {
    .spoke-stats {
        padding: 0 0 36px;
    }

    .spoke-stats__band {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        column-gap: 24px;
        row-gap: 28px;
        padding: 32px 24px;
    }

    .spoke-stats__item {
        flex: none;
        min-width: 0;
    }

    .spoke-stats__value {
        font-size: 32px;
        margin-bottom: 8px;
    }

    .spoke-stats__label {
        font-size: 15px;
    }
}