/*
 * ON Lente: una foto alla volta, a tutto schermo (window.ON.lente, modulo on-lente.js).
 * Misure dal prototipo: sito.css 169-175. Handle 'on-w-lente': lo chiedono i widget che la usano
 * (ON Rullino, ON Best of) in get_style_depends().
 * È un <dialog> modale: sta nel top layer, sopra barra e grana, e il resto della pagina è inerte.
 * Mobile first: le regole senza media query sono quelle del telefono, da 901 px il desktop.
 * Due classi di specificità dove serve battere la Theme Style del kit (.elementor-kit-N button).
 */

html.on-lente-aperta {
	overflow: hidden;
}

.on-lente {
	box-sizing: border-box;
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: color-mix(in srgb, var(--on-night) 96%, transparent);
	color: var(--on-white);
	font-family: var(--on-font-text);
}

.on-lente[open] {
	display: block;
}

.on-lente::backdrop {
	background: transparent;
}

/*
 * Come il prototipo (sito.css 170-175): la foto al centro con 48 px sopra e sotto, didascalia in
 * alto a sinistra, "Chiudi" in alto a destra, "Precedente" e "Successiva" negli angoli in basso.
 * I due contenitori restano nel DOM per l'ordine del Tab, ma non disegnano niente.
 */
.on-lente__barra,
.on-lente__comandi {
	display: contents;
}

.on-lente .on-lente__testa {
	position: absolute;
	top: 18px;
	left: var(--on-gutter);
	z-index: 1;
	max-width: calc(100% - 2 * var(--on-gutter) - 96px);
	margin: 0;
	color: var(--on-ink-inv-2);
	/* --t-small del prototipo: 13 px fino a 900 px (home.css 640), 14 px sopra */
	font-size: 13px;
	line-height: 1.55;
}

@media (min-width: 901px) {
	.on-lente .on-lente__testa {
		font-size: var(--on-fs-small);
	}
}

.on-lente__palco {
	box-sizing: border-box;
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px var(--on-gutter);
	touch-action: pan-y pinch-zoom;
}

.on-lente .on-lente__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	box-shadow: 0 30px 80px color-mix(in srgb, var(--on-shade) 60%, transparent);
	transition: opacity var(--on-dur-2) ease;
}

.on-lente.is-caricamento .on-lente__img {
	opacity: .35;
}

/* Bottoni del prototipo: 38 px di altezza (2.5.8 chiede 24) */
.on-lente .on-lente__btn {
	position: absolute;
	z-index: 1;
	margin: 0;
	padding: 10px 14px 8px;
	border: 1px solid color-mix(in srgb, var(--on-white) 40%, transparent);
	border-radius: var(--on-radius-xs);
	background: none;
	color: var(--on-white);
	font-family: var(--on-font-cond);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: normal;
	text-transform: uppercase;
	cursor: pointer;
}

/* Il kit dà ai bottoni con il focus un fondo pieno (.elementor-kit-N button:focus): qui no */
.on-lente .on-lente__btn:focus {
	background: none;
	color: var(--on-white);
}

.on-lente .on-lente__btn:hover {
	border-color: var(--on-white);
	background: color-mix(in srgb, var(--on-white) 8%, transparent);
	color: var(--on-white);
}

.on-lente .on-lente__btn:focus-visible {
	outline: 2px solid var(--on-white);
	outline-offset: 3px;
}

.on-lente .on-lente__btn[hidden] {
	display: none;
}

.on-lente .on-lente__chiudi {
	top: 16px;
	right: var(--on-gutter);
}

.on-lente .on-lente__prima {
	bottom: 16px;
	left: var(--on-gutter);
}

.on-lente .on-lente__dopo {
	right: var(--on-gutter);
	bottom: 16px;
}