/* layout.css — page-level structure: the MainLayout shell slots + centered container.
   Naming: BEM blocks for layout regions (.layout, .layout__*), .l-* for layout primitives. */

.layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.layout__main {
    flex: 1 0 auto;
    width: 100%;
    min-height: var(--main-content-min-height);
}

/* Centered max-width content wrapper. */
.l-container {
    width: 100%;
    max-width: var(--content-max-width);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

/* Standard contained page wrapper: container gutters + vertical rhythm.
   Use for text/content pages; full-bleed CMS zones (Phase 5) do NOT use this. */
.l-page {
    width: 100%;
    max-width: var(--content-max-width);
    margin-inline: auto;
    padding-inline: var(--space-4);
}