/* =============================================================================
   Count Stat Block
   /blocks/count-stat/count-stat.css
   Styled to match .ah-statbox — compact, understated, consistent with
   the existing card language across the site.
   ============================================================================= */

:root {
    --count-stat-accent : #ad3075;
}

/* Block wrapper */
.count-stat-block {
    background    : #fafafa;
    border        : 1.5px solid #f0f0f0;
    border-radius : 10px;
    padding       : 20px 18px;
    width         : 100%;
}

/* Number row */
.count-stat__number-wrap {
    display     : flex;
    align-items : baseline;
    gap         : 0.1em;
    line-height : 1;
}

.count-stat__number,
.count-stat__prefix,
.count-stat__suffix {
    font-family : 'Raleway', sans-serif;
    font-size   : 28px;
    font-weight : 800;
    color       : var(--count-stat-accent);
    line-height : 1;
}

/* Label */
.count-stat__label {
    color       : #999;
    margin-top  : 4px;
    line-height : 1.4;
}

/* Supporting text */
.count-stat__sub-text {
    color       : #bbb;
    margin-top  : 6px;
    line-height : 1.55;
}

/* Dark variant */
.count-stat-block--dark {
    background   : #1c1c1e;
    border-color : #2a2a2e;
}

.count-stat-block--dark .count-stat__label {
    color : rgba(255, 255, 255, 0.5);
}

.count-stat-block--dark .count-stat__sub-text {
    color : rgba(255, 255, 255, 0.35);
}

/* Accent variant */
.count-stat-block--accent {
    background   : var(--count-stat-accent);
    border-color : var(--count-stat-accent);
}

.count-stat-block--accent .count-stat__number,
.count-stat-block--accent .count-stat__prefix,
.count-stat-block--accent .count-stat__suffix {
    color : #fff;
}

.count-stat-block--accent .count-stat__label,
.count-stat-block--accent .count-stat__sub-text {
    color : rgba(255, 255, 255, 0.7);
}

/* Impact variant */
.count-stat-block--impact .count-stat__number,
.count-stat-block--impact .count-stat__prefix,
.count-stat-block--impact .count-stat__suffix {
    font-size: clamp(3.6rem, 5vw, 4rem);
}

@media (min-width: 769px){
    .count-stat-block--impact .count-stat__number,
    .count-stat-block--impact .count-stat__prefix,
    .count-stat-block--impact .count-stat__suffix {
        font-size : clamp(3.6rem, 6.5vw, 4rem);
    } 
}

.count-stat-block--impact .count-stat__label {
    margin-top : 8px;
}

.count-stat-block--impact .count-stat__sub-text {
    margin-top : 8px;
}