/* ==========================================================================
   StreamOTT — responsive.css
   Explicit breakpoints: 320, 360, 375, 390, 412, 430, 768, 1024, 1440, 1920+
   Mobile-first base styles live in style.css; this file adjusts layout
   density, navigation visibility, and spacing per breakpoint.
   ========================================================================== */

/* Base (< 768px): mobile bottom nav visible, top nav/search collapsed into drawer */
@media (max-width: 767px) {
    .main-nav, .header-search { display: none !important; }
    .mobile-menu-toggle { display: flex; }
    .hero-slider { height: 56vh; min-height: 360px; }
    .hero-slide-content { left: 6%; right: 6%; bottom: 14%; max-width: none; }
    .hero-title { font-size: 26px; }
    .rail-item { width: 160px; }
    .rail-arrow { display: none; }
    .video-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
    .playlist-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .promotion-card { width: 260px; }
    .up-next-card { left: 12px; right: 12px; width: auto; bottom: 12px; }
    .watch-actions { flex-direction: row; flex-wrap: wrap; }
    .autoplay-toggle { margin-left: 0; width: 100%; order: 10; }
    body { padding-bottom: calc(var(--bottom-nav-height) + 12px); }
}

@media (max-width: 430px) {
    .header-inner { padding: 0 14px; gap: 12px; }
    .logo { font-size: 19px; }
    .page-sections, .browse-page, .watch-page { padding-left: 14px; padding-right: 14px; }
    .rail-item { width: 148px; }
}

@media (max-width: 375px) {
    .rail-item { width: 138px; }
    .hero-title { font-size: 23px; }
}

@media (max-width: 320px) {
    .rail-item { width: 128px; }
    .video-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* Tablet (768–1023): show desktop nav, hide bottom bar and drawer */
@media (min-width: 768px) {
    .mobile-bottom-nav, .mobile-drawer, .mobile-drawer-backdrop, .mobile-menu-toggle { display: none !important; }
    .main-nav { display: flex !important; }
    .header-search { display: block !important; }
    body { padding-bottom: 0; }
    .back-to-top { bottom: 24px; }
    .toast-container { bottom: 24px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .video-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    .rail-item { width: 200px; }
}

/* Desktop (1024–1439) */
@media (min-width: 1024px) {
    .video-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
    .rail-item { width: 230px; }
    .hero-slider { height: 68vh; }
}

/* Large desktop (1440–1919) */
@media (min-width: 1440px) {
    .rail-item { width: 260px; }
    .video-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}

/* Ultra-wide (1920px+) */
@media (min-width: 1920px) {
    :root { --max-width: 1800px; }
    .rail-item { width: 280px; }
    .hero-slider { max-height: 820px; }
}

/* No horizontal overflow anywhere */
html, body { overflow-x: hidden; }