/*
 * Global VDM layout primitives.
 * Full-bleed sections contain centered, width-limited content containers.
 */

.vdm-section {
    width: 100%;
    padding-block: var(--vdm-section-space);
}

.vdm-section--compact {
    padding-block: clamp(36px, 5vw, 64px);
}

.vdm-section--light {
    background: var(--vdm-color-background);
}

.vdm-section--surface {
    background: var(--vdm-color-surface);
}

.vdm-section--dark {
    color: var(--vdm-color-surface);
    background: var(--vdm-color-navy);
}

.vdm-section--dark h1,
.vdm-section--dark h2,
.vdm-section--dark h3,
.vdm-section--dark h4,
.vdm-section--dark p {
    color: inherit;
}

.vdm-container {
    --vdm-container-width: var(--vdm-width-content);

    width: min(
        calc(100% - (2 * var(--vdm-page-gutter))),
        var(--vdm-container-width)
    );
    max-width: var(--vdm-container-width);
    margin-inline: auto;
}

.vdm-container--wide {
    --vdm-container-width: var(--vdm-width-catalog);
}

.vdm-container--reading {
    --vdm-container-width: var(--vdm-width-reading);
}

.vdm-grid {
    display: grid;
    gap: var(--vdm-space-4);
}

.vdm-grid--categories-large {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vdm-grid--categories-small {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vdm-grid--products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}