/*
 * La modale dell'opera.
 *
 * Non e' la lightbox di Elementor: quella sa mostrare solo fotografie, e qui
 * accanto alle fotografie devono stare anno, didascalia, materiali e misure -
 * cioe' le cose che rendono un'opera leggibile invece che solo guardabile.
 *
 * Tutti i colori arrivano dai token della pelle, che a loro volta arrivano dai
 * Colori globali del Kit: cambiare la palette cambia anche la modale, senza
 * toccare questo file.
 */

.fm-modale {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	background: color-mix( in srgb, var( --fm-theme-ink, #1a1a1a ) 42%, transparent );
	padding: clamp( 0px, 3vw, 48px );
	overscroll-behavior: contain;
}

.fm-modale[open],
.fm-modale.e-aperta {
	display: block;
}

.fm-modale__telaio {
	display: grid;
	grid-template-columns: 62% 38%;
	height: 100%;
	max-width: 1400px;
	margin-inline: auto;
	background: var( --fm-theme-surface, #fff );
	overflow: hidden;
}

/* ------------------------------------------------------------- immagine */

.fm-modale__vista {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp( 20px, 3vw, 56px );
	background: color-mix( in srgb, var( --fm-theme-surface-soft, #f4f4f2 ) 82%, #d8d4c8 );
	min-height: 0;
}

.fm-modale__figura {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

/* La pillola dei comandi sta a cavallo del bordo basso dell'immagine. */
.fm-modale__comandi {
	position: absolute;
	bottom: clamp( 8px, 2vw, 28px );
	left: 50%;
	transform: translateX( -50% );
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 12px 20px;
	background: var( --fm-theme-surface, #fff );
}

.fm-modale__freccia {
	appearance: none;
	border: 0;
	background: none;
	cursor: pointer;
	padding: 6px 10px;
	line-height: 1;
	font-size: 18px;
	color: var( --fm-theme-ink, #1a1a1a );
}

.fm-modale__freccia:disabled {
	opacity: 0.28;
	cursor: default;
}

.fm-modale__conta {
	font-family: var( --e-global-typography-accent-font-family, Arial ), sans-serif;
	font-size: 12px;
	letter-spacing: 1.4px;
	color: var( --fm-theme-muted, #6e6e68 );
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- scheda */

.fm-modale__scheda {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: clamp( 28px, 3.4vw, 60px );
	background: color-mix( in srgb, var( --fm-theme-surface-soft, #f4f4f2 ) 62%, #ddd8ca );
	overflow-y: auto;
}

.fm-modale__chiudi {
	position: absolute;
	top: 20px;
	right: 20px;
	appearance: none;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 26px;
	line-height: 1;
	padding: 8px;
	color: var( --fm-theme-ink, #1a1a1a );
}

.fm-modale__pannello {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

/*
 * Dentro la griglia il pannello non si vede: e' li' solo perche' Elementor lo
 * disegni e lo si possa modificare dall'editor. Nella modale torna visibile.
 */
.fm-pannello-modale {
	display: none;
}

.fm-modale .fm-pannello-modale {
	display: flex;
}

/* --------------------------------------------------------------- mobile */

@media ( max-width: 900px ) {

	.fm-modale {
		padding: 0;
		overflow-y: auto;
	}

	.fm-modale__telaio {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		height: auto;
		min-height: 100%;
	}

	.fm-modale__vista {
		padding: 28px 24px 44px;
	}

	.fm-modale__figura {
		max-height: 60vh;
	}

	.fm-modale__scheda {
		overflow: visible;
	}

	.fm-modale__chiudi {
		position: fixed;
		top: 16px;
		right: 16px;
		background: var( --fm-theme-surface, #fff );
		border-radius: 50%;
		width: 44px;
		height: 44px;
	}

	.fm-modale__link {
		margin-top: 8px;
	}
}

@media ( prefers-reduced-motion: no-preference ) {

	.fm-modale__figura {
		animation: fm-modale-entra 0.28s ease-out;
	}

	@keyframes fm-modale-entra {

		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}
}

/*
 * La scala del titolo dentro la modale.
 *
 * Il titolo eredita la tipografia globale "Titoli" - famiglia, peso e colore
 * arrivano dal Kit, ed e' giusto cosi'. Ma quella e' la misura da apertura di
 * pagina (62px) e in un pannello largo un terzo dello schermo va a capo male.
 * Quando in Elementor si aggancia una tipografia globale la misura del singolo
 * widget viene ignorata, quindi la scala della modale si dichiara qui: e' una
 * proporzione del componente, non una scelta di marca.
 *
 * Agganciata a una classe e non alla posizione: con nth-of-type prendeva
 * anche il valore dei materiali, che e' un heading pure lui, e usciva alla
 * misura di un titolo.
 *
 * E il selettore e' lungo apposta. Elementor scrive le sue regole come
 * `.elementor-<template> .elementor-element.elementor-element-<id> .elementor-heading-title`,
 * cioe' quattro classi: una regola piu' corta perde e non succede niente,
 * senza nessun errore. E' la stessa lezione della pelle Atelier fra la
 * 3.6.47 e la 3.6.48.
 */
.fm-modale .fm-modale__pannello .elementor-element.fm-modale-titolo .elementor-heading-title {
	font-size: clamp( 28px, 2.5vw, 46px );
	line-height: 1.08;
}

/*
 * Il testo che sta in fondo a destra di una testata di sezione - l'arco degli
 * anni accanto al titolo Opere. Una colonna in flex non si allinea a destra da
 * sola: allinea i figli, non il testo dentro di loro.
 */
body.fm-theme-nenella .fm-allinea-destra .elementor-heading-title {
	text-align: right;
}

@media ( max-width: 767px ) {

	body.fm-theme-nenella .fm-allinea-destra .elementor-heading-title {
		text-align: left;
	}
}