/**
 * Layout: contenitori e griglia.
 *
 * Prefisso l- per i blocchi di layout, secondo le convenzioni della specifica.
 */

/* ---------------------------------------------------------------------------
 * Contenitore
 * ------------------------------------------------------------------------- */
.l-container {
	width: 100%;
	max-width: var(--easybed-container-width);
	margin-inline: auto;
	padding-inline: var(--easybed-container-padding);
	padding-block: var(--easybed-space-6);
}

/*
 * Dentro una sezione il ritmo verticale lo possiede la sezione, non il
 * contenitore: sommandoli si otteneva 64+32 px per lato, cioe 192 px di vuoto a
 * ogni confine invece dei 128 previsti. Il padding del contenitore resta dov'e
 * ancora utile, cioe header, footer e i template di pagina che non stanno
 * dentro una sezione.
 */
.c-section > .l-container {
	padding-block: 0;
}

/* Contenitore stretto, alla larghezza di lettura del testo. */
.l-container--narrow {
	max-width: var(--easybed-content-width);
}

/* ---------------------------------------------------------------------------
 * Griglia
 *
 * auto-fill con minmax: le colonne si adattano da sole allo spazio disponibile,
 * senza media query e senza breakpoint da mantenere.
 * ------------------------------------------------------------------------- */
.l-grid {
	display: grid;
	gap: var(--easybed-space-5);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

/* ---------------------------------------------------------------------------
 * Pila verticale
 * ------------------------------------------------------------------------- */
.l-stack {
	display: flex;
	flex-direction: column;
	gap: var(--easybed-space-4);
}

/* ---------------------------------------------------------------------------
 * Layout della homepage
 *
 * Griglie mobile-first: una colonna sotto i 48em, poi si aprono. Nessun valore
 * scritto a mano, solo token.
 * ------------------------------------------------------------------------- */

.l-container--narrow {
	max-width: var(--easybed-container-narrow);
}

/* Confronto affiancato fra due colonne. */
.l-compare {
	display: grid;
	gap: var(--easybed-space-5);
	margin-block: var(--easybed-space-7);
}

/* Passaggi numerati. */
.l-steps {
	display: grid;
	gap: var(--easybed-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: easybed-step;
}

/* Griglia di schede: caratteristiche e misure. */
.l-grid-cards {
	display: grid;
	gap: var(--easybed-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Blocco immagine + testo. */
.l-split {
	display: grid;
	gap: var(--easybed-space-6);
	align-items: center;
}

@media (min-width: 48em) {
	.l-compare {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	.l-grid-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.l-split {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: var(--easybed-space-8);
	}
}

@media (min-width: 64em) {
	.l-grid-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}