/**
 * vSkul Responsive Styles
 * Mobile-First Breakpoints
 */

/* ===================================
   TABLET (768px and up)
   =================================== */
@media (min-width: 768px) {
    /* Typography */
    h1 { font-size: 3rem; }
    h2 { font-size: 2.5rem; }
    
    /* Header */
    .search-container {
        display: block;
    }
    
    .mobile-menu-toggle {
        display: none;
    }
    
    .main-nav {
        display: flex;
    }
    
    /* Hero */
    .hero-title {
        font-size: 3.5rem;
    }
    
    .hero-cta {
        flex-direction: row;
        justify-content: center;
    }
    
    /* Grids */
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .courses-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===================================
   DESKTOP (1024px and up)
   =================================== */
@media (min-width: 1024px) {
    /* Typography */
    h1 { font-size: 3.5rem; }
    
    .hero-title {
        font-size: 4rem;
    }
    
    /* Grids */
    .categories-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .courses-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .footer-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ===================================
   LARGE DESKTOP (1280px and up)
   =================================== */
@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

/* ===================================
   PRINT STYLES
   =================================== */
@media print {
    .main-header,
    .main-footer,
    .mobile-menu-overlay,
    .btn {
        display: none !important;
    }
}