/**
 * Sezioni della Home (templates/front-page.html).
 *
 * Misure prese dal frame Home_Web a canvas 1920: hero alto 1025px, contenuto
 * sulla wide 1760 (margini 80px), 180px fra una sezione e l'altra (spaziatura
 * "4XL" di theme.json), angoli delle foto 16px, colonne di foto distanziate
 * 32px. Le proporzioni sono scritte in `aspect-ratio` e in percentuale, così
 * la stessa impaginazione regge a qualunque larghezza.
 *
 * Ogni copertina che nel design mostra una foto ha una classe `dnpa-foto--*`:
 * è l'aggancio del segnaposto qui sotto (vedi il commento in fondo al file).
 */

/* --- Foto --- */

/* Angoli e altezza delle foto stanno in `brand.css`, uguali in tutto il sito.
   Le caselle del nastro le ripetono senza classe, perché una foto aggiunta dal
   cliente non ce l'ha. */
.dnpa-nastro__pista > .wp-block-cover {
	min-height: 0;
	border-radius: var( --wp--custom--foto-radius );
}

/* --- Hero --- */

/* L'altezza è la stessa degli hero delle pagine interne e sta in `brand.css`;
   qui resta solo dove va a capo il titolo di questa Home. */
.dnpa-hero__titolo {
	max-width: 1024px;
	margin-inline: auto;
}

/* --- Introduzione: testo a sinistra, tre foto a destra --- */

/* Le due colonne non riempiono tutta la riga (41% + 38,7%): lo spazio che
   avanza sta in mezzo, come nel design. */
.dnpa-intro.wp-block-columns {
	align-items: center;
	justify-content: space-between;
}

/* Le tre foto sono sfalsate: la centrale è la più alta e parte da sopra, la
   prima scende di un po' e la terza di parecchio, come nel mock (173 e 231px
   su un gruppo largo 681). Le percentuali sono sulla larghezza del gruppo,
   quindi lo sfalsamento resta proporzionato mentre la pagina si stringe.

   I margini vanno scritti sulla copertina dentro il gruppo, non sulla sola
   classe della foto: il layout flex di WordPress azzera i margini dei figli
   (`.is-layout-flex > :is(*, div)`) e vincerebbe lui, riallineando le tre
   foto in cima. */
.dnpa-intro__foto.wp-block-group {
	align-items: flex-start;
}

.dnpa-intro__foto .wp-block-cover {
	flex: 1 1 0;
}

.dnpa-intro__foto .wp-block-cover.dnpa-foto--intro-1 {
	aspect-ratio: 205 / 574;
	margin-top: 25.5%;
}

.dnpa-intro__foto .wp-block-cover.dnpa-foto--intro-2 {
	aspect-ratio: 205 / 802;
	margin-top: 0;
}

.dnpa-intro__foto .wp-block-cover.dnpa-foto--intro-3 {
	aspect-ratio: 205 / 494;
	margin-top: 34%;
}

/* --- Teaser "About" --- */

/* "About" e il nome della holding stanno su una riga sola finché ci stanno:
   sotto i 340px il nome andava a sbattere fuori dallo schermo, perché la riga
   non poteva andare a capo. Il nome lo scrive il cliente (ADR 003) e può
   essere lungo quanto vuole: la riga va a capo da sé, e l'ultima parola lunga
   si spezza invece di allargare la pagina. */
.dnpa-teaser__etichetta {
	overflow-wrap: anywhere;
}

/* Il nome della holding arriva dal titolo del sito (ADR 003) e deve sembrare
   la seconda metà dell'etichetta di sezione. */
.dnpa-teaser__nome {
	font-size: var( --wp--preset--font-size--x-large );
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.25;
	text-transform: uppercase;
}

.dnpa-teaser__nome a {
	color: inherit;
	text-decoration: none;
}

/* --- Nastro di foto che scorre --- */

.dnpa-nastro {
	/* Altezza della fascia e larghezze delle caselle: a riposo tutte
	   verticali come nel design, quella sotto il mouse larga come la foto
	   principale del mock. */
	--dnpa-nastro-h: clamp( 260px, 25.5vw, 489px );
	--dnpa-nastro-stretta: calc( var( --dnpa-nastro-h ) * 261 / 489 );
	--dnpa-nastro-larga: calc( var( --dnpa-nastro-h ) * 783 / 489 );

	display: flex;
	gap: 32px;
	overflow: hidden;
}

.dnpa-nastro > * {
	margin-block: 0;
}

.dnpa-nastro__pista.wp-block-group {
	flex: none;
	width: max-content;
	align-items: stretch;
}

/* Tutto quello che scorre sta qui dentro: la pista e le copie che chiudono il
   giro. A spostarla è `home.js`, un fotogramma alla volta, e non
   un'animazione CSS: lo stesso spostamento va guidato anche col dito, e
   un'animazione non si lascia guidare. Le copie stanno sullo stesso elemento
   perché due animazioni separate, prima o poi, si sfasano.

   Anche quando il nastro sta fermo lo decide il JavaScript (`fermo()` in
   `home.js`): col mouse sopra, con una foto aperta, o mentre il dito la
   tiene. */
.dnpa-nastro__giostra {
	display: flex;
	flex: none;
	gap: 32px;
	width: max-content;

	/* Il dito che va per traverso guida il nastro; quello che va su e giù resta
	   della pagina. */
	touch-action: pan-y;
	will-change: transform;
}

/* Mentre una foto si apre a tutta larghezza la fila l'accompagna al bordo
   invece di saltarci. Il resto del tempo la classe non c'è: con una
   transizione addosso il nastro non scorrerebbe, si trascinerebbe. */
.dnpa-nastro__giostra.is-accompagnata {
	transition: transform 0.45s cubic-bezier( 0.4, 0, 0.2, 1 );
}

/* Il nastro si trascina per farlo correre più in fretta: col dito si prova da
   sé, col mouse no, se non glielo si dice. */
.dnpa-nastro.is-animato {
	cursor: grab;
}

.dnpa-nastro__giostra.is-trascinata {
	cursor: grabbing;
	user-select: none;
}

/* Le misure valgono per qualunque copertina dentro la pista, non solo per
   quelle scritte nel template: così una foto aggiunta dal cliente entra in
   riga con le altre invece di sfondare il nastro. */
.dnpa-nastro__pista > .wp-block-cover {
	flex: none;
	height: var( --dnpa-nastro-h );
	width: var( --dnpa-nastro-stretta );
	transition: width 0.45s cubic-bezier( 0.4, 0, 0.2, 1 );
}

/* La foto sotto il mouse diventa quella principale; le altre restano dove
   sono e la fila si riallarga da sola quando ci si sposta. */
.dnpa-nastro__pista > .wp-block-cover:hover,
.dnpa-nastro__pista > .wp-block-cover:focus-within {
	width: var( --dnpa-nastro-larga );
}

/* --- Le nostre aziende --- */

.dnpa-aziende__griglia.wp-block-group > * {
	flex: 1 1 40%;
}

.dnpa-azienda {
	--dnpa-azienda-pad: 32px;

	aspect-ratio: 868 / 488;
	padding: 0 var( --dnpa-azienda-pad );
	overflow: hidden;
}

/* Al passaggio del mouse la foto si avvicina di poco, il testo resta fermo.
   La foto è di due tipi: quella che carica il cliente è un'immagine dentro la
   copertina, il segnaposto è il fondo della scheda — e un fondo non si può
   ingrandire, quindi gli si mette sotto uno strato suo che invece si può. */
.dnpa-azienda .wp-block-cover__image-background,
.dnpa-azienda::after {
	transition: transform 0.6s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.dnpa-azienda:not( :has( .wp-block-cover__image-background ) )::after {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0;
	background-image: inherit;
	background-position: center;
	background-size: cover;
}

/* Velo e testo vanno tenuti sopra a quello strato: WordPress li impila da sé
   solo nelle copertine senza il velo attaccato al contenuto, che non è questa. */
.dnpa-azienda > .wp-block-cover__background,
.dnpa-azienda > .wp-block-cover__inner-container {
	z-index: 1;
}

/* Ombra sotto il testo.
 *
 * Il velo del mock (20%) basta sulle due foto del design ma non su una foto
 * qualunque: nei punti chiari il nome dell'azienda scendeva a 1,6:1. Qui il
 * fondo si scurisce dove sta scritto qualcosa — la descrizione a metà scheda,
 * il nome appoggiato in basso — e resta trasparente in cima, dove la foto si
 * vede com'è. Con la foto più chiara che esista (bianco pieno) il punto
 * peggiore sta a 5,6:1, cioè qualunque foto carichi il cliente il testo si
 * legge.
 *
 * L'ombra vale da sola, senza contare il velo della copertina: quello è un
 * attributo del blocco e il cliente può cambiarlo, questa regola no.
 *
 * Il buio pieno comincia al 25% dell'altezza perché è da lì che parte la
 * descrizione quando la scheda è bassa (sul portatile la scheda scende a
 * 233px e il testo la riempie quasi tutta): più in basso, e la prima riga
 * resterebbe sul chiaro.
 */
.dnpa-azienda::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background-image: linear-gradient(
		180deg,
		transparent 0%,
		color-mix( in srgb, var( --wp--preset--color--bruno ) 15%, transparent ) 10%,
		color-mix( in srgb, var( --wp--preset--color--bruno ) 63%, transparent ) 25%,
		color-mix( in srgb, var( --wp--preset--color--bruno ) 70%, transparent ) 100%
	);
	pointer-events: none;
}

.dnpa-azienda:hover .wp-block-cover__image-background,
.dnpa-azienda:hover::after,
.dnpa-azienda:focus-within .wp-block-cover__image-background,
.dnpa-azienda:focus-within::after {
	transform: scale( 1.06 );
}

/* La copertina centra il suo contenuto: qui invece il riquadro occupa tutta
   l'altezza e si divide in due righe — la descrizione al centro dello spazio
   libero, il nome dell'azienda appoggiato al bordo basso. */
.dnpa-azienda .wp-block-cover__inner-container {
	align-self: stretch;
	display: grid;
	grid-template-rows: 1fr auto;
	padding-block: 32px;
}

.dnpa-azienda__testo {
	max-width: 573px;
	align-self: center;
	margin-inline: auto;
	font-weight: 300;
	line-height: 1.25;
	text-transform: uppercase;
}

.dnpa-azienda__nome {
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.25;
	text-transform: uppercase;
}

/* Tutta la scheda porta alla pagina Aziende. Il collegamento è il nome
   dell'azienda — quello che una persona leggerebbe ad alta voce per dire dove
   sta andando — e il suo bersaglio si allarga fino ai bordi della scheda:
   `inset: 0` copre già la scheda in altezza (il riquadro del testo la occupa
   tutta), l'imbottitura ai lati va ripresa. Se il cliente toglie il
   collegamento, la scheda smette di essere cliccabile e basta. */
.dnpa-azienda__nome a {
	color: inherit;
	text-decoration: none;
}

.dnpa-azienda__nome a::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0 calc( -1 * var( --dnpa-azienda-pad ) );
}

/* Il fuoco da tastiera si vede sulla scheda, non sulle poche lettere del
   nome: il bersaglio è la scheda. */
.dnpa-azienda:has( a:focus-visible ) {
	outline: 2px solid var( --wp--preset--color--terracotta );
	outline-offset: -4px;
}

/* Niente anello sul nome: né il contorno né l'alone crema che gli sta intorno
   (`brand.css`), che altrimenti resterebbe da solo attorno alle lettere. */
.dnpa-azienda__nome a:focus-visible {
	outline: none;
	box-shadow: none;
}

/* --- Dicono di noi --- */

.dnpa-slider {
	position: relative;

	/* Larghezza del ritratto e stacco dal testo, come nel blocco. Stanno qui
	   perché servono anche alla testimonianza che il ritratto non ce l'ha. */
	--dnpa-slide-foto: 274px;
	--dnpa-slide-stacco: 24px;
}

/* Le testimonianze stanno in fila dentro una pista che scorre: la classe la
   mette il JavaScript quando la costruisce, così senza JavaScript restano una
   sotto l'altra e la sezione si legge lo stesso. */
.dnpa-slider.is-scorrevole {
	overflow: hidden;
}

.dnpa-slider__pista {
	display: flex;
	/* Il dito che scorre in verticale continua a scorrere la pagina: qui
	   restano solo i trascinamenti orizzontali. */
	touch-action: pan-y;
	transition: transform 0.5s cubic-bezier( 0.4, 0, 0.2, 1 );
}

/* Mentre il dito è appoggiato la pista segue il dito, senza inseguirlo. */
.dnpa-slider__pista.is-trascinata {
	transition: none;
}

.dnpa-slider__pista > * {
	flex: 0 0 100%;
	min-width: 0;
}

/* Vale per ogni gruppo dentro il carosello, anche per una testimonianza
   aggiunta dal cliente. */
.dnpa-slider > .wp-block-group,
.dnpa-slider__pista > .wp-block-group {
	align-items: stretch;
	min-height: 264px;
}

.dnpa-slide__foto {
	flex: none;
	width: var( --dnpa-slide-foto );
	align-self: stretch;
}

.dnpa-slide__testo {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* Una testimonianza senza ritratto: capita spesso di non averne uno, e un
   ritratto finto al posto di quello vero è peggio di nessun ritratto. La
   citazione tiene la misura di riga che avrebbe col ritratto accanto, così una
   testimonianza con foto e una senza si leggono uguali e il carosello non
   cambia passo passando dall'una all'altra. Lo spazio che resta a destra è
   anche quello che tiene la firma lontana dalle frecce.

   `:only-child` e non `:has()` sul contenitore: il testo resta figlio unico
   esattamente quando il ritratto non c'è, comunque sia fatta la slide. */
.dnpa-slide__testo:only-child {
	max-width: calc( 100% - var( --dnpa-slide-foto ) - var( --dnpa-slide-stacco ) );
}

.dnpa-slide__firma {
	margin-block-end: 0;
}

/* Le frecce le crea il JavaScript: senza, restano tutte le testimonianze una
   sotto l'altra e la sezione funziona lo stesso.

   Nel mock i due tondi si toccano; qui hanno un po' d'aria in mezzo (deciso
   con Stefano il 19/8: attaccati sembrano un bottone solo, e col dito si
   sbaglia bersaglio). */
.dnpa-slider__frecce {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	gap: var( --wp--preset--spacing--20 );
}

.dnpa-slider__freccia {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var( --wp--preset--color--crema-scuro );
	color: var( --wp--preset--color--terracotta );
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.dnpa-slider__freccia:hover,
.dnpa-slider__freccia:focus-visible {
	background-color: var( --wp--preset--color--terracotta );
	color: var( --wp--preset--color--crema );
}

.dnpa-slider__freccia svg {
	width: 23px;
	height: 23px;
	fill: currentColor;
}

/* Una sola icona per tutte e due le frecce: quella indietro è la stessa
   ribaltata. */
.dnpa-slider__freccia--indietro svg {
	transform: scaleX( -1 );
}

@media ( prefers-reduced-motion: reduce ) {
	/* Niente scorrimento automatico: `home.js` non mette in moto il nastro e la
	   fila si sfoglia a mano. */
	.dnpa-nastro {
		overflow-x: auto;
	}

	/* Le testimonianze cambiano di colpo invece di scivolare, e le foto delle
	   schede azienda non si avvicinano più. */
	.dnpa-slider__pista,
	.dnpa-slider__freccia,
	.dnpa-azienda .wp-block-cover__image-background,
	.dnpa-azienda::after {
		transition: none;
	}

	.dnpa-azienda:hover .wp-block-cover__image-background,
	.dnpa-azienda:hover::after,
	.dnpa-azienda:focus-within .wp-block-cover__image-background,
	.dnpa-azienda:focus-within::after {
		transform: none;
	}
}

/* --- Responsive: le colonne si impilano, le proporzioni restano --- */

/* Il testo va sopra e le tre foto sotto già a 1024px: la classe che le impila
   prima della soglia di WordPress è `dnpa-impila-1024`, in `brand.css`. */
@media ( max-width: 1023px ) {
	/* Sotto il testo le tre foto stanno in riga senza sfalsamento: con le
	   proporzioni del desktop diventerebbero tre colonne altissime. */
	.dnpa-intro__foto .wp-block-cover,
	.dnpa-intro__foto .wp-block-cover.dnpa-foto--intro-1,
	.dnpa-intro__foto .wp-block-cover.dnpa-foto--intro-3 {
		margin-top: 0;
		aspect-ratio: 205 / 320;
	}

	.dnpa-azienda .wp-block-cover__inner-container {
		padding-block: 24px;
	}
}

@media ( max-width: 781px ) {
	/* Su telefono tre foto in riga sono tre strisce: vanno a capo, due sopra
	   e una sotto. */
	.dnpa-intro__foto.wp-block-group {
		flex-wrap: wrap;
	}

	.dnpa-intro__foto .wp-block-cover {
		flex-basis: 45%;
	}

	.dnpa-aziende__griglia.wp-block-group > * {
		flex-basis: 100%;
	}

	/* A tutta larghezza la proporzione del design lascerebbe una scheda troppo
	   bassa: la descrizione finirebbe addosso al nome dell'azienda. */
	.dnpa-azienda {
		aspect-ratio: auto;
		min-height: 300px;
	}

	/* Il nastro scorre da solo anche qui. Lo scorrimento nativo resta a chi non
	   ha JavaScript e a chi ha chiesto meno movimento: là la fila è ferma e si
	   sfoglia col dito, una foto alla volta. */
	.dnpa-nastro:not( .is-animato ) {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.dnpa-nastro:not( .is-animato )::-webkit-scrollbar {
		display: none;
	}

	/* Le caselle sono larghe come quella principale del mock: in verticale
	   sarebbero tre strisce. Col dito non esiste un "sopra", quindi la
	   larghezza è una sola. */
	.dnpa-nastro__pista > .wp-block-cover,
	.dnpa-nastro__pista > .wp-block-cover:hover,
	.dnpa-nastro__pista > .wp-block-cover:focus-within {
		width: min( var( --dnpa-nastro-larga ), 82vw );
		scroll-snap-align: center;
	}

	/* Toccata, la foto prende tutta la larghezza della pagina e la fila si ferma
	   sotto di lei; il tocco dopo la richiude e il nastro riparte. Viene dopo le
	   larghezze qui sopra, che pesano uguale: a parità vince l'ultima.

	   La larghezza è quella della fascia, misurata da `home.js`, e non `100vw`:
	   dove il browser tiene una barra di scorrimento sempre visibile `100vw` è
	   più larga della pagina, e la foto finirebbe tagliata a destra dal bordo
	   della fascia — con l'angolo che torna quadrato. */
	.dnpa-nastro__pista > .wp-block-cover.is-aperta {
		width: var( --dnpa-nastro-piena, 100vw );
	}

	/* Foto sopra e testimonianza sotto: a questa larghezza la colonna del
	   testo non sta più accanto al ritratto. */
	.dnpa-slider > .wp-block-group,
	.dnpa-slider__pista > .wp-block-group {
		flex-wrap: wrap;
		min-height: 0;
	}

	.dnpa-slide__foto {
		width: 100%;
		aspect-ratio: 274 / 264;
	}

	/* Qui il ritratto sta sopra e prende tutta la riga: senza ritratto non c'è
	   nessuno spazio da tenergli libero accanto. */
	.dnpa-slide__testo:only-child {
		max-width: none;
	}

	/* Le frecce tornano nel flusso, altrimenti coprirebbero la firma. */
	.dnpa-slider__frecce {
		position: static;
		justify-content: flex-end;
		margin-top: var( --wp--preset--spacing--30 );
	}
}

/* --- Foto segnaposto --- */

/* Una foto per fessura; l'inquadratura comune sta in `brand.css`. Ogni regola
   si spegne da sola appena il cliente sceglie la sua foto dal blocco. */

.dnpa-foto--hero:not( :has( .wp-block-cover__image-background ) ) {
	background-image: url( "../img/home-hero.jpg" );
}

.dnpa-foto--intro-1:not( :has( .wp-block-cover__image-background ) ) {
	background-image: url( "../img/home-intro-1.jpg" );
}

.dnpa-foto--intro-2:not( :has( .wp-block-cover__image-background ) ) {
	background-image: url( "../img/home-intro-2.jpg" );
}

.dnpa-foto--intro-3:not( :has( .wp-block-cover__image-background ) ) {
	background-image: url( "../img/home-intro-3.jpg" );
}

.dnpa-foto--nastro-1:not( :has( .wp-block-cover__image-background ) ) {
	background-image: url( "../img/home-nastro-1.jpg" );
}

.dnpa-foto--nastro-2:not( :has( .wp-block-cover__image-background ) ) {
	background-image: url( "../img/home-nastro-2.jpg" );
}

.dnpa-foto--nastro-3:not( :has( .wp-block-cover__image-background ) ) {
	background-image: url( "../img/home-nastro-3.jpg" );
}

.dnpa-foto--nastro-4:not( :has( .wp-block-cover__image-background ) ) {
	background-image: url( "../img/home-nastro-4.jpg" );
}

.dnpa-foto--nastro-5:not( :has( .wp-block-cover__image-background ) ) {
	background-image: url( "../img/home-nastro-5.jpg" );
}

.dnpa-foto--azienda-dnpa:not( :has( .wp-block-cover__image-background ) ) {
	background-image: url( "../img/home-azienda-dnpa.jpg" );
}

.dnpa-foto--azienda-mp:not( :has( .wp-block-cover__image-background ) ) {
	background-image: url( "../img/home-azienda-mp.jpg" );
}

.dnpa-foto--testimonianza:not( :has( .wp-block-cover__image-background ) ) {
	background-image: url( "../img/home-testimonianza.jpg" );
}