/**
 * Componenti — DAU 2026.
 *
 * Ogni blocco qui dentro è riusabile. Se una regola serve a una pagina sola,
 * non è un componente: va nel foglio di quella pagina.
 */

/* --- Occhiello e titolo di sezione ---------------------------------------- */

.occhiello {
	display: block;
	margin-bottom: var(--s3);
	color: var(--inchiostro);
	font-family: var(--sans);
	font-size: var(--t-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
}

/* Il trattino rosso davanti all'etichetta: è l'unico rosso della pagina, ed
   è un segno, non un testo. aria-hidden non serve: i contenuti generati da
   CSS non vengono letti dai lettori di schermo. */
.occhiello::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 2px;
	margin-right: 10px;
	background: var(--segnale);
	vertical-align: middle;
}

.titolo-sezione {
	max-width: 22ch;
	margin-bottom: var(--s8);
}

/* --- Bottoni -------------------------------------------------------------- */

.bottone {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	min-height: 44px;
	padding: var(--s3) var(--s6);
	border: 1px solid var(--inchiostro);
	border-radius: var(--raggio);
	background: var(--inchiostro);
	color: var(--carta);
	font-family: var(--sans);
	font-size: var(--t-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--transizione), color var(--transizione);
}

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

.bottone--vuoto {
	background: transparent;
	color: var(--inchiostro);
	border-color: var(--linea-forte);
}

.bottone--vuoto:hover {
	background: var(--inchiostro);
	color: var(--carta);
	border-color: var(--inchiostro);
}

/* La freccia si sposta al passaggio: suggerisce la direzione senza scriverla. */
.bottone__freccia {
	transition: transform var(--transizione);
}

.bottone:hover .bottone__freccia {
	transform: translateX(3px);
}

/* --- Apertura di pagina --------------------------------------------------- */

.apertura {
	padding-block: var(--s16) var(--s12);
}

.apertura__titolo {
	max-width: 18ch;
	font-size: var(--t-xxl);
}

.apertura__sottotitolo {
	max-width: 52ch;
	color: var(--inchiostro-t);
	font-size: var(--t-md);
	line-height: var(--riga-media);
}

/* --- Scheda progetto ------------------------------------------------------
   Il tema vecchio metteva due immagini sovrapposte per ogni progetto - una
   sfocata e una nitida - e le scambiava al passaggio del mouse: due file
   scaricati per mostrarne uno. Qui l'immagine è una sola e l'effetto lo fa
   il CSS. */

.griglia-progetti {
	display: grid;
	gap: var(--s6);
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.griglia-progetti {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.griglia-progetti {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--s8) var(--s6);
	}
}

.progetto {
	position: relative;
	display: flex;
	flex-direction: column;
}

.progetto__media {
	position: relative;
	overflow: hidden;
	background: var(--carta-scura);
	border-radius: var(--raggio);
	/* Riserva lo spazio prima che l'immagine arrivi: senza, la griglia salta
	   mentre le foto caricano. */
	aspect-ratio: 4 / 3;
}

.progetto__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms cubic-bezier(0.2, 0, 0.2, 1);
}

.progetto:hover .progetto__media img {
	transform: scale(1.04);
}

.progetto__corpo {
	padding-top: var(--s3);
	border-top: 1px solid var(--inchiostro);
}

.progetto__tipologia {
	display: block;
	margin-bottom: var(--s1);
	color: var(--inchiostro);
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.progetto__titolo {
	margin: 0;
	font-size: var(--t-md);
}

.progetto__titolo a {
	color: var(--inchiostro);
	text-decoration: none;
}

/* Il link copre tutta la scheda: si clicca ovunque, ma nel codice resta un
   solo collegamento con un testo sensato, non un <a> attorno a tutto. */
.progetto__titolo a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.progetto:hover .progetto__titolo a {
	color: var(--inchiostro);
}

/* --- Griglia loghi (partner e referenze) ---------------------------------- */

/* La griglia non ha più il fondo grigio con le fessure da un pixel: le celle
   stanno sul bianco, separate solo dallo spazio. Il grigio chiaro faceva
   sembrare la pagina un foglio di calcolo e rubava attenzione ai loghi, che
   sono la ragione per cui la pagina esiste. */
.griglia-loghi {
	display: grid;
	gap: var(--s8) var(--s6);
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 620px) {
	.griglia-loghi {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1000px) {
	.griglia-loghi {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--s12) var(--s8);
	}
}

.logo-cella {
	display: flex;
	flex-direction: column;
	align-items: center;   /* nome e dettagli incolonnati con il logo */
	gap: var(--s2);
	padding: var(--s4) var(--s2);
	color: var(--inchiostro);
	text-align: center;
	text-decoration: none;
	transition: transform var(--transizione);
}

/* Le celle che sono link si sollevano appena al passaggio: è l'unico segnale
   che si possono cliccare, ora che non c'è più il cambio di fondo. */
a.logo-cella:hover {
	color: var(--inchiostro);
	transform: translateY(-3px);
}

.logo-cella__immagine {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Più alto di prima: 72px schiacciavano i loghi orizzontali. */
	height: 110px;
	margin-bottom: var(--s2);
}

.logo-cella__immagine img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	/* I loghi sono JPEG con fondo bianco: multiply fa sparire il rettangolo
	   bianco e lascia solo il segno. */
	mix-blend-mode: multiply;
}

.logo-cella__nome {
	font-size: var(--t-base);
	font-weight: 600;
	line-height: var(--riga-stretta);
}

.logo-cella__dettaglio {
	color: var(--inchiostro-t);
	font-size: var(--t-xs);
	line-height: var(--riga-media);
}

/* --- Striscia di dati ----------------------------------------------------- */

.dati {
	display: grid;
	gap: var(--s8);
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.dato__numero {
	display: block;
	font-family: var(--serif);
	font-size: var(--t-xl);
	line-height: 1;
	color: var(--inchiostro);
}

.dato__etichetta {
	display: block;
	margin-top: var(--s2);
	color: var(--inchiostro-t);
	font-size: var(--t-sm);
}

/* --- Copertina di un progetto --------------------------------------------- */

.copertina {
	width: 100%;
	/* Sul telefono una foto panoramica diventa una striscia: si alza il
	   rapporto per darle respiro, e si torna panoramici da tablet in su. */
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--carta-scura);
}

.copertina img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 800px) {
	.copertina {
		aspect-ratio: 21 / 9;
	}
}

/* --- Dati della scheda ----------------------------------------------------- */

.scheda-dati {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s6) var(--s12);
	margin: var(--s8) 0 0;
	padding-top: var(--s6);
	border-top: 1px solid var(--linea);
}

.scheda-dati__voce dt {
	margin-bottom: var(--s1);
	color: var(--inchiostro);
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.scheda-dati__voce dd {
	margin: 0;
	font-family: var(--serif);
	font-size: var(--t-base);
}

/* --- Galleria di un progetto ----------------------------------------------
   Il pannello salva due larghezze: "twelve" per tutta la riga e "six" per
   mezza. Sul telefono vanno comunque tutte a tutta larghezza: mezza colonna
   su 360px non mostra niente. */

.galleria {
	display: grid;
	gap: var(--s4);
	grid-template-columns: 1fr;
	margin-top: var(--s12);
}

@media (min-width: 800px) {
	.galleria {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--s6);
	}

	/* Le foto a tutta larghezza occupano entrambe le colonne. */
	.galleria__foto {
		grid-column: span 2;
	}

	.galleria__foto--meta {
		grid-column: span 1;
	}
}

.galleria__foto img {
	width: 100%;
	height: auto;
	border-radius: var(--raggio);
}

/* --- Apertura fotografica -------------------------------------------------
   Il primo difetto della prima versione: la pagina si apriva con un blocco di
   testo. Per un'azienda il cui patrimonio sono le fotografie dei progetti, la
   prima cosa che si vede deve essere una fotografia. */

.copertina-home {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--carta-scura);
}

.copertina-home img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 800px) {
	.copertina-home {
		aspect-ratio: 21 / 9;
	}
}

/* --- Elenco di sezioni con ancora (pagina Aree) ---------------------------
   scroll-margin-top: arrivando da un link con l'ancora, il titolo finirebbe
   sotto la testata fissa. Questo lo tiene più in basso di quanto basta. */

.area {
	padding-block: var(--sezione);
	border-top: 1px solid var(--linea);
	scroll-margin-top: 90px;
}

.area__titolo {
	margin-bottom: var(--s8);
}

.area__griglia {
	display: grid;
	gap: var(--s4);
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 800px) {
	.area__griglia {
		/* Due per riga, non quattro: ogni area ha quattro foto e su due
		   righe ciascuna è grande il doppio. In un sito di arredamento la
		   fotografia deve potersi guardare. */
		grid-template-columns: repeat(2, 1fr);
		gap: var(--s6);
	}
}

.area__foto {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--carta-scura);
}

.area__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Blocco testo + immagine affiancati ------------------------------------ */

.affiancato {
	display: grid;
	gap: var(--s8);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 900px) {
	.affiancato {
		grid-template-columns: 5fr 7fr;
		gap: var(--s16);
	}

	.affiancato--rovescio > :first-child {
		order: 2;
	}
}

/* --- Elenco di informazioni (orari, contatti) ------------------------------ */

.informazioni {
	display: grid;
	gap: var(--s8);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	margin-top: var(--s12);
	padding-top: var(--s8);
	border-top: 1px solid var(--inchiostro);
}

.informazioni h3 {
	margin-bottom: var(--s2);
	font-size: var(--t-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
}

.informazioni p {
	margin: 0;
	color: var(--inchiostro-t);
	line-height: var(--riga-media);
}

/* --- Galleria semplice (Kartell) ------------------------------------------- */

.galleria-semplice {
	display: grid;
	gap: var(--s4);
	grid-template-columns: repeat(2, 1fr);
	margin-top: var(--s8);
}

@media (min-width: 800px) {
	.galleria-semplice {
		grid-template-columns: repeat(4, 1fr);
	}
}

.galleria-semplice img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* --- Paginazione ----------------------------------------------------------- */

.navigation.pagination {
	margin-top: var(--s16);
	padding-top: var(--s6);
	border-top: 1px solid var(--inchiostro);
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	align-items: center;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;   /* misura minima di un bersaglio toccabile */
	min-height: 44px;
	padding: 0 var(--s3);
	border: 1px solid var(--linea);
	color: var(--inchiostro);
	font-size: var(--t-sm);
	text-decoration: none;
}

.page-numbers:hover {
	border-color: var(--inchiostro);
}

.page-numbers.current {
	background: var(--inchiostro);
	border-color: var(--inchiostro);
	color: var(--carta);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* --- Mappa su richiesta ---------------------------------------------------
   Il riquadro tiene le stesse proporzioni prima e dopo il caricamento, così
   premendo il bottone la pagina non salta. */

.mappa {
	position: relative;
	aspect-ratio: 16 / 9;
	margin-top: var(--s8);
	border: 1px solid var(--linea);
	background: var(--carta-scura);
}

@media (max-width: 700px) {
	.mappa {
		aspect-ratio: 4 / 3;
	}
}

.mappa__invito {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: var(--s6);
	text-align: center;
}

.mappa__indirizzo {
	margin-bottom: var(--s2);
	font-size: var(--t-md);
}

.mappa__nota {
	max-width: 46ch;
	margin-bottom: var(--s4);
	color: var(--inchiostro-t);
	font-size: var(--t-sm);
	line-height: var(--riga-media);
}

.mappa.is-caricata {
	border-color: var(--inchiostro);
}

.mappa iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}