/**
 * [reviews_slider_shortcode] carousel.
 *
 * Selectors are doubled up on .reviews-container.dsa-reviews-slider to keep the same
 * specificity the referral-programme scoping used, so these rules still beat the
 * generic .reviews-container rules in style.css regardless of stylesheet load order.
 */
.reviews-container.dsa-reviews-slider {
    background: #fff;
    padding: 0 15px;
}
.reviews-container.dsa-reviews-slider .heading-section .heading {
    font-size: 30px;
    text-align: center;
    color: #333;
    font-weight: 500;
    line-height: 36px;
}
/* style.css lays .review-items out as a 2- or 3-column grid (and a 90%-wide flex row
   below 665px) for the non-carousel LSPP review grid. slick's single .slick-list child
   would sit in one column of three, so collapse it to one full-width column.
   minmax(0, 1fr) rather than 1fr: an auto minimum lets the slick-track's own width
   expand the column, slick then re-measures .slick-list, widens the track again, and
   the slide width runs away into six figures. */
.reviews-container.dsa-reviews-slider .review-items {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

/* style.css drops the clip below 768px for the LSPP reviews shortcode, which lets the
   slides spill past the viewport. A carousel needs it. */
.reviews-container.dsa-reviews-slider .container .review-items .slick-list {
    overflow: hidden;
}

/* slick positions the track from the slide width it writes inline, so the margin
   style.css puts on .slick-slide below 991px desyncs the maths and leaves blank
   slides. Gutters go on the card inside the slide instead. */
.reviews-container.dsa-reviews-slider .review-items .slick-list .slick-track .slick-slide {
    margin: 0 15px;
}
@media (max-width: 768px) {
    .reviews-container.dsa-reviews-slider .review-items .slick-list .slick-track .slick-slide {
        margin: 0 6px;
    }
}

.reviews-container.dsa-reviews-slider .review-items .item {
    margin: 0;
    display: flex;
    align-items: flex-start;
    flex-direction: column;

    border-radius: 4px;
    background: #fafafa;
    padding: 32px;

    min-height: 300px;
    box-shadow: unset;
}
.reviews-container.dsa-reviews-slider .review-items .item .media-left {
    width: 100%;
}
.reviews-container.dsa-reviews-slider .review-items .item .review-apostrophe-icon {
    margin-bottom: 16px;
    font-size: 50px;
    height: 21px;
    text-align: left;
}
.reviews-container.dsa-reviews-slider .review-items .dsa-reviews-slider__arrow {
    position: absolute;
    top: 40%;
    cursor: pointer;
}
.reviews-container.dsa-reviews-slider .review-items .dsa-reviews-slider__arrow--prev {
    left: -50px;
}
.reviews-container.dsa-reviews-slider .review-items .dsa-reviews-slider__arrow--next {
    right: -50px;
}

@media (max-width: 991px) {
    .reviews-container.dsa-reviews-slider,
    .reviews-container.dsa-reviews-slider .container {
        padding: 0;
    }
    .reviews-container.dsa-reviews-slider .container {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .reviews-container.dsa-reviews-slider .review-items .slick-dots {
        position: absolute;
        left: 0;
        right: 0;
        display: flex !important;
        gap: 4px;
        padding: 0 15px;
        margin: 0;
        list-style: none;
        z-index: 1;
        width: 100%;
    }
    .reviews-container.dsa-reviews-slider .review-items .slick-dots li {
        flex: 1 1 0;
        height: 5px;
        margin: 0;
    }
    .reviews-container.dsa-reviews-slider .review-items .slick-dots button {
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        border-radius: 20px;
        background: rgba(229, 224, 218, 0.50);
        text-indent: -9999px;
        overflow: hidden;
    }
    .reviews-container.dsa-reviews-slider .review-items .slick-dots .slick-active { min-width: 40px; }
    .reviews-container.dsa-reviews-slider .review-items .slick-dots .slick-active button { background: #B1AFAD; }
}

@media (max-width: 600px) {
    .reviews-container.dsa-reviews-slider,
    .reviews-container.dsa-reviews-slider .container {
        padding: 0;
    }
    .reviews-container.dsa-reviews-slider .heading-section {
        padding: 0 15px;
    }
    .reviews-container.dsa-reviews-slider .review-items .item {
        margin: 0 5px;
        padding: 20px;
    }
}
