/* =========================================================================
   PB Testimonials (acf/pb-f-testimonials)
   CPT-driven testimonial carousel. All rules scoped under
   .pb-section-pb-f-testimonials. Reuses the shared Splide dot-nav
   mechanism; matches Figma node 379:43851.
   ========================================================================= */

/* ---------- Colour (Phase 4) ----------
   Section background + all derived foreground colours come from the global
   `.pb-section.bg-*` rules (pb-section-bgcolors.css · G2) — the single source
   of truth for the contrast-safe derivation map. This block no longer ships
   its own `.bg-*`/`.text-*` colour rules. Base fallback below covers the
   `none` (transparent) background, where G2 sets no section colour. */
.pb-section-pb-f-testimonials {
    color: var(--colour-teal-dark, #002c35);
}

/* ---------- Margin wrap (centered single column) ---------- */
.pb-section-pb-f-testimonials .pb-testimonials-wrap {
    margin-left: auto;
    margin-right: auto;
    padding-left: 64px;
    padding-right: 64px;
    width: 100%;
    max-width: var(--pb-section-margin-width, 1280px);
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}

/* ---------- Eyebrow (section label, fixed above the slider) ---------- */
.pb-section-pb-f-testimonials .pb-testimonials-eyebrow {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 32px;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    /* Phase 4: derive a contrast-safe accent per background. teal-light is only 2.81:1
       on the default white bg (fails), so use teal-mid on light surfaces and keep the
       minty teal-light only on the dark backgrounds where it passes. */
    color: var(--colour-teal-dark);
    margin: 0;
}
.pb-section-pb-f-testimonials.bg-teal .pb-testimonials-eyebrow,
.pb-section-pb-f-testimonials.bg-teal-dark .pb-testimonials-eyebrow,
.pb-section-pb-f-testimonials.bg-black .pb-testimonials-eyebrow {
    color: var(--colour-teal-light);
}
.pb-section-pb-f-testimonials.bg-teal-mid .pb-testimonials-eyebrow,
.pb-section-pb-f-testimonials.bg-orange .pb-testimonials-eyebrow {
    color: var(--colour-white);
}
.pb-section-pb-f-testimonials.bg-teal-light .pb-testimonials-eyebrow {
    color: var(--colour-teal-dark);
}

/* ---------- Slider / static shared wrapper ---------- */
.pb-section-pb-f-testimonials .pb-testimonials-slider,
.pb-section-pb-f-testimonials .pb-testimonials-static {
    position: relative;
    width: 100%;
}

/* ---------- Quote (blockquote) — shared by static + slider ---------- */
.pb-section-pb-f-testimonials .pb-testimonials-quote {
    margin: 0 auto;
    padding: 0;
    border: none;
    background: none;
    quotes: none;
    max-width: 1100px;
    text-align: center;
    /* Inherit the section's derived foreground colour (G2). */
    color: inherit;
    box-sizing: border-box;
}

.pb-section-pb-f-testimonials .pb-testimonials-quote::before,
.pb-section-pb-f-testimonials .pb-testimonials-quote::after {
    content: none;
}

.pb-section-pb-f-testimonials .pb-testimonials-quote p {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.3;
    color: inherit;
    margin: 0;
    /* Preserve author line breaks within the quote text. */
    white-space: pre-line;
}

/* ---------- Attribution (name + role/org) ---------- */
.pb-section-pb-f-testimonials .pb-testimonials-attribution {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    text-align: center;
}

.pb-section-pb-f-testimonials .pb-testimonials-name {
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    /* Inherit the section's derived foreground colour (G2). */
    color: inherit;
    margin: 0;
}

.pb-section-pb-f-testimonials .pb-testimonials-role {
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    /* Inherit the section's derived foreground colour (G2). */
    color: inherit;
    margin: 0;
}

.pb-section-pb-f-testimonials .splide__track--fade>.splide__list>.splide__slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.splide__slide blockquote {
  text-wrap: balance;
}

/* ---------- Splide pagination (dot nav) ----------
   WCAG: inactive dot = hollow ring in currentColor (the section text colour,
   which is always chosen to contrast the background) → a >=3:1 boundary on
   every bg variant (1.4.11), and state is shown by fill-vs-outline, not colour
   alone (1.4.1). Active = solid orange (>=3:1 on the light/dark bgs); on the
   teal-light bg orange drops below 3:1 so it falls back to a filled currentColor dot.
   Each button is a 24x24 target (2.5.8) with the visible 16px dot drawn via
   ::before, so the Figma size/spacing is preserved. */
.pb-section-pb-f-testimonials .splide__pagination {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0; /* 24px buttons, 0 gap => 16px dots spaced 8px apart, as in Figma */
    padding: 48px 0 0 0;
    margin: 0;
    list-style: none;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
}

.pb-section-pb-f-testimonials .splide__pagination__page {
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: none;
}

.pb-section-pb-f-testimonials .splide__pagination__page::before {
    content: "";
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid currentColor;
    background: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pb-section-pb-f-testimonials .splide__pagination__page:not(.is-active):hover::before {
    background: currentColor;
    opacity: 0.35; /* hover hint only — transient feedback, not a state */
}

.pb-section-pb-f-testimonials .splide__pagination__page.is-active {
    transform: none; /* suppress Splide's default active scale */
}

.pb-section-pb-f-testimonials .splide__pagination__page.is-active::before {
    background: var(--colour-primary-orange, #e61e09);
    border-color: var(--colour-primary-orange, #e61e09);
}

/* teal-light background (legacy `aqua` remaps here): orange active dot is < 3:1
   on #3cab97, so fall back to a filled currentColor dot (currentColor = the
   derived teal-dark foreground on this bg). */
.pb-section-pb-f-testimonials.bg-teal-light .splide__pagination__page.is-active::before {
    background: currentColor;
    border-color: currentColor;
}

/* Visible high-contrast keyboard focus ring (2.4.7 / 2.4.13). currentColor
   keeps it >=3:1 against whichever background variant is in use. */
.pb-section-pb-f-testimonials .splide__pagination__page:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

/* ---------- Splide arrow controls (hidden — dot-nav only) ---------- */
.pb-section-pb-f-testimonials .splide__arrows {
    display: none;
}

/* ---------- Autoplay pause/play toggle (WCAG 2.2.2 Pause, Stop, Hide) ----------
   Rendered only when autoplay is enabled. Splide's Autoplay component wires the
   .splide__toggle button and manages its aria-label; we control which label
   (Pause while playing / Play while paused) is visible. */
.pb-section-pb-f-testimonials .pb-testimonials-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin: 24px auto 0;
    padding: 10px 18px;
    min-height: 44px;
    background: transparent;
    border: 2px solid currentColor;
    border-radius: 999px;
    color: inherit;
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    position: absolute;
    right: 0;
    bottom: 0;
}

.pb-section-pb-f-testimonials .pb-testimonials-toggle:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

/* Label visibility: default (pre-init / paused) shows "Play"; once Splide is
   playing it adds .is-active and we show "Pause". */
.pb-section-pb-f-testimonials .splide__toggle__pause { display: none; }
.pb-section-pb-f-testimonials .splide__toggle__play { display: inline; }
.pb-section-pb-f-testimonials .splide__toggle.is-active .splide__toggle__pause { display: inline; }
.pb-section-pb-f-testimonials .splide__toggle.is-active .splide__toggle__play { display: none; }

/* ---------- Editor preview helper ---------- */
.pb-section-pb-f-testimonials .pb-testimonials-editor-note {
    text-align: center;
    opacity: 0.6;
    margin: 24px 0 0 0;
    font-size: 14px;
    font-family: var(--font-body, 'Outfit', sans-serif);
}

.pb-section-pb-f-testimonials.is-preview-hidden-mode {
    opacity: 0.5;
}

/* ---------- Reduced-motion: kill any splide transitions ---------- */
@media (prefers-reduced-motion: reduce) {
    .pb-section-pb-f-testimonials .splide__slide,
    .pb-section-pb-f-testimonials .splide__list {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------- Mobile (< 768px) ---------- */
@media (max-width: 767px) {

    .pb-section-pb-f-testimonials .pb-testimonials-wrap {
        padding-left: 24px;
        padding-right: 24px;
        gap: 40px;
    }

    .pb-section-pb-f-testimonials .pb-testimonials-eyebrow {
        font-size: 22px;
    }

    .pb-section-pb-f-testimonials .pb-testimonials-quote p {
        font-size: 24px;
    }

    .pb-section-pb-f-testimonials .pb-testimonials-attribution {
        margin-top: 32px;
    }

    .pb-section-pb-f-testimonials .pb-testimonials-name {
        font-size: 18px;
    }

    .pb-section-pb-f-testimonials .pb-testimonials-role {
        font-size: 16px;
    }

    /* Pagination dots stay 16px on mobile per spec */
    .pb-section-pb-f-testimonials .splide__pagination {
        padding-top: 32px;
    }
}