/*
 * Layout primitives and Bootstrap strategy.
 */

.site-container {
    width: min(100%, var(--container-width));
    padding-left: clamp(var(--space-4), 3vw, var(--space-7));
    padding-right: clamp(var(--space-4), 3vw, var(--space-7));
}

.section {
    padding-block: clamp(var(--space-10), 8vw, var(--space-13));
}

.section-sm {
    padding-block: clamp(var(--space-8), 6vw, var(--space-11));
}

.section-header {
    margin-bottom: clamp(var(--space-6), 4vw, var(--space-9));
    max-width: 760px;
}

.grid-auto {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.grid-two {
    display: grid;
    gap: clamp(var(--space-6), 5vw, var(--space-10));
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-three {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.content-narrow {
    max-width: 760px;
}

.content-wide {
    max-width: 1080px;
}

.stack {
    display: grid;
    gap: var(--space-5);
}

.cluster {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.cluster-between {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: space-between;
}

.flow > * + * {
    margin-top: var(--flow-space, var(--space-4));
}

.surface-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}