/* ============================================================
   FloreData — Section 4 OUR SERVICES
   Spec: floredata/design/specs/landing-section4.md
   ============================================================ */

.fd-section--services {
    background: #EFEEE8;                                  /* Dirty Cream — user-specified */
    margin: 0;                                            /* full-bleed band (Sandro 2026-06-17, was contained card) */
    border-radius: 0;
    padding: 68px 40px;
    text-align: center;
}

/* --- Eyebrow chip (Royal Purple-accented) ---------------------- */

.fd-eyebrow--services {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 20px 6px 6px;
    background: #c190d5;
    color: #ffffff;
    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--services .fd-eyebrow__badge {
    background: var(--wp--preset--color--royal);
    color: #ffffff;
}

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

.fd-services__heading {
    font-family: var(--wp--preset--font-family--satoshi);
    font-weight: 300;                                /* Light — pixel-confirmed from .ai render */
    font-style: normal;                              /* NOT italic — pixel-confirmed */
    font-size: clamp(3rem, 2rem + 3.5vw, 5.93rem);   /* 48 → 95px */
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--wp--preset--color--text);
    margin: 28px auto 28px;
    max-width: 20ch;
    text-wrap: balance;   /* balance the 2-line wrap — no "and Scale" orphan line */
}

/* --- "You'll work with" dark chip + avatars --- */

.fd-services__work-chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--wp--preset--color--surface-dark);
    color: #f6f6f6;
    padding: 8px 22px 8px 22px;
    border-radius: 999px;
    font-family: var(--wp--preset--font-family--satoshi);
    font-weight: 700;
    font-size: 1.4375rem;          /* 23px */
    margin: 0 auto;
}

.fd-services__work-chip em { font-style: italic; }

.fd-services__work-chip-avatars {
    display: inline-flex;
}

.fd-services__work-chip-avatars img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--wp--preset--color--surface-dark);
    margin-left: -10px;
    object-fit: cover;
}

.fd-services__work-chip-avatars img:first-child { margin-left: 0; }

/* --- Subtitle ------------------------------------------------- */

.fd-services__subtitle {
    font-family: var(--wp--preset--font-family--satoshi);
    font-weight: 700;                                      /* Bold Italic — pixel-confirmed from .ai */
    font-style: italic;
    font-size: clamp(1.125rem, 0.9rem + 0.6vw, 1.625rem);  /* 18 → 26px */
    line-height: 1.18;
    color: var(--wp--preset--color--text);
    margin: 22px auto 40px;   /* tightened (was 64) — the gap to the cards was tuned for the old larger heading */
    max-width: 38ch;
}

.fd-services__subtitle em { font-style: italic; }

/* --- 5 service cards (3+2 asymmetric grid) ----------------- */

.fd-services__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: left;
}

.fd-services__cards--bottom {
    grid-template-columns: repeat(2, 1fr);
    max-width: 870px;
    margin: 22px auto 0;
}

.fd-service-card {
    position: relative;
    background: var(--wp--preset--color--background);
    border-radius: 22px;
    padding: 26px;
    min-height: 250px;   /* trimmed (was 280) so the bottom-pinned teaser leaves less hollow middle */
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--wp--preset--color--text);
    transition:
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.4s ease,
        color 0.4s ease;                /* smooth the dark-fill on hover (Sandro: reveal felt abrupt) */
    will-change: transform;
}

.fd-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px -14px rgba(40, 40, 57, 0.18);
}

.fd-service-card--featured {
    background: var(--wp--preset--color--surface-dark);
    color: #f6f6f6;
}

/* Whole card links to its service-detail page (Riccardo) — stretched link over the card. */
.fd-service-card__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.fd-service-card__link:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px; }

.fd-service-card__icon {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 56px;
    height: 56px;
    padding: 10px;
    box-sizing: border-box;
    background: #E2EED9;                     /* Sage badge per user */
    border-radius: 50%;
    object-fit: contain;
}

.fd-service-card--featured .fd-service-card__icon {
    background: #E2EED9;                     /* same Sage on dark card */
}

.fd-service-card__title {
    font-family: var(--wp--preset--font-family--satoshi);
    font-weight: 700;
    font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2.375rem);  /* 24 → 38px */
    line-height: 1.05;
    min-height: 2.1em;   /* reserve 2 lines so the teaser starts at the same y on every card (no hollow middle on 1-line titles) */
    letter-spacing: -0.02em;
    max-width: 76%;        /* leave room for icon */
    margin: 0;
}

.fd-service-card__desc {
    font-family: var(--wp--preset--font-family--satoshi);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(0.875rem, 0.8rem + 0.2vw, 1.125rem);  /* 14 → 18px */
    line-height: 1.4;
    margin-top: auto;
}

.fd-service-card--featured .fd-service-card__desc {
    font-style: normal;
    font-size: 0.9375rem;                                  /* 15px per .ai */
    line-height: 1.5;
}

/* #5 (Riccardo, image1): the dark "highlight" FOLLOWS THE CURSOR — no card is
   permanently dark on hover-capable devices — and each description shows a 2-line
   teaser by default, expanding to the full copy on hover. The desc is bottom-pinned
   (margin-top:auto), so it grows UPWARD into the card's existing slack → no layout
   shift. Touch devices keep the featured card dark + full text (the static design). */
@media (hover: hover) {
    .fd-service-card--featured { background: var(--wp--preset--color--background); color: var(--wp--preset--color--text); }
    .fd-service-card--featured .fd-service-card__desc { font-style: italic; font-weight: 700; font-size: clamp(0.875rem, 0.8rem + 0.2vw, 1.125rem); }
    .fd-service-card__desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: color 0.3s ease;
    }
    .fd-service-card:hover {
        background: var(--wp--preset--color--surface-dark);
        color: #f6f6f6;
    }
    .fd-service-card:hover .fd-service-card__desc {
        -webkit-line-clamp: 999;            /* reveal the full copy */
        overflow: visible;
        font-style: normal;
        font-weight: 400;
        color: rgba(246, 246, 246, 0.92);
        transition: color 0.4s ease 0.05s;  /* the copy eases in just after the card darkens (less abrupt) */
    }
}

/* --- Discovery Our Services CTA --- */

.fd-services__cta {
    margin: 56px auto 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #F7C0FF;                                    /* Rose Milk per user */
    color: var(--wp--preset--color--text);
    font-family: var(--wp--preset--font-family--satoshi);
    font-weight: 700;
    font-style: normal;                                     /* NOT italic — pixel-confirmed */
    font-size: 1.25rem;             /* 20px */
    padding: 8px 10px 8px 26px;
    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-services__cta:hover {
    background: var(--wp--preset--color--mulberry);
    color: var(--wp--preset--color--text);
    transform: translateY(-1px);
}

.fd-services__cta:hover .fd-btn-arrow { transform: translateX(3px); }

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

@media (max-width: 1100px) {
    .fd-services__cards { grid-template-columns: repeat(2, 1fr); }
    .fd-services__cards--bottom { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
    .fd-service-card { min-height: 240px; }
}

@media (max-width: 700px) {
    .fd-section--services { padding: 56px 20px 48px; }   /* trim the void below the "Discover Our Services" CTA */
    .fd-services__cards, .fd-services__cards--bottom { grid-template-columns: 1fr; }
    /* Tighten the loose header zone on mobile (Francesca: too much space between header
       and content; Riccardo: the "our services" eyebrow + "you'll work with" chip can go
       on mobile) — removing them + cutting the 64px void lifts the cards into view. */
    .fd-eyebrow--services { display: none; }
    .fd-services__work-chip { display: none; }
    .fd-services__heading { font-size: 3rem; margin: 14px auto 16px; }
    .fd-services__subtitle { margin: 16px auto 26px; }
    /* stop the title running under the corner icon on a narrow card */
    .fd-service-card__icon { width: 44px; height: 44px; top: 18px; right: 18px; padding: 9px; }
    .fd-service-card__title { max-width: calc(100% - 58px); }
    /* No hover on touch → kill the bottom-pinned slack (Riccardo "space in card, more
       visible stacked" #14): card hugs its content and the full copy shows under the title. */
    .fd-service-card { min-height: 0; gap: 10px; }
    .fd-service-card__desc { margin-top: 6px; -webkit-line-clamp: unset; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
    .fd-service-card, .fd-btn-arrow, .fd-services__cta { transition: none !important; }
    .fd-service-card:hover, .fd-services__cta:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    .fd-services__cta:hover .fd-btn-arrow { transform: none !important; }
}