/* =========================================================
   MOVING ART TV - CLEAN FEATURED SLIDER (IMAGES ONLY)
   ========================================================= */

/* 1️⃣ Maintain Aspect Ratio (Criterion-style) */
[data-test="themeless-featured-slider"] swiper-slide > div {
  position: relative;
  width: 100%;
  padding-top: 37.5%; /* ~2.66:1 ratio like Criterion */
  overflow: hidden;
  border-radius: 0;
}

/* Image fills container, no cropping */
[data-test="themeless-featured-slider"] swiper-slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Disable Uscreen’s height presets */
[data-test="themeless-featured-slider"] swiper-slide .h-80,
[data-test="themeless-featured-slider"] swiper-slide .sm\\:h-\\[25rem\\],
[data-test="themeless-featured-slider"] swiper-slide .xl\\:h-\\[31\\.25rem\\] {
  height: auto !important;
}

/* 2️⃣ Remove gradient overlay and all overlays */
.themeless-featured-slide {
  display: none !important;
}

/* Hide all titles, descriptions, categories, authors */
[data-test="slide-title"],
[data-test="slide-short-description"],
[data-test="slide-category"],
[data-test="slide-duration"],
[data-test="slide-author"] {
  display: none !important;
}

/* 3️⃣ Hide Play button entirely */
[data-test="themeless-featured-slider"] a[href] {
  display: none !important;
}

/* 4️⃣ No hover effects */
[data-test="themeless-featured-slider"] swiper-slide img {
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* 5️⃣ Mobile adjustment — allow slight cover to fill vertically */
@media (max-width: 767px) {
  [data-test="themeless-featured-slider"] swiper-slide img {
    object-fit: cover;
  }
}

/* =========================================================
   FULL-WIDTH BANNER FIX (NO SIDE SHIFT)
   ========================================================= */

/* Remove padding around the featured slider */
[data-test="themeless-featured-slider"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Target the outer Uscreen wrapper (.px-[3%]) and neutralize it */
[data-test="themeless-featured-slider"] .px-\[3\%\] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Let the slider stretch to its parent container width, not viewport */
[data-test="themeless-featured-slider"] swiper-slide,
[data-test="themeless-featured-slider"] swiper-slide > div,
[data-test="themeless-featured-slider"] swiper-slide img {
  width: 100% !important;
  max-width: 100% !important;
}

/* Remove any internal gap between slides */
[data-test="themeless-featured-slider"] swiper-slide {
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   ABSOLUTE FULL-WIDTH SLIDER (NO SIDE GAP)
   ========================================================= */

/* The wrapper Uscreen uses around the slider adds px-[3%].
   We neutralize it and let its child expand to full container width. */
[data-test="themeless-featured-slider"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}

/* Force the ds-swiper element to escape any internal padding */
[data-test="themeless-featured-slider"] ds-swiper {
  display: block !important;
  width: calc(
    100% + 6%
  ) !important; /* compensate for the removed px-[3%] on each side */
  margin-left: -3% !important;
  margin-right: -3% !important;
}

/* Make each slide occupy the entire viewport width */
[data-test="themeless-featured-slider"] swiper-slide {
  width: 100% !important;
  flex: 0 0 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure no internal spacing in Swiper wrapper */
[data-test="themeless-featured-slider"] .swiper-wrapper {
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Each image fills its slide completely */
[data-test="themeless-featured-slider"] swiper-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
}

/* =========================================================
   MAKE ENTIRE SLIDE CLICKABLE
   ========================================================= */

/* Create a full-size invisible click layer inside each slide */
[data-test="themeless-featured-slider"] swiper-slide a[href] {
  position: absolute !important;
  inset: 0 !important; /* top: 0; right: 0; bottom: 0; left: 0 */
  width: 100% !important;
  height: 100% !important;
  z-index: 10 !important;
  display: block !important;
  pointer-events: auto !important;
  opacity: 0; /* invisible, but clickable */
}

/* Ensure only this invisible layer handles clicks */
[data-test="themeless-featured-slider"] swiper-slide * {
  pointer-events: none !important;
}
[data-test="themeless-featured-slider"] swiper-slide a[href],
[data-test="themeless-featured-slider"] swiper-slide a[href] * {
  pointer-events: auto !important;
}

/* =========================================================
   MOBILE — horizontal image keeps full aspect ratio
   ========================================================= */

@media (max-width: 768px) {
  [data-test="themeless-featured-slider"] swiper-slide img {
    object-fit: contain !important; /* show full image */
    object-position: center !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    background-color: black !important; /* optional — fills any letterboxing */
  }
}

/* =========================================================
   MOBILE — tighten featured slider spacing
   ========================================================= */
@media (max-width: 768px) {
  [data-test="themeless-featured-slider"] {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  [data-test="themeless-featured-slider"] swiper-container,
  [data-test="themeless-featured-slider"] swiper-slide {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Adjust dots (pagination) position closer to image */
  [data-test="themeless-featured-slider"] .swiper-pagination {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
    top: -0.75rem !important; /* pull it up slightly */
  }
}

/* =========================================================
   MOBILE — remove extra space from featured slider
   ========================================================= */
@media (max-width: 768px) {
  [data-test="themeless-featured-slider"] swiper-slide > div {
    padding-top: 29% !important; /* 16:9 ratio for a natural cinematic look */
    height: auto !important;
  }

  [data-test="themeless-featured-slider"] swiper-slide img {
    object-fit: cover !important; /* fills the frame but still clean */
    object-position: center !important;
    width: 100% !important;
    height: 100% !important;
  }

  [data-test="themeless-featured-slider"] .swiper-pagination {
    top: -0.5rem !important;
    margin-top: 0 !important;
  }
}

/* =========================================================
   FEATURED SLIDER — recreate original play button look
   ========================================================= */
[data-test="themeless-featured-slider"] swiper-slide::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  background: var(--primary, #0097a7); /* teal/blue Uscreen primary color */
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
  z-index: 10;
  pointer-events: none;
}

[data-test="themeless-featured-slider"] swiper-slide::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-40%, -50%);
  z-index: 11;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid #fff; /* white triangle */
  pointer-events: none;
}

/* Adjust for mobile */
@media (max-width: 768px) {
  [data-test="themeless-featured-slider"] swiper-slide::after {
    width: 48px;
    height: 48px;
  }
  [data-test="themeless-featured-slider"] swiper-slide::before {
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #fff;
  }
}