/* ============================================
   responsive.css - Responsive Styles
   Hillside College Mityana
   Mobile-First Breakpoints
   ============================================ */

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
    .container {
        padding: 0 30px;
    }
}

/* Desktop (992px - 1199px) */
@media (max-width: 1199px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .uneb-grid { grid-template-columns: repeat(2, 1fr); }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .achievements-grid { grid-template-columns: repeat(2, 1fr); }
    .departments-grid { grid-template-columns: repeat(2, 1fr); }
    .requirements-grid { grid-template-columns: repeat(2, 1fr); }
    .elearning-features-grid { grid-template-columns: repeat(2, 1fr); }
    .values-religion-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
    :root { --nav-height: 65px; }
    .section-padding { padding: 60px 0; }

    .nav-toggle { display: flex; }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: rgba(255,255,255,0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 90px 30px 30px;
        gap: 8px;
        transition: var(--transition-smooth);
        box-shadow: -5px 0 30px rgba(0,0,0,0.1);
        overflow-y: auto;
    }

    .nav-menu.active { right: 0; }

    .nav-link { padding: 12px 16px; font-size: 1rem; }

    .welcome-grid { grid-template-columns: 1fr; gap: 30px; }
    .academics-grid { grid-template-columns: 1fr; }
    .activities-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-preview-grid { grid-template-columns: repeat(2, 1fr); }
    .about-story-grid { grid-template-columns: 1fr; }
    .mv-grid { grid-template-columns: 1fr; }
    .leadership-grid { grid-template-columns: repeat(2, 1fr); }
    .program-detail-grid { grid-template-columns: 1fr; }
    .uneb-results-grid { grid-template-columns: 1fr; }
    .spiritual-grid { grid-template-columns: repeat(2, 1fr); }
    .community-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-info-grid { grid-template-columns: repeat(2, 1fr); }
    .hero { min-height: 90vh; }
    .hero-headline { font-size: 2.5rem; }
}

/* Mobile (576px - 767px) */
@media (max-width: 767px) {
    :root { --nav-height: 60px; }
    .section-padding { padding: 50px 0; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .stat-number { font-size: 2rem; }
    .features-grid { grid-template-columns: 1fr; }
    .uneb-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .activities-grid { grid-template-columns: 1fr; }
    .gallery-preview-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .values-grid { grid-template-columns: 1fr; }
    .achievements-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .departments-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .requirements-grid { grid-template-columns: 1fr; }
    .leadership-grid { grid-template-columns: 1fr; }
    .elearning-features-grid { grid-template-columns: 1fr; }
    .values-religion-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .spiritual-grid { grid-template-columns: 1fr; }
    .community-grid { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .contact-info-grid { grid-template-columns: 1fr; }

    .hero-buttons { flex-direction: column; align-items: center; }
    .hero-buttons .btn { width: 100%; justify-content: center; }
    .cta-buttons { flex-direction: column; align-items: center; }
    .cta-buttons .btn { width: 100%; justify-content: center; }

    .form-row { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }

    .hero { min-height: 85vh; }
    .hero-headline { font-size: 2rem; }
    .hero-subheadline { font-size: 1rem; }

    .back-to-top { bottom: 20px; right: 20px; width: 40px; height: 40px; }
    .whatsapp-float { bottom: 20px; left: 20px; width: 48px; height: 48px; font-size: 1.3rem; }

    .lightbox { padding: 20px; }
    .lightbox-prev, .lightbox-next { padding: 10px 14px; font-size: 1.1rem; }
}

/* Small Mobile (375px - 575px) */
@media (max-width: 575px) {
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-card { padding: 18px 12px; }
    .stat-number { font-size: 1.7rem; }
    .uneb-grid { grid-template-columns: 1fr; }
    .achievements-grid { grid-template-columns: 1fr; }
    .departments-grid { grid-template-columns: 1fr; }
    .values-religion-grid { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .gallery-preview-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .gallery-filters { gap: 6px; }
    .filter-btn { padding: 6px 12px; font-size: 0.8rem; }
    .hero-headline { font-size: 1.7rem; }
    .page-hero { min-height: 250px; }
    .glass-card { padding: 20px 16px; }
    .modal-content { padding: 25px 18px; }
    .social-links-large { flex-direction: column; align-items: center; }
}

/* Extra Small Mobile (320px - 374px) */
@media (max-width: 374px) {
    .hero-headline { font-size: 1.5rem; }
    .btn { padding: 10px 18px; font-size: 0.85rem; }
    .logo-name { font-size: 0.85rem; }
    .stats-grid { grid-template-columns: 1fr; gap: 10px; }
}