/* Contenitori e fasce. Una fascia occupa tutta la larghezza della finestra e
   porta il proprio fondo; il contenuto dentro resta incolonnato. */

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

/* La misura del testo lungo. Piu' stretta del contenuto perche' una riga di
   novanta caratteri si legge male, per quanto elegante sia il carattere. */
.esca-misura {
	max-width: var(--esca-larghezza-testo);
}

/* La testata e' fissa e non occupa spazio: le pagine senza hero si tengono
   la sua altezza compatta; quelle con la hero la mettono dentro la hero. */
.esca-main {
	padding-top: var(--esca-testata-bassa);
}

.esca-apre-scuro .esca-main {
	padding-top: 0;
}

.esca-fascia {
	padding-block: var(--esca-spazio-8);
}

.esca-fascia--stretta {
	padding-block: var(--esca-spazio-6);
}

/* L'oro chiarissimo e' il secondo tono, non il fondo di base: si usa per
   staccare una fascia dalle due che ha intorno. Due fasce dello stesso tono di
   fila non staccano niente e vanno evitate. */
.esca-fascia--caldo {
	background: var(--esca-fondo-caldo);
}

.esca-fascia--scura {
	background: var(--esca-inchiostro);
	color: var(--esca-su-scuro);
}

.esca-fascia--scura a {
	text-decoration-color: var(--esca-oro-su-scuro);
}

.esca-fascia--scura :focus-visible {
	outline-color: var(--esca-oro-su-scuro);
}

/* Due fasce bianche in fila si leggono come una: la seconda non raddoppia il vuoto. */
.esca-fascia:not(.esca-fascia--caldo, .esca-fascia--scura) + .esca-fascia:not(.esca-fascia--caldo, .esca-fascia--scura) {
	padding-top: var(--esca-spazio-6);
}

@media (max-width: 47.99rem) {
	.esca-fascia:not(.esca-fascia--caldo, .esca-fascia--scura) + .esca-fascia:not(.esca-fascia--caldo, .esca-fascia--scura) {
		padding-top: var(--esca-spazio-5);
	}
}

/* Griglia a due colonne, quella che regge il rapporto testo e fotografia.
   Sotto i 48rem torna a una colonna sola. */
.esca-due-colonne {
	display: grid;
	gap: var(--esca-spazio-6);
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
	.esca-due-colonne {
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}

	.esca-due-colonne--stretta-larga {
		grid-template-columns: 2fr 3fr;
	}
}

/* Le fotografie che arrivano al vivo escono dal contenitore per il solo
   margine laterale, invece di ricalcolare la larghezza della finestra. */
.esca-al-vivo {
	margin-inline: calc(var(--esca-margine-laterale) * -1);
}