/*
 * Block: Stats Strip (gep/stats-strip)
 * Author: Greta Eline Poclen
 *
 * Layout: horizontal row, up to 6 equal-width columns inside the site container.
 * On mobile: 2 columns per row, last item centred if odd count.
 *
 * Modes:
 *   .gep-stats-strip--filled   — coloured background, white numbers.
 *   .gep-stats-strip--outlined — transparent bg, coloured border + numbers.
 *
 * --gep-stats-color is set inline by render.php from the ACF colour picker.
 * Labels are always WAF Blue (#101C4E).
 */

/* ── Wrapper — base ──────────────────────────────────────── */

.gep-stats-strip {
    width: 100%;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* ── Filled mode ─────────────────────────────────────────── */

.gep-stats-strip--filled {
    background-color: var( --gep-stats-color, #008FDB );
}

.gep-stats-strip--filled .gep-stats-strip__number {
    color: #ffffff;
}

/* ── Outlined mode ───────────────────────────────────────── */

.gep-stats-strip--outlined {
    background-color: transparent;
}

/*
 * In outlined mode the border sits on the container, not the full-width
 * wrapper, so it aligns with the content edges.
 * Only top and bottom — no vertical lines.
 */
.gep-stats-strip--outlined .gep-stats-strip__container {
    border-top: 2px solid var( --gep-stats-color, #008FDB );
    border-bottom: 2px solid var( --gep-stats-color, #008FDB );
    padding-top: 1.5rem;      /* breathing room between content and border */
    padding-bottom: 1.5rem;
}

.gep-stats-strip--outlined .gep-stats-strip__number {
    color: var( --gep-stats-color, #008FDB );
}

/* ── Container — matches the site max-width pattern ─────── */

.gep-stats-strip__container {
    max-width: 1306px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 2rem;
    padding-left: 2rem;
}

/* ── Grid ────────────────────────────────────────────────── */

.gep-stats-strip__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 1.25rem;
}

/* ── Individual stat item ────────────────────────────────── */

.gep-stats-strip__item {
    /* Each item takes an equal share; shrinks gracefully when fewer than 6 */
    flex: 1 1 0;
    min-width: 0;              /* prevents flex blowout on long numbers */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.15rem;
}

/* ── Number — colour set per-mode above ──────────────────── */

.gep-stats-strip__number {
    font-size: clamp( 2.5rem, 4.5vw, 3.75rem );
    font-weight: 700;
    line-height: 1;
    margin: 0;
    letter-spacing: -0.01em;
}

/* ── Label — always WAF Blue ─────────────────────────────── */

.gep-stats-strip__label {
    font-size: 0.8125rem;      /* ~13px, up from 11px */
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #101C4E;            /* --waf-blue, fixed for contrast in both modes */
    margin: 0;
    line-height: 1.4;
}

/* ── Empty state (editor only) ───────────────────────────── */

.gep-stats-strip__empty {
    text-align: center;
    padding: 1rem;
    font-style: italic;
    color: #666;
}

/* ── Mobile: 2 columns, last item centred if odd ─────────── */

@media ( max-width: 767px ) {

    .gep-stats-strip {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .gep-stats-strip__grid {
        display: grid;
        grid-template-columns: repeat( 2, 1fr );
        gap: 2rem 1.25rem;
        justify-items: center;
    }

    .gep-stats-strip__item {
        width: 100%;
    }

    /*
     * If the total count is odd, the last child spans both columns
     * so it sits centred on its own row.
     * When the count is even the last item fills its own cell naturally
     * and the max-width cap has no visible effect.
     */
    .gep-stats-strip__item:last-child:nth-child( odd ) {
        grid-column: 1 / -1;
        max-width: 50%;        /* keeps it the same width as a single column */
    }
}