/*
  Home Enhancements (Responsive + Consistency)
  هدف الملف: تحسين تنسيق الصفحة الرئيسية بدون حذف أي عناصر موجودة.
  - ضبط أحجام كروت نتفلكس تلقائياً حسب الشاشة
  - تحسين المسافات والعناوين
  - تحسين سهولة السحب على الموبايل
*/

/* تحسين عام للصفحة الرئيسية */
body.index-page {
  background: #000;
}

/* صفوف نتفلكس */
body.index-page .netflix-row {
  padding-inline: clamp(12px, 3.5vw, 4%);
  margin-bottom: clamp(28px, 5vw, 50px);
}

body.index-page .netflix-row .section-title {
  font-size: clamp(1.05rem, 1.3vw + .6rem, 1.4rem);
  line-height: 1.3;
}

body.index-page .netflix-row .view-all-btn {
  font-size: 12px;
  padding: 7px 16px;
}

/* الكروت: بدل عرض ثابت 180px */
body.index-page .netflix-card {
  flex: 0 0 clamp(132px, 14vw, 190px);
  border-radius: 14px;
}

/* على الأجهزة اللمسية: hover scaling يكون أهدأ لتجنب قص العناصر */
@media (hover: none) {
  body.index-page .netflix-card:hover {
    transform: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
  }
}

/* تحسين scroll */
body.index-page .scroll-container {
  gap: clamp(10px, 1.6vw, 20px);
  padding: 14px 0 22px;
  cursor: grab;
}
body.index-page .scroll-container:active { cursor: grabbing; }

/* الأسهم */
body.index-page .nav-arrow {
  width: 42px;
  height: 42px;
  backdrop-filter: blur(8px);
}

@media (max-width: 768px) {
  body.index-page .nav-arrow {
    width: 38px;
    height: 38px;
  }
  body.index-page .netflix-row .section-header {
    gap: 10px;
  }
  body.index-page .view-all-btn {
    padding: 6px 12px;
  }
}

@media (max-width: 420px) {
  body.index-page .netflix-card {
    flex-basis: 122px;
  }
}

/* منع أي تداخلات غير مرغوبة */
body.index-page .scroll-container-wrapper {
  overflow: clip; /* يحافظ على الأداء مع السماح بالظل داخلياً */
}