/* ======================================
   Review Slider (SwiperJS)
   ====================================== */

.review-slider {
    --rs-gap: 20px;

    /* Aspect presets */
    --rs-ar-16x9: calc(9 / 16 * 100%);
    --rs-ar-9x16: calc(16 / 9 * 100%);
    --rs-ar-1x1: 100%;
    --rs-ar-3x4: calc(4 / 3 * 100%);
}

/* Swiper base spacing */
.review-slider .rs-swiper { width: 100%; }
.review-slider .swiper-wrapper { align-items: stretch; }
.review-slider .swiper-slide { height: auto; }

/* Card */
.rs-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,0.03);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Media + ratio shim */
.rs-media { position: relative; width: 100%; overflow: hidden; background: #000; }
.rs-ratio { width: 100%; pointer-events: none; }

/* Aspect classes (when a specific ratio is chosen) */
.rs-card.is-aspect-16x9 .rs-ratio { padding-top: var(--rs-ar-16x9); }
.rs-card.is-aspect-9x16 .rs-ratio { padding-top: var(--rs-ar-9x16); }
.rs-card.is-aspect-1x1   .rs-ratio { padding-top: var(--rs-ar-1x1); }
.rs-card.is-aspect-3x4   .rs-ratio { padding-top: var(--rs-ar-3x4); }

/* Enforce 16/9 container for ALL VIDEOS mode */
.review-slider.review-slider--contain-all .rs-ratio { padding-top: var(--rs-ar-16x9); }

/* Video element */
.rs-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; /* poster looks great */
    display: block;
    transition: object-fit .2s ease;
}

/* In ALL VIDEOS, contain during playback */
.review-slider.review-slider--contain-all .rs-video { object-fit: contain; background: #000; }
/* While poster is visible, keep cover (JS toggles .is-poster) */
.review-slider .rs-video.is-poster { object-fit: cover !important; }

/* Custom play/pause button */
.rs-ctrl {
    position: absolute;
    inset: 0; margin: auto;
    width: 64px; height: 64px;
    border: none; border-radius: 999px;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    cursor: pointer;
    display: grid; place-items: center;
    transition: transform .15s ease, background .2s ease, opacity .2s ease;
    z-index: 2;
    opacity: 0; /* hidden by default on desktop; visible on hover or touch */
}
.rs-ctrl:hover { transform: scale(1.04); background: rgba(0,0,0,0.55); }
.rs-ctrl:active { transform: scale(0.98); }

/* Icon */
.rs-ctrl::before {
    content: '';
    display: block;
    width: 0; height: 0; border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #fff;
    transform: translateX(2px);
}
.rs-ctrl.is-playing::before {
    content: '';
    width: 18px; height: 18px; border: none;
    background:
            linear-gradient(#fff,#fff) left center/6px 18px no-repeat,
            linear-gradient(#fff,#fff) right center/6px 18px no-repeat;
}

/* Desktop hover shows control */
@media (hover: hover) and (pointer: fine) {
    .rs-media:hover .rs-ctrl { opacity: 1; }
    .rs-ctrl:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 4px; }
}
/* Touch: always visible, but hide when native controls active */
@media (hover: none), (pointer: coarse) {
    .rs-ctrl { opacity: 1; }
    .rs-card.is-playing-native .rs-ctrl { display: none; }
}

/* Meta */
.rs-meta { padding: 12px 14px 16px; }
.rs-heading {
    margin: 0 0 6px 0;
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.2;
}
.rs-heading a { color: inherit; text-decoration: none; }
.rs-heading a:hover { text-decoration: underline; }
.rs-sub {
    margin: 0;
    font-weight: 600;
    opacity: .8;
    font-size: clamp(13px, 1.6vw, 16px);
}

/* Swiper UI tweaks */
.rs-pagination { margin-top: 8px; position: static; }
.rs-nav { color: var(--theme-text, #111); }

/* Optional when no meta */
.review-slider.review-slider--no-meta .rs-media {
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

.review-slider {
    /* Themeable tokens */
    --rs-ui-size: 44px;              /* arrow button size */
    --rs-ui-radius: 999px;
    --rs-ui-bg: rgba(17, 17, 17, 0.55);
    --rs-ui-bg-hover: rgba(17, 17, 17, 0.72);
    --rs-ui-color: #fff;
    --rs-ui-shadow: 0 4px 16px rgba(0,0,0,0.25);

    --rs-dot-size: 8px;
    --rs-dot-gap: 8px;
    --rs-dot-color: rgba(17,17,17,0.28);
    --rs-dot-active: #111;           /* active dot color */
}

/* NAV BUTTONS */
.review-slider .rs-nav.swiper-button-prev,
.review-slider .rs-nav.swiper-button-next {
    width: var(--rs-ui-size);
    height: var(--rs-ui-size);
    border-radius: var(--rs-ui-radius);
    background: var(--rs-ui-bg);
    color: var(--rs-ui-color);
    box-shadow: var(--rs-ui-shadow);
    backdrop-filter: blur(3px);
    transition: background .2s ease, transform .15s ease, opacity .2s ease;
}

.review-slider .rs-nav.swiper-button-prev:hover,
.review-slider .rs-nav.swiper-button-next:hover {
    background: var(--rs-ui-bg-hover);
    transform: translateY(-1px);
}

.review-slider .rs-nav.swiper-button-prev:active,
.review-slider .rs-nav.swiper-button-next:active {
    transform: translateY(0);
}

/* Use Swiper's built-in arrow glyphs */
.review-slider .rs-nav::after {
    font-size: 16px; /* arrow icon size */
}

/* Hide buttons when disabled (Swiper adds .swiper-button-disabled) */
.review-slider .rs-nav.swiper-button-disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* Better placement on top of slides */
.review-slider .rs-nav.swiper-button-prev { left: 8px; }
.review-slider .rs-nav.swiper-button-next { right: 8px; }
@media (max-width: 640px) {
    .review-slider .rs-nav.swiper-button-prev { left: 4px; }
    .review-slider .rs-nav.swiper-button-next { right: 4px; }
}

/* PAGINATION BULLETS */
.review-slider .rs-pagination.swiper-pagination {
    position: static;      /* we already set this earlier; keeps it below slider */
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--rs-dot-gap);
}

.review-slider .rs-pagination .swiper-pagination-bullet {
    width: var(--rs-dot-size);
    height: var(--rs-dot-size);
    background: var(--rs-dot-color);
    opacity: 1;                 /* keep solid color */
    margin: 0 !important;       /* use our gap instead */
    transition: transform .15s ease, background-color .2s ease;
}

.review-slider .rs-pagination .swiper-pagination-bullet:hover {
    transform: scale(1.15);
}

.review-slider .rs-pagination .swiper-pagination-bullet-active {
    background: var(--rs-dot-active);
    transform: scale(1.2);
    border-radius: 999px;
}

/* Optional: larger bullets on touch for easier tapping */
@media (hover: none), (pointer: coarse) {
    .review-slider .rs-pagination .swiper-pagination-bullet {
        width: calc(var(--rs-dot-size) + 2px);
        height: calc(var(--rs-dot-size) + 2px);
    }
}

/* Optional: high-contrast/dark backgrounds */
.review-slider.review-slider--dark {
    --rs-ui-bg: rgba(255,255,255,0.26);
    --rs-ui-bg-hover: rgba(255,255,255,0.42);
    --rs-ui-color: #111;
    --rs-dot-color: rgba(255,255,255,0.42);
    --rs-dot-active: #fff;
}