/*
	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;
	}

}

/* --- 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;
	}

}