/* =========================================================================
   EMME-CI — Galleria a tutto schermo
   File: ec-lightbox.css
   Versione: 1.0.0
   Data: 2026-08-27
   Dipende da: ec-core.css
   Collocazione: child theme /assets/css/ec-lightbox.css

   Stile della galleria condivisa: la usano l'archivio delle realizzazioni
   e la carrellata in home. Prima stava dentro ec-archivio.css e la
   carrellata non poteva usarla.

   CHANGELOG
   1.0.0 — 2026-08-27 — Estratta da ec-archivio.css.
   ========================================================================= */

/* -------------------------------------------------------------------------
   GALLERIA
   ---------------------------------------------------------------------- */

.ec-gal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(8, 15, 24, .96);
	backdrop-filter: blur(10px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .34s var(--ec-ease, ease),
	            visibility 0s linear .34s;
}
.ec-gal.is-on {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

body.ec-gal-aperta { overflow: hidden; }

.ec-gal__fig {
	position: relative;
	margin: 0;
	max-width: min(100%, 84rem);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	gap: .875rem;
	align-items: center;
}

.ec-gal__fig img {
	max-width: 100%;
	max-height: calc(100svh - 9rem);
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	border-radius: 2px;
	transform: scale(.97);
	opacity: 0;
	transition: transform .42s var(--ec-ease, ease),
	            opacity .34s var(--ec-ease, ease);
}
.ec-gal.is-on .ec-gal__fig img { transform: none; opacity: 1; }

.ec-gal__fig figcaption {
	font-family: var(--ec-font-mono, monospace);
	font-size: .75rem;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .7);
	text-align: center;
}

/* --- comandi ---------------------------------------------------------- */

.ec-gal__chiudi,
.ec-gal__nav {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 3rem;
	aspect-ratio: 1;
	padding: 0;
	background: none;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: border-color .24s var(--ec-ease, ease),
	            background-color .24s var(--ec-ease, ease);
}
.ec-gal__chiudi:hover,
.ec-gal__nav:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .1);
}
.ec-gal__chiudi svg,
.ec-gal__nav svg { width: 1.1rem; height: 1.1rem; }

/* L'attributo hidden nel foglio predefinito del browser vale display:none
   con specificità minima: qui i comandi dichiarano display:grid e lo
   annullerebbero. Con una foto sola le frecce e il contatore devono
   sparire davvero. */
.ec-gal__nav[hidden],
.ec-gal__conta[hidden],
.ec-gal [hidden] { display: none !important; }

.ec-gal__chiudi { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.ec-gal__nav--prev { left: clamp(.5rem, 3vw, 2rem);  top: 50%; transform: translateY(-50%); }
.ec-gal__nav--next { right: clamp(.5rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }

.ec-gal__conta {
	position: absolute;
	inset: auto 0 clamp(1rem, 3vw, 2rem);
	z-index: 2;
	margin: 0;
	text-align: center;
	font-family: var(--ec-font-mono, monospace);
	font-size: .75rem;
	color: rgba(255, 255, 255, .6);
	font-variant-numeric: tabular-nums;
}
.ec-gal__conta b {
	font-size: 1.125rem;
	font-weight: 500;
	color: #fff;
}


/* -------------------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------------- */

@media (max-width: 700px) {
	.ec-gal__nav { width: 2.5rem; }
	.ec-gal__nav--prev { left: .5rem; }
	.ec-gal__nav--next { right: .5rem; }
}

/* -------------------------------------------------------------------------
   MOVIMENTO RIDOTTO
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ec-gal__fig img {
		transition: none;
		transform: none !important;
		opacity: 1;
	}
}