/**
 * Reviews carousel.
 *
 * Swiper's structural CSS (.swiper-container / -wrapper / -slide) already ships in the
 * theme's compiled stylesheet, so only the visual layer lives here.
 */
.pl-reviews {
    --pl-rv-card-padding: var(--pl-rv-card-padding-desktop, 28px);
    --pl-rv-card-radius: var(--pl-rv-card-radius-desktop, 20px);
    --pl-rv-star-size: var(--pl-rv-star-size-desktop, 16px);
    --pl-rv-footer-gap: 20px;
}

@media (width <=980px) {
    .pl-reviews {
        --pl-rv-card-padding: var(--pl-rv-card-padding-tablet, var(--pl-rv-card-padding-desktop, 28px));
        --pl-rv-card-radius: var(--pl-rv-card-radius-tablet, var(--pl-rv-card-radius-desktop, 20px));
        --pl-rv-star-size: var(--pl-rv-star-size-tablet, var(--pl-rv-star-size-desktop, 16px));
    }
}

@media (width <=767px) {
    .pl-reviews {
        --pl-rv-card-padding: var(--pl-rv-card-padding-phone, var(--pl-rv-card-padding-tablet, var(--pl-rv-card-padding-desktop, 28px)));
        --pl-rv-card-radius: var(--pl-rv-card-radius-phone, var(--pl-rv-card-radius-tablet, var(--pl-rv-card-radius-desktop, 20px)));
        --pl-rv-star-size: var(--pl-rv-star-size-phone, var(--pl-rv-star-size-tablet, var(--pl-rv-star-size-desktop, 16px)));
    }
}

/* Swiper sizes the slides inline; height:auto lets them stretch to the tallest card
   in view instead of inheriting a fixed track height. */
.pl-reviews__slider .swiper-wrapper {
    align-items: stretch;
}

.pl-reviews-item.swiper-slide {
    block-size: auto;
}

.pl-reviews-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pl-rv-footer-gap);
    box-sizing: border-box;
    padding: var(--pl-rv-card-padding);
    border: 1px solid var(--pl-rv-card-border, rgba(196, 168, 130, 0.3));
    border-radius: var(--pl-rv-card-radius);
    background: var(--pl-rv-card-background, #fff);
}

/* Video slides drop the card chrome and let the media fill the slide. */
.pl-reviews-item--video {
    padding: 0;
    border: 0;
    overflow: hidden;
}

/* Named elements, not `> *`: a universal child selector also hits the <script> an
   embed ships with, and display:block would render it as visible text. */
.pl-reviews-item--video>iframe,
.pl-reviews-item--video>video {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* Vidalytics sizes this box itself; it only needs to be full width and positioned. */
.pl-reviews-item__vidalytics {
    position: relative;
    inline-size: 100%;
}

.pl-reviews-item__stars {
    display: flex;
    gap: 2px;
    font-size: var(--pl-rv-star-size);
    line-height: 1;
}

.pl-reviews-item__star {
    color: var(--pl-rv-star-empty-color, rgba(252, 190, 115, 0.28));
}

.pl-reviews-item__star--filled {
    color: var(--pl-rv-star-color, #fcbe73);
}

.pl-reviews-item__title {
    margin-block-start: 16px;
    color: #0d1b2a;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.pl-reviews-item__body {
    margin: 12px 0 0;
    padding: 0;
    color: #4c4e53;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 23.8px;
}

.pl-reviews-item__footer {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pl-reviews-item__name {
    color: #0d1b2a;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.pl-reviews-item__meta {
    color: #4c4e53;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* Navigation: prev arrow, dots, next arrow, in one centred row. */
.pl-reviews__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-block-start: 24px;
}

/* Swiper's watchOverflow locks the controls when every slide already fits, and the
   theme's stylesheet hides anything carrying a lock class. The row itself would still
   contribute its top margin, so collapse it whenever its controls are locked. */
.pl-reviews__nav:has(.swiper-pagination-lock),
.pl-reviews__nav:has(.swiper-button-lock) {
    display: none;
}

/* Swiper owns the disabled, active and locked states via its own classes, which the
   theme's stylesheet already covers. Only the sizes and brand colours are set here. */
.pl-reviews__dots {
    display: flex;
    align-items: center;
    gap: 16px;

    /* Undo the absolute positioning Swiper's pagination CSS applies, so the dots sit
       in the navigation row instead of over the slides. */
    position: static;
    inline-size: auto;
}

.pl-reviews__dots .swiper-pagination-bullet {
    inline-size: 12px;
    block-size: 12px;
    aspect-ratio: 1 / 1;
    margin: 0;
    background: var(--pl-rv-nav-inactive, #d9d9d9);
    opacity: 1;
}

.pl-reviews__dots .swiper-pagination-bullet-active {
    background: var(--pl-rv-nav-active, #1c439b);
}

.pl-reviews__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 16px;
    block-size: 24px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--pl-rv-nav-active, #1c439b);
    cursor: pointer;
}

.pl-reviews__arrow svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
}