/* Round17 — Customization — section-stats
   Figma: desktop 1144:7772 | mobile 1246:11474 (tablet shares the mobile frame)
   Layout: 3 stat items (Konstant Grotesk number + DM Sans label, stroke underline).
   No section title, no top padding (Figma: only pb 140). Numbers count up via assets/scripts.js.
   Rule: single breakpoint, @media (max-width: 1024px) covers tablet + mobile; default = desktop. */

/* Konstant Grotesk is enqueued for this page in import-css-js.php (Round 17 block). */
.r17-stats {
    display: flex;
    justify-content: center;
    padding: 0 var(--section-horizontal-padding, 32px) var(--var-140, 140px);
    background: var(--color-1st-bg);
    font-family: var(--font-body, 'DM Sans', sans-serif);
}

.r17-stats * {
    box-sizing: border-box;
}

.r17-stats__content {
    flex: 1 0 0;
    min-width: 0;
    max-width: var(--container-max, 1400px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--section-gap, 80px);
}

.r17-stats__list {
    display: flex;
    align-items: flex-start;
    gap: var(--var-96);
    width: 100%;
}

.r17-stats__item {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--var-20);
    /* Figma stroke is inside the 8px padding: subtract the 1px underline */
    padding-bottom: calc(var(--var-8, 8px) - var(--var-1));
    border-bottom: 1px solid var(--color-stroke);
}

.r17-stats__number {
    width: 100%;
    max-width: 800px;
    margin: 0;
    font-family: var(--font-display, 'Konstant Grotesk', sans-serif);
    font-weight: 400;
    font-size: var(--fs-h2, 48px);
    line-height: var(--lh-heading, 1.15);
    color: var(--color-1st-fg);
    /* Fixed-width digits so the count-up does not jitter */
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.r17-stats__label {
    margin: 0;
    font-weight: 400;
    font-size: var(--fs-description-lg);
    line-height: var(--lh-body, 1.4);
    color: var(--color-2nd-fg);
    white-space: nowrap;
}

/* ---------- Responsive (<=1024 = tablet + mobile, single breakpoint) ---------- */
@media (max-width: 1024px) {
    /* Figma mobile 1246:11535: items stack vertically, 96px apart */
    .r17-stats__list {
        flex-direction: column;
    }

    .r17-stats__item {
        flex: none;
        width: 100%;
    }
}