/* ============================================================
   reviews — "What our Partners Say".
   Figma: About 1407:88019 / mobile 1407:88463, Partners 1407:89875,
   Contact 1398:47308 / 1398:47486 / 1398:47032, singles 1491:23296 /
   1586:64389. No tablet frame except Contact: tablet follows mobile.

   Three cards across on desktop. With exactly three, the middle one is
   enlarged as the frames draw it (Alex, 1 Oct, R1): 361 / 412 / 361 at
   1440, 38 apart, centred, its contents scaled by about 1.064.
   Below 1025px a looping Swiper row (Alex, 2 Oct): the active card centred
   and larger, the cards before and after it smaller, equal in height and
   peeking in on both sides.
   The section's colours are the variant's two custom properties.
   ============================================================ */

.reviews {
    --reviews-bg: var(--color-surface-warm);
    --reviews-card: var(--color-surface);
    --reviews-ink: var(--color-text);
    --reviews-eyebrow: var(--color-primary);
    background: var(--reviews-bg);
    color: var(--reviews-ink);
}
.reviews--dark {
    --reviews-ink: var(--color-text-inverse);
    --reviews-eyebrow: var(--color-accent);
    background: var(--gradient-dark-reverse);   /* gradient 1, right to left */
    --reviews-card: var(--color-card-navy);     /* the frame's #03283c */
}
.reviews--light {
    --reviews-bg: var(--color-surface);
    --reviews-card: var(--color-surface-tint);
}
.reviews--tint {
    --reviews-bg: var(--color-surface-tint);
    --reviews-card: var(--color-surface-answer);
}

.reviews__inner {
    max-width: var(--layout-max-w);
    margin: 0 auto;
    padding: var(--space-section-alt) var(--space-gutter);
}

.reviews__body {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ── Heading ──────────────────────────────────────────────── */
.reviews__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.reviews__eyebrow {
    margin: 0;
    color: var(--reviews-eyebrow);
}
/* H2 is Title Case in the Figma ("TITLE" text case) */
.reviews__heading {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    color: var(--reviews-ink);
    text-transform: capitalize;
}

/* ── Cards, desktop: a static three-up ───────────────────────── */
.reviews__carousel {
    width: 100%;
    padding-top: 14px;   /* room for the quote marks that rise above the cards */
}
.reviews__track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.reviews__slide { height: auto; }

.reviews__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    margin: 0;
    padding: 24px 33px 33px 22px;
    border-radius: 16px;   /* the frame's 16.6, rounded */
    background: var(--reviews-card);
    color: var(--reviews-ink);
}

/* The quote mark straddles the card's top edge (the middle and mobile cards) */
.reviews__mark {
    position: absolute;
    top: -13px;
    left: 22px;
    display: block;
    width: 36px;
    height: 26px;
    color: var(--color-primary);
}
.reviews__glyph {
    display: block;
    width: 100%;
    height: 100%;
}

/* Body (small) quote, H4 attribution */
.reviews__quote {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body-small);
    line-height: var(--leading-body-small);
}
.reviews__attribution {
    margin-top: auto;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h4);
    line-height: var(--leading-h4);
}

/* ── Desktop, exactly three: the enlarged middle card (R1) ────
   The frames scale the middle card by about 1.064 (About 1407:88019):
   412x207 against 361x198 and 361x180, its quote 17px and its
   attribution 23.4px; raw sizes, as the frames have no style for them.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
    .reviews__track--three {
        grid-template-columns: 361fr 412fr 361fr;
        gap: 38px;
        align-items: center;
    }
    .reviews__carousel:has(.reviews__track--three) { padding-top: 18px; }
    .reviews__track--three .reviews__card { height: auto; }
    .reviews__track--three .reviews__slide:nth-child(2) .reviews__card {
        gap: 12.8px;
        padding: 25.5px 35px 35px 23.5px;
        border-radius: 17.7px;
    }
    .reviews__track--three .reviews__slide:nth-child(2) .reviews__mark {
        top: -17px;
        left: 24px;
        width: 46px;
        height: 35px;
    }
    .reviews__track--three .reviews__slide:nth-child(2) .reviews__quote { font-size: 17px; }
    .reviews__track--three .reviews__slide:nth-child(2) .reviews__attribution { font-size: 23.4px; }
}

/* ── Tablet and mobile: a peeking Swiper row ──────────────────
   Padding 48 / 20 and a 32 gap on mobile; cards 267 wide, 12 apart,
   the next one running off the right edge.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .reviews__body { gap: 32px; }
    .reviews__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
    }
    .reviews__carousel {
        width: calc(100% + 2 * var(--space-gutter));    /* bleeds to both screen edges */
        margin-left: calc(-1 * var(--space-gutter));
    }
    .reviews__track {
        display: flex;
        align-items: stretch;   /* every slide takes the tallest card's height, so the cards before and after the active one match */
        gap: 0;   /* Swiper spaces the slides */
    }
    .reviews__slide {
        width: 400px;
        height: auto;
    }
    .reviews__card { padding: 20px; }
    .reviews__mark { left: 20px; }

    /* The active card is the larger one, as the desktop's middle card is
       (361 against 412, about 0.88). The slots keep their width, so the row
       never re-measures; the cards either side shrink about their centres. */
    .reviews__slide .reviews__card {
        transform: scale(0.88);
        transition: transform 400ms ease;
    }
    .reviews__slide.swiper-slide-active .reviews__card { transform: none; }
    .reviews__slide { cursor: pointer; }
    .reviews__slide.swiper-slide-active { cursor: auto; }
}

@media (max-width: 767px) {
    .reviews__slide {
        width: 265px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reviews__slide .reviews__card { transition: none; }   /* the sizes differ, but nothing animates */
}