/* Contenitori, sezioni e griglia. */

.elic-container {
	width: 100%;
	max-width: var(--elic-larghezza-max);
	margin-inline: auto;
	padding-inline: var(--elic-margine-laterale);
}

.elic-container--stretto {
	max-width: var(--elic-larghezza-testo);
}

/* La misura delle fasce editoriali, e ormai la regola invece dell'eccezione:
   ci stanno l'apertura, la spirale, testo-cifre, i passi, il video, le
   domande, il confronto, le griglie di card, le cifre, la galleria, i loghi,
   l'elenco e la barra. Restano al contenitore stretto le fasce che sono una
   colonna di prosa — testo, citazione, modulo, test del terreno, chiusura —
   perche' li' la larghezza non e' spazio guadagnato ma una riga che non si
   riesce a seguire fino in fondo. */
.elic-container--largo {
	max-width: var(--elic-larghezza-larga);
}

/* Nessun tetto di larghezza, solo il margine laterale della pagina. Serve
   all'intestazione e al piede, che vanno da un bordo all'altro.

   La conseguenza va detta perche' si vede: sopra i 1536px, che e' il tetto
   del contenitore largo, il marchio non e' piu' incolonnato con il titolo
   dell'apertura. Su uno schermo da 2560 sono cinquecento pixel di scarto per
   lato. E' il prezzo di una barra a tutta larghezza. Se un giorno si volesse
   ricucire l'incolonnamento, la strada e' alzare il tetto del contenitore
   largo, non rimettere un tetto qui. */
.elic-fascia-piena {
	width: 100%;
	padding-inline: var(--elic-margine-laterale);
}

.elic-sezione {
	padding-block: clamp(var(--elic-sp-5), 7vw, var(--elic-sp-6));
}

/* Due sezioni bianche consecutive appartengono allo stesso capitolo: sommare
   il respiro inferiore della prima a quello superiore della seconda crea una
   pagina vuota, non una pausa. I cambi di fondo conservano invece lo stacco
   completo perché segnano un vero cambio di argomento. */
.elic-sezione:not(.elic-sezione--chiara, .elic-sezione--scura)
	+ .elic-sezione:not(.elic-sezione--chiara, .elic-sezione--scura) {
	padding-top: 0;
}

@media (max-width: 48rem) {
	.elic-sezione {
		padding-block: var(--elic-sp-5);
	}
}

/* Due fasce di domande di seguito sono lo stesso capitolo, anche quando il
   fondo cambia: su «Domande e risposte» sono tre, e con il respiro pieno fra
   l'una e l'altra la pagina diventa tre schermate identiche invece di un
   indice a tre voci. Qui la regola dell'alternanza dei fondi non basta,
   perche' quelle tre fasce alternano apposta. */
.elic-faq + .elic-faq {
	padding-top: var(--elic-sp-4);
}

.elic-faq:has(+ .elic-faq) {
	padding-bottom: var(--elic-sp-4);
}

/* Due sole varianti di fondo, e sono i due estremi della palette: la carta
   e l'inchiostro. Nella prima direzione ce n'erano tre (crema, verde,
   verde scuro) e la terza serviva a separare due sezioni scure adiacenti.
   Qui il problema non si pone: fra due sezioni nere c'e' sempre del bianco,
   ed e' proprio l'alternanza a scandire la pagina. */

.elic-sezione--chiara {
	background: var(--elic-avorio);
}

.elic-sezione--scura {
	background: var(--elic-bruno);
	color: var(--elic-su-scuro);
}

.elic-sezione--scura h1,
.elic-sezione--scura h2,
.elic-sezione--scura h3 {
	color: var(--elic-su-scuro);
}

.elic-sezione--scura p {
	color: var(--elic-su-scuro-tenue);
}

/* Tre colonne su schermo largo, due sul tablet, una sul telefono.

   Il numero non e' scritto: lo decide la misura minima di una card contro la
   larghezza disponibile. A 260px pero' ce ne stavano quattro a 1440 e cinque
   nel contenitore largo, e una griglia di sei schede usciva 4+2 invece di 3+3 —
   con l'ultima riga che sembra un avanzo. A 340px il conto si ferma a tre in
   tutte e due le misure, e a due sotto i mille pixel. */
.elic-griglia {
	display: grid;
	gap: var(--elic-sp-4) var(--elic-sp-3);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.elic-griglia--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.elic-griglia--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

/* Struttura di intestazione e piede. */
.elic-header {
	border-bottom: 1px solid var(--elic-bordo-chiaro);
	background: var(--elic-bianco);
}

.elic-header__interno {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--elic-sp-3);
	padding-block: var(--elic-sp-2);
	flex-wrap: wrap;
}

.elic-header__logo {
	font-family: var(--elic-font-display);
	font-size: var(--elic-dim-medio);
	text-decoration: none;
}

.elic-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--elic-sp-3);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--elic-dim-piccolo);
}

/* Niente sottolineato in hover: il segnale della navigazione e' il filo d'oro
   sotto le voci di primo livello e l'oro sul titolo nei pannelli, e sta tutto
   in navigazione.css. La riga qui vinceva per specificita' su quelle regole e
   sottolineava le voci dei pannelli al passaggio. */
.elic-nav a {
	text-decoration: none;
}

/* Zero, e per scelta. Nelle pagine il contenuto sono blocchi, e ogni blocco
   porta la propria spaziatura verticale: una qui si sommerebbe alla prima
   sezione, e taglierebbe in due le aperture che vanno a filo di finestra.
   Al fallback, che invece monta il contenuto nudo, la spaziatura la da'
   il template con .elic-py-4. */
.elic-main {
	padding-block: 0;
}

.elic-footer {
	background: var(--elic-bruno);
	color: var(--elic-su-scuro);
	padding-block: var(--elic-sp-4);
}

.elic-footer__nota {
	font-size: var(--elic-dim-piccolo);
	opacity: 0.8;
}