/* Stili dei blocchi. La struttura la portano layout.css e components.css:
   qui sta solo quello che appartiene a un blocco preciso. */

/* ── Testo e figura ─────────────────────────────────── */
.esca-tf__immagine {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Il testo davanti vince su .esca-elenco di catalogo.css, che arriva dopo e azzera i margini. */
.esca-tf__testo .esca-tf__elenco {
	max-width: var(--esca-larghezza-testo);
	margin-bottom: var(--esca-spazio-4);
}

/* Il rovescio delle colonne: la fotografia a sinistra, il testo a destra.
   Si fa con l'ordine della griglia e non invertendo il markup, cosi' chi
   naviga da tastiera o con un lettore di schermo incontra sempre prima il
   testo, che e' il contenuto. */
@media (min-width: 48rem) {
	.esca-tf--rovescia .esca-tf__testo {
		order: 2;
	}

	.esca-tf--rovescia .esca-tf__figura {
		order: 1;
	}
}

/* ── Fascia immersiva ───────────────────────────────────
   Una fotografia a piena larghezza con la frase in basso. La velatura sale dal
   fondo invece di coprire tutto: cosi' la fotografia si vede per intero e il
   testo resta leggibile dove sta. */
.esca-immersiva {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 24rem;
	background: var(--esca-inchiostro) center / cover no-repeat;
	color: var(--esca-su-scuro);
}

.esca-immersiva::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, var(--esca-velo-basso) 0%, transparent 62%);
}

.esca-immersiva__interno {
	position: relative;
	z-index: 1;
	padding-block: var(--esca-spazio-6);
}

.esca-immersiva__testo {
	max-width: 46rem;
}

.esca-immersiva__frase {
	font-family: var(--esca-font-titolo);
	font-size: var(--esca-dim-titolo);
	line-height: var(--esca-interlinea-titolo);
	margin-bottom: var(--esca-spazio-2);
	max-width: none;
}

.esca-immersiva__frase em {
	font-style: italic;
}

.esca-immersiva__didascalia {
	font-size: var(--esca-dim-occhiello);
	letter-spacing: var(--esca-spaziatura-occhiello);
	text-transform: uppercase;
	color: var(--esca-su-scuro-tenue);
	margin-bottom: 0;
}

/* ── Percorsi ───────────────────────────────────────── */
/* Due vie di pari peso: nessuna delle due deve sembrare la principale, quindi
   stessa larghezza, stessa proporzione della foto, stesso tipo di bottone. */
.esca-percorsi__griglia {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--esca-spazio-7);
}

@media (min-width: 48rem) {
	.esca-percorsi__griglia {
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--esca-spazio-8);
	}
}

.esca-percorsi__immagine {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin-bottom: var(--esca-spazio-4);
}

.esca-percorsi__titolo {
	font-size: var(--esca-dim-sottotitolo);
	margin-bottom: var(--esca-spazio-3);
}

.esca-percorsi__testo {
	color: var(--esca-testo-tenue);
	max-width: none;
}

.esca-fascia--scura .esca-percorsi__testo {
	color: var(--esca-su-scuro-tenue);
}

.esca-percorsi__legame {
	padding-top: var(--esca-spazio-4);
	margin-bottom: 0;
}

/* ── Promesse ───────────────────────────────────────── */
.esca-promesse__griglia {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--esca-spazio-5);
}

@media (min-width: 48rem) {
	.esca-promesse__griglia {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--esca-spazio-6);
	}
}

@media (min-width: 64rem) {
	.esca-promesse__griglia {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--esca-spazio-5);
	}

	.esca-promesse__griglia--due {
		grid-template-columns: repeat(2, 1fr);
	}
}

.esca-promesse__legame {
	padding-top: var(--esca-spazio-3);
	margin-bottom: 0;
}

/* Le card di una riga hanno testi di lunghezza diversa: il bottone va in fondo, alla stessa altezza. */
.esca-percorsi__via,
.esca-promesse__voce {
	display: flex;
	flex-direction: column;
}

.esca-percorsi__legame,
.esca-promesse__legame {
	margin-top: auto;
}

@media (min-width: 64rem) {
	.esca-promesse__griglia--tre {
		grid-template-columns: repeat(3, 1fr);
	}
}

.esca-promesse__immagine {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin-bottom: var(--esca-spazio-3);
}

.esca-linee__legame-finale {
	margin-top: var(--esca-spazio-5);
	margin-bottom: 0;
}

.esca-promesse__voce {
	padding-top: var(--esca-spazio-3);
	border-top: 1px solid var(--esca-oro-tratto);
}

.esca-promesse__titolo {
	font-size: var(--esca-dim-sottotitolo);
	margin-bottom: var(--esca-spazio-2);
}

.esca-promesse__finale {
	margin: var(--esca-spazio-5) 0 0;
}

.esca-promesse__testo {
	font-size: var(--esca-dim-piccolo);
	color: var(--esca-testo-tenue);
	margin-bottom: 0;
	max-width: none;
}

/* ── Cifre ──────────────────────────────────────────── */
.esca-cifre__griglia {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--esca-spazio-5);
}

@media (min-width: 48rem) {
	.esca-cifre__griglia {
		grid-template-columns: repeat(4, 1fr);
	}
}

.esca-cifre__griglia .esca-cifra {
	margin-bottom: 0;
	max-width: none;
}

/* ── Linee del catalogo ─────────────────────────────────
   Un elenco tipografico, non una griglia di riquadri: le linee sono cinque
   nomi, e cinque nomi non hanno bisogno di cinque scatole. */
.esca-linee__elenco {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--esca-spazio-3);
	margin: var(--esca-spazio-5) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 64rem) {
	.esca-linee__elenco {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--esca-spazio-4);
	}
}

.esca-linee__voce {
	display: flex;
}

.esca-linee__legame {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--esca-bianco);
	color: var(--esca-testo);
	text-decoration: none;
}

.esca-linee__immagine {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.esca-linee__testo {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: var(--esca-spazio-1);
	padding: var(--esca-spazio-3);
}

.esca-linee__nome {
	font-family: var(--esca-font-titolo);
	font-size: var(--esca-dim-sottotitolo);
	line-height: var(--esca-interlinea-titolo);
}

.esca-linee__legame:hover .esca-linee__nome {
	text-decoration: underline;
	text-decoration-color: var(--esca-oro-tratto);
	text-underline-offset: 0.2em;
}

/* In fondo alla card, alla stessa altezza in tutte le card della riga. */
.esca-linee__conteggio {
	margin-top: auto;
	padding-top: var(--esca-spazio-2);
	font-size: var(--esca-dim-mini);
	letter-spacing: var(--esca-spaziatura-occhiello-stretta);
	text-transform: uppercase;
	color: var(--esca-oro-testo);
}

.esca-linee__descrizione {
	margin-top: var(--esca-spazio-1);
	font-size: var(--esca-dim-piccolo);
	color: var(--esca-testo-tenue);
}

/* Su telefono il box e' largo meta' schermo: bastano foto, nome e conteggio. */
@media (max-width: 39.99rem) {
	.esca-linee__descrizione {
		display: none;
	}
}

/* ── Riquadri fotografici ───────────────────────────── */
.esca-riquadri__elenco {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--esca-spazio-5);
	margin: var(--esca-spazio-5) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48rem) {
	.esca-riquadri__elenco {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--esca-spazio-4);
	}
}

.esca-riquadri__legame {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--esca-testo);
	text-decoration: none;
}

.esca-riquadri__immagine {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

.esca-riquadri__titolo {
	margin: var(--esca-spazio-3) 0 var(--esca-spazio-2);
	padding-top: var(--esca-spazio-3);
	border-top: 1px solid var(--esca-oro-tratto);
	font-size: var(--esca-dim-sottotitolo);
}

.esca-riquadri__legame:hover .esca-riquadri__titolo {
	text-decoration: underline;
	text-decoration-color: var(--esca-oro-tratto);
	text-underline-offset: 0.2em;
}

.esca-riquadri__legame:hover .esca-riquadri__invito {
	color: var(--esca-oro-testo);
}

.esca-riquadri__invito {
	align-self: flex-start;
	margin-top: auto;
}

/* ── Contatti ───────────────────────────────────────── */
.esca-contatti__indirizzo {
	font-size: var(--esca-dim-medio);
}

.esca-contatti__recapito {
	margin-bottom: var(--esca-spazio-1);
}

.esca-contatti__titolo {
	font-family: var(--esca-font-testo);
	font-size: var(--esca-dim-occhiello);
	letter-spacing: var(--esca-spaziatura-occhiello);
	text-transform: uppercase;
	color: var(--esca-testo-tenue);
	margin-bottom: var(--esca-spazio-3);
}

.esca-contatti__persona {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esca-spazio-2);
	align-items: baseline;
	justify-content: space-between;
}

.esca-contatti__nome {
	font-family: var(--esca-font-titolo);
	font-size: var(--esca-dim-sottotitolo);
}

.esca-contatti__ruolo {
	font-size: var(--esca-dim-occhiello);
	letter-spacing: var(--esca-spaziatura-occhiello);
	text-transform: uppercase;
	color: var(--esca-testo-tenue);
}

/* Una riga dell'elenco con il suo titolo sopra il dato. */
.esca-tf__voce-titolo {
	display: block;
	margin-bottom: var(--esca-spazio-1);
	font-weight: 600;
	color: var(--esca-testo);
}

/* ── Rimandi con foto ───────────────────────────────── */
/* Stessa card dei box categoria in home, su fondo oro chiarissimo perche' la fascia e' bianca. */
.esca-rimandi__griglia {
	display: grid;
	gap: var(--esca-spazio-4);
	margin: var(--esca-spazio-5) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48rem) {
	.esca-rimandi__griglia {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Quattro card: due per riga sul tablet, tutte in fila da 64rem. */
@media (min-width: 48rem) {
	.esca-rimandi__griglia--quattro {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.esca-rimandi__griglia--quattro {
		grid-template-columns: repeat(4, 1fr);
	}
}

.esca-rimandi__griglia > li {
	display: flex;
}

.esca-rimandi__voce {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--esca-fondo-caldo);
	color: var(--esca-testo);
	text-decoration: none;
}

.esca-rimandi__immagine {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Le confezioni hanno proporzioni diverse: stesso riquadro bianco, confezione intera dentro. */
.esca-rimandi--confezioni .esca-rimandi__immagine {
	padding: var(--esca-spazio-4);
	object-fit: contain;
	background: var(--esca-bianco);
	border: 1px solid var(--esca-fondo-caldo);
}

.esca-rimandi__testo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--esca-spazio-2);
	padding: var(--esca-spazio-4);
}

.esca-rimandi__titolo {
	font-family: var(--esca-font-titolo);
	font-size: var(--esca-dim-sottotitolo);
	line-height: var(--esca-interlinea-titolo);
}

.esca-rimandi__descrizione {
	font-size: var(--esca-dim-piccolo);
	color: var(--esca-testo-tenue);
}

.esca-rimandi__testo .esca-collegamento {
	margin-top: auto;
	padding-top: var(--esca-spazio-2);
	align-self: flex-start;
}

.esca-rimandi__voce:hover .esca-rimandi__titolo {
	text-decoration: underline;
	text-decoration-color: var(--esca-oro-tratto);
	text-underline-offset: 0.2em;
}

.esca-rimandi__voce:focus-visible {
	outline-offset: 4px;
}