/* layout.css — structural spacing, section rhythm, grid helpers */

.container {
    max-width: 1200px;
}

section, .section {
    padding-block: clamp(3rem, 6vw, 6rem);
}

.section-tight {
    padding-block: clamp(2rem, 4vw, 3.5rem);
}

.section-header {
    max-width: 640px;
    margin-bottom: 2.5rem;
}

.section-header.text-center {
    margin-inline: auto;
}

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

.grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

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

@media (max-width: 767px) {
    section, .section { padding-block: 2.5rem; }
}