/**
 * Shared page section spacing (ARCH2).
 */

.dc-section-band {
    padding: var(--dc-space-10) 0;
    padding-inline: max(var(--dc-gutter-mobile), calc((100% - var(--dc-container)) / 2));
}

/* Legacy modifier: the band padding already centres the content at --dc-container. */
.dc-section-band--contained {
    margin-inline: auto;
}

@media (min-width: 768px) {
    .dc-section-band {
        padding-inline: max(var(--dc-gutter), calc((100% - var(--dc-container)) / 2));
    }
}

.dc-page-shell {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    padding: var(--dc-space-6) max(var(--dc-gutter-mobile), calc((100% - var(--dc-container)) / 2)) calc(var(--dc-space-16) + var(--dc-space-8));
}

@media (min-width: 768px) {
    .dc-page-shell {
        padding-inline: max(var(--dc-gutter), calc((100% - var(--dc-container)) / 2));
        padding-block-end: calc(var(--dc-space-16) * 2 + var(--dc-space-8));
    }
}

/* Legacy alias: every shell already spans the 1200 content inside the fluid gutters. */
.dc-page-shell--wide {
    max-width: none;
}

.dc-section-stack {
    display: flex;
    flex-direction: column;
}

.dc-section-stack--gap-lg {
    gap: var(--dc-space-10);
}

.dc-section-stack--gap-xl {
    gap: 3.5rem;
}