/* ============================================
   RESPONSIVE BREAKPOINTS SYSTEM - CANDELARIA 2026
   Mobile-First Approach
   ============================================ */

/* ============================================
   BREAKPOINTS REFERENCE:

   Mobile Devices:
   - 360x740  (Samsung Galaxy S8/S9)
   - 375x667  (iPhone 6/7/8/SE)
   - 390x844  (iPhone 12/13/14)
   - 412x915  (Google Pixel)
   - 414x896  (iPhone XR/11)
   - 430x932  (iPhone 14 Pro Max)

   Tablets:
   - 768x1024 (iPad Mini/Air)
   - 820x1180 (iPad Air)
   - 1024x1366 (iPad Pro)

   Desktop:
   - 1280x720  (HD)
   - 1920x1080 (Full HD)
   ============================================ */

/* ============================================
   GLOBAL OVERFLOW PREVENTION
   ============================================ */
html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    width: 100% !important;
}

*,
*::before,
*::after {
    box-sizing: border-box !important;
}

/* Main layout containers only - NO generic div rule */
.container,
.container-fluid,
section,
.hero,
.hero-content,
.section-content,
.live-grid,
.live-video-col,
.live-sidebar,
.video-info-grid {
    max-width: 100%;
    overflow-x: hidden;
}

/* Media elements */
img,
iframe,
video {
    max-width: 100%;
    height: auto;
}

/* ============================================
   MOBILE EXTRA SMALL: 320px - 359px
   (Very old devices, Samsung Galaxy S5 Mini)
   ============================================ */
@media (max-width: 359px) {
    .container,
    .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .countdown-main {
        max-width: 280px;
        gap: 0.1rem;
    }

    .btn {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }
}

/* ============================================
   MOBILE SMALL: 360px - 389px
   Samsung Galaxy S8/S9, Pixel 2/3
   ============================================ */
@media (min-width: 360px) and (max-width: 389px) {
    .container,
    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .countdown-main {
        max-width: 320px;
        gap: 0.15rem;
    }

    .countdown-grid {
        max-width: 300px;
        gap: 0.1rem;
    }

    .hero-search-box {
        max-width: 340px;
    }
}

/* ============================================
   MOBILE STANDARD: 390px - 413px
   iPhone 12/13/14 (390x844)
   ============================================ */
@media (min-width: 390px) and (max-width: 413px) {
    .container,
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .countdown-main {
        max-width: 350px;
        gap: 0.2rem;
    }

    .countdown-grid {
        max-width: 320px;
        gap: 0.15rem;
    }

    .hero-search-box {
        max-width: 370px;
    }

    body.live-band-active .hero-content {
        padding-top: 120px;
    }
}

/* ============================================
   MOBILE LARGE: 414px - 429px
   iPhone XR/11 (414x896), Pixel 5/6
   ============================================ */
@media (min-width: 414px) and (max-width: 429px) {
    .container,
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .countdown-main {
        max-width: 380px;
        gap: 0.25rem;
    }

    .countdown-grid {
        max-width: 340px;
        gap: 0.2rem;
    }

    .hero-search-box {
        max-width: 390px;
    }

    body.live-band-active .hero-content {
        padding-top: 100px;
    }
}

/* ============================================
   MOBILE EXTRA LARGE: 430px - 575px
   iPhone 14 Pro Max (430x932)
   ============================================ */
@media (min-width: 430px) and (max-width: 575px) {
    .container,
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .countdown-main {
        max-width: 400px;
        gap: 0.3rem;
    }

    .countdown-grid {
        max-width: 360px;
        gap: 0.25rem;
    }

    .hero-search-box {
        max-width: 410px;
    }

    body.live-band-active .hero-content {
        padding-top: 80px;
    }
}

/* ============================================
   TABLET PORTRAIT: 576px - 767px
   ============================================ */
@media (min-width: 576px) and (max-width: 767px) {
    .container {
        max-width: 540px;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .countdown-main {
        max-width: 450px;
        gap: 0.35rem;
    }

    .countdown-grid {
        max-width: 400px;
        gap: 0.3rem;
    }

    .live-grid {
        grid-template-columns: 1fr;
    }

    body.live-band-active .hero-content {
        padding-top: 60px;
    }
}

/* ============================================
   TABLET LANDSCAPE: 768px - 1023px
   iPad, iPad Mini (768x1024)
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        max-width: 720px;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .countdown-main {
        max-width: 500px;
        gap: 0.4rem;
    }

    .countdown-grid {
        max-width: 420px;
        gap: 0.35rem;
    }

    .live-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    body.live-band-active .hero-content {
        padding-top: 50px;
    }

    /* Show sidebar on tablets */
    .live-sidebar {
        display: flex;
    }
}

/* ============================================
   DESKTOP SMALL: 1024px - 1279px
   iPad Pro, Small Laptops
   ============================================ */
@media (min-width: 1024px) and (max-width: 1279px) {
    .container {
        max-width: 960px;
        padding: 0 2rem;
    }

    .countdown-main {
        max-width: 500px;
    }

    .live-grid {
        grid-template-columns: 1.8fr 1fr;
        gap: 2rem;
        max-width: 1400px;
        margin: 0 auto;
    }

    body.live-band-active .hero-content {
        padding-top: 40px;
    }
}

/* ============================================
   DESKTOP STANDARD: 1280px - 1919px
   HD Monitors
   ============================================ */
@media (min-width: 1280px) and (max-width: 1919px) {
    .container {
        max-width: 1140px;
        padding: 0 2.5rem;
    }

    .live-grid {
        grid-template-columns: 1.75fr 1fr;
        gap: 2.5rem;
        max-width: 1400px;
        margin: 0 auto;
    }
}

/* ============================================
   DESKTOP LARGE: 1920px+
   Full HD and 4K Monitors
   ============================================ */
@media (min-width: 1920px) {
    .container {
        max-width: 1320px;
        padding: 0 3rem;
    }

    .live-grid {
        grid-template-columns: 1.7fr 1fr;
        gap: 3rem;
        max-width: 1600px;
        margin: 0 auto;
    }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn {
        min-height: 48px;
        padding: 14px 1.25rem;
    }

    .countdown-item {
        min-height: 80px;
        padding: 12px 4px;
    }

    /* Prevent text selection on touch */
    .countdown-value,
    .countdown-number,
    .live-badge {
        user-select: none;
        -webkit-user-select: none;
    }
}

/* ============================================
   LANDSCAPE ORIENTATION FIXES
   ============================================ */
@media (max-width: 932px) and (orientation: landscape) {
    .hero {
        min-height: 60vh;
    }

    body.live-band-active .hero-content {
        padding-top: 80px;
    }

    .countdown-main {
        margin-bottom: 1rem;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .navbar,
    .live-band,
    .video-background,
    .live-video-container-full {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    .container {
        max-width: 100%;
    }
}