/* ============================================================
   FloreData — Section 3 OUR RESULTS
   Spec: floredata/design/specs/landing-section3.md
   ============================================================ */

.fd-section--results {
    background: var(--wp--preset--color--background);
    padding: 68px 40px 68px;
    text-align: center;
}

/* --- Eyebrow chip (Campfire-accented) ------------------------------- */

.fd-eyebrow--results {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 20px 6px 6px;
    background: #EAEAEA;                        /* user-specified */
    color: var(--wp--preset--color--campfire);
    border-radius: 999px;
    font-family: var(--wp--preset--font-family--satoshi);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    line-height: 1;
    margin: 0 auto;
}

.fd-eyebrow--results .fd-eyebrow__badge {
    background: var(--wp--preset--color--campfire);
    color: #ffffff;
}

/* --- Heading ------------------------------------------------------ */

.fd-results__heading {
    font-family: var(--wp--preset--font-family--satoshi);
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1.875rem, 1.4rem + 1.2vw, 2.25rem);    /* 30 → 36px */
    line-height: 1.18;
    color: var(--wp--preset--color--text);
    margin: 22px auto 56px;
    max-width: 16ch;
}

/* --- 4 stat capsules ---------------------------------------------- */

.fd-results__capsules {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    max-width: 1300px;          /* .ai-measured: ~1300px capsule row span (4×296 + 3×22 gap) */
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.fd-capsule {
    position: relative;
    border-radius: 999px;                       /* full pill */
    padding: 16px 22px;
    display: grid;
    grid-template-columns: minmax(85px, auto) 1fr;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    min-height: 175px;                          /* .ai-matched (ref 170px + 5 padding tolerance) */
    isolation: isolate;
    text-align: left;
    cursor: default;
    transition:
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.fd-capsule:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -14px rgba(40, 40, 57, 0.22);
}

.fd-capsule__stat,
.fd-capsule__desc {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.fd-capsule:hover .fd-capsule__stat { transform: scale(1.06); }

/* Subtle floral parallax on hover */
.fd-capsule__floral {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.fd-capsule:hover .fd-capsule__floral { transform: scale(1.08); }

.fd-capsule__floral {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    opacity: 1;
}

.fd-capsule__stat {
    font-family: var(--wp--preset--font-family--satoshi);
    font-weight: 700;
    font-style: italic;
    font-size: clamp(2.5rem, 1.8rem + 2vw, 3.25rem);   /* 40 → 52px */
    line-height: 1;
    letter-spacing: -0.02em;
}

.fd-capsule__desc {
    font-family: var(--wp--preset--font-family--satoshi);
    font-weight: 700;
    font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.1875rem);   /* 15 → 19px */
    line-height: 1.2;
}

/* --- Capsule colour variants (per .ai sample) --- */

.fd-capsule--purple {
    background: var(--wp--preset--color--primary-soft);  /* Grape Soda */
    color: #f8f8f7;
}

.fd-capsule--mulberry {
    background: var(--wp--preset--color--royal);          /* Royal #954cbf */
    color: #ffffff;
}
.fd-capsule--mulberry .fd-capsule__floral {
    mix-blend-mode: multiply;
    opacity: 0.55;
}

.fd-capsule--punchy {
    background: var(--wp--preset--color--punchy);
    color: var(--wp--preset--color--text);                /* Jazz Club */
}

.fd-capsule--rose {
    background: var(--wp--preset--color--rose-milk);
    color: var(--wp--preset--color--text);   /* dark ink — white washed out on the pale rose-milk (audit 2026-06-29, WCAG AA) */
}
.fd-capsule--rose .fd-capsule__floral {
    mix-blend-mode: normal;
    opacity: 0.45;
}

/* --- Case Studies CTA --------------------------------------------- */

.fd-results__cta {
    margin: 56px auto 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--wp--preset--color--sage);
    color: var(--wp--preset--color--text);
    font-family: var(--wp--preset--font-family--satoshi);
    font-weight: 700;
    font-style: italic;
    font-size: 1.3125rem;          /* 21px */
    padding: 8px 10px 8px 28px;
    border-radius: 999px;
    border: none;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.fd-results__cta:hover {
    background: var(--wp--preset--color--punchy);
    color: var(--wp--preset--color--text);
    transform: translateY(-1px);
}

.fd-results__cta em { font-style: italic; }
.fd-results__cta:hover .fd-btn-arrow { transform: translateX(3px); }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1100px) {
    .fd-results__capsules {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

@media (max-width: 640px) {
    .fd-section--results { padding: 56px 20px; }
    .fd-results__capsules {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    /* hug the content — a stacked full-width pill at 180px tall left big empty
       space top/bottom (Francesca's note). Let it size to its row instead. */
    .fd-capsule { min-height: 0; padding: 20px 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .fd-results__cta, .fd-btn-arrow,
    .fd-capsule, .fd-capsule__stat, .fd-capsule__floral {
        transition: none !important;
    }
    .fd-results__cta:hover,
    .fd-capsule:hover,
    .fd-capsule:hover .fd-capsule__stat,
    .fd-capsule:hover .fd-capsule__floral {
        transform: none !important;
    }
    .fd-capsule:hover { box-shadow: none !important; }
}