@media (max-width: 768px) {
  

  .hero-cards-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  .hero-card {
    flex: 0 0 78%;
    height: 320px;
    border-radius: 18px;
    scroll-snap-align: center;
    transform: scale(.88);
    opacity: .5;
    transition: transform .35s ease, opacity .35s ease;
  }

  .hero-card.active {
    transform: scale(1);
    opacity: 1;
  }

  .hero-spacer {
    flex: 0 0 11%;
  }

  .hero-nav-btn {
    display: none;
  }
}
@media (max-width: 480px) {

  .hero-cards-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .hero-card {
    flex: 0 0 85%; /* 🔥 wider card */
    height: 300px;
    scroll-snap-align: center;
    transform: scale(0.9);
    opacity: 0.5;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .hero-card.active {
    transform: scale(1);
    opacity: 1;
  }

  /* 🔥 FIXED SPACERS (CRITICAL) */
  .hero-spacer {
    flex: 0 0 40px;
  }
}
@media (max-width: 480px) {

  .hero-cards-track {
    padding-inline: 40px;   /* replaces spacers */
    box-sizing: border-box;
  }

  .hero-card {
    flex: 0 0 85%;
    scroll-snap-align: center;
  }
  
}
@media (max-width: 480px) {
  .hero-slider-wrapper {
    overflow: visible;   /* 🔥 THIS FIXES THE CLIPPING */
  }
}
/* ================================
   DEVICE-BASED VISIBILITY CONTROL
================================ */

/* DESKTOP → hide Netflix slider */
@media (min-width: 769px) {
  .netflix-hero {
    display: none;
  }
}

/* MOBILE → hide OLD hero slider */
@media (max-width: 768px) {
  .hero-slider-wrapper,
  .hero-dots {
    display: none !important;
  }
}



/* =====================================
   DESKTOP – ACTIVE CARD HEIGHT BIGGER
===================================== */
@media (min-width: 769px) {

  /* Full width breakout */
  .hero-slider-wrapper.full-width-desktop {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: relative;
    overflow: visible;
  }

  /* Track */
  .hero-cards-track {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;   /* 🔥 bottom align */
    gap: 20px;

    width: 100%;
    padding: 0 40px;
    box-sizing: border-box;
  }

  /* NORMAL CARDS */
  .hero-card {
    flex: 1 1 0;
    max-width: 18%;          /* base width */
    height: 380px;           /* 🔽 smaller height */

    border-radius: 26px;
    background-size: cover;
    background-position: center;

    opacity: 0.65;
    transition: height .35s ease, opacity .35s ease;
  }

  /* ACTIVE CARD – TALLER */
  .hero-card.active {
    height: 480px;           /* 🔥 taller */
    opacity: 1;
    z-index: 3;
  }

  /* Optional hover polish */
  .hero-card:hover {
    opacity: 0.9;
  }

 
}
/* ===== WRAPPER ===== */
.netflix-hero{
  width:100%;
  padding:40px 0;
}

/* ===== TRACK (DESKTOP DEFAULT) ===== */
.netflix-track{
  display:flex;
  gap:20px;
  justify-content:center;
}

/* ===== CARD ===== */
.netflix-card{
  width:260px;
  height:360px;
  border-radius:18px;
  background-size:cover;
  background-position:center;
  position:relative;
}

/* OVERLAY CONTROLS DARKNESS */
.netflix-overlay{
  position:absolute;
  inset:0;
  border-radius:18px;
  background:rgba(0,0,0,0.55);
  transition:background 0.4s ease;
}

.netflix-title{
  position:absolute;
  bottom:18px;
  left:18px;
  color:#fff;
  font-size:20px;
  font-weight:600;
}

/* ===== DOTS HIDDEN DESKTOP ===== */
.netflix-dots{display:none}

/* =================================================
   📱 MOBILE SLIDER (ONLY)
==================================================*/
@media (max-width:990px){

  .netflix-track{
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding: 0 calc(50vw - 140px);
    justify-content:flex-start;
    gap:16px;
    -webkit-overflow-scrolling:touch;
  }

  .netflix-track::-webkit-scrollbar{display:none}

  .netflix-card{
    flex:0 0 280px;
    max-width:280px;
    scroll-snap-align:center;
    transform:scale(0.85);
    transition:transform 0.4s ease;
  }

  .netflix-card.active{
    transform:scale(1);
    z-index:2;
  }
}


  /* ACTIVE OVERLAY (BRIGHTER) */
  .netflix-card.active .netflix-overlay{
    background:linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  }

  .netflix-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:18px;
  }
  .netflix-dots span{
    width:8px;
    height:8px;
    background:#666;
    border-radius:50%;
    transition:0.3s;
  }
  .netflix-dots span.active{
    width:18px;
    border-radius:6px;
    background:#fff;
  }