/*
 * Lightbox delle pagine progetto.
 *
 * Fondo nero e nient'altro: la fotografia deve restare l'unica cosa
 * luminosa sullo schermo. I comandi sono sottili e si tengono ai bordi.
 */

.dmr-lb {
	position: fixed;
	inset: 0;
	z-index: 2147483000; /* sopra l'intestazione appiccicata del tema */
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	/* Il tema fonde alcuni elementi con lo sfondo (mix-blend-mode):
	   isolando il pannello nessuna di quelle regole lo raggiunge. */
	isolation: isolate;
	overscroll-behavior: contain;
}

.dmr-lb[hidden] {
	display: none;
}

html.dmr-lb-aperta {
	overflow: hidden;
}

.dmr-lb-fig {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: 100%;
	height: 100%;
	padding: 3.5rem 4.5rem;
	box-sizing: border-box;
}

.dmr-lb-fig img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	/* Le foto verticali non devono restare francobolli su schermi larghi. */
	flex: 0 1 auto;
	min-height: 0;
}

.dmr-lb-cap {
	margin: 0;
	max-width: 62ch;
	text-align: center;
	color: #d6d6d6;
	font-size: 0.8125rem;
	line-height: 1.5;
	text-wrap: balance;
}

.dmr-lb-cap[hidden] {
	display: none;
}

.dmr-lb-num {
	position: absolute;
	left: 1.25rem;
	bottom: 1.1rem;
	margin: 0;
	color: #8a8a8a;
	font-family: var(--wp--preset--font-family--geist-mono, ui-monospace, monospace);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}

/* Comandi */

.dmr-lb button {
	position: absolute;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
	opacity: 0.65;
	transition: opacity 0.15s ease;
}

.dmr-lb button:hover,
.dmr-lb button:focus-visible {
	opacity: 1;
}

.dmr-lb button:focus-visible {
	outline: 1px solid #fff;
	outline-offset: 2px;
}

.dmr-lb button[hidden] {
	display: none;
}

.dmr-lb button svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.25;
	stroke-linecap: square;
}

.dmr-lb-x {
	top: 0.75rem;
	right: 0.75rem;
}

.dmr-lb-p {
	left: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
}

.dmr-lb-n {
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
}

/* Immagini apribili dentro la pagina */

.dmr-apribile {
	cursor: zoom-in;
}

.dmr-apribile:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

@media (max-width: 781px) {
	.dmr-lb-fig {
		padding: 3.25rem 0.75rem 4rem;
	}

	/* Su telefono si scorre con il dito: le frecce toglierebbero spazio
	   alla foto senza aggiungere nulla. */
	.dmr-lb-p,
	.dmr-lb-n {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dmr-lb button {
		transition: none;
	}
}