/* =========================================
   02 - Layout (Brand System Compatible)
   - layout primitives only
   - spacing uses tokens where possible
========================================= */

/* =========================================================
   Container
========================================================= */

.l-container {
    width: 100%;
    max-width: var(--l-container);
    margin-inline: auto;
    padding-inline: 32px;
}

/* =========================================================
   Section spacing (layout only)
========================================================= */

.s-section {
    padding: 84px 0;
}

/* Soft section: warm glow (modifier) */
.s-section--soft {
    position: relative;
    background: transparent;
    border: none;
    padding-top: 104px;
    padding-bottom: 104px;
}

.s-section--soft::before {
    content: "";
    position: absolute;
    inset: -28px 0;
    z-index: -1;
    background:
        radial-gradient(80% 60% at 50% 0%,
            rgba(245, 158, 11, .10),
            rgba(245, 158, 11, 0)),
        radial-gradient(90% 70% at 20% 30%,
            rgba(28, 25, 23, .05),
            rgba(28, 25, 23, 0));
}

/* =========================================================
   Layout: Split
========================================================= */

.l-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}

@media (max-width: 900px) {
    .l-split {
        grid-template-columns: 1fr;
    }
}