/* =============================================================================
   CONTAINER COMPONENT
   Use Case: Horizontal centering wrapper with responsive padding.
   Desktop 64px | Tablet 48px | Mobile 24px horizontal padding
   ============================================================================= */

/* Base container — mobile-first default (24px padding) */
.container {
    width: 100%;
    margin-inline: auto;
    padding-inline: 24px;
    box-sizing: border-box;
    /* Explicitly setting overflow to visible ensures AOS transforms 
       (like fade-up) and pure CSS parallax do not get clipped. */
    overflow: visible; 
}

/* --- Width constraint modifiers --- */

/* Narrow — long-form prose, legal pages, single-column forms */
.container--narrow {
    max-width: 768px;
}

/* Standard — most page sections (default) */
.container--standard {
    max-width: var(--max-content-width, 1280px); /* Use token with fallback */
}

/* Wide — full-bleed grids on large-desktop viewports */
.container--wide {
    max-width: 1536px;
}

/* --- Tablet breakpoint — 640px+ --- */
@media screen and (min-width: 640px) {
    .container {
        padding-inline: 48px;
    }
}

/* --- Desktop breakpoint — 1024px+ --- */
@media screen and (min-width: 1024px) {
    .container {
        padding-inline: 64px;
    }
}