/* ============================================================
   FloreData — Section 8 TESTIMONIALS
   Spec: floredata/design/specs/landing-section8.md
   ============================================================ */

.fd-section--testimonials {
    background: var(--wp--preset--color--background);
    padding: 110px 24px 68px;                   /* industries band → eyebrow 126px (.ai, DOM-calibrated) */
    text-align: center;
}

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

.fd-eyebrow--testimonials {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 20px 6px 6px;
    background: #EAEAEA;
    color: var(--wp--preset--color--campfire);
    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--testimonials .fd-eyebrow__badge {
    background: var(--wp--preset--color--campfire);
    color: #ffffff;
    border-radius: 8px;
    width: 31px;
    height: 23px;
    display: inline-grid;
    place-items: center;
    flex: none;
}

.fd-eyebrow--testimonials .fd-eyebrow__badge svg {
    width: 15px;
    height: 15px;
    display: block;
    fill: #ffffff;
    color: #ffffff;
}

/* --- Header text -------------------------------------------------------- */

.fd-testimonials__kicker {
    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: 36px 0 0;
}

.fd-testimonials__heading {
    font-family: var(--wp--preset--font-family--satoshi);
    font-size: clamp(2.6rem, 1.2rem + 4.3vw, 5.97rem);    /* 95.5px */
    line-height: 1.005;                         /* .ai leading 96 */
    color: var(--wp--preset--color--text);
    margin: 12px 0 0;
}

.fd-testimonials__heading em {
    font-weight: 700;
    font-style: italic;
}

.fd-testimonials__sub {
    font-weight: 400;
    font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.25rem);  /* 20px */
    line-height: 1.2;                           /* .ai leading 24 */
    color: #161616;
    margin: 38px 0 0;
}

/* Sage hire pill (.ai 529×59) */
.fd-testimonials__hire {
    display: inline-block;
    background: var(--wp--preset--color--sage);
    color: var(--wp--preset--color--growth);
    border-radius: 999px;
    padding: 14px 36px;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1.2rem, 0.95rem + 0.6vw, 1.675rem);  /* 26.8px */
    line-height: 1.15;
    margin: 40px 0 0;
}

/* --- Cards row ------------------------------------------------------------ */

.fd-testimonials__track {
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;              /* mandatory blocks programmatic scroll */
    cursor: grab;
    scrollbar-width: none;
    margin: 36px auto 0;                        /* (was 60) −24 to absorb the cards' new top padding so the rhythm holds */
    max-width: 1440px;                          /* .ai row 222–1720 */
}

.fd-testimonials__track::-webkit-scrollbar { display: none; }

.fd-testimonials__cards {
    list-style: none;
    margin: 0;
    /* 24px gutter top + bottom gives the hover-lift + shadow room so the overflow
       scroller doesn't clip them (#4); the track/nav margins above & below are
       trimmed by 24 each to keep the original spacing. */
    padding: 24px 0;
    display: flex;
    gap: 11px;                                  /* .ai card gap */
}

.fd-tcard {
    flex: 0 0 492px;                            /* .ai card 492×382 */
    min-height: 382px;
    border-radius: 28px;
    padding: 19px 36px 24px;
    position: relative;
    text-align: left;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
}

/* Edge treatments — the .ai "dark card" is the left-edge shadow overlay
   (Jazz 45%→85% over cream ≈ the sampled silver→dark wash), the right
   edge gets the pale fade. JS moves these with the scroll position. */
.fd-tcard::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 28px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s ease;
    z-index: 0;
}

/* content paints above the edge overlay (cream text over the shadow, .ai look) */
.fd-tcard > * {
    position: relative;
    z-index: 1;
}

/* #4 (Riccardo): cards lift on hover so the row reads as interactive. Hover-capable
   devices only; suppressed mid-drag (so a grab doesn't jitter) and for reduced-motion.
   The container's 24px vertical padding keeps the lift + shadow from being clipped. */
@media (hover: hover) {
    .fd-tcard { transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease; }
    .fd-tcard:hover {
        transform: translateY(-6px);
        box-shadow: 0 22px 44px -26px rgba(40, 40, 57, 0.55);
        z-index: 3;
    }
    .fd-testimonials__track.is-dragging .fd-tcard:hover { transform: none; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
    .fd-tcard { transition: none; }
    .fd-tcard:hover { transform: none; }
}

.fd-tcard__tag { position: absolute; }          /* keep the tag's abs positioning */

.fd-tcard.is-edge-left::after {
    opacity: 1;
    background: linear-gradient(90deg, rgba(40, 40, 57, 0.45) 0%, rgba(40, 40, 57, 0.72) 50%, rgba(40, 40, 57, 0.88) 100%);
}

.fd-tcard.is-edge-left {
    color: #F6F6F6;
}

.fd-tcard.is-edge-right::after {
    opacity: 1;
    background: linear-gradient(90deg, rgba(249, 248, 247, 0) 0%, rgba(249, 248, 247, 0.62) 100%);
    z-index: 2;                                 /* .ai: the pale fade washes the text out */
}

.fd-tcard--cream {
    background: var(--wp--preset--color--dirty-cream);
    color: #161616;
}

.fd-tcard--tangerine {
    /* .ai: tangerine → pale peach diagonal */
    background: linear-gradient(135deg, #F5BD8F 0%, #FBC8A0 50%, #F8E5D5 100%);
    color: #161616;
}

.fd-tcard__tag {
    position: absolute;
    top: 19px;
    right: 15px;
    background: var(--wp--preset--color--bloom);
    color: var(--wp--preset--color--surface-dark);
    border-radius: 999px;
    height: 33px;                               /* .ai 133×33 */
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    font-weight: 700;
    font-size: 0.78rem;                         /* 12.5px */
    letter-spacing: 0.01em;
}

.fd-tcard__quote {
    font-style: normal;                         /* GP/theme styles blockquote italic */
    border: none;
    margin: 55px 0 0;                           /* quote text y +82 from card top */
    padding: 0 0 0 30px;                        /* kill GP blockquote padding; text x = card +70 */
    position: relative;
}

.fd-tcard__mark {
    position: absolute;
    left: -6px;
    top: -14px;
    font-size: 3.3rem;                          /* 52.8px */
    font-weight: 700;
    line-height: 1;
}

.fd-tcard__quote p {
    margin: 0;
    font-style: normal;
    font-weight: 400;
    font-size: 17.7px;
    line-height: 28px;                          /* .ai leading 28 — px, GP overrides em */
    letter-spacing: -0.012em;                   /* matches .ai 8-line wrap */
    text-align: justify;
}

.fd-tcard__author {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: auto 0 0;
    padding-top: 16px;
}

.fd-tcard__author img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    flex: none;
}

/* Initials monogram — used when there's no real client photo (GDPR; the original
   site only had a generic icon). Navy circle + cream initials reads on both the
   cream and tangerine cards. */
.fd-tcard__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex: none;
    display: inline-grid;
    place-items: center;
    background: var(--wp--preset--color--surface-dark);
    color: var(--wp--preset--color--dirty-cream);
    font-family: var(--wp--preset--font-family--satoshi), sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.03em;
}

.fd-tcard__author strong {
    font-weight: 700;
    font-size: 1.09rem;                         /* 17.5px */
}

.fd-testimonials__track.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;                      /* per-frame drag updates must not animate */
    scroll-snap-type: none;
    user-select: none;
}

/* --- Nav arrows -------------------------------------------------------------- */

.fd-testimonials__nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 23px 0 0;                           /* (was 47) −24 to absorb the cards' new bottom padding */
}

.fd-tnav {
    width: 51px;                                /* .ai 51×40 */
    height: 40px;
    border-radius: 14px;
    background: var(--wp--preset--color--sage);
    border: none;
    padding: 0;                                 /* GP button padding shoved the icon off-center */
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s;
}

.fd-tnav:hover { background: var(--wp--preset--color--punchy); transform: translateY(-2px); }

/* click shouldn't leave a stuck "hover" look — GP focus styling lingers */
.fd-tnav { -webkit-tap-highlight-color: transparent; }

.fd-tnav:focus:not(:focus-visible) {
    background: var(--wp--preset--color--sage);
    transform: none;
    outline: none;
    box-shadow: none;
}

.fd-tnav:focus:not(:focus-visible):hover {
    background: var(--wp--preset--color--punchy);
    transform: translateY(-2px);
}

.fd-tnav:focus-visible {
    outline: 2px solid var(--wp--preset--color--growth);
    outline-offset: 2px;
}

.fd-tnav svg { width: 26px; height: 26px; display: block; }

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

.fd-testimonials__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 36px auto 0;
    background: var(--wp--preset--color--campfire);
    color: var(--wp--preset--color--background);
    border-radius: 999px;
    padding: 18px 18px 18px 26px;               /* .ai 211×61 */
    font-weight: 700;
    font-size: 1.22rem;                         /* 19.5px */
    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-testimonials__cta:hover {
    transform: translateY(-2px);
    background: var(--wp--preset--color--surface-dark);
    color: var(--wp--preset--color--background);
}

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

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

@media (max-width: 1100px) {
    .fd-testimonials__track { max-width: 700px; }
    .fd-tcard { flex-basis: 440px; }
}

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

    .fd-testimonials__track { max-width: 100%; }

    .fd-testimonials__cards { padding-inline: 16px; }   /* symmetric gutter so the active card never kisses either edge */
    .fd-tcard {
        flex-basis: 82vw;
        min-height: 0;
        padding: 19px 24px 24px;
    }

    .fd-tcard__quote { padding-left: 24px; }

    .fd-tcard__quote p { font-size: 1rem; text-align: left; }   /* kill justified "rivers" on a narrow column */

    .fd-tnav { height: 44px; }   /* a11y touch target ≥44px (was 40px) */

    .fd-testimonials__hire { font-size: 1.1rem; padding: 12px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .fd-tnav, .fd-testimonials__cta { transition: none; }
    .fd-tnav:hover, .fd-testimonials__cta:hover { transform: none; }
}