/* Floating Photos – front-end */

/* La sezione che contiene le foto (in Divi: .et_pb_section) */
.fp-host { position: relative; overflow: hidden; isolation: isolate; }

/* Livello delle foto: copre tutta la sezione, non blocca i click sul testo */
.fp-layer {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	z-index: 3;            /* sopra le colonne di Divi (che stanno a z-index 2) */
	pointer-events: none;
	opacity: 0;
	transition: opacity .6s ease;
}
.fp-layer.fp-ready { opacity: 1; }
.fp-layer.fp-under { z-index: -1; }

.fp-layer .fp-item {
	position: absolute;
	left: var(--x); top: var(--y);
	width: var(--w);
	margin: 0; padding: 0;
	border-radius: 6px;
	overflow: hidden;
	--rot: var(--rd, 0deg);   /* su smartphone diventa --mr (regola scritta dallo shortcode) */
	transform: translate3d(var(--tx, 0px), 0, 0) rotate(var(--rot));
	will-change: transform;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.fp-layer .fp-item.fp-ar { aspect-ratio: var(--ar); }

.fp-layer .fp-item img.fp-img {
	display: block; margin: 0; padding: 0;
	width: 100% !important; max-width: none !important;
	height: auto !important;
	object-fit: cover;
	border-radius: 0; box-shadow: none;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.fp-layer .fp-item.fp-ar img.fp-img {
	position: absolute; top: 0; left: 0;
	height: 100% !important;
}

/* Foto cliccabili (ingrandimento) */
.fp-layer .fp-item.fp-zoom { pointer-events: auto; cursor: pointer; }
/* l'ingrandimento al passaggio solo con il mouse: sul touch resterebbe "incastrato" dopo il tocco */
@media (hover: hover) {
	.fp-layer .fp-item.fp-zoom:hover img.fp-img { transform: scale(1.05); }
}
.fp-layer .fp-item.fp-zoom:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Il piccolo "+" in alto a destra */
.fp-layer .fp-item.fp-zoom::before,
.fp-layer .fp-item.fp-zoom::after,
.fp-layer .fp-item.fp-mzoom::before,
.fp-layer .fp-item.fp-mzoom::after {
	content: ""; position: absolute; z-index: 2; pointer-events: none;
	background: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, .35);
}
.fp-layer .fp-item.fp-zoom::before, .fp-layer .fp-item.fp-mzoom::before { top: 14px; right: 9px; width: 11px; height: 1.5px; }
.fp-layer .fp-item.fp-zoom::after, .fp-layer .fp-item.fp-mzoom::after { top: 9px; right: 13.75px; width: 1.5px; height: 11px; }
/* galleria attiva solo su smartphone: il "+" compare solo lì */
.fp-layer .fp-item.fp-mzoom::before, .fp-layer .fp-item.fp-mzoom::after { display: none; }

/* Etichetta tipo "Live Cam" */
.fp-layer .fp-badge {
	position: absolute; z-index: 3;
	left: 50%; top: 10%; transform: translateX(-50%);
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(84, 108, 90, .92);
	color: #fff; font: 600 11px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
	white-space: nowrap; letter-spacing: .02em;
	pointer-events: none;
}
.fp-layer .fp-badge::after {
	content: ""; width: 6px; height: 6px; border-radius: 50%;
	background: #fff; animation: fp-pulse 1.8s ease-in-out infinite;
}
@keyframes fp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Testo fisso durante lo scroll: la sezione sta dentro un contenitore più alto e resta ferma in alto */
.fp-pin { position: relative; }
.fp-pin > .fp-host { position: sticky; top: 0; }
/* metodo di riserva (attivato da JS solo se sticky non funziona nel tema) */
.fp-pin > .fp-host.fp-pin-js { position: relative; top: auto; }
.fp-pin > .fp-host.fp-pin-js.fp-pin-fixed { position: fixed; top: 0; margin: 0; }
.fp-pin > .fp-host.fp-pin-js.fp-pin-end { position: absolute; top: auto; bottom: 0; left: 0; width: 100%; }
/* testo fisso attivo solo su uno dei due dispositivi: sull'altro la sezione torna normale */
.fp-pin.fp-pin-off > .fp-host { position: relative; top: auto; }

/* Classe da dare a una Riga (o Colonna) di Divi per tenerla SOPRA le foto, es. la riga col Pulsante */
.fp-sopra { position: relative !important; z-index: 4 !important; }

/* Smartphone: posizioni, larghezze e inclinazioni arrivano dal layout mobile (regole scritte dallo shortcode,
   perché il punto di passaggio è regolabile nel pannello). Qui solo i ritocchi comuni. */
@media (max-width: 767px) {
	.fp-layer .fp-item { border-radius: 4px; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); }
	.fp-layer .fp-badge { padding: 4px 8px; font-size: 9px; gap: 4px; }
	.fp-layer .fp-badge::after { width: 5px; height: 5px; }
}

@media (prefers-reduced-motion: reduce) {
	.fp-layer { transition: none; }
	.fp-layer .fp-item, .fp-layer .fp-item img.fp-img { transition: none; }
	.fp-layer .fp-badge::after { animation: none; }
}

/* Galleria a schermo intero */
.fp-lb {
	position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999999;
	background: rgba(15, 20, 18, .97);
	touch-action: none; overscroll-behavior: contain; cursor: zoom-out;
}
.fp-lb[hidden] { display: none !important; }
.fp-lb-stage {
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	display: flex; align-items: center; justify-content: center;
	padding: 56px 84px;
}
.fp-lb-stage img {
	display: block; max-width: 100%; max-height: 100%; width: auto; height: auto;
	object-fit: contain; border-radius: 4px; cursor: default;
	opacity: 0; transition: opacity .25s ease;
	-webkit-user-select: none; user-select: none;
}
.fp-lb-stage img.is-in { opacity: 1; }

.fp-lb button {
	position: absolute; z-index: 2; margin: 0; padding: 0;
	border: 0; box-shadow: none; text-shadow: none;
	color: #fff; background: none; cursor: pointer; line-height: 1;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.fp-lb button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fp-lb-x { top: 12px; right: 16px; width: 44px; height: 44px; font-size: 34px; }
.fp-lb-nav {
	top: 50%; width: 52px; height: 52px; margin-top: -26px !important;
	border-radius: 50%; background: rgba(255, 255, 255, .12) !important;
	display: flex; align-items: center; justify-content: center;
	transition: background .2s ease;
}
.fp-lb-nav:hover { background: rgba(255, 255, 255, .26) !important; }
.fp-lb-nav[hidden] { display: none !important; }
.fp-lb-prev { left: 18px; }
.fp-lb-next { right: 18px; }
.fp-lb-count {
	position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; pointer-events: none;
	color: #fff; opacity: .8; font: 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .08em;
}

/* Smartphone: le frecce vanno in basso, per non coprire la foto */
@media (max-width: 767px) {
	.fp-lb-stage { padding: 56px 10px 76px; }
	.fp-lb-nav { top: auto; bottom: 8px; margin-top: 0 !important; width: 46px; height: 46px; }
	.fp-lb-prev { left: 14px; }
	.fp-lb-next { right: 14px; }
	.fp-lb-count { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.fp-lb-stage img, .fp-lb-nav { transition: none; }
}