/* ========================================================================== layout.css -------------------------------------------------------------------------- Reusable layout primitives. Mobile-first defaults; multi-column grid expansions live in responsive.css. ========================================================================== */ /* ----- Page-level wrapper ------------------------------------------------- */ /* Optional: add class="page-shell" on if you want sticky-footer behavior. Otherwise body still works fine without it. */ .page-shell { display: flex; flex-direction: column; min-height: 100vh; } /* ----- Container --------------------------------------------------------- */ .site-container { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: var(--container-padding); } /* ----- Vertical sections ------------------------------------------------- */ .section { padding-block: var(--section-padding); } .section-sm { padding-block: var(--section-padding-sm); } .section-divider { width: calc(100% - 2 * var(--container-padding)); max-width: calc(var(--container-width) - 2 * var(--container-padding)); margin-inline: auto; border: 0; border-top: 1px solid var(--color-border); } /* ----- Stack: vertical rhythm of children -------------------------------- */ .stack > * + * { margin-top: 1.25rem; } .stack-sm > * + * { margin-top: 0.75rem; } .stack-lg > * + * { margin-top: 2rem; } /* ----- Cluster: wrap horizontally with gap ------------------------------- */ .cluster { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } /* ----- Grid helpers (mobile-first single column) ------------------------- */ .grid { display: grid; gap: 2rem; grid-template-columns: 1fr; } .grid-2, .grid-3, .grid-4 { display: grid; gap: 2rem; grid-template-columns: 1fr; } /* The 2-/3-/4-column expansions are defined in responsive.css. */