/*
 * L'apertura fotografica (§18).
 *
 * **Un componente solo, per le pagine che si aprono.** Queste regole vivevano
 * dentro `home.css` legate al corpo `.home`, e la pagina iniziale era l'unica a
 * poterle usare: chiunque altro volesse la stessa apertura avrebbe dovuto
 * riscriverla, e due copie della stessa cosa divergono al primo ritocco. Qui non
 * c'è più il nome di una pagina in alcun selettore — c'è il nome del componente,
 * e chi lo rende lo ottiene per intero.
 *
 * Ciò che resta in `home.css` sono le quattro promesse: quelle sì appartengono
 * alla pagina iniziale, e a nessun'altra.
 *
 * **La fotografia viaggia come variabile.** Il disegno — inquadratura, velo,
 * proporzioni — sta qui; da chi rende la pagina passa solo `--pms-hero-image`, e
 * solo se qualcuno ha caricato un file. Senza, resta quella del tema.
 */

.pms-hero {
	max-width: var(--content-max);

	/*
	 * Sopra c'è lo stacco dalla testata, che non è una distanza fra sezioni;
	 * sotto il ritmo comune, che scende con la finestra insieme a tutto il resto.
	 */
	margin: clamp(0.75rem, 1.6vw, 1.5rem) auto var(--pms-ritmo, clamp(1.5rem, 3vw, 2.5rem));
	padding: 0 var(--gutter);
}

/*
 * Il blocco visivo è `__inner`, che riempie esattamente la larghezza del
 * contenuto: gli stessi due bordi delle sezioni sottostanti, per costruzione e
 * non per calcolo.
 */
.pms-hero__inner {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;

	/*
	 * Il respiro interno del blocco: parte dal margine del sito e cresce con la
	 * finestra, perché in un riquadro alto seicento pixel trentasei di bordo sono
	 * un margine di cortesia, non un margine.
	 */
	--hero-passo: clamp(var(--gutter), 3vw, 3rem);

	padding: clamp(3rem, 6.5vw, 6rem) var(--hero-passo) clamp(3rem, 5.5vw, 5rem);

	/* I due soli valori che servono al testo sopra la fotografia. */
	--hero-chiaro: #fdf7f4;
	--hero-tenue: rgb(253 247 244 / 0.72);

	color: var(--hero-chiaro);
	border: 0;
	border-radius: clamp(18px, 2vw, 28px);

	/*
	 * **La fotografia è il visual.** La forma abbreviata azzera anche il colore di
	 * fondo: sotto l'immagine non resta un bianco che nessuno vedrebbe finché il
	 * file non manca.
	 */
	background: var(--pms-hero-image, url('../img/hero.jpg')) center 62% / cover no-repeat;
}

/*
 * **L'altezza dell'apertura è dell'apertura.** Chi ci mette dentro un modulo a
 * passaggi non la fa crescere: la misura è dichiarata qui, cresce con la
 * finestra e si ferma, e i passaggi si organizzano per starci. Il contrario —
 * l'altezza presa dal passaggio più lungo — faceva un riquadro alto quanto il
 * suo contenuto peggiore e una fotografia che si allungava sotto gli occhi.
 *
 * Su schermo stretto la regola si spegne: lì le colonne sono impilate, non c'è
 * nulla da tenere allineato, e un'altezza imposta sarebbe solo vetro vuoto.
 */
@media (min-width: 641px) {
	.pms-hero--form .pms-hero__inner {
		min-height: clamp(32rem, 41vw, 38rem);

		/*
		 * Il respiro verticale di questa variante è minore: la colonna destra non
		 * porta quattro promesse alte trecento pixel ma un modulo, e i novanta
		 * pixel di bordo dell'apertura fotografica sarebbero tolti proprio a lui.
		 */
		padding-block: clamp(2.25rem, 3.6vw, 3.25rem);
	}
}

/*
 * **Un velo scuro, non una coltre.** L'immagine deve restare leggibile come
 * immagine: il velo serve solo a garantire il contrasto del testo chiaro, ed è
 * più denso a sinistra — dove il testo cade — e quasi assente a destra, dove la
 * fotografia si vede. L'ultimo strato appoggia il blocco sul bordo inferiore.
 */
.pms-hero__inner::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(100deg, rgb(18 12 14 / 0.80) 0%, rgb(18 12 14 / 0.60) 44%, rgb(18 12 14 / 0.34) 74%, rgb(18 12 14 / 0.26) 100%),
		linear-gradient(to bottom, rgb(18 12 14 / 0.18) 0%, transparent 30%, rgb(18 12 14 / 0.34) 100%),
		linear-gradient(to top, rgb(20 13 15 / 0.34) 0%, transparent 16%);
}

/*
 * Una grana finissima toglie alla sfumatura l'aspetto di plastica: è l'unica
 * differenza fra «gradiente» e «materiale». Resta sotto il contenuto e non
 * intercetta il puntatore.
 */
.pms-hero__inner::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}

/*
 * **L'anteprima del modulo guarda il modulo, non la pagina.** Quando il pannello
 * mostra il form proprietari a chi lo sta componendo, l'apertura smette di
 * essere una fotografia: al suo posto l'inchiostro del prodotto, fermo e uguale
 * su schermo largo e su telefono. Il modulo resta quello vero — stesse misure, stessi colori, stesso
 * comportamento su telefono — e si legge senza che il paesaggio dietro se ne
 * contenda l'attenzione. Il velo e la grana se ne vanno con la fotografia:
 * servivano a rendere leggibile il testo *sopra* un'immagine, e senza immagine
 * sarebbero solo due strati di sporco.
 */
body.pms-anteprima-modulo .pms-hero__inner {
	background: #1a1f1d;
}

body.pms-anteprima-modulo .pms-hero__inner::before,
body.pms-anteprima-modulo .pms-hero__inner::after {
	content: none;
}

/* --- Occhiello ------------------------------------------------------------ */

.pms-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
	padding: 0.4rem 0.9rem 0.4rem 0.7rem;
	font-size: var(--step-2);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--hero-chiaro);
	background: rgb(253 247 244 / 0.10);
	border: 1px solid rgb(253 247 244 / 0.18);
	border-radius: 999px;
	backdrop-filter: blur(8px);
}

/* Il punto luminoso è decorativo: dice «attivo», non sostituisce alcun testo. */
.pms-hero__badge::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-primary);
	box-shadow: 0 0 0 3px rgb(255 255 255 / 0.18);
}

/* --- Tipografia ----------------------------------------------------------- */

/*
 * **La scala è quella del blocco, non della pagina.** Il titolo cresce con la
 * finestra fra due estremi e si ferma: oltre guadagnerebbe presenza e perderebbe
 * la sola cosa che rende memorabile un titolo così, cioè restare su due righe.
 */
.pms-hero__title {
	font-size: clamp(2.5rem, 5.2vw, 4.5rem);
	line-height: 1.03;
	letter-spacing: -0.035em;
	margin: 0 0 clamp(0.75rem, 1.5vw, 1.25rem);
	color: var(--hero-chiaro);
	text-wrap: balance;
}

.pms-hero__subtitle {
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
	line-height: 1.55;

	/*
	 * **Una misura che trattiene, non che stringe.** Il limite serve a impedire la
	 * riga lunghissima sui monitor larghi, non a imporre gli a capo: la frase sta
	 * su una riga sola finché la finestra lo consente e si spezza soltanto quando
	 * lo spazio finisce davvero. `balance` interviene proprio lì, pareggiando le
	 * righe invece di lasciarne una piena e una con due parole.
	 */
	max-width: 46ch;
	text-wrap: balance;

	color: var(--hero-tenue);
}

/* --- Azioni --------------------------------------------------------------- */

/*
 * Solo il margine di sopra: sotto resta quello che il paragrafo ha di suo, ed è
 * la misura su cui l'apertura è stata approvata. Azzerarlo avrebbe alzato di
 * sette pixel tutto il blocco, che è centrato sull'altezza del riquadro.
 */
.pms-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.pms-hero__actions .pms-button {
	padding: 0.85rem 1.6rem;
	font-size: var(--step-4);
	font-weight: 700;

	/*
	 * **La stessa forma dei pulsanti di tutto il sito.** Il valore non è scritto
	 * qui ma ripreso dal token — lo stesso che usano i controlli, i campi e le
	 * schede — e il giorno in cui cambia, cambia una volta sola.
	 */
	border-radius: var(--radius-control);
	transition:
		transform var(--motion-fast) ease,
		box-shadow var(--motion-fast) ease,
		background-color var(--motion-fast) ease;
}

/*
 * **Solo il colore scelto da chi amministra.** Un gradiente sarebbe una
 * decisione del tema su una tinta che non gli appartiene: cambiando l'accento
 * nel pannello, il pulsante resterebbe per metà del colore vecchio.
 */
.pms-hero__actions .pms-button--primary {
	color: var(--color-on-primary);
	background: var(--color-primary);
	border: 0;
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.28);
}

.pms-hero__actions .pms-button--primary:hover { background: var(--color-primary-hover); }
.pms-hero__actions .pms-button--primary:active { background: var(--color-primary-active); }

/*
 * Il secondario è **vetro**, non un contorno vuoto: su fondo scuro un bottone
 * con il solo bordo scompare, e chi guarda vede una sola azione dove ce ne sono
 * due.
 */
.pms-hero__actions .pms-button--ghost {
	color: var(--hero-chiaro);
	background: rgb(253 247 244 / 0.10);
	border: 1px solid rgb(253 247 244 / 0.28);
	backdrop-filter: blur(10px);
}

.pms-hero__actions .pms-button:hover { transform: translateY(-2px); }
.pms-hero__actions .pms-button--primary:hover { box-shadow: 0 12px 30px rgb(0 0 0 / 0.34); }
.pms-hero__actions .pms-button--ghost:hover { background: rgb(253 247 244 / 0.18); }

.pms-hero__actions .pms-button:focus-visible {
	outline: 2px solid var(--hero-chiaro);
	outline-offset: 3px;
}

/* --- Adattamento ---------------------------------------------------------- */

/*
 * **Impilate, le due colonne diventano una fila**, e in una fila l'ordine si può
 * dichiarare. Serve perché la fascia dei loghi, che a schermo largo sta sotto il
 * testo — dove è stata approvata — a schermo stretto finirebbe in mezzo: fra la
 * chiamata all'azione e i riquadri, come un inciso dentro un discorso. In fondo
 * è il posto giusto: si legge dopo tutto il resto, che è ciò che è.
 *
 * **Il contenuto si scioglie, non si duplica.** `display: contents` fa dei suoi
 * figli — occhiello, titolo, sottotitolo, pulsanti e fascia — altrettanti
 * elementi della fila, e da lì l'ordine li dispone. Il documento resta uno solo:
 * un secondo carosello nascosto sarebbe due caroselli da tenere allineati, e uno
 * dei due prima o poi comparirebbe dove non deve.
 *
 * Le distanze interne del testo sono margini suoi e restano quelle: la fila non
 * aggiunge spazi propri, e i due stacchi che servivano alla griglia — prima dei
 * riquadri e prima della fascia — si dichiarano qui, dove sono visibili.
 */
@media (max-width: 1080px) {
	.pms-hero__inner {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-top: clamp(2rem, 5vw, 3.5rem);
	}

	.pms-hero__content {
		display: contents;
	}

	/*
	 * **In una fila un elemento non si allarga da solo.** Nella griglia la seconda
	 * colonna riempiva la sua traccia, e i riquadri ci scorrevano dentro; in una
	 * fila verticale un elemento allineato al centro si stringe sul proprio
	 * contenuto — novecento pixel di riquadri affiancati — e usciva dallo schermo.
	 * Qui si dichiara che occupa la larghezza che ha a disposizione, come prima.
	 */
	.pms-hero__cards,
	.pms-hero__request {
		order: 1;
		align-self: stretch;
		min-width: 0;
		margin-top: clamp(1.75rem, 4vw, 2.5rem);
	}

	.pms-partner {
		order: 2;
		align-self: stretch;
		min-width: 0;
		margin-top: clamp(1.25rem, 3vw, 1.75rem);
	}
}

@media (max-width: 640px) {
	/*
	 * **Su schermo stretto il ritaglio cadeva sul cielo.** Con `cover` e una
	 * verticale al 62% la fotografia mostrava foschia e basta: il soggetto
	 * restava fuori. L'inquadratura scende.
	 */
	.pms-hero__inner { background-position: 56% 78%; }

	.pms-hero__title { font-size: clamp(2.5rem, 11vw, 3.25rem); }

	.pms-hero__actions .pms-button { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.pms-hero__actions .pms-button { transition: none; }
	.pms-hero__actions .pms-button:hover { transform: none; }
}

/* --- Partner -------------------------------------------------------------- */

/*
 * **La fascia appartiene al blocco che la precede.** Stava come riga a sé sotto
 * le due colonne, e lì la griglia la faceva cominciare dopo la più alta delle
 * due: con quattro riquadri a destra e un titolo a sinistra si apriva un vuoto
 * di parecchi centimetri fra la chiamata all'azione e i loghi, e la fascia
 * sembrava appoggiata sul fondo della fotografia invece che legata al testo.
 * Adesso è dentro la colonna del contenuto, subito dopo i pulsanti: la distanza
 * è quella fra due parti dello stesso discorso, e non dipende più da quanto è
 * alta la colonna accanto.
 *
 * Senza loghi nessuna di queste regole si applica, perché senza loghi il modello
 * non rende niente: la Hero è esattamente quella di prima.
 */
.pms-partner {
	margin-top: clamp(1.25rem, 2.2vw, 1.75rem);
	min-width: 0;

	/* La distanza fra due loghi, dichiarata una volta perché serve in due punti. */
	--pms-partner-passo: clamp(1.25rem, 2.6vw, 2.25rem);

	/*
	 * **La larghezza di un logo, non del logo.** È lo spazio che ciascuno occupa
	 * nella fila: l'immagine ci sta dentro con le proprie proporzioni, centrata,
	 * senza essere né stirata né ritagliata. Serve perché tre loghi occupino
	 * sempre lo stesso fronte, quali che siano le loro forme.
	 */
	--pms-partner-posto: clamp(4.5rem, 9vw, 7rem);

	/*
	 * **L'altezza di un logo «normale»**, cioè quella di prima. Le altre due
	 * misure non sono altezze diverse: sono questa, moltiplicata. Così basta
	 * cambiare qui per spostare tutta la fascia, e le proporzioni fra i loghi
	 * restano quelle che chi redige ha deciso.
	 */
	--pms-partner-altezza: clamp(1.4rem, 2.1vw, 2rem);
}

/*
 * **Chi ha scelto una larghezza la porta con sé.** Un marchio sottile e uno
 * pieno alti uguali non pesano uguale: la larghezza pareggia ciò che l'occhio
 * vede. Il logo la riceve come variabile — `--pms-partner-largo` — e da lì
 * discendono sia la misura dell'immagine sia, nella fila che scorre, il posto
 * che quel logo occupa: un logo più largo in uno spazio invariato uscirebbe dal
 * suo posto.
 *
 * **Chi non l'ha scelta non porta niente**, e ogni ricaduta qui sotto riporta al
 * comportamento di sempre: altezza dichiarata, larghezza libera.
 */

/*
 * La Hero non cambia altezza: la fascia entra nello spazio che il blocco del
 * contenuto già aveva, e il respiro inferiore del riquadro si accorcia di poco.
 */
.pms-hero--partner .pms-hero__inner {
	padding-bottom: clamp(2rem, 3.6vw, 3.25rem);
}

/*
 * **L'etichetta si legge come è stata scritta.** Nessuna maiuscola aggiunta,
 * nessuna spaziatura da occhiello: «Partner:», «i nostri partner» e «Con il
 * supporto di:» arrivano dal pannello e vanno a video così come sono, perché
 * sono parole di chi amministra e non un'etichetta di sistema.
 */
.pms-partner__etichetta {
	margin: 0 0 clamp(0.5rem, 0.9vw, 0.7rem);
	color: var(--hero-tenue);
	font-size: clamp(0.78rem, 0.95vw, 0.88rem);
	font-weight: 500;
}

/*
 * **La finestra ritaglia, la pista scorre.** Il taglio è ciò che rende continuo
 * il movimento e, insieme, ciò che tiene la pagina della sua larghezza: nessuna
 * barra di scorrimento, niente da trascinare.
 *
 * **Tre alla volta, non tutti.** La finestra è larga tre posti più i due spazi
 * fra loro: da quattro loghi in su i restanti non stanno tutti in fila davanti
 * agli occhi, entrano scorrendo. Su schermo stretto la finestra si adatta a
 * quello che c'è, e se ne vedono meno — tre è il massimo, non il minimo.
 */
.pms-partner__finestra {
	overflow: hidden;
	max-width: 100%;
}

.pms-partner--scorre .pms-partner__finestra {
	max-width: calc(3 * var(--pms-partner-posto) + 2 * var(--pms-partner-passo));
}

.pms-partner__pista,
.pms-partner__gruppo {
	display: flex;
	align-items: center;
}

/*
 * **La distanza sta dentro il gruppo, non fra i gruppi.** Sembra un dettaglio ed
 * è la differenza fra un giro continuo e un giro che sobbalza: se lo spazio
 * separasse le due copie, il periodo visibile sarebbe «un gruppo più uno spazio»
 * mentre l'animazione sposta di mezza pista — mezzo spazio di troppo, e a ogni
 * ripartenza i loghi scattano. Ogni copia porta quindi anche lo spazio che la
 * segue, e mezza pista torna a essere esattamente una copia.
 */
.pms-partner__gruppo {
	gap: var(--pms-partner-passo);
	flex-wrap: wrap;
	row-gap: clamp(0.75rem, 1.6vw, 1rem);
}

.pms-partner--scorre .pms-partner__gruppo {
	padding-right: var(--pms-partner-passo);
	flex-wrap: nowrap;
}

.pms-partner__logo {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	flex: 0 0 auto;
}

/*
 * Nella fascia che scorre ogni logo ha il proprio posto, largo uguale per tutti:
 * è ciò che rende prevedibile quanti se ne vedono. L'immagine resta quella che
 * è — dentro il posto, centrata, con le sue proporzioni.
 */
.pms-partner--scorre .pms-partner__logo {
	flex: 0 0 var(--pms-partner-largo, var(--pms-partner-posto));
	justify-content: center;
}

/*
 * **L'altezza è dichiarata, la larghezza segue.** È così che un logo lungo e uno
 * quasi quadrato stanno nella stessa fila senza che nessuno dei due si deformi:
 * `contain` non ritaglia e non stira, e il tetto alla larghezza impedisce a una
 * firma molto orizzontale di occupare la riga da sola.
 *
 * **Il logo non si ricolora.** La tentazione, su una fotografia scura, è di
 * ridurli tutti a bianco: uniforme, elegante — e sbagliato. Un marchio è di chi
 * ce l'ha, e i file arrivano come sono: quelli con un fondo pieno diventerebbero
 * rettangoli bianchi, che è peggio del disordine che si voleva togliere. Resta
 * un filo di trasparenza, che li appoggia sulla fotografia senza che nessuno
 * gridi più del titolo.
 */
.pms-partner__immagine {
	display: block;
	width: var(--pms-partner-largo, auto);
	height: var(--pms-partner-alto, var(--pms-partner-altezza));
	max-width: min(100%, var(--pms-partner-largo, var(--pms-partner-posto)));
	object-fit: contain;
	opacity: 0.92;
}

/*
 * **Dal quarto logo la fila scorre.** Le due copie della pista sono identiche e
 * larghe uguali: spostarla di metà la riporta esattamente dove era, quindi il
 * giro non ha un punto di ripartenza visibile. La durata cresce con il numero
 * dei loghi — la conta la sa chi rende la pagina e la passa qui — così la
 * velocità resta la stessa comunque siano tanti.
 *
 * Non si ferma al passaggio del cursore né al fuoco: non è un comando, è una
 * fascia che passa.
 */
.pms-partner--scorre .pms-partner__pista {
	width: max-content;
	flex-wrap: nowrap;
	animation: pms-partner-scorri calc(var(--pms-partner-loghi, 6) * 6s) linear infinite;
}

@keyframes pms-partner-scorri {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/*
 * **Chi chiede meno movimento ottiene una fascia ferma, non una fascia in
 * meno.** I partner restano tutti: si toglie la copia che serviva soltanto a far
 * girare la pista, e quel che resta è la stessa fila statica di quando i loghi
 * sono pochi — che va a capo invece di uscire dalla finestra.
 */
@media (prefers-reduced-motion: reduce) {
	.pms-partner--scorre .pms-partner__finestra {
		max-width: 100%;
	}

	.pms-partner--scorre .pms-partner__pista {
		animation: none;
		width: auto;
		flex-wrap: wrap;
	}

	.pms-partner--scorre .pms-partner__gruppo {
		flex-wrap: wrap;
		padding-right: 0;
	}

	.pms-partner--scorre .pms-partner__logo {
		flex: 0 0 auto;
		justify-content: flex-start;
	}

	.pms-partner--scorre .pms-partner__gruppo[aria-hidden='true'] {
		display: none;
	}
}

@media (max-width: 640px) {
	.pms-partner {
		--pms-partner-passo: 1.25rem;
		--pms-partner-posto: 5rem;

		/*
		 * Anche qui l'altezza si dichiara una volta sola, sulla fascia: le misure
		 * scelte logo per logo restano proporzioni di questa, e continuano a
		 * valere sullo schermo stretto come su quello largo.
		 */
		--pms-partner-altezza: 1.6rem;
	}
}