/* ==========================================================================
   layout.css – Container, Sections, Grids, Stacks
   ========================================================================== */

.container {
    width: min(100% - 40px, var(--container-width));
    margin-inline: auto;
}

.container-narrow {
    width: min(100% - 40px, var(--container-narrow));
    margin-inline: auto;
}

/* Sections */
.section {
    padding-block: var(--section-padding);
    position: relative;
}

.section-sm {
    padding-block: 80px;
}

.section-lg {
    padding-block: 160px;
}

.section-bg-soft {
    background: linear-gradient(180deg, transparent, var(--color-bg-soft) 30%, var(--color-bg-soft) 70%, transparent);
}

/* Section Header */
.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 4rem;
}

.section-header.left {
    text-align: left;
    margin-inline: 0;
}

.section-header h2 {
    margin-bottom: 1rem;
}

.section-header p {
    font-size: 1.0625rem;
    color: var(--color-muted);
}

/* Grids */
.grid {
    display: grid;
    gap: 1.5rem;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.grid-asym-2 {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    align-items: center;
}

/* Vertical Stack */
.stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stack-lg {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* Inline / Cluster */
.inline {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Helpers */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.full-width { width: 100%; }

.mt-0  { margin-top: 0; }
.mt-1  { margin-top: 0.5rem; }
.mt-2  { margin-top: 1rem; }
.mt-3  { margin-top: 1.5rem; }
.mt-4  { margin-top: 2rem; }
.mt-5  { margin-top: 3rem; }

.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: 0.5rem; }
.mb-2  { margin-bottom: 1rem; }
.mb-3  { margin-bottom: 1.5rem; }
.mb-4  { margin-bottom: 2rem; }
.mb-5  { margin-bottom: 3rem; }