/* Componenti riusabili del tema. Si riempie nel Task 8. */

/* ── Salto al contenuto ─────────────────────────────────
   Nascosto finche' non riceve il focus: e' la prima cosa che incontra chi
   naviga da tastiera e deve poter saltare la navigazione. */
.esca-salta {
	position: absolute;
	left: var(--esca-spazio-3);
	top: var(--esca-spazio-3);
	z-index: 100;
	padding: var(--esca-spazio-2) var(--esca-spazio-3);
	background: var(--esca-inchiostro);
	color: var(--esca-su-scuro);
	font-size: var(--esca-dim-piccolo);
	text-decoration: none;
	transform: translateY(-200%);
}

.esca-salta:focus {
	transform: translateY(0);
}

/* ── Testata ────────────────────────────────────────────
   Fissa e scura. Senza classi e' compatta e a fondo pieno; in cima alla
   pagina, sopra una hero, diventa trasparente e alta; scorrendo verso il
   basso scivola via. Gli stati li assegna testata.js. */
.esca-testata {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	background: var(--esca-inchiostro);
	color: var(--esca-su-scuro);
	border-bottom: 1px solid var(--esca-filo-su-scuro);
	transition:
		transform var(--esca-durata),
		background-color var(--esca-durata),
		border-color var(--esca-durata);
}

.esca-testata--nascosta {
	transform: translateY(-100%);
}

.esca-js .esca-apre-scuro .esca-testata--in-cima {
	background: transparent;
	border-bottom-color: transparent;
}

/* La testata va a tutta larghezza, oltre il telaio del contenuto. */
.esca-testata__interno {
	max-width: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--esca-spazio-4);
	height: var(--esca-testata-bassa);
	transition: height var(--esca-durata);
}

.esca-js .esca-apre-scuro .esca-testata--in-cima .esca-testata__interno {
	height: var(--esca-testata-alta);
}

.esca-testata__marchio {
	display: block;
	line-height: 0;
}

.esca-testata__logo {
	height: var(--esca-logo-basso);
	width: auto;
	transition: height var(--esca-durata);
}

.esca-js .esca-apre-scuro .esca-testata--in-cima .esca-testata__logo {
	height: var(--esca-logo-alto);
}

.esca-testata__navigazione {
	display: flex;
	align-items: center;
	gap: var(--esca-spazio-5);
}

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

@media (prefers-reduced-motion: reduce) {
	.esca-testata,
	.esca-testata__interno,
	.esca-testata__logo,
	.esca-bottone {
		transition: none;
	}

	.esca-bottone:active {
		transform: none;
	}
}

/* I due bottoni della hero stanno in riga e si impilano quando non ci stanno. */
.esca-hero__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esca-spazio-3);
	margin-bottom: 0;
	max-width: none;
}

/* ── Menu ───────────────────────────────────────────── */
.esca-menu {
	display: flex;
	/* Il piede mette in fila sei voci: senza wrap sfondano il telaio a 360px e
	   la pagina scorre in orizzontale. */
	flex-wrap: wrap;
	gap: var(--esca-spazio-4);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--esca-dim-piccolo);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.esca-menu a {
	text-decoration: none;
	padding-bottom: var(--esca-spazio-1);
	border-bottom: 1px solid transparent;
}

.esca-menu a:hover,
.esca-menu .current-menu-item > a {
	border-bottom-color: var(--esca-oro-su-scuro);
}

/* ── Pannello del menu ──────────────────────────────────
   Sotto il punto di rottura la navigazione sta in un pannello scuro che
   scende dalla testata compatta; il bottone lo apre e lo chiude. */
.esca-testata__menu {
	padding: var(--esca-spazio-2) 0;
	background: none;
	border: 0;
	border-bottom: 1px solid transparent;
	color: inherit;
	font: inherit;
	font-size: var(--esca-dim-piccolo);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.esca-testata__menu[aria-expanded="true"] {
	border-bottom-color: var(--esca-oro-su-scuro);
}

@media (max-width: 63.99rem) {
	.esca-testata__navigazione {
		display: none;
		position: fixed;
		inset: var(--esca-testata-bassa) 0 0;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--esca-spazio-6);
		padding: var(--esca-spazio-6) var(--esca-margine-laterale);
		overflow-y: auto;
		background: var(--esca-inchiostro);
	}

	.esca-testata--aperta .esca-testata__navigazione {
		display: flex;
	}

	.esca-testata .esca-menu {
		flex-direction: column;
		gap: var(--esca-spazio-4);
		font-size: var(--esca-dim-medio);
	}
}

@media (min-width: 64rem) {
	.esca-testata__menu {
		display: none;
	}

	.esca-testata .esca-menu {
		font-size: var(--esca-dim-occhiello);
	}
}

/* ── Piede ──────────────────────────────────────────── */
.esca-piede__griglia {
	display: grid;
	gap: var(--esca-spazio-6);
}

@media (min-width: 48rem) {
	.esca-piede__griglia {
		grid-template-columns: 1fr auto;
		align-items: start;
	}
}

.esca-piede__logo {
	height: var(--esca-logo-alto);
	width: auto;
	margin-bottom: var(--esca-spazio-4);
}

.esca-piede__sede {
	font-size: var(--esca-dim-piccolo);
	margin-bottom: 0;
}

.esca-piede__firma {
	color: var(--esca-su-scuro-tenue);
}

/* Per colonne: le pagine del sito nella prima, origine e testi legali nella seconda. */
.esca-menu--piede {
	display: grid;
	grid-template-rows: repeat(4, auto);
	grid-auto-flow: column;
	justify-content: start;
	gap: var(--esca-spazio-3) var(--esca-spazio-6);
}

.esca-piede__nota {
	margin-top: var(--esca-spazio-6);
	padding-top: var(--esca-spazio-4);
	border-top: 1px solid var(--esca-filo-su-scuro);
	max-width: none;
}

.esca-menu--piede a:hover,
.esca-menu--piede .current-menu-item > a {
	border-bottom-color: var(--esca-oro-su-scuro);
}

/* ── Occhiello ──────────────────────────────────────────
   Maiuscoletto spaziato in oro, sopra un titolo. E' testo piccolo, quindi
   usa l'oro da testo e non quello da tratto: l'altro non arriva a 4,5:1. */
.esca-occhiello {
	display: block;
	margin-bottom: var(--esca-spazio-2);
	font-size: var(--esca-dim-occhiello);
	font-weight: 500;
	letter-spacing: var(--esca-spaziatura-occhiello);
	text-transform: uppercase;
	color: var(--esca-oro-testo);
}

.esca-fascia--scura .esca-occhiello,
.esca-hero .esca-occhiello {
	color: var(--esca-oro-su-scuro);
}

/* ── Filetto ────────────────────────────────────────────
   Un tratto d'oro corto sopra un titolo, o lungo a separare due blocchi. E'
   decorazione, quindi puo' usare l'oro da tratto. */
.esca-filetto {
	width: var(--esca-spazio-6);
	height: 1px;
	margin-bottom: var(--esca-spazio-4);
	border: 0;
	background: var(--esca-oro-tratto);
}

.esca-filetto--lungo {
	width: 100%;
}

/* L'hr eredita il margine alto di base.css: in apertura o sotto un occhiello aggiungerebbe solo vuoto. */
.esca-filetto:first-child,
.esca-occhiello + .esca-filetto {
	margin-top: 0;
}

/* ── Bottone ────────────────────────────────────────────
   In inchiostro, non in oro. Un fondo d'oro con testo chiaro sopra non
   raggiunge il contrasto richiesto, e con testo scuro sopra perde forza:
   l'oro resta ai filetti, agli occhielli e alle etichette. */
.esca-bottone {
	display: inline-block;
	padding: 0.75rem 1.4rem;
	line-height: 1.5;
	text-align: center;
	text-wrap: balance;
	background: var(--esca-inchiostro);
	color: var(--esca-su-scuro);
	font-size: var(--esca-dim-piccolo);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--esca-inchiostro);
	cursor: pointer;
	transition:
		background-color var(--esca-durata-bottone) var(--esca-curva),
		color var(--esca-durata-bottone) var(--esca-curva),
		border-color var(--esca-durata-bottone) var(--esca-curva),
		transform var(--esca-durata-bottone) var(--esca-curva);
}

.esca-bottone:hover {
	background: transparent;
	color: var(--esca-inchiostro);
}

.esca-bottone:active {
	transform: translateY(1px);
}

/* Sul fondo scuro il pieno e' color carta e al passaggio diventa oro pieno. */
.esca-bottone--su-scuro {
	background: var(--esca-su-scuro);
	color: var(--esca-inchiostro);
	border-color: var(--esca-su-scuro);
}

.esca-bottone--su-scuro:hover {
	background: var(--esca-oro-su-scuro);
	color: var(--esca-inchiostro);
	border-color: var(--esca-oro-su-scuro);
}

/* In testata la chiamata resta a contorno: il pieno sta nella hero sotto. */
.esca-testata .esca-bottone--su-scuro {
	background: transparent;
	color: var(--esca-su-scuro);
	border-color: var(--esca-oro-su-scuro);
}

.esca-testata .esca-bottone--su-scuro:hover {
	background: var(--esca-oro-su-scuro);
	color: var(--esca-inchiostro);
	border-color: var(--esca-oro-su-scuro);
}

/* Il bottone secondario: stesso ingombro del pieno, solo contornato. Si usa
   dove il pieno peserebbe troppo, per esempio accanto a una chiamata
   principale o dentro una scheda. E' una variante del bottone e non un
   componente a parte, cosi' i due restano allineati per misure e stati. */
.esca-bottone--piccolo {
	padding: var(--esca-spazio-2);
	font-size: var(--esca-dim-piccolo);
	letter-spacing: 0.1em;
}

.esca-bottone--contorno {
	background: transparent;
	color: var(--esca-inchiostro);
}

.esca-bottone--contorno:hover {
	background: var(--esca-inchiostro);
	color: var(--esca-su-scuro);
}

/* Il contorno su fondo scuro: tratto e testo prendono la carta chiara. Va
   dichiarato dopo --contorno, che altrimenti vince sul colore. */
.esca-bottone--su-scuro-contorno,
.esca-bottone--contorno.esca-bottone--su-scuro-contorno {
	border-color: var(--esca-su-scuro);
	color: var(--esca-su-scuro);
}

.esca-bottone--contorno.esca-bottone--su-scuro-contorno:hover {
	background: var(--esca-oro-su-scuro);
	color: var(--esca-inchiostro);
	border-color: var(--esca-oro-su-scuro);
}

/* ── Collegamento ───────────────────────────────────────
   Un rimando testuale con la freccia, dove un bottone peserebbe troppo. */
.esca-collegamento {
	font-size: var(--esca-dim-piccolo);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-color: var(--esca-oro-tratto);
	text-underline-offset: 0.35em;
}

.esca-collegamento::after {
	content: " →";
}

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

/* ── Hero ───────────────────────────────────────────────
   Fotografia scura a piena finestra. La velatura sta in un token perche' i
   tre punti del gradiente sono una scelta di sistema, non di componente. */
.esca-hero {
	position: relative;
	display: flex;
	align-items: center;
	/* Segue la finestra, con un tetto in proporzione alla larghezza perche' la
	   fotografia e' in 16:9 e non va tagliata. */
	min-height: max(32rem, min(50vw, 100svh - 6rem));
	background: var(--esca-inchiostro) var(--esca-hero-sfondo, none) center / cover no-repeat;
	color: var(--esca-su-scuro);
}

/* Hero seguita da una fascia scura: un filo a tutta larghezza segna lo stacco. */
.esca-hero + .esca-fascia--scura {
	border-top: 1px solid var(--esca-filo-su-scuro);
}

.esca-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--esca-velo-alto), var(--esca-velo-hero);
}

@media (max-width: 47.99rem) {
	.esca-hero::after {
		background: var(--esca-velo-hero-stretto);
	}
}

/* Le foto delle hero hanno gia' il fondo scuro dove sta il testo: niente velatura, e piu' alte. */
@media (min-width: 64rem) {
	.esca-hero {
		min-height: max(36rem, min(59vw, 100svh));
	}

	.esca-hero::after {
		content: none;
	}
}

/* Senza foto la hero e' una fascia scura compatta, come l'apertura del catalogo. */
.esca-hero.esca-hero--senza-foto {
	min-height: 0;
}

.esca-hero--senza-foto::after {
	content: none;
}

.esca-hero--senza-foto .esca-hero__interno {
	padding-block: var(--esca-spazio-6);
	padding-top: calc(var(--esca-spazio-6) + var(--esca-testata-alta));
}

/* Sotto i 64rem in verticale la foto verticale: piena altezza, foto in alto e testo in basso sul fondo scuro. */
@media (max-width: 63.99rem) and (orientation: portrait) {
	.esca-hero--mobile {
		align-items: flex-end;
		min-height: 100svh;
		background-image: var(--esca-hero-sfondo-mobile);
		background-position: top center;
		background-size: 100% auto;
	}

	.esca-hero--mobile::after {
		background: var(--esca-velo-hero-mobile);
	}

	.esca-hero--mobile .esca-hero__interno {
		padding-block: var(--esca-spazio-6);
	}
}

@media (max-width: 47.99rem) {
	.esca-hero .esca-hero__sommario {
		font-size: var(--esca-dim-piccolo);
		margin-bottom: var(--esca-spazio-4);
	}

	.esca-bottone {
		padding: 0.6rem 0.8rem;
		font-size: 0.75rem;
		letter-spacing: 0.06em;
	}

	.esca-hero .esca-hero__azioni {
		gap: var(--esca-spazio-2);
	}
}

.esca-hero__interno {
	position: relative;
	z-index: 1;
	padding-block: var(--esca-spazio-8);
	padding-top: calc(var(--esca-spazio-8) + var(--esca-testata-alta));
}

/* La larghezza sta sul testo, non sul contenitore: cosi' il blocco parte
   allineato alla testata invece di centrarsi nella finestra. */
.esca-hero__testo {
	max-width: 40rem;
}

.esca-hero__sommario {
	color: var(--esca-su-scuro-tenue);
	font-size: var(--esca-dim-medio);
	margin-bottom: var(--esca-spazio-5);
}

/* ── Cifra ──────────────────────────────────────────────
   Un numero grande con la sua etichetta sotto. Il numero e' Playfair, perche'
   sta ben sopra i venti pixel. */
.esca-cifra__valore {
	display: block;
	font-family: var(--esca-font-titolo);
	font-size: var(--esca-dim-display);
	line-height: var(--esca-interlinea-titolo);
}

.esca-cifra__etichetta {
	display: block;
	margin-top: var(--esca-spazio-2);
	font-size: var(--esca-dim-occhiello);
	letter-spacing: var(--esca-spaziatura-occhiello);
	text-transform: uppercase;
	color: var(--esca-testo-tenue);
}

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

/* ── Comparsa ───────────────────────────────────────────
   La classe la mette comparsa.js: senza script non si nasconde niente. */
.esca-comparsa {
	opacity: 0;
	transform: translateY(var(--esca-salita-comparsa));
	transition:
		opacity var(--esca-durata-comparsa) var(--esca-curva),
		transform var(--esca-durata-comparsa) var(--esca-curva);
}

.esca-comparsa--visibile {
	opacity: 1;
	transform: none;
}