/*
  v240 - Mobile hero banner full-image + smooth slider
  هدف:
  - حفظ نمایش کامل عکس بنر در موبایل بدون دفرمه شدن
  - برگرداندن حرکت نرم اسلایدر مثل قبل
  - حذف حالت نمایش ناگهانی عکس بعدی که در v239 ایجاد شد
*/
@media screen and (max-width: 820px), screen and (hover: none) and (pointer: coarse) and (max-width: 950px){
  html body .hero{
    position:relative !important;
    display:grid !important;
    grid-template-areas:"slide" !important;
    width:100% !important;
    max-width:100vw !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:0 !important;
    margin:0 auto !important;
    overflow:hidden !important;
    border-radius:0 0 22px 22px !important;
    background:#050505 !important;
    isolation:isolate !important;
  }

  html body .hero::before,
  html body .hero::after{
    display:none !important;
    content:none !important;
  }

  /*
    نکته مهم:
    اسلایدها دیگر display:none نمی‌شوند؛ همگی در یک خانه grid روی هم قرار می‌گیرند.
    بنابراین ارتفاع بنر از خود عکس‌ها گرفته می‌شود و transition اسلایدر هم مثل قبل کار می‌کند.
  */
  html body .hero .hero-slide,
  html body .hero-slide{
    grid-area:slide !important;
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:translate3d(-100%,0,0) !important;
    transition:transform .9s ease, opacity .9s ease !important;
    z-index:1 !important;
    overflow:hidden !important;
    pointer-events:none !important;
    background-size:contain !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-color:#050505 !important;
    will-change:transform, opacity !important;
  }

  html body .hero .hero-slide.active,
  html body .hero-slide.active{
    opacity:1 !important;
    visibility:visible !important;
    transform:translate3d(0,0,0) !important;
    z-index:3 !important;
  }

  html body .hero .hero-slide.leaving,
  html body .hero-slide.leaving{
    opacity:1 !important;
    visibility:visible !important;
    transform:translate3d(100%,0,0) !important;
    z-index:2 !important;
  }

  /* تصویر واقعی داخل اسلاید؛ کامل، بدون crop و بدون کشیدگی */
  html body .hero-slide .hero-slide-img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
    opacity:1 !important;
    visibility:visible !important;
    border:0 !important;
    margin:0 !important;
    padding:0 !important;
    background:#050505 !important;
  }

  html body .hero-slide.active:has(.hero-slide-img),
  html body .hero-slide.leaving:has(.hero-slide-img){
    background-image:none !important;
  }

  html body .hero-overlay{
    position:absolute !important;
    inset:0 !important;
    z-index:8 !important;
    pointer-events:none !important;
    background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.04) 66%, rgba(0,0,0,.18)) !important;
  }

  html body .hero-dots{
    position:absolute !important;
    bottom:9px !important;
    left:0 !important;
    right:0 !important;
    z-index:15 !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:7px !important;
    transform:none !important;
  }

  html body .hero-dot{
    width:9px !important;
    height:9px !important;
    min-width:9px !important;
    max-width:9px !important;
    padding:0 !important;
    border-radius:999px !important;
  }

  html body .featured-movies{
    margin-top:22px !important;
    margin-bottom:54px !important;
    padding-left:18px !important;
    padding-right:18px !important;
    position:relative !important;
    z-index:20 !important;
  }

  html body .featured-movies .section-header{
    margin-top:0 !important;
    margin-bottom:18px !important;
  }

  html body .featured-movies .section-header h2,
  html body .featured-movies .section-header h2 a,
  html body .featured-movies .section-header h2 a.home-section-title-link{
    color:#f3c66d !important;
    text-decoration:none !important;
  }
}

@media screen and (max-width: 430px){
  html body .hero{
    border-radius:0 0 20px 20px !important;
  }

  html body .featured-movies{
    margin-top:20px !important;
    margin-bottom:50px !important;
  }
}