/*
 * 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.
 */

/* ============================================================
   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 .testimonial-text {
    margin-bottom: 2rem;
    font-size: 1.8rem;
    line-height: 1.6;
}

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

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


/* ============================================================
   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;
    }

    .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;
    }
}