/* ========================================
   RESPONSIVE DESIGN - MEDIA QUERIES
   ======================================== */

/* ========================================
   TABLET (768px and below)
   ======================================== */
@media (max-width: 768px) {
    /* Navigation */
    .nav-container {
        flex-direction: column;
        gap: var(--space-4);
    }

    .nav-menu {
        flex-direction: column;
        width: 100%;
        gap: var(--space-2);
    }

    .nav-link {
        padding: var(--space-3) var(--space-4);
        width: 100%;
        text-align: center;
        border: var(--border-width-thin) solid var(--color-border-primary);
    }

    /* Show mobile menu toggle */
    .mobile-menu-toggle {
        display: block;
    }

    /* Hero sections */
    .hero-section {
        padding: var(--space-12) var(--space-6);
    }

    .hero-section h1 {
        font-size: var(--font-size-3xl);
    }

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

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

    /* Container */
    .container {
        padding: var(--space-6);
    }

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

    /* Grids */
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    /* Forms */
    .form-group {
        margin-bottom: var(--space-4);
    }

    /* Buttons */
    .btn {
        width: 100%;
        padding: var(--space-4);
    }

    .btn-sm {
        padding: var(--space-3);
    }

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

    /* Theme toggle */
    .theme-toggle {
        width: 50px;
        height: 50px;
        bottom: var(--space-6);
        right: var(--space-6);
    }

    /* Toast notifications */
    .toast-container {
        top: var(--space-4);
        right: var(--space-4);
        left: var(--space-4);
    }

    .toast {
        min-width: auto;
        width: 100%;
    }

    /* Tables - Make scrollable */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Modals */
    .modal {
        width: 95%;
        padding: var(--space-6);
    }
}

/* ========================================
   MOBILE (480px and below)
   ======================================== */
@media (max-width: 480px) {
    /* Typography - Even smaller for mobile */
    .hero-section h1, h1 {
        font-size: var(--font-size-2xl);
    }

    h2 {
        font-size: var(--font-size-lg);
    }

    h3 {
        font-size: var(--font-size-md);
    }

    /* Container */
    .container {
        padding: var(--space-4);
    }

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

    /* Navigation */
    .logo {
        font-size: var(--font-size-lg);
    }

    /* Hero sections */
    .hero-section {
        padding: var(--space-8) var(--space-4);
        border-radius: var(--radius-base);
    }

    .hero-section h1 {
        font-size: var(--font-size-xl);
    }

    .hero-section p {
        font-size: var(--font-size-base);
    }

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

    /* Buttons */
    .btn {
        padding: var(--space-3) var(--space-4);
        font-size: var(--font-size-base);
    }

    .btn-lg {
        padding: var(--space-4) var(--space-6);
        font-size: var(--font-size-md);
    }

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

    /* Theme toggle */
    .theme-toggle {
        width: 45px;
        height: 45px;
        bottom: var(--space-4);
        right: var(--space-4);
        font-size: var(--font-size-lg);
    }

    /* Toast notifications */
    .toast-container {
        top: var(--space-2);
        right: var(--space-2);
        left: var(--space-2);
    }

    .toast {
        padding: var(--space-3) var(--space-4);
        font-size: var(--font-size-sm);
    }

    /* Pagination */
    .pagination a, .pagination span {
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-sm);
    }

    /* Badges */
    .badge {
        font-size: var(--font-size-xs);
        padding: 0.2rem 0.5rem;
    }

    /* Footer */
    footer {
        padding: var(--space-6) 0;
    }
}

/* ========================================
   LARGE SCREENS (1280px and above)
   ======================================== */
@media (min-width: 1280px) {
    /* Hero sections - Take advantage of space */
    .hero-section h1 {
        font-size: var(--font-size-5xl);
    }

    .hero-section p {
        font-size: var(--font-size-xl);
    }

    /* Larger typography */
    h1 {
        font-size: var(--font-size-4xl);
    }

    /* More spacious grids */
    .grid-2 {
        gap: var(--space-12);
    }

    .grid-3 {
        gap: var(--space-10);
    }
}

/* ========================================
   LANDSCAPE ORIENTATION
   ======================================== */
@media (max-height: 600px) and (orientation: landscape) {
    /* Reduce vertical spacing in landscape mode */
    .hero-section {
        padding: var(--space-8) var(--space-6);
    }

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

    /* Make theme toggle smaller */
    .theme-toggle {
        width: 40px;
        height: 40px;
        bottom: var(--space-4);
        right: var(--space-4);
    }
}