/* ── Stats ───────────────────────────────────────────────────
   Figma (home): Our Story 1397:12102, The WinePress 1397:12238,
   Weddings 1397:12258.
   The label is the <dt> (so it reads "Years of welcome: 800"),
   shown under the figure.
   ─────────────────────────────────────────────────────────── */

.stats {
    display: flex;
    flex-direction: column;
    gap: 22px;
    container-type: inline-size; /* the columns follow the stats' own width */
}

.stats--rule::before {
    content: "";
    width: 180px;
    height: 1px;
    background: var(--color-copper);
}

.stats__list {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 22px 48px;
}

.stats__item {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 6px;
}

.stats__figure {
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.34px;
    color: var(--color-beamwood);
}

.stats__label {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 4.48px;
    text-transform: uppercase;
    color: var(--color-walnut);
}

/* Not room for three side by side (a laptop, beside the collage): two.
   Three need 583px; down to 540 they may run into the 64px gap beside
   the collage, as they do in the Figma frame at 1440. */
@container (max-width: 539px) {
    .stats--story .stats__list {
        grid-template-columns: repeat(2, minmax(0, max-content));
        column-gap: 40px;
    }
}

/* The WinePress — big italic ochre figures on teal */
.stats--dining::before {
    background: var(--color-ochre);
}

.stats--dining .stats__list {
    grid-template-columns: repeat(2, max-content);
    gap: 22px 64px;
}

.stats--dining .stats__item {
    gap: 8px;
}

.stats--dining .stats__figure {
    font-size: 64px;
    font-style: italic;
    line-height: 0.9;
    letter-spacing: -0.96px;
    color: var(--color-ochre);
}

.stats--dining .stats__label {
    color: var(--color-candle-wax);
}

/* Weddings — burgundy figures, small labels */
.stats--wedding {
    gap: 20px;
}

.stats--wedding::before {
    display: none; /* desktop has no rule here; mobile does */
    background: var(--color-burgundy);
}

.stats--wedding .stats__list {
    grid-template-columns: repeat(2, max-content);
    gap: 20px 40px;
}

.stats--wedding .stats__figure {
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.4px;
    color: var(--color-burgundy);
}

.stats--wedding .stats__label {
    font-size: 10px;
    letter-spacing: 3.2px;
}


/* Tablet and mobile — 1024px and below: two columns */
@media (max-width: 1024px) {
    .stats {
        gap: 20px;
    }

    .stats__list,
    .stats--dining .stats__list,
    .stats--wedding .stats__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .stats__figure,
    .stats--dining .stats__figure,
    .stats--wedding .stats__figure {
        font-size: 32px;
        font-style: normal;
        line-height: 1.06;
        letter-spacing: -0.32px;
    }

    .stats--dining .stats__item {
        gap: 6px;
    }

    .stats--wedding::before {
        display: block;
    }

    .stats--wedding .stats__label {
        font-size: 14px;
        letter-spacing: 4.48px;
    }
}


/* Testimonials — accolades across the width, a faint ochre line above.
   Figma (Stay): desktop 1366:66743, mobile 1366:66429. */
.stats--trust {
    padding-top: 24px;
    border-top: 1px solid rgba(219, 144, 63, 0.3);
}

.stats--trust .stats__list {
    display: flex;
    justify-content: space-between;
    gap: 22px 40px;
}

.stats--trust .stats__figure {
    color: var(--color-canvas);
}

.stats--trust .stats__label {
    color: var(--color-candle-wax);
}

@media (max-width: 1024px) {
    .stats--trust {
        padding-top: 20px;
        border-top-color: rgba(219, 144, 63, 0.5);
    }

    .stats--trust .stats__list {
        display: grid;
        grid-template-columns: 140px minmax(0, 1fr);
        gap: 20px 10px;
    }

    .stats--trust .stats__figure {
        color: var(--color-canvas);
    }
}