/**
 * Pagina Aziende (templates/page-aziende.html).
 *
 * Misure prese dal frame Aziende a canvas 1920: hero alto 1025 col testo
 * appoggiato a sinistra sulla wide, due presentazioni specchiate (coppia di
 * foto 719+1017 alte 496 con 24px in mezzo, poi la colonna di testo larga come
 * la foto grande) e lo statement sui 1468 centrali. Fra una sezione e l'altra
 * ci sono i 180px del resto del sito.
 *
 * Hero delle pagine interne e statement stanno in `brand.css`: tornano anche
 * su altre pagine.
 */

/* --- Presentazione di un'azienda --- */

/* Le due foto si dividono la riga come nel design — 719 e 1017 su 1736, cioè
   la wide meno i 24px in mezzo — e le proporzioni le tengono alte uguali a
   qualunque larghezza. La presentazione specchiata scambia le due misure. */
.dnpa-presentazione {
	--dnpa-foto-prima: 719;
	--dnpa-foto-seconda: 1017;
}

.dnpa-presentazione--specchiata {
	--dnpa-foto-prima: 1017;
	--dnpa-foto-seconda: 719;
}

.dnpa-presentazione__foto > .wp-block-cover:first-child {
	flex: var( --dnpa-foto-prima ) 1 0;
	aspect-ratio: var( --dnpa-foto-prima ) / 496;
}

.dnpa-presentazione__foto > .wp-block-cover:last-child {
	flex: var( --dnpa-foto-seconda ) 1 0;
	aspect-ratio: var( --dnpa-foto-seconda ) / 496;
}

/* Il testo sta sotto la foto grande ed è largo quanto lei: a destra nella
   prima presentazione, a sinistra nella seconda. */
.wp-block-group.dnpa-presentazione__testo {
	width: calc( ( 100% - 24px ) * 1017 / 1736 );
	margin-inline-start: auto;
}

.dnpa-presentazione--specchiata .dnpa-presentazione__testo {
	margin-inline-start: 0;
}

/* "Scopri di più →": testo piccolo maiuscolo e spaziato. La freccia la disegna
   il CSS e non il testo, così il cliente non se la porta via modificando la
   scritta. */
.dnpa-presentazione__link a {
	display: inline-flex;
	align-items: center;
	gap: 6px;

	/* Nel mock il link è una pillola alta 36px: l'imbottitura la tiene tale
	   anche senza fondo, e dà al dito un bersaglio più grande della riga. */
	padding-block: 8px;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.4;
	text-decoration: none;
	text-transform: uppercase;
}

.dnpa-presentazione__link a::after {
	content: "\2192";
}

/* --- Statement --- */

/* Nel mock il titolo sta su una riga sola larga 1322px. */
.dnpa-aziende__statement {
	--dnpa-statement-titolo: 1322px;
}

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

/* Sotto i 1024px la colonna di testo a metà pagina diventa una gora stretta
   sotto due foto larghe: prende tutta la riga. */
@media ( max-width: 1023px ) {
	.wp-block-group.dnpa-presentazione__testo {
		width: auto;
	}
}

/* Sul telefono anche le due foto si impilano (SPEC: "colonne che si
   impilano"): affiancate diventerebbero due strisce. */
@media ( max-width: 599px ) {
	.dnpa-presentazione__foto.wp-block-group {
		flex-wrap: wrap;
	}

	/* Le due fessure si ripetono per intero: le righe qui sopra hanno un
	   `:first-child` che pesa di più di una regola senza. */
	.dnpa-presentazione__foto > .wp-block-cover:first-child,
	.dnpa-presentazione__foto > .wp-block-cover:last-child {
		flex-basis: 100%;
		aspect-ratio: 16 / 9;
	}
}

/* --- 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.
   Sono le stesse foto che il mock presta alla Home (hero, nastro e schede
   azienda): lì sono in prestito, qui sono di casa. */

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

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

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

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

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