/**
 * Fitness Campus - Responsive Styles
 * Mobile-first responsive breakpoints
 */

/* ================================================
   TABLET (768px and up)
   ================================================ */
@media (max-width: 1024px) {
    :root {
        --text-5xl: 2.5rem;
        --text-6xl: 3rem;
        --text-7xl: 3.5rem;
    }

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

    .section-lg {
        padding: var(--space-20) 0;
    }

    .grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ================================================
   TABLET LANDSCAPE / SMALL DESKTOP
   ================================================ */
@media (max-width: 992px) {

    /* Navigation */
    .navbar-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        height: 100vh;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: var(--space-6);
        padding: var(--space-8);
        background: var(--color-dark-800);
        border-left: 1px solid var(--color-dark-600);
        transition: right var(--transition-base);
        z-index: var(--z-modal);
    }

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

    .nav-link {
        font-size: var(--text-lg);
    }

    .menu-toggle {
        display: flex;
        z-index: var(--z-modal);
    }

    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* Mobile Menu Overlay */
    .mobile-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: var(--z-modal-backdrop);
    }

    .mobile-overlay.active {
        display: block;
    }

    /* Pricing Cards */
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
}

/* ================================================
   MOBILE (768px and below)
   ================================================ */
@media (max-width: 768px) {
    :root {
        --text-4xl: 2rem;
        --text-5xl: 2.25rem;
        --text-6xl: 2.5rem;
        --container-padding: var(--space-4);
    }

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

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

    .section-header {
        margin-bottom: var(--space-10);
    }

    /* Typography */
    h1 {
        font-size: var(--text-4xl);
    }

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

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

    .section-title {
        font-size: var(--text-3xl);
    }

    /* Grid */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr;
    }

    /* Flex */
    .flex-col-mobile {
        flex-direction: column;
    }

    /* Buttons */
    .btn {
        padding: var(--space-3) var(--space-6);
    }

    .btn-lg {
        padding: var(--space-4) var(--space-8);
        font-size: var(--text-base);
    }

    /* Hero */
    .hero {
        min-height: 100vh;
        padding-top: 100px;
    }

    .hero-content {
        text-align: center;
    }

    .hero-title {
        font-size: var(--text-4xl);
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

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

    /* Pricing */
    .pricing-card {
        padding: var(--space-6);
    }

    .pricing-amount {
        font-size: var(--text-4xl);
    }

    /* Cards */
    .card-body {
        padding: var(--space-4);
    }

    /* Tables */
    .table th,
    .table td {
        padding: var(--space-3);
        font-size: var(--text-sm);
    }

    /* Forms */
    .form-input,
    .form-textarea,
    .form-select {
        padding: var(--space-3);
    }

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

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

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

    /* Modal */
    .modal {
        width: 95%;
        max-height: 95vh;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: var(--space-4);
    }

    /* Navbar Actions - Mobile */
    .navbar-actions {
        gap: var(--space-2);
    }

    .navbar-actions .btn {
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-sm);
    }

    .navbar-actions .btn-secondary {
        display: none;
    }
}

/* ================================================
   SMALL MOBILE (480px and below)
   ================================================ */
@media (max-width: 480px) {
    :root {
        --text-3xl: 1.5rem;
        --text-4xl: 1.75rem;
        --text-5xl: 2rem;
    }

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

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

    /* Stats Grid */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Buttons full width on mobile */
    .btn-mobile-full {
        width: 100%;
    }

    /* Hide on mobile */
    .hide-mobile {
        display: none !important;
    }
}

/* ================================================
   LANDSCAPE MOBILE
   ================================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: var(--space-16) 0;
    }
}

/* ================================================
   LARGE SCREENS (1440px and up)
   ================================================ */
@media (min-width: 1440px) {
    :root {
        --container-max: 1400px;
    }
}

/* ================================================
   ULTRA WIDE (1920px and up)
   ================================================ */
@media (min-width: 1920px) {
    :root {
        --text-base: 1.125rem;
        --container-max: 1600px;
    }
}

/* ================================================
   PRINT STYLES
   ================================================ */
@media print {

    .navbar,
    .footer,
    .btn,
    .menu-toggle {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .section {
        padding: 20px 0;
    }
}

/* ================================================
   REDUCED MOTION
   ================================================ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ================================================
   DARK MODE PREFERENCE (already dark by default)
   ================================================ */
@media (prefers-color-scheme: light) {
    /* Keep dark theme regardless of system preference */
}