/**
 * Stat Group block. Self-contained styles.
 * Colors reference the brand tokens in css/brand-tokens.css (hex noted inline).
 * Always 3 columns: the gap, padding and font shrink so it never wraps to 2+1.
 */

.stat-group {
    padding-top: 16px;
    padding-bottom: 32px;
}

.stat-group__items {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* always three columns */
    gap: 20px;                              /* min space between stats */
}

.stat-item {
    display: flex;
    align-items: stretch;
    gap: clamp(8px, 2.2vw, 36px); /* divider-to-content, shrinks on small screens */
    min-width: 0;
}

.stat-item__divider {
    flex: 0 0 2px;
    align-self: stretch;
    background-color: var(--kipu-divider); /* #B5B9FF */
}

.stat-item__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.stat-item__value {
    margin: 0;
    color: var(--kipu-brand-purple); /* #6230C2 */
    font-weight: 800;
    font-size: clamp(13px, 4vw, 36px); /* scales down to keep three columns */
    line-height: 1.15;
    letter-spacing: -0.04em;
    white-space: nowrap;
}

.stat-item__label {
    margin: 0;
    color: var(--kipu-accent-purple); /* #8B5CF6 */
    font-weight: 700;
    font-size: clamp(11px, 2.6vw, 15.5px);
}

/* Center the stat group (start one breakpoint earlier than the hero's lg switch). */
@media (min-width: 768px) {
    .stat-group__items {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 992px) {
    .stat-group {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}