/* ==========================================================================
   Layout — Containers, Sections, Grids, Page Transitions
   ========================================================================== */

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

.container--narrow { max-width: var(--container-narrow); }
.container--form   { max-width: var(--container-form); }

.section {
    padding: var(--space-6xl) 0;
    position: relative;
}

.section--tight { padding: var(--space-4xl) 0; }

/* ── SPA Page Transitions ── */
.page {
    display: none;
    padding-top: var(--nav-height);
    min-height: 100vh;
    opacity: 0;
    transform: translateY(10px);
    filter: blur(5px);
    transition:
        opacity var(--transition-page),
        transform var(--transition-page),
        filter var(--transition-page);
}

.page.active { display: block; }
.page.enter  { opacity: 1; transform: translateY(0); filter: blur(0); }

/* ── Page Header Pattern ── */
.page-header {
    text-align: center;
    padding: var(--space-4xl) 0 var(--space-3xl);
}

.page-header h1,
.page-header h2 { margin-bottom: var(--space-md); }

.page-header p { max-width: 600px; margin: 0 auto; }

/* ── Common Grids ── */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-xl);
}