/**
 * Modulo Hero — disposizione.
 *
 * Le opzioni del pannello sono attributi sulla sezione e valgono da qui: cambiarle non
 * riscrive il markup. Un attributo assente è la scelta di partenza (altezza media, alone
 * medio, sottotitolo sopra, briciole visibili).
 *
 * **`--ns-hero-offset`** è l'altezza di una testata fissa sotto cui il banner deve
 * passare. Il modulo non sa se il sito ne ha una: vale zero, e il tema la dichiara. Il
 * banner sale sotto la testata di quella misura e la recupera in padding, così il titolo
 * resta in mezzo alla parte che si vede.
 */

.ns-hero {
	--ns-hero-alone: .45;
	--ns-hero-h: 60vh;
	--ns-hero-min: 26rem;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: max(var(--ns-hero-min), var(--ns-hero-h));
	margin-top: calc(-1 * var(--ns-hero-offset, 0px));
	padding-top: calc(var(--ns-hero-offset, 0px) + 2.5rem);
	padding-bottom: 4.5rem;
	background: #16161a;
}

/* Le quattro altezze. I numeri stanno solo qui: se «media» sembra bassa, si cambia una
   riga e cambiano tutti i banner del sito. Il minimo in rem tiene il titolo intero su un
   telefono girato in orizzontale, dove il 45% dello schermo è un dito. */
.ns-hero[data-altezza="bassa"] { --ns-hero-h: 45vh; --ns-hero-min: 20rem; }
.ns-hero[data-altezza="alta"]  { --ns-hero-h: 80vh; --ns-hero-min: 30rem; }
.ns-hero[data-altezza="piena"] { --ns-hero-h: 100vh; --ns-hero-min: 30rem; }

/* `svh` è l'altezza con le barre del browser aperte: sul telefono `100vh` finisce sotto
   la barra dell'indirizzo. Sta dopo, così vince dove esiste. */
@supports (height: 1svh) {
	.ns-hero { --ns-hero-h: 60svh; }
	.ns-hero[data-altezza="bassa"] { --ns-hero-h: 45svh; }
	.ns-hero[data-altezza="alta"]  { --ns-hero-h: 80svh; }
	.ns-hero[data-altezza="piena"] { --ns-hero-h: 100svh; }
}

/* **Sul telefono, metà schermo e basta** (revisione cliente, 6 ottobre 2026). La foto è
   una sola, orizzontale, e in uno schermo verticale se ne vede comunque solo il centro:
   più alto è il banner, più stretta la fetta di foto e più lontano il contenuto. Il 50%
   vale per tutte le altezze del pannello, che contano da 768 pixel in su. Il minimo in rem
   tiene titolo e briciole dentro il banner sui telefoni più bassi. */
@media (max-width: 767.98px) {
	.ns-hero,
	.ns-hero[data-altezza] { --ns-hero-h: 50vh; --ns-hero-min: 18rem; }
}

@supports (height: 1svh) {
	@media (max-width: 767.98px) {
		.ns-hero,
		.ns-hero[data-altezza] { --ns-hero-h: 50svh; }
	}
}

/* ── Immagine ─────────────────────────────────────────────────────────────── */

.ns-hero__media,
.ns-hero__alone {
	position: absolute;
	inset: 0;
}

.ns-hero__media { z-index: -2; }

/* **Il parallasse ha bisogno di margine.** L'immagine si sposta in su e in giù mentre si
   scorre (`hero-parallasse.js`): se fosse alta quanto il banner, al primo pixel si
   vedrebbe il bordo. È più alta del 15% sopra e sotto, in parti uguali, così
   l'inquadratura resta centrata come nel pannello. Senza parallasse, o con «riduci
   movimento», torna esatta. */
@media (prefers-reduced-motion: no-preference) {
	.ns-hero:not([data-parallax="no"]) .ns-hero__media {
		top: -15%;
		bottom: -15%;
		will-change: transform;
	}
}

.ns-hero__picture { display: contents; }

.ns-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Nell'editor le due immagini ci sono tutte e due: si vede quella della larghezza
   dell'anteprima. In pagina c'è un `<picture>` con una sola `<img>`, e queste regole
   non trovano niente da nascondere. Finché la mobile è il segnaposto, sul telefono si
   vede la desktop — è quello che succede anche in pagina. */
.ns-hero__img--mobile { display: none; }

@media (max-width: 767.98px) {
	.ns-hero__media:has(.ns-hero__img--mobile:not([src^="data:"])) .ns-hero__img--desktop { display: none; }
	.ns-hero__media:has(.ns-hero__img--mobile:not([src^="data:"])) .ns-hero__img--mobile { display: block; }
}

/* ── Alone ────────────────────────────────────────────────────────────────── */

/* Uniforme sotto il titolo, un po' più denso in basso dove stanno le briciole, che sono
   piccole e hanno più bisogno di contrasto. */
.ns-hero__alone {
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to top,
		rgba(0, 0, 0, calc(var(--ns-hero-alone) + .2)) 0%,
		rgba(0, 0, 0, var(--ns-hero-alone)) 35%,
		rgba(0, 0, 0, var(--ns-hero-alone)) 100%);
}

.ns-hero[data-alone="nessuno"] .ns-hero__alone { display: none; }
.ns-hero[data-alone="leggero"] { --ns-hero-alone: .22; }
.ns-hero[data-alone="forte"]   { --ns-hero-alone: .65; }

/* ── Testi ────────────────────────────────────────────────────────────────── */

/* **Larghezza piena, e contenitore.** Un figlio di un flex centrato si stringe al suo
   contenuto, e un titolo che misura il corpo in `cqi` lo prende da lì: si stringe anche
   lui, e la parola va a capo lettera per lettera. Con la larghezza fissata e il
   contenitore dichiarato qui, il titolo si misura sulla colonna del banner.
   **Senza tetto di larghezza** (revisione cliente, 6 ottobre 2026): con 60rem «Choose your
   tickets» andava su tre righe. Ora il titolo prende tutto il contenitore del sito. */
.ns-hero__testi {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1rem;
	width: 100%;
}

.ns-hero__titolo { order: 1; }
.ns-hero__sottotitolo { order: 0; }

.ns-hero[data-sottotitolo="sotto"] .ns-hero__sottotitolo { order: 2; }
.ns-hero[data-sottotitolo="nascosto"] .ns-hero__sottotitolo { display: none; }

.ns-hero__titolo h1 { text-wrap: balance; }

/* **Le parole in corsivo diventano l'accento.** Nel titolo si seleziona una parola e si
   preme il corsivo della barra di LiveCanvas: invece di inclinarsi prende il colore
   d'accento, pieno. È l'unico modo per marcare una parte del titolo senza toccare il
   codice. Il colore lo dichiara il tema (`--ns-hero-accento`); senza, resta il bianco. */
.ns-hero__titolo h1 :is(em, i) {
	font-style: normal;
	color: var(--ns-hero-accento, currentColor);
}

/* **Titolo a contorno**: solo il filo delle lettere, la foto si vede attraverso. Le parole
   d'accento restano piene, ed è il contrasto fra le due cose che fa il titolo. Lo spessore
   è in `em`, così segue il corpo: fisso in pixel, sul telefono il filo impasterebbe le
   lettere e sul desktop sparirebbe. */
.ns-hero[data-titolo="contorno"] .ns-hero__titolo h1 {
	color: transparent;
	-webkit-text-stroke: max(1.5px, .022em) var(--ns-hero-testo, #fff);
}

.ns-hero[data-titolo="contorno"] .ns-hero__titolo h1 :is(em, i) {
	color: var(--ns-hero-accento, var(--ns-hero-testo, #fff));
	-webkit-text-stroke-width: 0;
}

/* ── Briciole ─────────────────────────────────────────────────────────────── */

/* Piccole, in basso a sinistra: sono un'indicazione, non un titolo. Su una riga sola: con
   più di tre voci restano la prima e le ultime due, e se l'ultima non ci sta si tronca
   con i puntini invece di andare a capo sopra la foto. */
.ns-hero__briciole {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1.25rem;
	display: flex;
	justify-content: flex-start;
}

.ns-hero__briciole > * { min-width: 0; max-width: 100%; }

.ns-hero[data-briciole="no"] .ns-hero__briciole { display: none; }

/* **Entrano in fila.** Sottotitolo, titolo e briciole salgono e compaiono uno dopo
   l'altro, con lo stesso movimento: il titolo per primo fra le cose grandi, le briciole
   per ultime, quando l'occhio ha già letto dov'è.
   È un'animazione CSS e non un effetto del JavaScript, ed è il motivo per cui può
   nascondere anche il titolo: parte da sola e finisce sempre visibile, anche se gli
   script non arrivano. Nell'editor no: LiveCanvas ridisegna l'anteprima a ogni modifica,
   e rientrerebbe tutto ogni volta. */
@keyframes ns-hero-entra {
	from { opacity: 0; transform: translateY(.75rem); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
	.ns-hero .ns-hero__sottotitolo { animation: ns-hero-entra .9s cubic-bezier(.16, 1, .3, 1) .1s both; }
	.ns-hero .ns-hero__titolo      { animation: ns-hero-entra 1s cubic-bezier(.16, 1, .3, 1) .25s both; }
	.ns-hero .ns-briciole          { animation: ns-hero-entra .9s cubic-bezier(.16, 1, .3, 1) .8s both; }
	.ns-hero-editor .ns-hero :is(.ns-hero__sottotitolo, .ns-hero__titolo, .ns-briciole) { animation: none; }
}

.ns-hero .breadcrumb {
	--bs-breadcrumb-divider-color: rgba(255, 255, 255, .6);
	--bs-breadcrumb-item-active-color: #fff;
	margin: 0;
	font-size: .6875rem;
	flex-wrap: nowrap;
	white-space: nowrap;
	overflow: hidden;
}

.ns-hero .breadcrumb a {
	color: inherit;
	text-decoration: none;
	opacity: .8;
}

.ns-hero .breadcrumb a:hover { opacity: 1; }

.ns-hero .breadcrumb-item:last-child {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 767.98px) {
	.ns-hero__briciole { bottom: 1rem; }
	.ns-hero .breadcrumb-item:not(:first-child):not(:last-child):not(:nth-last-child(2)) { display: none; }
}