/**
 * Stats Block Component
 *
 * All color and style values driven by CSS variables
 * stamped on :root via ACF options in stats-block.php.
 *
 * @package Blueprint
 */

/* =============================================================================
   STAT BLOCk
   =============================================================================
*/

/* STAT BLOCk -- BLOCK WRAPPER */

.rw-stats-block {
    width: 100%;
    padding: var( --rw-stats-padding-top, 60px ) var( --rw-stats-padding-right, 20px ) var( --rw-stats-padding-bottom, 60px ) var( --rw-stats-padding-left, 20px );
    background: var( --rw-stats-bg-color, transparent );
}

.rw-stats-block-inner {
    max-width: 1260px;
    margin: auto;
}


/* STAT BLOCk -- HEADING */

.rw-stats-block__heading {
    text-align: center;
    margin-bottom: 48px;
}

.rw-stats-block__title {
    font-size: var( --rw-stats-title-font-size, clamp( 1.1rem, 2vw, 1.35rem ) );
    color: var( --rw-stats-title-color, inherit );
    margin: 0;
}

.rw-stats-block__title em {
    font-style: italic;
}


/* STAT BLOCk -- GRID */

.rw-stats-block__grid {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 40px 32px;
    width: 100%;
}

/* Grid column variants — driven by PHP stat count */
.rw-stats-block__grid.stats-grid--1 { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; }
.rw-stats-block__grid.stats-grid--2 { grid-template-columns: repeat( 2, 1fr ); }
.rw-stats-block__grid.stats-grid--3 { grid-template-columns: repeat( 3, 1fr ); }
.rw-stats-block__grid.stats-grid--4 { grid-template-columns: repeat( 4, 1fr ); }

/* 5 stats — grid of 3, last 2 centered using :has() */
.rw-stats-block__grid.stats-grid--3:has( .rw-stats-block__stat:nth-child(5):last-child ) .rw-stats-block__stat:nth-child(4) {
    grid-column: 1 / 2;
    margin-left: auto;
}

.rw-stats-block__grid.stats-grid--3:has( .rw-stats-block__stat:nth-child(5):last-child ) .rw-stats-block__stat:nth-child(5) {
    grid-column: 2 / 3;
    margin-right: auto;
}


/* STAT BLOCk -- STAT ITEM */

.rw-stats-block__stat {
    text-align: center;
    opacity: 0;
    transform: translateY( 16px );
    transition:
            opacity  0.5s ease calc( var( --stagger-delay, 0ms ) ),
            transform 0.5s ease calc( var( --stagger-delay, 0ms ) );
}

/* Triggered by JS Intersection Observer */
.rw-stats-block__stat.is-visible {
    opacity: 1;
    transform: translateY( 0 );
}

/* Respect reduced motion */
@media ( prefers-reduced-motion: reduce ) {
    .rw-stats-block__stat {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* STAT BLOCk -- VALUE ROW (prefix + number + suffix) */

.rw-stats-block__value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    line-height: 1;
    margin-bottom: 12px;
}

.rw-stats-block__number {
    font-size: var( --rw-stats-number-font-size, clamp( 2.5rem, 5vw, 4rem ) );
    color: var( --rw-stats-number-color, inherit );
}

.rw-stats-block__prefix {
    font-size: var( --rw-stats-prefix-font-size, clamp( 1.5rem, 3vw, 2.25rem ) );
    color: var( --rw-stats-prefix-color, inherit );
}

.rw-stats-block__suffix {
    font-size: var( --rw-stats-suffix-font-size, clamp( 1.5rem, 3vw, 2.25rem ) );
    color: var( --rw-stats-suffix-color, inherit );
}


/* STAT BLOCk -- LABEL */

.rw-stats-block__label {
    font-size: var( --rw-stats-label-font-size, clamp( 0.8rem, 1.2vw, 0.9rem ) );
    color: var( --rw-stats-label-color, inherit );
    margin: 0;
}


/* STAT BLOCk -- RESPONSIVE */

@media ( max-width: 1024px ) {
    .rw-stats-block__grid.stats-grid--4 {
        grid-template-columns: repeat( 2, 1fr );
    }
}

@media ( max-width: 768px ) {
    .rw-stats-block__grid.stats-grid--2,
    .rw-stats-block__grid.stats-grid--3,
    .rw-stats-block__grid.stats-grid--4 {
        grid-template-columns: repeat( 2, 1fr );
    }

    /* Reset 5-item centering on tablet */
    .rw-stats-block__grid.stats-grid--3:has( .rw-stats-block__stat:nth-child(5):last-child ) .rw-stats-block__stat:nth-child(4),
    .rw-stats-block__grid.stats-grid--3:has( .rw-stats-block__stat:nth-child(5):last-child ) .rw-stats-block__stat:nth-child(5) {
        grid-column: auto;
        margin: 0;
    }
}

@media ( max-width: 480px ) {
    .rw-stats-block__grid.stats-grid--2,
    .rw-stats-block__grid.stats-grid--3,
    .rw-stats-block__grid.stats-grid--4 {
        grid-template-columns: 1fr;
    }
}