/*
 * v2/css/layout.css — structure, responsive layout, nav positioning (requires base + components).
 *
 * Load order: base.css → components.css → layout.css
 * Homepage hero: pages/home.css (after layout.css)
 *
 * Legacy layout aliases: .section-padding, .dual-col, etc.
 * Page-specific sections (about, lessons, etc.): pages/*.css
 */

/* ==========================================================================
   Utilities
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding-inline: var(--space-container-x);
}

.section--padding,
.section-padding {
    padding-block: var(--space-section-y);
}

.section--compact {
    padding-block: var(--space-section-y-compact);
}

.bg-alt {
    background-color: var(--bg-surface);
}

.center {
    text-align: center;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.full-height {
    min-height: 100vh;
    min-height: 100svh;
}

.mt-4 {
    margin-top: var(--space-6);
}

.full-width {
    width: 100%;
}

/* ==========================================================================
   Grid helpers (mobile-first)
   ========================================================================== */

.grid-2,
.dual-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: center;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr));
    gap: var(--space-6);
    margin-top: var(--space-7);
}

@media (min-width: 768px) {
    .container {
        padding-inline: var(--space-6);
    }

    .grid-2,
    .dual-col {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }
}

@media (min-width: 1024px) {
    .grid-2,
    .dual-col {
        gap: var(--space-8);
    }
}

/* ==========================================================================
   Nav — fixed bar, scrolled state, mobile overlay
   ========================================================================== */

.nav--fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    padding: var(--space-5) 0 var(--space-2);
    transition:
        background 0.3s ease,
        padding 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.nav--fixed.nav--scrolled {
    background: var(--navbar-scrolled-bg);
    backdrop-filter: blur(10px);
    padding: var(--space-3) 0 var(--space-1);
    border-bottom: 1px solid var(--bg-surface-light);
    box-shadow: var(--shadow-sm);
}

/* Mobile dropdown panel (JS toggles .nav--open on .nav) */
@media (max-width: 1023px) {
    .nav--fixed.nav--open .nav__links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        flex-direction: column;
        align-items: center;
        padding: var(--space-6) 0;
        gap: var(--space-5);
        background: var(--bg-surface);
        border-bottom: 1px solid var(--bg-surface-light);
        box-sizing: border-box;
    }
}