/* Round15 — Motivate — section-testimonials
   Figma: desktop 4361:9652 | tablet 4361:9748
   Card display + carousel nav ported from the homepage reference implementation:
   template-parts/Round13/homepage-loc/section-testimonials/assets/styles.css —
   same full-bleed centered-track layout, same circular icon-button nav treatment.
   Rule: all spacing/color via project design tokens (assets/css/global.css --color-*,
   --var-*, --fs-*). */

.r15-testi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--section-gap, 80px);
    background: var(--color-1st-bg);
    padding-top: var(--var-140, 140px);
}

.r15-testi * {
    box-sizing: border-box;
}

/* ---------- Headings ---------- */
.r15-testi__headings {
    max-width: 1300px;
    width: calc(100% - 2 * var(--section-horizontal-padding, 32px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--var-16, 16px);
}

.r15-testi__title {
    margin: 0;
    max-width: 800px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-h2, 48px);
    line-height: 1.15;
    text-align: center;
    color: var(--color-1st-fg);
}

.r15-testi__desc {
    margin: 0;
    max-width: 600px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
    color: var(--color-2nd-fg);
}

/* ---------- Carousel: full-width, breaks out of the max-width content column ---------- */
.r15-testi__carousel {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--var-40, 40px);
}

.r15-testi__viewport {
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    overflow: hidden; /* clip the track here, not at the section level */
}

.r15-testi__track {
    display: flex;
    gap: var(--var-40, 40px);
    align-items: stretch;
    width: max-content;
    transition: transform 0.5s ease;
    /* Centers the active card within .r15-testi__viewport. Paired with .r15-testi__item's
       width formula below so padding-left always equals (item's containing block width -
       item width) / 2. vw units (not %) because .r15-testi__track has width:max-content —
       a percentage width on its flex-item children would resolve against their own
       max-content size instead of a real number (classic flex/max-content circularity),
       silently breaking the sizing. vw sidesteps that since it's resolved from the true
       window width, not from any ancestor.
       Capped at the value they'd have at exactly 1560px (10vw -> 156px, matching
       .r15-testi__item's 80vw -> 1248px) so growth stops once .r15-testi__viewport's own
       max-width:1560px caps out — without the cap, these kept scaling with the true window
       width past that point while the viewport (and its overflow:hidden clip) stayed
       pinned at 1560px, so the peeking card's math kept assuming room that had already
       been clipped away. */
    padding-left: max(var(--section-horizontal-padding, 32px), min(10vw, 156px));
}

.r15-testi__item {
    flex-shrink: 0;
    /* Capped to its value at exactly 1560px (80vw -> 1248px) — see the padding-left
       comment on .r15-testi__track for why this stops scaling past that width instead
       of the design's nominal 1300px card. */
    width: min(80vw, 1248px);
    display: flex;
    align-items: center;
    gap: var(--var-60, 60px);
    background: var(--color-2nd-bg);
    opacity: 0.5;
    transition: opacity 0.4s ease;
}

.r15-testi__item.is-active {
    opacity: 1;
}

/* Kept free of padding on purpose: with `flex: 1 0 0` a padded flex item's own
   padding acts as a hard floor under its border-box (min-width:0 can't shrink a
   box below its own padding), so it silently claims extra width from its 50/50
   split with .r15-testi__media (measured 660px/580px instead of 620px/620px —
   40px too wide, which is why the quote text wrapped differently than the
   540px-wide design). The padding lives on .r15-testi__item-body-inner instead,
   leaving this element a plain, unpadded flex-basis container. */
.r15-testi__item-body {
    flex: 1 0 0;
    min-width: 0;
}

.r15-testi__item-body-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--var-40, 40px);
    padding: 0 var(--var-40, 40px);
}

.r15-testi__logo-wrap {
    display: flex;
}

.r15-testi__logo {
    display: block;
    width: auto;
    height: 24px;
}

.r15-testi__quote-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--var-24, 24px);
    width: 100%;
}

.r15-testi__quote-icon {
    display: flex;
    align-items: center;
}

.r15-testi__text {
    margin: 0;
    width: 100%;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-quote, 28px);
    line-height: 1.4;
    color: var(--color-1st-fg);
}

.r15-testi__reviewer {
    display: flex;
    align-items: center;
    gap: var(--var-16, 16px);
    width: 100%;
}

.r15-testi__reviewer-info {
    display: flex;
    flex-direction: column;
    gap: var(--var-12, 12px);
}

.r15-testi__name {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-label-lg, 16px);
    line-height: 1;
    color: var(--color-1st-fg);
}

.r15-testi__role {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-label-md, 14px);
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-2nd-fg);
}

.r15-testi__media {
    position: relative;
    flex: 1 0 0;
    min-width: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.r15-testi__media-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Item 3 (Jamie Jensen): Figma specifies a manual offset crop for this source image
   instead of a plain centered cover (w:149.95%, left:-24.98% — node 4454:21138). */
.r15-testi__media-img--crop-3 {
    position: absolute;
    inset: 0 auto auto -24.98%;
    width: 149.95%;
    max-width: none;
    height: 100%;
    object-fit: fill;
}

/* ---------- Nav: circular icon buttons + progress dots (matches homepage reference) ---------- */
.r15-testi__nav {
    display: flex;
    align-items: center;
    gap: var(--var-16, 16px);
}

.r15-testi__btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--color-stroke);
    border-radius: 50%;
    background: var(--color-2nd-btn-bg);
    color: var(--color-1st-fg);
    cursor: pointer;
    flex-shrink: 0;
}

.r15-testi__progress {
    display: flex;
    align-items: center;
    gap: var(--var-8, 8px);
    padding: var(--var-8, 8px) 0;
}

.r15-testi__dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-pill, 100px);
    background: var(--color-stroke);
    cursor: pointer;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.r15-testi__dot.is-active {
    width: var(--var-40, 40px);
    background: var(--color-1st-fg);
}

@media (prefers-reduced-motion: reduce) {
    .r15-testi__track {
        transition: none;
    }
}

/* ---------- Tablet + Mobile (<=1024px), Figma tablet node 4361:9748 ---------- */
@media (max-width: 1024px) {
    /* Desktop uses 40px; tighter 24px gap on tablet/mobile. */
    .r15-testi__carousel {
        gap: var(--var-24, 24px);
    }

    .r15-testi__track {
        padding-left: var(--section-horizontal-padding, 20px);
    }

    /* Card: exact 600px on tablet, fluid on mobile (matches homepage reference) */
    .r15-testi__item {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 600px;
        max-width: calc(100vw - 2 * var(--section-horizontal-padding, 20px));
    }

    /* Hide the large testimonial photo */
    .r15-testi__media {
        display: none;
    }

    /* Text column: full width, vertical padding 32px, horizontal 24px */
    .r15-testi__item-body {
        flex: none;
        width: 100%;
    }

    .r15-testi__item-body-inner {
        padding: var(--var-32, 32px) var(--var-24, 24px);
        gap: var(--var-32, 32px);
    }
}