/*---*\
    Testimonials Slider

    CPT quote cards in a Slick carousel; optional split background image
    (--image-right | --image-left).

    KEY FEATURES:
    - Ratings, cards, custom arrows; pill dots from tablet up.
    - Photo column ~41% width from desktop; hidden below 1200px.

    IMPLEMENTATION NOTES:
    - Deps: fx_slick, components/slick.css; tokens from custom-properties.css.
    - Neighbor bleed ::before needs an immediate sibling/previous .bg-* section.
    - Figma and field details: docs/specs/bedrockenvironmental-specs.md

\*---*/


.testimonials-slider {
    position: relative;
    isolation: isolate;
}

.testimonials-slider::before {
    content: none;
    display: none;
}

/* ==========================================================
   BACKGROUND IMAGE (desktop+)
=========================================================== */

.testimonials-slider__bg {
    display: none;
    pointer-events: none;
}

@media (min-width: 1200px) {
    .testimonials-slider__bg {
        display: block;
        position: absolute;
        z-index: var(--z-dropdown);
        top: 0;
        bottom: 0;
        height: 100%;
        max-height: none;
        /* ~792px / 1920px frame */
        width: 41.25%;
        max-width: 49.5rem;
        transform: none;
        border-radius: var(--border-radius-card);
        overflow: hidden;
    }

    .testimonials-slider--image-right .testimonials-slider__bg {
        right: 0;
        left: auto;
        border-top-left-radius: var(--border-radius-card);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }

    .testimonials-slider--image-left .testimonials-slider__bg {
        left: 0;
        right: auto;
        border-bottom-right-radius: var(--border-radius-card);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .testimonials-slider__bg-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .testimonials-slider--image-left .sub-heading {
        justify-content: flex-start;
    }

    /*
     * Neighbor bleed strip (::before only). Requires immediate sibling sections.
     * Image-right: .bg-* on the previous section. Nesting compiles to the same
     * selectors as a flat .bg-* + .testimonials-slider--image-right::before list.
     */
    .bg-white,
    .bg-light-green,
    .bg-medium-green,
    .bg-green,
    .bg-dark,
    .bg-gradient {
        + .testimonials-slider--image-right::before {
            content: "";
            display: block;
            position: absolute;
            pointer-events: none;
            z-index: calc(var(--z-dropdown) - 1);
            width: 100%;
            height: calc(var(--section-margins) * 1.25);
            right: 0;
            left: auto;
            top: 0;
            bottom: auto;
        }

        + .testimonials-slider--image-right .testimonials-slider__inner {
            padding-top: var(--section-margins);
        }
    }

    .testimonials-slider--image-left {
        &:has(+ .bg-white)::before,
        &:has(+ .bg-light-green)::before,
        &:has(+ .bg-medium-green)::before,
        &:has(+ .bg-green)::before,
        &:has(+ .bg-dark)::before,
        &:has(+ .bg-gradient)::before {
            content: "";
            display: block;
            position: absolute;
            pointer-events: none;
            z-index: calc(var(--z-dropdown) - 1);
            width: 100%;
            height: calc(var(--section-margins) * 1.25);
            left: 0;
            right: auto;
            bottom: 0;
            top: auto;
        }

        .testimonials-slider__inner {
            padding-bottom: var(--section-margins);
        }
    }

    :is(
        .bg-white + .testimonials-slider--image-right,
        .testimonials-slider--image-left:has(+ .bg-white)
    )::before {
        background-color: var(--bg-white);
    }

    :is(
        .bg-light-green + .testimonials-slider--image-right,
        .testimonials-slider--image-left:has(+ .bg-light-green)
    )::before {
        background-color: var(--bg-light-green);
    }

    :is(
        .bg-medium-green + .testimonials-slider--image-right,
        .testimonials-slider--image-left:has(+ .bg-medium-green)
    )::before {
        background-color: var(--bg-medium-green);
    }

    :is(
        .bg-green + .testimonials-slider--image-right,
        .testimonials-slider--image-left:has(+ .bg-green)
    )::before {
        background-color: var(--bg-green);
    }

    :is(
        .bg-dark + .testimonials-slider--image-right,
        .testimonials-slider--image-left:has(+ .bg-dark)
    )::before {
        background-color: var(--bg-dark);
    }

    :is(
        .bg-gradient + .testimonials-slider--image-right,
        .testimonials-slider--image-left:has(+ .bg-gradient)
    )::before {
        background: var(--bg-gradient);
    }
}


/* ==========================================================
   INNER LAYOUT
=========================================================== */

.testimonials-slider__inner {
    position: relative;
    z-index: calc(var(--z-dropdown) + 2);
}

.testimonials-slider__heading-group {
    max-width: 60.25rem;
}

.testimonials-slider--image-right .testimonials-slider__heading-group {
    text-align: left;
}

.testimonials-slider__heading-group h2 {
    margin: 0;
}


/* ==========================================================
   SLICK TRACK
=========================================================== */

.testimonials-slider__slider {
    position: relative;
    z-index: calc(var(--z-dropdown) + 1);
}

/* Override Slick inline flex on track - equal-height slides (see css-organization.mdc) */
.testimonials-slider .slick-track {
    display: flex !important;
    padding: 20px 0;
}

.testimonials-slider .testimonials-slider__slider:not(:has(.slick-arrow)) {
    margin-bottom: 15px;
}

.testimonials-slider .slick-slide {
    height: inherit !important;
    vertical-align: top;
}

.testimonials-slider.fx-slider .fx-slide {
    height: 100%;
}

.testimonials-slider .slick-slide > div {
    display: flex;
    padding-inline: calc(var(--content-gap) / 2);
    height: 100%;
}

.testimonials-slider .slick-list {
    margin-inline: calc(var(--content-gap) / -2);
}


/* ==========================================================
   CARD
=========================================================== */

.testimonials-slider__slide {
    display: flex;
    height: 100%;
    min-height: 0;
}

.testimonials-slider__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-heading-top);
    height: 100%;
    padding: 1.875rem;
    background-color: var(--color-white);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-md);
}

.testimonials-slider__rating {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sub-to-heading);
    color: var(--color-primary);
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.testimonials-slider__rating .be-icon-star {
    font-size: 24px;
    line-height: 1;
}

.testimonials-slider__star {
    flex-shrink: 0;
    width: var(--subheading-mark-size);
    height: var(--subheading-mark-size);
    color: var(--color-primary);
}

.testimonials-slider__star--muted {
    opacity: 0.85;
}

.testimonials-slider__quote {
    background: var(--color-white);
    border-radius: 0;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    color: var(--color-body);
}

.testimonials-slider__quote.has-scrollable-content {
    max-height: 168px;
    overflow-y: auto;
    padding-right: 20px;
}

.testimonials-slider__quote::after {
    display: none;
}

.testimonials-slider.bg-light-green blockquote.testimonials-slider__quote {
    background: var(--color-white);
}

.testimonials-slider__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--btn-icon-gap);
    margin-top: auto;
    flex-shrink: 0;
}

.testimonials-slider__author {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: var(--line-height-body);
    color: var(--color-heading);
}

.testimonials-slider__author-title {
    margin: 0.375rem 0 0;
    font-size: var(--font-size-small);
    line-height: var(--line-height-body);
    color: var(--color-body);
}

.testimonials-slider__source-img {
    flex-shrink: 0;
    width: 1.875rem;
    height: 1.875rem;
}


/* ==========================================================
   FOOTER (controls + CTA)
=========================================================== */

.testimonials-slider__footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-heading-top);
}

.testimonials-slider__footer-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-heading-top);
    width: 100%;
}

.testimonials-slider__deco-line {
    display: block;
    height: 2px;
    background-color: var(--color-accent-green-soft);
}

/* Equal-length rails so arrows + dots stay visually centered (matches Figma bar) */
.testimonials-slider__deco-line--lead,
.testimonials-slider__deco-line--trail {
    flex: 1 1 0;
    min-width: 0;
}

.testimonials-slider__nav {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.testimonials-slider__dots {
    display: none;
    flex-shrink: 0;
}

.testimonials-slider__arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1875rem;
    height: 2.1875rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-white);
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.testimonials-slider__arrow:hover,
.testimonials-slider__arrow:focus-visible {
    background-color: var(--color-primary-hover);
}

/**
 * Testimonials nav uses icomoon chevrons (components/slick.css base sizing).
 * Values approximate the former inline SVG dimensions at mobile / tablet+.
 */
.testimonials-slider__arrow > i.be-icon-left-arrow,
.testimonials-slider__arrow > i.be-icon-right-arrow {
    font-size: 9px;
}

.testimonials-slider__cta {
    align-self: center;
}

.testimonials-slider__cta.btn::after {
    font-size: 1.25rem;
}

.testimonials-slider--controls-hidden .testimonials-slider__footer-main {
    display: none;
}


/* ==========================================================
   SLICK DOTS (tablet+)
=========================================================== */

.testimonials-slider .slick-dots {
    display: flex;
    align-items: center;
    gap: 0 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.testimonials-slider .slick-dots li {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.testimonials-slider .slick-dots li button {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--border-radius-pill);
    background-color: var(--color-accent-green-soft);
    color: transparent;
    font-size: 0;
    cursor: pointer;
    transition: width var(--transition-fast), background-color var(--transition-fast);
}

.testimonials-slider .slick-dots li button:hover,
.testimonials-slider .slick-dots li button:focus-visible {
    background-color: var(--color-primary);
}

.testimonials-slider .slick-dots li.slick-active button {
    width: 2.5rem;
    background-color: var(--color-primary);
}


/* ==========================================================
   TABLET (>=768px)
=========================================================== */

@media (min-width: 768px) {
    .testimonials-slider {
        padding-top: calc(var(--section-margins) * 1.25);
        padding-bottom: calc(var(--section-margins) * 1.25);
    }

    .testimonials-slider__quote {
        max-height: 12rem;
    }

    .testimonials-slider__arrow {
        width: 2.8125rem;
        height: 2.8125rem;
    }

    .testimonials-slider__arrow > i.be-icon-left-arrow,
    .testimonials-slider__arrow > i.be-icon-right-arrow {
        font-size: 11px;
    }

    .testimonials-slider__dots {
        display: block;
    }

    .testimonials-slider__footer {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 0 20px;
        flex-wrap: nowrap;
    }

    .testimonials-slider__footer-main {
        flex: 1 1 auto;
        min-width: 0;
    }

    .testimonials-slider__deco-line--lead {
        display: none;
    }

    .testimonials-slider__cta {
        flex-shrink: 0;
    }
}


/* ==========================================================
   DESKTOP (>=1200px)
=========================================================== */

@media (min-width: 1200px) {
    .testimonials-slider {
        --section-margins: 40px;
        padding-top: calc(var(--section-margins) + var(--space-heading-top));
    }

    .bg-white,
    .bg-light-green,
    .bg-medium-green,
    .bg-green,
    .bg-dark,
    .bg-gradient {
        + .testimonials-slider--image-right::before {
            height: calc(var(--section-margins) + var(--space-heading-top));
        }
    }

    .testimonials-slider__slider {
        margin-bottom: var(--content-gap);
    }

    .testimonials-slider__footer {
        max-width: 600px;
        width: 100%;
    }

    .testimonials-slider--image-left .testimonials-slider__footer {
        margin-left: auto;
    }
}


@media (min-width: 1367px) {
    .testimonials-slider {
        --section-margins: 100px;
    }

    .testimonials-slider__footer {
        max-width: 100%;
    }
}

@media (min-width: 2000px) {
    .testimonials-slider--image-left .testimonials__header-row > [class^="col-"],
    .testimonials-slider--image-left .testimonials__header-row > [class*=" col-"] {
        width: 66.66666667%;
    }

    .testimonials__slider-row > [class^="col-"],
    .testimonials__slider-row > [class*=" col-"] {
        width: 83.33333333%;
    }

    .testimonials__footer-row > [class^="col-"],
    .testimonials__footer-row > [class*=" col-"] {
        width: 66.66666667%;
    }
}

/* ==========================================================
   REDUCED MOTION
=========================================================== */

@media (prefers-reduced-motion: reduce) {
    .testimonials-slider__arrow,
    .testimonials-slider .slick-dots li button {
        transition: none;
    }
}