/* ============================================
   RESPONSIVE.CSS
   Media Queries for All Breakpoints
   ============================================ */

/* ============================================
   Breakpoint Reference:
   - sm: 640px
   - md: 768px
   - lg: 1024px
   - xl: 1280px
   - 2xl: 1536px
   ============================================ */

/* ============================================
   Large Desktop (1280px and above)
   ============================================ */
@media (min-width: 1280px) {
    .container {
        padding: 0 var(--space-8);
    }
}

/* ============================================
   Desktop (1024px - 1279px)
   ============================================ */
@media (max-width: 1279px) {
    .hero-container {
        gap: var(--space-10);
    }

    .footer-container {
        gap: var(--space-8);
    }

    .teachers-slider .teacher-card {
        flex: 0 0 calc(33.333% - var(--space-4));
    }
}

/* ============================================
   Tablet (768px - 1023px)
   ============================================ */
@media (max-width: 1023px) {
    :root {
        --navbar-height: 65px;
    }

    section {
        padding: var(--space-16) 0;
    }

    /* Hero */
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-10);
    }

    .hero-content {
        order: 1;
    }

    .hero-image {
        order: 0;
        max-width: 500px;
        margin: 0 auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-campus-note {
        justify-content: center;
    }

    /* About */
    .about-content {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    .stats-grid {
        max-width: 500px;
        margin: var(--space-8) auto 0;
    }

    /* Contact */
    .contact-container {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    /* Footer */
    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-10);
    }

    .footer-brand {
        grid-column: 1 / -1;
        text-align: center;
    }

    .footer-brand .social-links {
        justify-content: center;
    }

    /* Campuses */
    .campuses-grid {
        grid-template-columns: 1fr;
    }

    /* Teachers Slider */
    .teachers-slider .teacher-card {
        flex: 0 0 calc(50% - var(--space-3));
    }
}

/* ============================================
   Mobile Landscape / Small Tablet (640px - 767px)
   ============================================ */
@media (max-width: 767px) {
    :root {
        --navbar-height: 60px;
    }

    section {
        padding: var(--space-12) 0;
    }

    .container {
        padding: 0 var(--space-4);
    }

    /* Typography */
    h1 {
        font-size: var(--fs-3xl);
    }

    h2 {
        font-size: var(--fs-2xl);
    }

    h3 {
        font-size: var(--fs-xl);
    }

    /* Navbar */
    .navbar-menu {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .nav-links a::after {
        margin-right: var(--space-4);
    }

    .mobile-menu,
    .mobile-menu-overlay {
        display: block;
    }

    .navbar-container {
        padding: var(--space-3) var(--space-4);
    }

    .navbar {
        top: var(--space-4);
        left: var(--space-3);
        right: var(--space-3);
    }

    /* Brand */
    .brand-bn {
        font-size: var(--fs-base);
    }

    /* Section Title */
    .section-title {
        margin-bottom: var(--space-8);
    }

    /* Features Grid */
    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .feature-card {
        padding: var(--space-6);
    }

    /* Classes Grid */
    .classes-grid {
        grid-template-columns: 1fr;
    }

    /* Stats Grid */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    /* Teachers Grid */
    .teachers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .teachers-slider .teacher-card {
        flex: 0 0 calc(100% - var(--space-2));
    }

    /* Form */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-8);
    }

    .footer-section {
        text-align: center;
    }

    .social-links {
        justify-content: center;
    }

    /* Buttons */
    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    /* Contact Form */
    .contact-form-wrapper {
        padding: var(--space-5);
    }

    /* FAQ */
    .faq-question {
        padding: var(--space-4);
        font-size: var(--fs-sm);
    }

    .faq-answer-content {
        padding: 0 var(--space-4) var(--space-4);
        font-size: var(--fs-sm);
    }

    /* Slider Controls */
    .slider-controls {
        margin-top: var(--space-6);
    }

    .slider-btn {
        width: 44px;
        height: 44px;
    }
}

/* ============================================
   Mobile Portrait (480px and below)
   ============================================ */
@media (max-width: 480px) {
    :root {
        --space-6: 1.25rem;
        --space-8: 1.5rem;
        --space-10: 2rem;
        --space-12: 2.5rem;
    }

    section {
        padding: var(--space-10) 0;
    }

    /* Typography */
    h1 {
        font-size: var(--fs-2xl);
    }

    h2 {
        font-size: var(--fs-xl);
    }

    /* Hero */
    .hero {
        min-height: calc(100vh - var(--space-3) * 2);
        padding-top: calc(var(--navbar-height) + var(--space-6));
        padding-bottom: var(--space-10);
    }

    .hero-wrapper {
        padding: var(--space-3) var(--space-3) 0;
    }

    .navbar {
        top: var(--space-3);
        left: var(--space-2);
        right: var(--space-2);
    }

    .hero-description {
        font-size: var(--fs-base);
    }

    .hero-campus-note i {
        display: none;
    }

    /* Navbar */
    .navbar-brand img {
        height: 32px;
    }

    .theme-toggle {
        width: 38px;
        height: 38px;
    }

    /* Teachers Grid */
    .teachers-grid {
        grid-template-columns: 1fr;
    }

    .teacher-photo {
        height: 180px;
    }

    /* Campus Card */
    .campus-content {
        padding: var(--space-4);
    }

    .campus-title {
        font-size: var(--fs-lg);
    }

    .schedule-table th,
    .schedule-table td {
        padding: var(--space-2) var(--space-3);
        font-size: var(--fs-xs);
    }

    /* Stat Card */
    .stat-number {
        font-size: var(--fs-3xl);
    }

    /* Feature Card */
    .feature-icon {
        width: 60px;
        height: 60px;
        font-size: var(--fs-xl);
    }

    /* Class Card */
    .class-header {
        padding: var(--space-4);
    }

    .class-body {
        padding: var(--space-4);
    }

    .class-body li {
        font-size: var(--fs-xs);
    }

    /* Featured Card */
    .class-card-featured {
        transform: scale(1);
    }

    .featured-badge {
        font-size: 0.65rem;
        padding: var(--space-1) var(--space-2);
    }

    /* Contact Items */
    .contact-item {
        flex-direction: column;
        text-align: center;
        gap: var(--space-3);
    }

    /* Notification */
    .notification {
        left: var(--space-4);
        right: var(--space-4);
        bottom: var(--space-4);
        max-width: none;
    }

    /* Button Sizes */
    .btn {
        padding: var(--space-3) var(--space-5);
        font-size: var(--fs-sm);
    }

    .btn-lg {
        padding: var(--space-3) var(--space-6);
        font-size: var(--fs-base);
    }
}

/* ============================================
   Extra Small Devices (360px and below)
   ============================================ */
@media (max-width: 360px) {
    .container {
        padding: 0 var(--space-3);
    }

    .navbar {
        top: var(--space-2);
        left: var(--space-1);
        right: var(--space-1);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .brand-text {
        display: none;
    }

    .navbar-brand img {
        height: 36px;
    }

    h1 {
        font-size: var(--fs-xl);
    }

    .stat-card {
        padding: var(--space-4);
    }

    .stat-number {
        font-size: var(--fs-2xl);
    }
}

/* ============================================
   Height-based Media Queries
   ============================================ */

/* Short screens */
@media (max-height: 700px) {
    .hero {
        min-height: auto;
        padding-top: calc(var(--navbar-height) + var(--space-8));
        padding-bottom: var(--space-8);
    }
}

/* Very short screens (landscape mobile) */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        padding-top: calc(var(--navbar-height) + var(--space-4));
        padding-bottom: var(--space-4);
    }

    .hero-container {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6);
    }

    .hero-content {
        order: 0;
        text-align: left;
    }

    .hero-buttons {
        justify-content: flex-start;
        flex-direction: row;
    }

    .hero-campus-note {
        justify-content: flex-start;
    }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {

    .navbar,
    .mobile-menu,
    .theme-toggle,
    .slider-controls,
    .btn,
    .notification {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    section {
        padding: 2rem 0;
        page-break-inside: avoid;
    }

    .hero {
        min-height: auto;
        padding-top: 2rem;
    }

    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a {
        text-decoration: underline;
    }
}

/* ============================================
   Dark Mode Preference
   ============================================ */
@media (prefers-color-scheme: dark) {

    /* Applied when no theme is set and system prefers dark */
    body:not(.light-theme):not(.dark-theme) {
        --bg-primary: #050816;
        --bg-secondary: #0a0f1f;
        --text-primary: #f9fafb;
        --text-secondary: #9ca3af;
    }
}

/* ============================================
   High Contrast Mode
   ============================================ */
@media (prefers-contrast: high) {
    :root {
        --border-color: rgba(255, 255, 255, 0.3);
        --text-secondary: #d1d5db;
    }

    .light-theme {
        --border-color: rgba(0, 0, 0, 0.3);
        --text-secondary: #374151;
    }
}

/* ============================================
   Hover Media Query (Touch vs Mouse)
   ============================================ */
@media (hover: none) {

    /* Remove hover effects on touch devices */
    .hover-lift:hover,
    .hover-scale:hover,
    .hover-glow:hover {
        transform: none;
        box-shadow: none;
    }

    .feature-card:hover,
    .class-card:hover,
    .teacher-card:hover,
    .campus-card:hover,
    .stat-card:hover {
        transform: none;
    }

    .nav-links a::after {
        display: none;
    }
}