/* ============================================================
   FloreData — Section 9 CASE STUDIES
   Spec: floredata/design/specs/landing-section9.md
   ============================================================ */

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

/* --- Eyebrow (Growth-Teal accented) ------------------------------------ */

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

.fd-eyebrow--cases .fd-eyebrow__badge {
    background: var(--wp--preset--color--growth);
    border-radius: 8px;
    width: 31px;                                /* .ai 31×23 */
    height: 23px;
    display: inline-grid;
    place-items: center;
    flex: none;
}

.fd-eyebrow--cases .fd-eyebrow__badge img {
    width: 15px;
    height: 15px;
    display: block;
}

/* --- Heading with Bloom highlight ---------------------------------------- */

.fd-cases__heading {
    font-family: var(--wp--preset--font-family--satoshi);
    font-weight: 300;                           /* Light — pixel rule (vector says Bold) */
    font-style: normal;
    font-size: clamp(2.6rem, 1.2rem + 4.3vw, 5.94rem);    /* 95px */
    line-height: 0.93;                          /* .ai leading 88 */
    color: #000000;
    margin: 27px 0 0;
}

.fd-cases__hilite {
    display: inline-block;
    background: var(--wp--preset--color--bloom);
    border-radius: 12px;
    padding: 9px 12px 16px;                     /* .ai box 588×112 around 95px text */
    font-weight: 700;
    font-style: italic;
    margin-top: 6px;
    transform: rotate(-2deg);                   /* .ai: the tag tilts up to the right */
}

.fd-cases__subtitle {
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1.4rem, 0.9rem + 1vw, 1.875rem);     /* 30px */
    line-height: 1.2;
    color: var(--wp--preset--color--text);
    margin: 51px 0 0;
}

.fd-cases__body {
    font-weight: 400;
    font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.25rem);  /* 20px */
    line-height: 1.8;                           /* .ai leading 36 */
    color: #161616;
    max-width: 990px;                           /* .ai x462–1449 */
    margin: 42px auto 0;
}

/* --- 4 photo cards ----------------------------------------------------------- */

.fd-cases__cards {
    list-style: none;
    margin: 80px auto 0;
    padding: 0;
    max-width: 1440px;                          /* .ai row 182–1737 */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.fd-case-card a {
    position: relative;
    display: block;
    border-radius: 30px;
    overflow: hidden;
    aspect-ratio: 380 / 415;                    /* .ai card */
    text-decoration: none;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.fd-case-card a:hover { transform: translateY(-5px); }

.fd-case-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* violet tint + bottom gradient (the .ai treatment, kept as CSS so the
   photos stay swappable when the case-study CPT lands) */
.fd-case-card a::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(64, 32, 84, 0) 42%, rgba(64, 32, 84, 0.82) 100%),
        rgba(124, 80, 170, 0.22);
}

.fd-case-card__text {
    position: absolute;
    left: 30px;
    right: 24px;
    bottom: 24px;
    text-align: left;
    color: #F6EFFB;
}

.fd-case-card__text strong {
    display: block;
    font-weight: 700;
    font-size: clamp(1.3rem, 1rem + 0.7vw, 2.17rem);      /* 34.7px */
    line-height: 1.15;                          /* .ai leading 40 */
}

.fd-case-card__text span {
    display: block;
    font-weight: 700;
    font-size: 0.92rem;                         /* 14.7px */
    color: #ffffff;
    margin-top: 8px;
}

/* --- CTA pill -------------------------------------------------------------------- */

.fd-cases__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 61px auto 0;
    background: var(--wp--preset--color--sage);
    color: #000000;
    border-radius: 999px;
    padding: 10px 10px 10px 22px;               /* .ai 231×44 */
    font-weight: 700;
    font-style: italic;
    font-size: 1.3rem;                          /* 20.8px */
    line-height: 1;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* explicit hover — GP a:hover trap (lesson #12) */
.fd-cases__cta:hover {
    transform: translateY(-2px);
    background: var(--wp--preset--color--punchy);
    color: var(--wp--preset--color--text);
}

.fd-cases__cta .fd-btn-arrow {
    width: 31px;
    height: 24px;
    flex: none;
}

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

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

@media (max-width: 640px) {
    .fd-section--cases { padding: 56px 16px 0; }

    .fd-case-card__text span { font-size: 0.95rem; line-height: 1.4; }   /* 14.7→15.2px, off the small-text floor */

    .fd-cases__cards { grid-template-columns: 1fr; max-width: 380px; }

    .fd-cases__hilite { padding: 2px 10px 6px; }

    .fd-cases__body { line-height: 1.6; }
}

@media (prefers-reduced-motion: reduce) {
    .fd-case-card a, .fd-cases__cta { transition: none; }
    .fd-case-card a:hover, .fd-cases__cta:hover { transform: none; }
}