/* TRULY MOBILE-FIRST APPROACH - Using Aspect Ratios like Disney+ */
/* Base styles target smallest screens (320px+), then progressive enhancement with min-width only */

/* ==========================================
   BASE STYLES - Smallest Screens (320px+)
   ========================================== */

/* Reset main container and Disney+ spacing issues */
main#browse.remove-main-padding {
  top: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Target ALL Disney+ wrapper classes specifically */
.x8kqcf0.basj101,
.x8kqcf2.x8kqcf1,
._5q1qs21._5q1qs20,
.mux4521.basj102.mux4520,
._8vuruf0 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  height: auto !important;
}

/* Reset container spacing - ASPECT RATIO APPROACH */
[data-testid="explore-standard-emphasis-view"] {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: auto !important;
}

[data-testid="set"] {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: auto !important;
}

/* Carousel sizing - MOBILE PORTRAIT RATIO (4:5) */
[data-set-style="hero_carousel"] {
  width: 100% !important;
  aspect-ratio: 4 / 5 !important; /* Portrait ratio for mobile */
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  height: auto !important; /* Let aspect-ratio control height */
}

/* Reset Disney+ utility classes */
.r3t2ih6l,
.r3t2ih22t,
.r3t2ih1hz,
.r3t2ih1vz,
.r3t2ih8h,
.r3t2ih7v,
.r3t2ih20z,
.r3t2ih21n,
.r3t2ih22z,
.r3t2ihmb,
.r3t2ih9h {
  margin: 0 !important;
  padding: 0 !important;
}

#explore-ui-main-content-container {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
}

/* Carousel item positioning */
.carousel-item {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 1rem 5vw 3rem 5vw !important;
  align-items: flex-end !important;
  display: flex !important;
  justify-content: flex-start !important;
  background-image: var(--mobile-bg) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Content styling - smallest screens */
.item-content-wrapper {
  position: relative !important;
  z-index: 10 !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}

.title-text {
  font-size: 1.75rem !important;
  line-height: 1.1 !important;
  margin-bottom: 0.75rem !important;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9) !important;
  color: white !important;
}

.title-logo {
  max-height: 70px !important;
  margin-bottom: 0.75rem !important;
  width: auto !important;
}

.item-metadata {
  font-size: 0.8rem !important;
  margin-bottom: 0.75rem !important;
  gap: 0.5rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.promo-text {
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
  margin-bottom: 1.5rem !important;
  max-width: 100% !important;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Gradient overlay */
.item-gradient-overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 65% !important;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.8) 35%,
    rgba(0, 0, 0, 0.4) 65%,
    transparent 100%
  ) !important;
  z-index: 5 !important;
}

.hero-gradient-overlay,
._1ybwwsf2,
._1ybwwsf1 {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 3 !important;
}

/* Navigation controls */
.carousel-navigation {
  position: absolute !important;
  bottom: 1.5rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 20 !important;
  display: flex !important;
  gap: 0.5rem !important;
}

.carousel-prev,
.carousel-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 20 !important;
  background: rgba(0, 0, 0, 0.6) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  backdrop-filter: blur(8px) !important;
}

.carousel-prev {
  left: 1rem !important;
}

.carousel-next {
  right: 1rem !important;
}

.carousel-prev svg,
.carousel-next svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

/* Network badge sizing */
.network-badge {
  margin-top: 1rem !important;
}

.network-logo {
  max-height: 40px !important;
  width: auto !important;
}

.shelf-collections-wrapper {
  position: relative !important;
  z-index: 10 !important;
  background: #0e0e13 !important;
  margin: 0 !important;
  padding: 2rem 0 !important;
}

/* ==========================================
   PROGRESSIVE ENHANCEMENT: Standard Phones (375px+)
   ========================================== */

@media (min-width: 375px) {
  /* Larger text for standard phones */
  .title-text {
    font-size: 2rem !important;
  }

  .title-logo {
    max-height: 80px !important;
  }

  .item-metadata {
    font-size: 0.85rem !important;
  }

  .promo-text {
    font-size: 1rem !important;
    -webkit-line-clamp: 3 !important;
  }
}

/* ==========================================
   PROGRESSIVE ENHANCEMENT: Transition to Landscape (480px+)
   ========================================== */

@media (min-width: 480px) {
  /* Begin transition to wider aspect ratio */
  [data-set-style="hero_carousel"] {
    aspect-ratio: 16 / 9 !important; /* Standard widescreen */
  }

  .title-text {
    font-size: 2.25rem !important;
  }

  .title-logo {
    max-height: 90px !important;
  }

  .carousel-item {
    padding: 2rem 5vw !important;
    align-items: center !important;
  }

  .item-content-wrapper {
    max-width: 70% !important;
  }
}

/* ==========================================
   PROGRESSIVE ENHANCEMENT: Tablets & Desktop (768px+)
   ========================================== */

@media (min-width: 768px) {
  /* Restore normal container behavior */
  main#browse.remove-main-padding {
    top: 72px !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Desktop: WIDE LANDSCAPE RATIO (3:1) like Disney+ */
  [data-set-style="hero_carousel"] {
    aspect-ratio: 3 / 1 !important; /* Disney+ wide landscape ratio */
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Restore Disney+ wrapper class behavior but constrain width */
  .x8kqcf0.basj101,
  .x8kqcf2.x8kqcf1,
  ._5q1qs21._5q1qs20,
  .mux4521.basj102.mux4520,
  ._8vuruf0 {
    margin: initial !important;
    padding: initial !important;
    border: initial !important;
    height: initial !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Restore container heights but constrain width */
  [data-testid="explore-standard-emphasis-view"] {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  [data-testid="set"] {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Restore utility classes */
  .r3t2ih6l,
  .r3t2ih22t,
  .r3t2ih1hz,
  .r3t2ih1vz,
  .r3t2ih8h,
  .r3t2ih7v,
  .r3t2ih20z,
  .r3t2ih21n,
  .r3t2ih22z,
  .r3t2ihmb,
  .r3t2ih9h {
    margin: initial !important;
    padding: initial !important;
  }

  #explore-ui-main-content-container {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Desktop carousel item sizing */
  .carousel-item {
    padding: 4rem calc(3.5vw + 24px) !important;
    align-items: center !important;
    background-image: var(--desktop-bg) !important;
    max-width: 100vw !important;
  }

  /* Desktop content positioning */
  .item-content-wrapper {
    max-width: 60% !important;
    padding-bottom: 0 !important;
  }

  .title-text {
    font-size: 4rem !important;
    margin-bottom: 1.5rem !important;
  }

  .title-logo {
    max-height: 120px !important;
  }

  .item-metadata {
    font-size: 1rem !important;
    margin-bottom: 2rem !important;
  }

  .promo-text {
    font-size: 1.125rem !important;
    margin-bottom: 2.5rem !important;
    max-width: 80% !important;
    /* Remove line clamp on desktop */
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
  }

  /* Desktop navigation positioning */
  .carousel-navigation {
    bottom: 2rem !important;
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 2rem !important;
    padding: 0.75rem 1.25rem !important;
  }

  /* Desktop navigation buttons */
  .carousel-prev,
  .carousel-next {
    background: rgba(42, 42, 42, 0.8) !important;
    width: 3rem !important;
    height: 3rem !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
  }

  .carousel-prev:hover,
  .carousel-next:hover {
    background: rgba(42, 42, 42, 1) !important;
    transform: translateY(-50%) scale(1.1) !important;
  }

  .carousel-prev {
    left: 2rem !important;
  }

  .carousel-next {
    right: 2rem !important;
  }

  .carousel-prev svg,
  .carousel-next svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }

  /* Desktop navigation dots styling */
  .nav-dot {
    background: none !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    padding: 0.25rem !important;
    transition: color 0.3s ease, transform 0.2s ease !important;
    line-height: 1 !important;
  }

  .nav-dot:hover {
    color: rgba(255, 255, 255, 0.8) !important;
    transform: scale(1.2) !important;
  }

  .nav-dot.active,
  .nav-dot[aria-current="true"] {
    color: rgba(255, 255, 255, 1) !important;
  }
}

/* ==========================================
   PROGRESSIVE ENHANCEMENT: Large Desktop (1200px+)
   ========================================== */

@media (min-width: 1200px) {
  .title-text {
    font-size: 5rem !important;
  }

  .item-content-wrapper {
    max-width: 50% !important;
  }

  .carousel-prev {
    left: 3rem !important;
  }

  .carousel-next {
    right: 3rem !important;
  }
}