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

/* 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
   - ALWAYS visible by default (so users see it's a video)
   - Hidden while playing on desktop (JS toggles .is-playing-desktop)
   - Hidden on touch while native controls are active (.is-playing-native)
*/
.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: 1; /* <— key change: always visible when not playing */
}
.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 behavior:
   When playing, auto-hide (opacity:0) except on hover */
@media (hover: hover) and (pointer: fine) {
  .rs-card.is-playing-desktop .rs-ctrl { opacity: 0; }
  .rs-card.is-playing-desktop .rs-media:hover .rs-ctrl { opacity: 1; }

  .rs-ctrl:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
}

/* Touch: custom control hidden while native controls active */
@media (hover: none), (pointer: coarse) {
  .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;
}

/* ====== Basic Nav + Pagination from earlier ====== */
.review-slider {
  --rs-ui-size: 44px;
  --rs-ui-radius: 999px;
  --rs-ui-bg: var(--theme-palette-color-9);
  --rs-ui-bg-hover: var(--theme-palette-color-10);
  --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;
}

@media (max-width: 640px) {
	.review-slider {
		--rs-ui-size: 24px;
	}
}

.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);
}
.review-slider .rs-nav::after { font-size: 16px; }
@media (max-width: 640px) {
	.review-slider .rs-nav::after { font-size: 13px; }
}
.review-slider .rs-nav.swiper-button-disabled {
  opacity: 0.7; cursor: default; pointer-events: none;
}
.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; }
}

.review-slider .rs-pagination.swiper-pagination {
  position: static;
  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; margin: 0 !important;
  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;
}
@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);
  }
}