/* CBFGSStatsBand - spec CSS 237-243. .ti and .ck live in CBFGSShared/cbf-gs.css. */

/* Compound selector - see the note in CBFGSTrustStrip/module.css about load order. */
.cbf-gs.cbf-gs-statsband { background: var(--ink); color: #fff; padding: 60px 0; }

/* The spec drew four fixed columns. Editors can add any number of stats, and three in a
   four-column grid left an empty cell and a band that read as lopsided. Centred and wrapping
   instead, so any count sits square - which is what four evenly spaced columns did anyway. */
.cbf-gs-statsband .grid4 {
    max-width: 1000px; margin: 0 auto; padding: 0 20px;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 20px; text-align: center;
}
.cbf-gs-statsband .grid4 > div { flex: 1 1 180px; max-width: 250px; }

@media (max-width: 640px) {
    .cbf-gs-statsband .grid4 { gap: 32px 20px; }
    /* Two up rather than one, so the band does not become a tall column of numbers. */
    .cbf-gs-statsband .grid4 > div { flex: 1 1 40%; max-width: none; }
}

.cbf-gs-statsband .num {
    font-family: "Montserrat"; font-weight: 800;
    font-size: clamp(30px, 4.5vw, 46px); color: var(--gold);
}
.cbf-gs-statsband .lab2 { font-size: 13px; color: #cfc3dd; margin-top: 4px; }

.cbf-gs-statsband .badges-row {
    max-width: 1000px; margin: 34px auto 0; padding: 0 20px;
    display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center;
    font-size: 12.5px; color: #cfc3dd;
}
.cbf-gs-statsband .badges-row b { color: #fff; }