/**
 * Galleria — mosaico a tutta pagina, e la lente che apre la foto.
 *
 * Il markup a blocchi porta le fotografie; qui stanno la griglia fitta, il
 * ritaglio delle celle e la finestra che si apre al clic.
 *
 * La finestra è un `<dialog>`, non un contenitore qualunque: aperta con
 * `showModal()` il browser le dà da sé la chiusura con Esc, il fuoco
 * imprigionato dentro e il fondo inerte. Il riferimento tutto questo lo
 * costruisce a mano in JavaScript, e la parte del fuoco non la costruisce
 * affatto.
 */

.gallery {
	display: grid;
	grid-template-columns: repeat( 6, 1fr );
	/* `dense` è ciò che rende il mosaico un mosaico: le celle strette
	   riempiono i buchi che le larghe si lasciano dietro. */
	grid-auto-flow: dense;
	grid-auto-rows: clamp( 130px, 13vw, 220px );
	gap: clamp( 4px, 0.5vw, 10px );
}

.wp-block-group.gallery > * {
	margin-block-start: 0;
}

.gallery__item {
	margin: 0;
	overflow: hidden;
	background-color: var(--wp--preset--color--paper-dark);
}

.gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer;
	transition: transform 0.6s ease;
}

.gallery__item:hover img {
	transform: scale( 1.05 );
}

.gallery__item img:focus-visible {
	outline: 3px solid var(--wp--preset--color--rosso);
	outline-offset: -3px;
}

.gallery__item--wide {
	grid-column: span 2;
}

/* --- La finestra ------------------------------------------------------- */

.gallery__lente {
	max-width: 100vw;
	max-height: 100vh;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: clamp( 16px, 4vw, 56px );
	border: 0;
	background-color: transparent;
	overflow: hidden;
}

.gallery__lente::backdrop {
	background-color: rgba( 10, 8, 7, 0.92 );
}

.gallery__lente[open] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp( 8px, 2vw, 28px );
}

.gallery__palco {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: min( 1100px, 100% );
	max-height: 100%;
	margin: 0;
}

.gallery__foto {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 86vh;
	object-fit: contain;
	border-radius: var(--wp--custom--radius--md);
	box-shadow: 0 24px 48px -16px rgba( 0, 0, 0, 0.35 );
}

.gallery__chiudi,
.gallery__passo {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	border-radius: 50%;
	background-color: rgba( 255, 255, 255, 0.08 );
	color: var(--wp--preset--color--floral);
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.gallery__chiudi:hover,
.gallery__passo:hover,
.gallery__chiudi:focus-visible,
.gallery__passo:focus-visible {
	background-color: var(--wp--preset--color--rosso);
	border-color: var(--wp--preset--color--rosso);
}

.gallery__passo {
	width: clamp( 44px, 5vw, 56px );
	height: clamp( 44px, 5vw, 56px );
}

.gallery__chiudi {
	position: absolute;
	top: clamp( 12px, 3vw, 28px );
	right: clamp( 12px, 3vw, 28px );
	width: 48px;
	height: 48px;
	/* La croce è un carattere, non un disegno: la sua misura è il corpo. */
	font-size: 32px;
}

/* --- Schermi stretti -------------------------------------------------- */

@media ( max-width: 900px ) {
	.gallery {
		grid-template-columns: repeat( 3, 1fr );
		grid-auto-rows: clamp( 120px, 26vw, 200px );
	}
}

@media ( max-width: 600px ) {
	.gallery {
		grid-template-columns: repeat( 2, 1fr );
	}

	/* Con due colonne una cella larga sarebbe la riga intera: tutte uguali. */
	.gallery__item--wide {
		grid-column: span 1;
	}

	/* Le frecce lasciano i fianchi della foto e scendono in fondo: di lato non
	   c'è più spazio per loro senza rubarlo alla fotografia. */
	.gallery__passo {
		position: absolute;
		bottom: clamp( 16px, 5vw, 28px );
	}

	.gallery__passo--indietro {
		left: clamp( 16px, 5vw, 28px );
	}

	.gallery__passo--avanti {
		right: clamp( 16px, 5vw, 28px );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.gallery__item img {
		transition: none;
	}

	.gallery__item:hover img {
		transform: none;
	}
}