/* =========================================
   FINAL USCREEN IMAGE MODEL — NO CROPPING
   ========================================= */
.bg-ds-default {
  background-color: var(--ds-bg-default);
  margin-top: -2rem;
}

[data-test="themeless-featured-slider"] .aspect-\[19\/8\] {
  overflow: visible !important;
  height: auto !important;
  aspect-ratio: auto !important;
}

[data-test="themeless-featured-slider"] .aspect-\[19\/8\] img {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  background: black;
}

/* Mobile: cap height so it doesn’t get tall */
@media (max-width: 768px) {
  [data-test="themeless-featured-slider"] .aspect-\[19\/8\] img {
    max-height: 65vh;
  }
}

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

/* 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;
}

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

/* Remove max-width clamp */
[data-test="themeless-featured-slider"].catalog-max-width {
  max-width: none !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 — teal arrows with spacing
   ========================================================= */
[data-test="themeless-featured-slider"] {
  position: relative !important;
}

/* Arrows (pseudo elements) */
[data-test="themeless-featured-slider"]::before,
[data-test="themeless-featured-slider"]::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  background: #c9a96e; /* your brand teal */
  border-radius: 50%;
  transform: translateY(-50%);
  z-index: 50;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Left arrow */
[data-test="themeless-featured-slider"]::before {
  left: 2.5rem; /* move away from edge */
  background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M12.707 15.707a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 111.414 1.414L8.414 10l4.293 4.293a1 1 0 010 1.414z'/%3E%3C/svg%3E");
}

/* Right arrow */
[data-test="themeless-featured-slider"]::after {
  right: 2.5rem; /* move away from edge */
  background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.293 4.293a1 1 0 011.414 0l5 5a1 1 0 010 1.414l-5 5a1 1 0 11-1.414-1.414L11.586 10 7.293 5.707a1 1 0 010-1.414z'/%3E%3C/svg%3E");
}

/* Hover state */
[data-test="themeless-featured-slider"]::before:hover,
[data-test="themeless-featured-slider"]::after:hover {
  background-color: #2c7c82; /* darker teal on hover */
  transform: translateY(-50%) scale(1.08);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  [data-test="themeless-featured-slider"]::before,
  [data-test="themeless-featured-slider"]::after {
    width: 36px;
    height: 36px;
    background-size: 10px;
  }

  [data-test="themeless-featured-slider"]::before {
    left: 1rem;
  }

  [data-test="themeless-featured-slider"]::after {
    right: 1rem;
  }
}

/* --- Restore left/right click access for JS navigation --- */
[data-controller="themeless-featured-slider"] .full-slide-link {
  pointer-events: auto; /* default for center clicks */
}

/* disable pointer events in left/right zones so JS clicks go through */
[data-controller="themeless-featured-slider"] .full-slide-link::before,
[data-controller="themeless-featured-slider"] .full-slide-link::after {
  content: "";
  position: absolute;
  top: 0;
  width: 25%;
  height: 100%;
  pointer-events: auto;
}

/* Make left/right areas click-through */
[data-controller="themeless-featured-slider"] .full-slide-link::before {
  left: 0;
}

[data-controller="themeless-featured-slider"] .full-slide-link::after {
  right: 0;
}