/*
	Aggiunte al tema Spectral: selettore di lingua nell'intestazione, griglie di
	immagini uniformi e ingrandimento delle foto. Sta in un file a parte perche'
	assets/css/main.css e' il CSS originale del tema e non va modificato.
*/

/* --- Selettore di lingua nell'intestazione ------------------------------- */

/*
	Le voci di lingua sono figlie dirette di un <li> del menu, quindi ereditano
	«#header nav > ul > li > a» del tema (display: block e padding largo): tutte
	le proprieta' che darebbero le bandierine una sotto l'altra vanno riscritte.
*/
#header nav > ul > li.lingue {
	padding: 0 0.5em 0 0;
}

#header nav > ul > li.lingue > .lingua {
	border: 0;
	color: #fff;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.8em;
	letter-spacing: 0.15em;
	line-height: 1;
	padding: 0.35em 0.4em;
	text-transform: uppercase;
	vertical-align: middle;
	opacity: 0.5;
	transition: opacity 0.2s ease;
}

#header nav > ul > li.lingue > a.lingua:hover,
#header nav > ul > li.lingue > a.lingua:focus-visible {
	opacity: 0.85;
}

/* La lingua in cui si sta leggendo: piena, sottolineata e non cliccabile. */
#header nav > ul > li.lingue > .lingua.attiva {
	cursor: default;
	opacity: 1;
	box-shadow: inset 0 -2px 0 currentColor;
}

#header nav > ul > li.lingue > .lingua img {
	display: block;
	width: 1.5em;
	height: auto;
	border-radius: 1px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

@media screen and (max-width: 736px) {

	#header nav > ul > li.lingue {
		padding-right: 0;
	}

	#header nav > ul > li.lingue > .lingua {
		gap: 0;
		padding: 0.35em 0.25em;
	}

	/* Sullo stretto restano le sole bandierine, la sigla non ci sta. */
	#header nav > ul > li.lingue > .lingua .sigla {
		display: none;
	}

}

/* --- Griglie di immagini uniformi --------------------------------------- */

/*
	Le foto caricate dalla redazione hanno proporzioni qualsiasi: «image fit» del
	tema le rispetta e la griglia viene a scaletta. Qui il riquadro ha proporzioni
	fisse e l'immagine viene ritagliata, cosi' le schede sono tutte uguali.
*/
.riquadro-immagine {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background-color: #e7e6e8;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(26, 26, 24, 0.12), 0 14px 28px -12px rgba(26, 26, 24, 0.4);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.riquadro-immagine img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

a:hover > .riquadro-immagine,
.riquadro-immagine.ingrandibile:hover {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px rgba(26, 26, 24, 0.16), 0 22px 40px -14px rgba(26, 26, 24, 0.5);
}

/* Riquadro senza immagine: resta il posto, la griglia non si scompone. */
.riquadro-immagine.vuoto {
	box-shadow: inset 0 0 0 1px rgba(96, 98, 96, 0.25);
}

/* L'immagine principale di un articolo: piu' larga, proporzioni piu' aperte. */
.riquadro-immagine.principale {
	aspect-ratio: 16 / 9;
	margin-bottom: 2em;
}

/*
	Elenco delle collezioni: le fasce sono in flex e la copertina, larga il 40%,
	con «img { width: 100% }» del tema decide da sola l'altezza della fascia.
	Cosi' invece riempie lo spazio che le tocca e la fascia resta della stessa
	forma qualunque sia il formato della foto. Sotto i 980px il tema passa a
	«display: block» e la fascia va in colonna, quindi l'altezza torna a servire.
*/
@media screen and (min-width: 981px) {

	.elenco-collezioni .spotlight .image {
		align-self: stretch;
		position: relative;
		min-height: 24em;
	}

	.elenco-collezioni .spotlight .image img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

}

@media screen and (max-width: 980px) {

	.elenco-collezioni .spotlight .image {
		aspect-ratio: 16 / 9;
	}

	.elenco-collezioni .spotlight .image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

}

/* --- Aria intorno alle griglie di immagini ------------------------------- */

/*
	Le griglie degli articoli e della galleria stanno fuori da un «wrapper» del
	tema, quindi non avevano alcun padding: le foto partivano attaccate al blocco
	bianco del testo introduttivo e sbordavano di lato, perche' «row gtr-50» ha un
	margine sinistro negativo. Qui la griglia prende lo spazio che gli altri
	blocchi della pagina hanno gia'. Il «.box alt» dentro porta gia' 2em di
	margine sotto, per questo il padding di sotto e' piu' basso di quello di sopra.
*/
.griglia-immagini {
	display: block;
	padding: 4em 3em 2em 3em;
}

@media screen and (max-width: 736px) {

	.griglia-immagini {
		padding: 2.5em 1.5em 0.5em 1.5em;
	}

}

/* --- Ingrandimento delle foto ------------------------------------------- */

.riquadro-immagine.ingrandibile {
	cursor: zoom-in;
}

.ingrandimento {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: rgba(26, 26, 24, 0.94);
}

.ingrandimento::backdrop {
	background-color: rgba(26, 26, 24, 0.94);
}

.ingrandimento-scena {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 4em 1em 5em;
	box-sizing: border-box;
}

.ingrandimento-immagine {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
}

.ingrandimento button {
	position: absolute;
	background-color: transparent;
	border: 0;
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	font-size: 1.75em;
	line-height: 1;
	height: auto;
	padding: 0.5em 0.75em;
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

.ingrandimento button:hover,
.ingrandimento button:focus-visible {
	background-color: transparent;
	opacity: 1;
}

.ingrandimento-chiudi {
	top: 0.5em;
	right: 0.5em;
	font-size: 2em;
}

.ingrandimento-precedente {
	top: 50%;
	left: 0.25em;
	transform: translateY(-50%);
}

.ingrandimento-successiva {
	top: 50%;
	right: 0.25em;
	transform: translateY(-50%);
}

.ingrandimento-didascalia {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 1em 4em 1.5em;
	box-sizing: border-box;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.9em;
	text-align: center;
}

.ingrandimento-conteggio {
	display: block;
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.8em;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

@media screen and (max-width: 736px) {

	.ingrandimento-scena {
		padding: 3.5em 0.5em 4.5em;
	}

	.ingrandimento button {
		font-size: 1.5em;
	}

}

/* Mentre l'ingrandimento e' aperto la pagina sotto non scorre. */
.ingrandimento-aperto,
.ingrandimento-aperto body {
	overflow: hidden;
}

/* --- Intestazione: logo aziendale --------------------------------------- */

/*
	Il tema tiene l'intestazione a 3em e all'immagine del logo non da' alcun
	vincolo: un logo piu' alto di 48px sbordava dalla barra, ed e' il motivo per
	cui «si vedeva male». Qui la barra si alza e il logo si adatta all'altezza
	che ha a disposizione: il logo e' un SVG con lo sfondo trasparente e un
	contorno bianco, quindi puo' stare largo nella barra senza portarsi dietro
	un rettangolo bianco e senza sgranarsi.

	Il padding di #page-wrapper compensa l'intestazione, che e' fissa. La home
	non lo vuole (il banner passa sotto la barra trasparente) e il tema lo
	azzera con «body.landing #page-wrapper», che e' piu' specifico di questo
	selettore e continua a vincere.
*/
#header {
	height: 6.5em;
	line-height: 6.5em;
}

#page-wrapper {
	padding-top: 6.5em;
}

#header h1 a {
	display: flex;
	align-items: center;
	height: inherit;
}

/* Il selettore ricalca quello del tema («#header h1 a img»): con uno piu'
   corto l'altezza fissa del tema vincerebbe per specificita'. */
#header h1 a img {
	display: block;
	width: auto;
	height: auto;
	max-height: 5em;
	max-width: 60vw;
	margin: 0;
}

@media screen and (max-width: 736px) {

	#header {
		height: 4.75em;
		line-height: 4.75em;
	}

	#page-wrapper {
		padding-top: 4.75em;
	}

	#header h1 a img {
		max-height: 3.5em;
		max-width: 55vw;
	}

}

/* Uscire cambia lo stato, quindi nel menu e' un pulsante: qui prende le stesse
   forme dei link che gli stanno accanto. */
#menu .voce-esci {
	margin: 0;
}

#menu .voce-esci button {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
	display: block;
	font: inherit;
	font-size: 0.8em;
	height: auto;
	letter-spacing: 0.225em;
	line-height: inherit;
	padding: 0;
	text-align: left;
	text-transform: uppercase;
	width: 100%;
}

/* --- Fascia dei loghi --------------------------------------------------- */

.fascia-loghi {
	background-color: #fff;
	padding: 2.5em 1.5em;
	text-align: center;
}

.fascia-loghi ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.75em 3em;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 62em;
}

.fascia-loghi li {
	padding: 0;
}

.fascia-loghi img {
	display: block;
	width: auto;
	height: auto;
	max-height: 3.5em;
	max-width: 11em;
}

.fascia-loghi a {
	border: 0;
	display: block;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

.fascia-loghi a:hover {
	opacity: 1;
}

/* Nel piede il fondo e' scuro: un logo scuro ci sparirebbe dentro, quindi
   viene appoggiato su una targhetta chiara. */
.fascia-loghi.nel-piede {
	background-color: transparent;
	padding: 0 1.5em 2.5em;
}

.fascia-loghi.nel-piede img {
	background-color: #fff;
	border-radius: 4px;
	padding: 0.6em 0.8em;
	max-height: 3em;
}

/* --- Elenco collegato a una pagina -------------------------------------- */

/*
	Testata dell'elenco in fondo a una pagina: non e' «#main > header», che nel
	tema e' la testata grande con l'immagine di sfondo a tutto schermo.
*/
.elenco-collegato > header {
	background-color: #1a1a18;
	color: #fff;
	padding: 3.5em 3em 3em;
	text-align: center;
}

.elenco-collegato > header h2 {
	color: inherit;
	font-size: 1.5em;
	margin: 0;
}

/* --- Moduli dell'area riservata ----------------------------------------- */

/*
	Il tema colora le etichette per i fondi scuri (#e7e6e8) e questi moduli
	stanno su «wrapper style5», che e' bianco: qui hanno colori propri.
*/
.modulo-sito {
	margin: 0;
	text-align: left;
}

.modulo-sito .campi {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1.5em;
}

.modulo-sito .campo-modulo {
	margin-bottom: 1.5em;
}

/* Le aree di testo (e i campi in errore, che portano dietro l'elenco degli
   errori) stanno meglio su tutta la riga. */
.modulo-sito .campo-modulo:has(textarea) {
	grid-column: 1 / -1;
}

.modulo-sito label {
	color: #1a1a18;
	font-size: 0.85em;
	letter-spacing: 0.1em;
	margin: 0 0 0.5em 0;
	text-transform: uppercase;
}

.modulo-sito .obbligatorio {
	color: #cd212a;
}

.modulo-sito input[type="text"],
.modulo-sito input[type="email"],
.modulo-sito input[type="password"],
.modulo-sito textarea,
.modulo-sito select {
	background-color: #fff;
	box-shadow: inset 0 0 0 1px #dfdfdf;
	color: #1a1a18;
}

.modulo-sito .campo-modulo.in-errore input,
.modulo-sito .campo-modulo.in-errore textarea {
	box-shadow: inset 0 0 0 2px #cd212a;
}

.modulo-sito .aiuto-modulo {
	color: #6d6873;
	font-size: 0.8em;
	margin: 0.5em 0 0 0;
}

.modulo-sito .errori-modulo,
.avvisi {
	list-style: none;
	margin: 0.5em 0 0 0;
	padding: 0;
}

.modulo-sito .errori-modulo li {
	color: #cd212a;
	font-size: 0.85em;
	padding: 0;
}

.avvisi li {
	background-color: #f4f4f5;
	border-left: 3px solid #606260;
	margin-bottom: 0.75em;
	padding: 0.75em 1em;
}

.avvisi li.success {
	border-left-color: #008c45;
}

.avvisi li.error {
	border-left-color: #cd212a;
}

/* Il lucchetto accanto al titolo di una collezione riservata. */
.segno-riservato {
	font-size: 0.7em;
	vertical-align: middle;
}

@media screen and (max-width: 736px) {

	.modulo-sito .campi {
		grid-template-columns: minmax(0, 1fr);
	}

}

/* --- Loghi dentro il corpo di una pagina -------------------------------- */

/*
	Classi da usare nel codice HTML dell'editor, per non riempire i testi di
	«style» a mano: si carica il logo in libreria e si incolla il blocco.
	Gli esempi stanno nel README, sezione «Loghi nel testo delle pagine».
*/
.fila-loghi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2em 3em;
	margin: 2.5em 0;
}

.fila-loghi img {
	display: block;
	width: auto;
	height: auto;
	max-height: 3.5em;
	max-width: 11em;
}

.griglia-loghi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9em, 1fr));
	align-items: center;
	gap: 2em;
	margin: 2.5em 0;
}

.griglia-loghi img {
	display: block;
	width: auto;
	height: auto;
	max-height: 4em;
	margin: 0 auto;
}

/* Logo a fianco del testo, che gli scorre intorno. */
.logo-affiancato {
	float: left;
	width: auto;
	height: auto;
	max-height: 5em;
	margin: 0 1.5em 1em 0;
}

@media screen and (max-width: 480px) {

	.logo-affiancato {
		float: none;
		display: block;
		margin: 0 auto 1.5em;
	}

}