/*!
 * Emme-ci — Gallerie 1.1.0 (child theme)
 *
 * Colori presi dalle variabili globali di Divi (--gcid-*): se la palette
 * cambia nel Personalizzatore, la galleria la segue. Le misure di titolo
 * e testo sono le stesse dei moduli Testo delle pagine interne.
 *
 * Indice
 *   1. Variabili
 *   2. Neutralizzazione degli stili Divi
 *   3. Testata: sopratitolo, titolo, testo
 *   4. Foto
 *   5. Griglia
 *   6. Mosaico
 *   7. Carosello
 *   8. Mostra tutte, segnaposto
 *   9. Vista a tutto schermo
 *  10. Movimento ridotto
 */

/* =========================================================================
   1. VARIABILI
   Le prime da toccare se serve adattare la galleria.
   ========================================================================= */

.ec-ga {
	--ec-ga-gap: clamp(10px, 1.2vw, 20px);
	--ec-ga-testo: var(--gcid-heading-color, #102131);
	--ec-ga-tenue: var(--gcid-link-color, #7894a8);
	--ec-ga-linea: color-mix(in srgb, var(--gcid-body-color, #0b2948) 40%, transparent);
	--ec-ga-fondo-foto: var(--gcid-tv548czskn, #e9eef0);
	--ec-ga-chiaro: var(--gcid-95tdrauve2, #f8f9f8);

	/* Focus da tastiera: qui si cambia lo stile se il cliente lo vuole
	   diverso. Non toglierlo: serve a chi naviga senza mouse. */
	--ec-ga-focus: 2px solid var(--gcid-primary-color, #154b78);
	--ec-ga-focus-scarto: 3px;

	--ec-ga-curva: cubic-bezier(.22, .61, .36, 1);

	/* Valori di riserva: lo shortcode li sovrascrive nello style */
	--ec-ga-col: 3;
	--ec-ga-col-t: 2;
	--ec-ga-col-m: 2;
	--ec-ga-ratio: 3 / 2;

	position: relative;
	width: 100%;
	color: var(--ec-ga-testo);
}

/* Più gallerie di seguito, ad esempio con n="tutte" */
.ec-ga + .ec-ga {
	margin-top: clamp(64px, 8vw, 120px);
}

/* Se la colonna Divi allinea al centro, il modulo Codice si stringe sul
   contenuto e la griglia collasserebbe: lo riportiamo a tutta larghezza. */
.et_pb_code:has(> .et_pb_code_inner > .ec-ga) {
	align-self: stretch;
	width: 100%;
}

/* =========================================================================
   2. NEUTRALIZZAZIONE DEGLI STILI DIVI
   ========================================================================= */

/* Divi: .et-l--body ul { list-style-type: disc; padding: 0 0 23px 1em;
   line-height: 26px } ha specificità 0,1,1. Serve almeno 0,2,1, altrimenti
   tornano i pallini e il rientro (lo stesso difetto dei tag nell'archivio). */
.ec-ga ul.ec-ga__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.5;
}

.ec-ga ul.ec-ga__lista > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ec-ga .ec-ga__voce[hidden] {
	display: none;
}

.ec-ga p {
	margin: 0;
	padding: 0;
}

/* Reset dei pulsanti a specificità zero: le classi del sito (ec-btn,
   ec-btn-round) e quelle qui sotto vincono sempre. */
:where(.ec-ga) :where(button) {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.ec-ga__sr,
.ec-gl__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* =========================================================================
   3. TESTATA
   Sopratitolo e titolo stanno dentro .ec-eyebrow2 e .neue: il carattere
   arriva dalle regole del child theme. Gli stili con :where() valgono
   solo se il tema non ne ha di suoi.
   ========================================================================= */

.ec-ga__testa {
	display: grid;
	gap: 24px 40px;
	margin-bottom: clamp(28px, 3.5vw, 56px);
}

/* Titolo e testo affiancati come nell'introduzione delle pagine interne:
   colonne 16/24 e 6/24, testo con la linea sottile a sinistra. */
.ec-ga__testa--testo {
	grid-template-columns: minmax(0, 16fr) minmax(0, 6fr);
	align-items: end;
}

.ec-ga__tit-box {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

:where(.ec-ga) :where(.ec-ga__eyebrow) {
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ec-ga-tenue);
}

.ec-ga .ec-ga__titolo {
	margin: 0;
	padding: 0;
	font-size: var(--ec-ga-h, clamp(44px, 4.7vw, 78px));
	font-weight: 400;
	line-height: 1;
	letter-spacing: -2px;
	color: var(--ec-ga-testo);
}

.ec-ga .ec-ga__titolo .light {
	font-weight: 300;
}

.ec-ga .ec-ga__testo {
	padding-left: 20px;
	border-left: 1px solid var(--ec-ga-linea);
	font-size: clamp(.85rem, .48rem + .4332vw, 1rem);
	font-weight: 400;
	line-height: 1.7;
	color: var(--ec-ga-testo);
}

@media (max-width: 980px) {
	.ec-ga__testa--testo {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.ec-ga .ec-ga__titolo {
		font-size: var(--ec-ga-h-m, 2.2rem);
		letter-spacing: -1px;
	}
}

/* =========================================================================
   4. FOTO
   ========================================================================= */

.ec-ga .ec-ga__foto {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--ec-ga-ratio);
	overflow: hidden;
	background: var(--ec-ga-fondo-foto);
	cursor: zoom-in;
}

.ec-ga .ec-ga__foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	transition: transform .9s var(--ec-ga-curva);
}

/* Velo e lente: dicono che la foto si apre */
.ec-ga .ec-ga__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ec-ga-testo);
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
}

.ec-ga__lente {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin: -28px 0 0 -28px;
	border-radius: 50%;
	background: var(--ec-ga-chiaro);
	color: var(--ec-ga-testo);
	opacity: 0;
	transform: scale(.85);
	transition: opacity .35s ease, transform .45s var(--ec-ga-curva);
	pointer-events: none;
}

.ec-ga__lente svg {
	width: 22px;
	height: 22px;
}

@media (hover: hover) {
	.ec-ga .ec-ga__foto:hover img {
		transform: scale(1.04);
	}

	.ec-ga .ec-ga__foto:hover::after {
		opacity: .18;
	}

	.ec-ga .ec-ga__foto:hover .ec-ga__lente {
		opacity: 1;
		transform: none;
	}
}

.ec-ga .ec-ga__foto:focus-visible {
	outline: var(--ec-ga-focus);
	outline-offset: var(--ec-ga-focus-scarto);
}

.ec-ga .ec-ga__foto:focus-visible .ec-ga__lente {
	opacity: 1;
	transform: none;
}

.ec-ga .ec-ga__did {
	padding-top: 12px;
	font-size: clamp(.8rem, .62rem + .22vw, .9rem);
	line-height: 1.5;
	color: color-mix(in srgb, var(--ec-ga-testo) 78%, #fff);
}

/* =========================================================================
   5. GRIGLIA
   ========================================================================= */

.ec-ga--griglia ul.ec-ga__lista {
	display: grid;
	grid-template-columns: repeat(var(--ec-ga-col), minmax(0, 1fr));
	gap: var(--ec-ga-gap);
}

/* Con le didascalie le righe respirano di più */
.ec-ga--griglia.ec-ga--did ul.ec-ga__lista {
	row-gap: calc(var(--ec-ga-gap) * 2);
}

@media (max-width: 980px) {
	.ec-ga--griglia ul.ec-ga__lista {
		grid-template-columns: repeat(var(--ec-ga-col-t), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.ec-ga--griglia ul.ec-ga__lista {
		grid-template-columns: repeat(var(--ec-ga-col-m), minmax(0, 1fr));
	}
}

/* =========================================================================
   6. MOSAICO
   Quattro colonne, ciclo di dieci foto: grande a sinistra e quattro
   piccole, poi due piccole, grande a destra e altre due. Le piccole sono
   3:2 e danno l'altezza alle righe; le grandi occupano due righe e due
   colonne e si allungano a riempirle.
   ========================================================================= */

.ec-ga--mosaico ul.ec-ga__lista {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ec-ga-gap);
}

.ec-ga--mosaico .ec-ga__foto {
	--ec-ga-ratio: 3 / 2;
}

.ec-ga--mosaico .ec-ga__voce.is-g {
	grid-column: span 2;
	grid-row: span 2;
	align-self: stretch;
}

.ec-ga--mosaico .ec-ga__voce.is-g--dx {
	grid-column: 3 / span 2;
}

/* Altezza piena dell'area: il 3:2 resta solo come contributo minimo,
   così la grande non collassa se nel blocco mancano foto piccole. */
.ec-ga--mosaico .ec-ga__voce.is-g .ec-ga__foto {
	height: 100%;
}

@media (max-width: 980px) {
	.ec-ga--mosaico ul.ec-ga__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ec-ga--mosaico .ec-ga__voce.is-g,
	.ec-ga--mosaico .ec-ga__voce.is-g--dx {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.ec-ga--mosaico .ec-ga__voce.is-g .ec-ga__foto {
		height: auto;
		--ec-ga-ratio: 2 / 1;
	}
}

/* =========================================================================
   7. CAROSELLO
   Scorrimento nativo con aggancio: funziona con dito, trackpad e tastiera
   anche se lo script non parte. Le frecce sono ec-btn-round del sito.
   ========================================================================= */

.ec-ga.ec-ga--carosello ul.ec-ga__lista {
	position: relative;
	display: flex;
	gap: var(--ec-ga-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;

	/* Spazio per il bordo del focus, che altrimenti verrebbe tagliato */
	margin-block: -8px;
	padding-block: 8px;
}

.ec-ga--carosello ul.ec-ga__lista::-webkit-scrollbar {
	display: none;
}

.ec-ga--carosello .ec-ga__voce {
	flex: 0 0 calc((100% - (var(--ec-ga-col) - 1) * var(--ec-ga-gap)) / var(--ec-ga-col));
	min-width: 0;
	scroll-snap-align: start;
}

@media (max-width: 980px) {
	.ec-ga--carosello .ec-ga__voce {
		flex-basis: calc((100% - (var(--ec-ga-col-t) - 1) * var(--ec-ga-gap)) / var(--ec-ga-col-t));
	}
}

@media (max-width: 767px) {
	.ec-ga--carosello .ec-ga__voce {
		flex-basis: calc((100% - (var(--ec-ga-col-m) - 1) * var(--ec-ga-gap)) / var(--ec-ga-col-m));
	}
}

.ec-ga__nav {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: clamp(20px, 2.5vw, 32px);
}

.ec-ga__nav button:disabled {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

.ec-ga__nav button:focus-visible {
	outline: var(--ec-ga-focus);
	outline-offset: var(--ec-ga-focus-scarto);
}

.ec-ga .ec-ga__conto {
	margin-left: auto;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .08em;
	font-variant-numeric: tabular-nums;
	color: var(--ec-ga-tenue);
}

.ec-ga .ec-ga__conto b {
	font-weight: 600;
	color: var(--ec-ga-testo);
}

/* =========================================================================
   8. MOSTRA TUTTE, SEGNAPOSTO
   ========================================================================= */

.ec-ga__piu-box {
	display: flex;
	justify-content: center;
	margin-top: clamp(28px, 3vw, 44px);
}

.ec-ga .ec-ga__piu:focus-visible {
	outline: var(--ec-ga-focus);
	outline-offset: var(--ec-ga-focus-scarto);
}

.ec-ga--segnaposto {
	padding: 28px;
	border: 1px dashed var(--ec-ga-linea);
	font-size: .9rem;
	text-align: center;
	color: var(--ec-ga-tenue);
}

/* =========================================================================
   9. VISTA A TUTTO SCHERMO
   Il contenitore lo crea lo script, una volta sola, in fondo al body.
   ========================================================================= */

html.ec-gl-blocco {
	overflow: hidden;
}

/* Compensa la barra di scorrimento che sparisce, così la pagina sotto
   non salta di lato */
html.ec-gl-blocco body {
	padding-right: var(--ec-gl-sb, 0px);
}

.ec-gl {
	--ec-gl-fondo: var(--gcid-heading-color, #102131);
	--ec-gl-testo: var(--gcid-95tdrauve2, #f8f9f8);
	--ec-gl-tenue: var(--gcid-link-color, #7894a8);
	--ec-gl-linea: color-mix(in srgb, var(--ec-gl-testo) 35%, transparent);
	--ec-gl-curva: cubic-bezier(.22, .61, .36, 1);

	position: fixed;
	inset: 0;
	z-index: 1000000;
	background: var(--ec-gl-fondo);
	color: var(--ec-gl-testo);
	opacity: 0;
	transition: opacity .25s ease;
}

.ec-gl[hidden] {
	display: none;
}

.ec-gl.is-aperta {
	opacity: 1;
}

.ec-gl__scena {
	position: absolute;
	inset: 76px 104px 108px;
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: pan-y pinch-zoom;
}

.ec-gl__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
	transition: opacity .3s ease, transform .45s var(--ec-gl-curva);
}

.ec-gl__img.is-carica {
	opacity: 0;
	transform: scale(.985);
}

.ec-gl__btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--ec-gl-linea);
	border-radius: 50%;
	background: transparent;
	color: var(--ec-gl-testo);
	font: inherit;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.ec-gl__btn svg {
	width: 18px;
	height: 18px;
}

@media (hover: hover) {
	.ec-gl__btn:hover {
		border-color: var(--ec-gl-testo);
		background: var(--ec-gl-testo);
		color: var(--ec-gl-fondo);
	}
}

.ec-gl__btn:focus-visible {
	outline: 2px solid var(--ec-gl-testo);
	outline-offset: 3px;
}

.ec-gl__chiudi {
	top: 16px;
	right: 20px;
}

.ec-gl__prec,
.ec-gl__succ {
	top: calc(50% - 16px);
	transform: translateY(-50%);
}

.ec-gl__prec {
	left: 28px;
}

.ec-gl__succ {
	right: 28px;
}

.ec-gl.is-singola .ec-gl__prec,
.ec-gl.is-singola .ec-gl__succ,
.ec-gl.is-singola .ec-gl__conto {
	display: none;
}

.ec-gl__barra {
	position: absolute;
	right: 104px;
	bottom: 32px;
	left: 104px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.ec-gl .ec-gl__info {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 70ch;
	margin: 0;
	padding: 0;
	font-size: .9rem;
	line-height: 1.5;
}

.ec-gl__tit {
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ec-gl-tenue);
}

.ec-gl__tit:empty,
.ec-gl__did:empty {
	display: none;
}

.ec-gl .ec-gl__conto {
	margin: 0;
	padding: 0;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .08em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--ec-gl-tenue);
}

.ec-gl .ec-gl__conto b {
	font-weight: 600;
	color: var(--ec-gl-testo);
}

/* Telefono: frecce in basso, a portata di pollice */
@media (max-width: 767px) {
	.ec-gl__scena {
		inset: 68px 0 170px;
	}

	.ec-gl__chiudi {
		top: 10px;
		right: 12px;
	}

	.ec-gl__prec,
	.ec-gl__succ {
		top: auto;
		bottom: 20px;
		transform: none;
	}

	.ec-gl__prec {
		left: 16px;
	}

	.ec-gl__succ {
		right: auto;
		left: 80px;
	}

	.ec-gl__barra {
		right: 16px;
		bottom: 90px;
		left: 16px;
	}
}

/* =========================================================================
   10. MOVIMENTO RIDOTTO
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.ec-ga *,
	.ec-ga *::after,
	.ec-gl,
	.ec-gl * {
		transition: none !important;
	}

	.ec-ga .ec-ga__foto:hover img {
		transform: none;
	}
}