/* ==========================================================================
   "What your giving is doing" — 4 slim image tiles (left) with the
   stat baked into each tile, single progress ring (right).
   Black / white / green only — no orange.
   ========================================================================== */

.smrs-stats-section {
    /* Same confirmed cause and fix as .smrs-hero — WordPress's Group
       block forces max-width:1200px + margin-left:0 !important onto
       any plain (non-alignfull) child, capping this section the same
       way it capped the hero. Matching !important (this stylesheet
       loads after WordPress's inline styles, so with equal
       specificity ours wins) and removing the cap fixes it the same
       way. */
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background: #FAFAF8;
    padding: 90px 32px;
}

.smrs-stats-inner {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 60px;
    align-items: center;
}

/* ---------- Left: tiles ---------- */

.smrs-stats-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    height: 520px;
}

.smrs-tile {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    filter: grayscale(1);
}

.smrs-tile-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transition: transform 0.6s ease;
}

.smrs-tile:hover .smrs-tile-bg {
    transform: scale(1.06);
}

/* Placeholder tile (no photo yet) — solid dark fill instead of an image */
.smrs-tile--placeholder .smrs-tile-bg {
    background-image: none;
    background: linear-gradient(160deg, #171717 0%, #0C4143 140%);
}

.smrs-tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.78) 100%);
}

.smrs-tile-stat {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px 16px 22px;

    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.smrs-stats-section.is-visible .smrs-tile-stat {
    opacity: 1;
    transform: translateY(0);
}

.smrs-tile:nth-child(1) .smrs-tile-stat { transition-delay: 0.05s; }
.smrs-tile:nth-child(2) .smrs-tile-stat { transition-delay: 0.15s; }
.smrs-tile:nth-child(3) .smrs-tile-stat { transition-delay: 0.25s; }
.smrs-tile:nth-child(4) .smrs-tile-stat { transition-delay: 0.35s; }

.smrs-tile-number {
    display: block;
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}

.smrs-tile-label {
    color: rgba(255, 255, 255, 0.82);
    font-size: 12.5px;
    line-height: 1.35;
    margin: 0;
}

/* ---------- Right: heading + ring ---------- */

.smrs-stats-right {
    text-align: center;
}

.smrs-stats-eyebrow {
    color: var(--smrs-dark-green, #0C4143);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.smrs-stats-heading {
    color: #141414;
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
    font-weight: 700;
    margin: 0 0 36px;
    line-height: 1.25;
}

.smrs-stats-ring-wrap {
    position: relative;
    width: 240px;
    height: 240px;
    margin: 0 auto 30px;
}

.smrs-stats-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* start the arc from the top */
}

.smrs-stats-ring circle {
    fill: none;
}

.ring-track {
    stroke: #E4E4E1;
}

.ring-progress {
    stroke: var(--smrs-dark-green, #0C4143);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.1s linear; /* fine-grained, driven by JS each frame */
}

.smrs-stats-ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.smrs-stats-percent-row {
    color: #141414;
    font-size: 42px;
    font-weight: 700;
}

.smrs-stats-ring-caption {
    color: #6B6B68;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 4px;
}

.smrs-stats-intro {
    color: #55534E;
    font-size: 15px;
    line-height: 1.6;
    max-width: 360px;
    margin: 0 auto;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
    .smrs-stats-inner {
        grid-template-columns: 1fr;
    }
    .smrs-stats-tiles {
        height: 420px;
    }
}

@media (max-width: 640px) {
    .smrs-stats-tiles {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        height: 460px;
    }
}