/*
 * Block Name: Testimonials
 * Description: Two-column layout with intro text left, Swiper testimonial carousel right.
 * Migrated from Slick JS to Swiper. All .slick-* selectors removed.
 *
 * READ MORE FEATURE
 * .testimonial-text-wrap  - relative container so the fade can be absolutely positioned.
 * .testimonial-text       - the quote copy. Clamped via max-height when .is-clamped is present.
 * .testimonial-text-fade  - gradient that masks the bottom edge of clamped text.
 * .testimonial-read-more  - the "Read more / Read less" toggle button.
 *
 * The JS (block-testimonials.js) handles:
 *   - Measuring whether text is actually tall enough to need clamping.
 *   - Removing .is-hidden from the button when it is needed.
 *   - Toggling .is-clamped on the text and .is-visible on the fade.
 *   - Updating button label and aria-expanded attribute.
 */


/* ============================================================
   GRID LAYOUT
============================================================ */

.block-testimonials .testimonials-grid {
    display: grid;
    grid-template-columns: 8fr 10fr;
    grid-gap: 0;
    align-items: flex-start;
}


/* ============================================================
   LEFT COLUMN
============================================================ */

.block-testimonials .testimonials-heading {
    margin-bottom: 3rem;
    font-size: 4rem;
    line-height: 1.2;
}

.block-testimonials .introduction-content {
    font-size: 1.8rem;
    line-height: 1.6;
}


/* ============================================================
   RIGHT COLUMN - carousel wrapper
============================================================ */

.block-testimonials .testimonials-right {
    position: relative;
    min-width: 0;       /* Prevents the grid column overflowing its track */
    overflow-x: hidden;
    overflow-y: visible;
}


/* ============================================================
   SWIPER STRUCTURAL CSS
   These three rules are the minimum Swiper needs to function as
   a slider rather than a stacked list. We write them ourselves
   so we can skip loading the full swiper.min.css (~30kb).

   .swiper          - clips overflow so off-screen slides are hidden
   .swiper-wrapper  - flex row so slides sit side by side
   .swiper-slide    - stops slides shrinking below their calculated width
============================================================ */

.block-testimonials .testimonials-swiper {
    overflow: hidden;  /* Clip slides that are off-screen */
    position: relative;
    width: 100%;
}

.block-testimonials .swiper-wrapper {
    display: flex;
    transition-property: transform; /* Swiper sets transition-duration inline at runtime */
    width: 100%;
}

.block-testimonials .swiper-slide {
    flex-shrink: 0; /* Swiper sets the width inline - don't let flex squash it */
}


/* ============================================================
   INDIVIDUAL SLIDE CARD
============================================================ */

.block-testimonials .testimonial-slide {
    padding: 3rem;
    margin: 1rem 3rem 3rem 4rem; /* Recreates the visual gap between columns */
    box-sizing: border-box;
    background: #fff;
    border-radius: 2rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
    height: auto; /* Let Swiper manage height - don't force equal heights here */
}

.block-testimonials .person-details {
    margin-bottom: 1.5rem;
}


/* ============================================================
   COLLAPSIBLE TEXT REGION
   The wrapper is 'position: relative' so the fade gradient can
   be absolutely positioned against it.
============================================================ */

.block-testimonials .testimonial-text-wrap {
    position: relative;
    margin-bottom: 1rem; /* Space between text and the Read more button */
}

/*
 * The quote copy itself.
 * When .is-clamped is present (set by JS on init, removed on expand),
 * text is cut off at the max-height value below. Choose a value that
 * corresponds to a comfortable number of lines at the current font size.
 *
 * At 1.8rem font / 1.6 line-height each line is ~2.88rem (~28.8px).
 * 10rem (~100px) gives roughly 3.5 visible lines - enough to read the
 * start of a quote before inviting the reader to expand.
 */
.block-testimonials .testimonial-text {
    font-size: 1.8rem;
    line-height: 1.6;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.block-testimonials .testimonial-text.is-clamped {
    max-height: 10rem; /* ~3.5 lines at 1.8rem / 1.6 line-height */
}

/*
 * When expanded, use a large max-height rather than 'none'.
 * CSS transitions cannot animate to/from 'none', but they can
 * animate between two length values. 200rem is safely larger than
 * any realistic testimonial, so the expand animation plays correctly.
 */
.block-testimonials .testimonial-text.is-expanded {
    max-height: 200rem;
}

.block-testimonials .testimonial-text p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   FADE GRADIENT OVERLAY
   Sits over the bottom of the clamped text to signal there is
   more content below, rather than an abrupt cut-off.
   JS toggles .is-visible to show/hide it alongside the clamp.
============================================================ */

.block-testimonials .testimonial-text-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5rem;
    /* Fades from transparent at the top to the card's white background at the bottom */
    background: linear-gradient( to bottom, transparent, #fff );
    pointer-events: none; /* Clicks pass through to text below */
    opacity: 0;           /* Hidden by default */
    transition: opacity 0.3s ease;
}

.block-testimonials .testimonial-text-fade.is-visible {
    opacity: 1;
}


/* ============================================================
   READ MORE / READ LESS BUTTON
   Styled as inline text. Colour inherits from the current
   theme font colour so it adapts automatically to any brand
   colour set. Underline signals it is interactive.
============================================================ */

.block-testimonials .testimonial-read-more {
    display: inline-block;
    margin-bottom: 2rem;  /* Gap between button and person details below */
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;

    /* Text treatment - inherits theme font colour, adds underline */
    font-size: 1.6rem;
    font-family: inherit;
    font-weight: inherit;
    color: inherit;       /* Picks up whatever colour the theme sets on body text / cards */
    text-decoration: underline;
    text-underline-offset: 0.3em;
    line-height: 1.6;

    transition: opacity 0.2s ease;
}

.block-testimonials .testimonial-read-more:hover {
    opacity: 0.65;
}

/* JS removes this class when the text is tall enough to need clamping */
.block-testimonials .testimonial-read-more.is-hidden {
    display: none;
}


/* ============================================================
   STAR RATING
============================================================ */

.block-testimonials .star-rating {
    display: flex;
    gap: 0.5rem;
}

.block-testimonials .star {
    font-size: 2.4rem;
    color: #ddd;
}

.block-testimonials .star.filled {
    color: var(--brand-1);
}


/* ============================================================
   SWIPER PAGINATION DOTS
   Swiper injects <span class="swiper-pagination-bullet"> elements
   into the .testimonials-pagination div.
============================================================ */

.block-testimonials .testimonials-pagination {
    display: flex;
    gap: 1rem;
    padding-left: 4rem; /* Align with the slide card left edge */
    margin-top: 1.5rem;
}

/*
 * Each bullet is a plain dot by default.
 * We override Swiper's default styles here to match the brand.
 * !important is needed because Swiper inlines some dimension styles.
 */
.block-testimonials .testimonials-pagination .swiper-pagination-bullet {
    width: 1.2rem !important;
    height: 1.2rem !important;
    border-radius: 50%;
    background: var(--brand-1);
    opacity: 1; /* Swiper dims inactive bullets by default - keep them fully visible */
    transition: transform 0.3s, background 0.3s;
    cursor: pointer;
    flex-shrink: 0;
}

/* Active bullet - highlight with brand-2 colour */
.block-testimonials .testimonials-pagination .swiper-pagination-bullet-active {
    background: var(--brand-2);
}

/* Hover nudge to give feedback on interactive bullets */
.block-testimonials .testimonials-pagination .swiper-pagination-bullet:hover {
    transform: scale(1.2);
}


/* ============================================================
   RESPONSIVE - TABLET AND BELOW
============================================================ */

@media (max-width: 768px) {

    .block-testimonials .testimonials-grid {
        grid-template-columns: 1fr;
        grid-gap: 4rem;
    }

    .block-testimonials .testimonials-left {
        padding-right: 0;
    }

    .block-testimonials .testimonials-heading {
        font-size: 3rem;
        margin-bottom: 2rem;
    }

    .block-testimonials .testimonial-text {
        font-size: 1.6rem;
    }

    /*
     * Recalculate clamp height for the slightly smaller mobile font.
     * At 1.6rem / 1.6 line-height each line is ~2.56rem (~25.6px).
     * 9rem gives roughly 3.5 lines again.
     */
    .block-testimonials .testimonial-text.is-clamped {
        max-height: 9rem;
    }

    .block-testimonials .testimonials-right {
        padding: 2rem 0;
        margin: -2rem 0;
    }

    .block-testimonials .testimonial-slide {
        padding: 2rem;
        margin: 1rem 1rem 2rem 1rem;
    }

    .block-testimonials .testimonials-pagination {
        padding-left: 1rem;
    }
}


/* ============================================================
   RESPONSIVE - MOBILE
============================================================ */

@media (max-width: 550px) {
    .block-testimonials .testimonials-heading {
        font-size: 2.5rem;
    }
}

.block-testimonials .testimonial-slide .testimonial-text .text.read-more{max-height: 200px; overflow-y: hidden; mask-image: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 1) 100%); transition: max-height 0.2s;}
.block-testimonials .testimonial-slide .testimonial-text.open .text.read-more{max-height: 750px; mask-image: none; transition: max-height 0.2s;}

.block-testimonials .testimonial-slide .testimonial-text .text{transition: max-height 0.2s;}
.block-testimonials .testimonial-slide .testimonial-text.open .text{transition: max-height 0.2s;}

.block-testimonials .testimonial-slide .testimonial-text .read-more-toggle{display: none; cursor: pointer; text-decoration: underline; color: var(--brand-2); transition: all 0.2s;}
.block-testimonials .testimonial-slide .testimonial-text .read-more-toggle:hover{color: var(--brand-1); opacity: 0.8; transition: all 0.2s;}

.block-testimonials .testimonial-slide .testimonial-text .read-more-toggle.show{display: block;}