/* ============================================================
   layout.css — containers, grid utilities
   ============================================================ */

.container {
    width: 100%;
    max-width: var(--container-base);
    margin: 0 auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

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

.section {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
    position: relative;
}

.section--tight { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.section--flush { padding: 0; }

@media (max-width: 768px) {
    .container { padding-left: var(--space-sm); padding-right: var(--space-sm); }
    .section { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
}