/* Testimonials — Swiper carousel where the card stays fixed and only the
   text content swipes between testimonials. Arrows + dots live outside the card. */

.testimonials-block {
    padding: 64px 0 80px;
    background-color: #fffbf4;
    /* Override Swiper's default blue for arrows + dots. */
    --swiper-theme-color: #688d78;
    --swiper-navigation-color: #233129;
    --swiper-navigation-size: 18px;
}

.testimonials-block__inner {
    max-width: 1264px;
    margin: 0 auto;
    padding: 0 32px;
}

.testimonials-block__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    margin-bottom: 32px;
}

/* Viewport is the positioning context for the fixed card + outside nav.
   Horizontal padding makes room for the arrow buttons; bottom padding for dots. */
.testimonials-block__viewport {
    position: relative;
    max-width: 928px;
    margin: 0 auto;
    padding: 0 72px 40px;
}

/* The visible white card — fixed height so the swiper inside has a real
   height to inherit. Bump this value if longer testimonials get clipped. */
.testimonials-block__card {
    background-color: #fff;
    border-radius: 16px;
    height: 324px;
    overflow: hidden;
}

.testimonials-block__swiper {
    width: 100%;
    height: 100%;
}

/* Each slide holds only text; sized to fill the card so content centers
   vertically. Swiper already sets width/height to 100% on slides — we only
   override display + padding for the text layout. */
.testimonials-block__slide {
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 56px 48px;
    text-align: center;
}

/* Large decorative opening quote mark above the testimonial text. */
.testimonials-block__slide::before {
    content: "\201C";
    font-family: "Neue Augenblick Bold", "Neue Augenblick", sans-serif;
    font-size: 96px;
    line-height: 0.6;
    color: #688d78;
}

.testimonials-block__quote {
    margin: 0;
    font-family: "Open Sans";
    font-size: 24px;
    line-height: 36px;
    letter-spacing: -0.48px;
    color: #444;
    max-width: 766px;
}

.testimonials-block__attribution {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
}

.testimonials-block__name {
    font-family: "Open Sans";
    font-weight: 600;
    font-size: 16px;
    color: #444;
}

/* Nav arrows — positioned relative to the viewport, outside the card. */
.testimonials-block__nav {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    background-color: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(26, 38, 32, 0.08);
    color: #233129;
    cursor: pointer;
}

.testimonials-block__nav--prev {
    left: 0;
}

.testimonials-block__nav--next {
    right: 0;
}

.testimonials-block__nav::after {
    font-size: 14px;
    font-weight: 700;
}

/* Pagination dots — anchored to the bottom of the viewport, under the card.
   Forced to a full-width centered flex row so Swiper's own positioning can't
   push the bullets off-center. */
.testimonials-block__pagination {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 8px;
    width: 100% !important;
    transform: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px;
}

.testimonials-block__pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 !important; /* gap on the container handles spacing */
    background-color: #688d78;
    opacity: 0.3;
    transition: opacity 0.2s ease, width 0.2s ease;
}

.testimonials-block__pagination .swiper-pagination-bullet-active {
    opacity: 1;
    width: 24px;
    border-radius: 999px;
}

/* Single-slide state — JS adds this when fewer than 2 testimonials. */
.testimonials-block__viewport--single .testimonials-block__nav,
.testimonials-block__viewport--single .testimonials-block__pagination {
    display: none;
}

@media (max-width: 700px) {
    .testimonials-block {
        padding: 56px 0 64px;
    }
    .testimonials-block__inner {
        padding: 0 16px;
    }
    /* Header left-aligned on mobile, not centred. */
    .testimonials-block__header {
        align-items: flex-start;
        text-align: left;
    }
    .testimonials-block__viewport {
        padding: 0 0 40px;
    }
    .testimonials-block__slide {
        padding: 36px 24px;
    }
    .testimonials-block__card {
        height: 360px;
    }
    /* Keep the quote at 24/36 on mobile too (was 18/28 — too small). */
    .testimonials-block__quote {
        font-size: 24px;
        line-height: 36px;
    }
    .testimonials-block__nav {
        display: none;
    }
}