/* ==========================================================================
   RESPONSIVE.CSS - Mobile-First Responsive Breakpoints
   ========================================================================== */

/* --- Tablet Devices (max-width: 1024px) --- */
@media screen and (max-width: 1024px) {
    html {
        font-size: 15px;
    }

    .nav-links {
        gap: 1.2rem;
    }

    .footer-content {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 2rem;
    }
}

/* --- Mobile / Tablet Transition (max-width: 768px) --- */
@media screen and (max-width: 768px) {
    html, body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    html {
        font-size: 14px;
    }

    .nav-links {
        display: none;
        /* Hide standard nav links on mobile */
    }

    .menu-toggle-btn {
        display: flex;
        /* Show menu toggle */
    }

    .container {
        padding: 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 2.5rem;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .nav-actions {
        gap: 0.8rem;
    }

    .nav-streak-badge span,
    .nav-xp-badge span {
        display: none;
        /* Hide text, show only icon + numbers on mobile */
    }

    .btn {
        width: 100%;
        /* Make buttons full-width in small forms/actions */
    }

    /* Layout Adaptations: Force 1 column on mobile screens */
    .two-col-layout,
    .three-col-grid,
    .four-col-grid,
    .dashboard-grid,
    .tier-grid-container {
        grid-template-columns: 1fr !important;
        gap: 1.2rem !important;
    }

    /* Override inline grid styles on mobile */
    div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 1.2rem !important;
    }

    /* Card padding optimization for small screens */
    .glass-card, .glass-panel {
        padding: 1.25rem !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    #mock-config-card {
        padding: 1.25rem !important;
        margin: 1rem auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* --- Small Mobile Devices (max-width: 480px) --- */
@media screen and (max-width: 480px) {
    .nav-brand {
        font-size: 1.25rem;
    }

    .nav-brand i {
        font-size: 1.35rem;
    }

    .nav-actions {
        gap: 0.5rem;
    }

    .nav-container {
        padding: 0.8rem 1rem;
    }

    .toast-container {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }

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

/* --- Utilities for Dynamic Layouts --- */
.two-col-layout {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    gap: 2rem;
    align-items: start;
}

.three-col-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.four-col-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}

.tier-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}