/* ====================================================================
   GPDC shared components — Transparency + Training
   --------------------------------------------------------------------
   Deliberately a separate file: the apex domain (gapubdef.org) serves a
   long-cached css/styles.css and ignores the ?v= query string, so newly
   added rules there can take a year to appear. A fresh path has no cached
   object at the edge, so it is served immediately on every hostname.
   ==================================================================== */
/* ==================== BY THE NUMBERS / OUR IMPACT ====================
   Shared page-pair switcher + headline stat band. Used by by-the-numbers.html
   and our-impact.html, so these live here rather than being duplicated page-local.
   NOTE: deliberately NOT using .number/.label — initAnimatedStats() in js/main.js
   auto-animates those and cannot parse a currency value like $142.9M. */
.num-tabs {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    /* matches the blocks above and below so no strip of page background shows through */
    background: var(--bg-white);
    padding: 2.5rem 1.5rem 0;
}

.num-tab {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.65rem 1.5rem;
    border-radius: 50px;
    border: 1.5px solid var(--border-light);
    background: var(--bg-white);
    color: var(--text-medium);
    font-family: 'Manrope', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}

.num-tab:hover { color: var(--primary); border-color: var(--primary); }

.num-tab.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--bg-white);
}

/* Headline figures: editorial band on the page surface, hairline column rules,
   one burnt-orange accent. Deliberately not a solid colour slab. */
.num-stats { background: var(--bg-white); padding: clamp(2.5rem, 4vw, 3.5rem) 0; border-bottom: 1px solid var(--border-light); }

.num-stats-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.num-stat { padding: 0 clamp(1rem, 2.2vw, 2rem); border-left: 1px solid var(--border-light); }
.num-stat:first-child { border-left: 0; padding-left: 0; }

.num-stat-v {
    font-family: 'Ubuntu', sans-serif;
    font-size: clamp(1.875rem, 3.2vw, 2.75rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text-dark);
    font-variant-numeric: tabular-nums;
}

.num-stat:first-child .num-stat-v { color: var(--primary); }

.num-stat-l {
    margin-top: 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: var(--text-light);
}

@media (max-width: 860px) {
    .num-stats-inner { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
    .num-stat:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 460px) {
    .num-stats-inner { grid-template-columns: 1fr; row-gap: 1.5rem; }
    .num-stat { border-left: 0; padding-left: 0; }
}

/* ==================== CALLOUT ====================
   Brand callout for a key takeaway — the one conclusion a reader should leave with.
   White card + hairline border like .values-card, with a single burnt-orange accent
   and a Ubuntu statement line. Use sparingly: at most one per section. */
.gpdc-callout {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg, 16px);
    padding: 1.75rem 2rem;
    box-shadow: var(--shadow-sm);
    margin: 2rem 0 0;
}

.gpdc-callout__label {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.gpdc-callout__text {
    font-family: 'Ubuntu', sans-serif;
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    line-height: 1.6;
    color: var(--text-dark);
    margin: 0;
}

.gpdc-callout__text strong { font-weight: 700; }

.gpdc-callout__foot {
    margin: 0.9rem 0 0;
    font-family: 'Manrope', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--text-light);
}

@media (max-width: 700px) { .gpdc-callout { padding: 1.5rem 1.25rem; } }