/* assets/css/responsive.css */

/* --------------------------------------------------
   1. TABLET BREAKPOINTS (2 to 3 Columns)
-------------------------------------------------- */
@media (min-width: 640px) {
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .video-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --------------------------------------------------
   2. DESKTOP BREAKPOINTS (4 to 5 Columns)
-------------------------------------------------- */
@media (min-width: 1024px) {
    .video-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1280px) {
    .video-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* --------------------------------------------------
   3. MOBILE LAYOUT ADJUSTMENTS (< 640px)
-------------------------------------------------- */
@media (max-width: 639px) {
    .site-header {
        height: auto;
        padding: 0.75rem 0;
    }

    .header-container {
        flex-wrap: wrap;
    }

    .search-bar {
        order: 3;
        width: 100%;
        max-width: 100%;
        margin-top: 0.5rem;
    }

    .main-content {
        padding: 1rem 0.75rem;
    }

    .auth-group {
        gap: 0.25rem;
    }

    .btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }
}