/* RESPONSIVE DESIGN SYSTEM (FIXED V3) */

@media (max-width: 1024px) {
    .movie-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px;
    }

    .header-container {
        padding: 0 20px;
    }
}

@media (max-width: 768px) {

    /* HEADER OPTIMIZATION */
    .watch-header {
        height: auto;
        padding-bottom: 0;
        position: relative;
        overflow: hidden;
    }

    .header-container {
        display: grid !important;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 10px 15px;
        height: auto !important;
        padding: 10px 15px 0;
    }

    .brand-logo {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        padding: 0;
        margin-right: 0;
        align-self: center;
    }

    .header-search {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        margin: 0 !important;
        min-width: 0;
    }

    .header-search input {
        width: 100%;
        background: #1a1d29;
        border: 1px solid rgba(255, 107, 53, 0.3);
        padding: 8px 35px 8px 15px;
        font-size: 0.9rem;
        height: 38px;
        border-radius: 19px;
    }

    .header-search i {
        top: 50%;
        transform: translateY(-50%);
        right: 12px;
        position: absolute;
    }

    /* NAV: Edge-to-Edge Scroll */
    .main-nav {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
        width: calc(100% + 30px);
        margin-left: -15px;
        margin-right: -15px;
        padding: 10px 15px 15px;
        display: flex;
        justify-content: flex-start;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        flex: none !important;
    }

    .main-nav::-webkit-scrollbar {
        display: none;
    }

    .main-nav a {
        padding: 6px 12px;
        background: #1a1d29;
        border-radius: 20px;
        border: 1px solid rgba(255, 107, 53, 0.2);
        font-size: 0.8rem;
        flex: 0 0 auto;
        color: #ddd;
    }

    .main-nav a.nav-highlight {
        background: #ff6b35;
        color: white;
    }

    .main-nav::after {
        content: '';
        padding-right: 15px;
    }

    /* GRID OPTIMIZATION */
    .gallery-container {
        padding: 10px;
    }

    .movie-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .movie-poster {
        height: 0;
        padding-bottom: 150%;
        position: relative;
    }

    .movie-poster img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .movie-title {
        font-size: 0.85rem;
        line-height: 1.3;
        margin-bottom: 4px;
        height: 2.6em;
        overflow: hidden;
    }

    /* MODAL OPTIMIZATION */
    .filter-modal-content {
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        margin: 0;
    }

    .filter-modal-body {
        padding: 15px !important;
    }

    .filter-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }

    .close-modal-btn {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 360px) {
    .movie-grid {
        gap: 8px !important;
    }

    .main-nav a {
        padding: 6px 10px;
        font-size: 0.75rem;
    }
}