/* ==========================================================================
   LAYOUT — le sole primitive di impaginazione. Sostituiscono Bootstrap.
   ========================================================================== */

.container {
    width: 100%;
    max-width: calc(var(--container-max) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

/* Ogni sezione di pagina usa .section per avere il ritmo verticale standard. */
.section { padding-block: var(--space-section); }
.section--tight { padding-block: var(--space-block); }

/* Impila figli con spazio uniforme. Personalizza con --stack-gap. */
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); }

/* Allinea in riga e va a capo. Personalizza con --cluster-gap. */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-3)); }

/* Griglia responsive. Le colonne scendono da sole su mobile. */
.grid {
    display: grid;
    gap: var(--grid-gap, var(--space-6));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr));
}

.grid--2 { --grid-min: 22rem; }
.grid--3 { --grid-min: 16rem; }
.grid--4 { --grid-min: 12rem; }

/* Due colonne affiancate da tablet in su (testo + immagine). */
.split {
    display: grid;
    gap: var(--space-8);
    align-items: center;
}

@media (min-width: 768px) {
    .split { grid-template-columns: 1fr 1fr; }
    .split--reverse > :first-child { order: 2; }
}

.text-center { text-align: center; }
.text-center .lead { margin-inline: auto; }