/* ============================================================
   Split Gallery — stili frontend
   Tutto e namespaced sotto .splgal per non toccare il resto del tema.
   ============================================================ */

.splgal {
	display: flex;
	position: relative;
	width: 100%;
	overflow: hidden;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	/* height e background arrivano da inline style (controlli Elementor) */
}

.splgal * { box-sizing: border-box; }

.splgal-panel {
	position: relative;
	overflow: hidden;
	flex: 1; /* 50/50 di default; sovrascritto dal divisore trascinabile */
}

.splgal-track {
	position: absolute;
	top: 0; left: 0; right: 0;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.splgal-slide {
	width: 100%;
	height: 100vh;   /* fallback prima che il JS misuri l'altezza reale */
	height: 100dvh;
	position: relative;
	overflow: hidden;
}

.splgal-slide img {
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	user-select: none;
}

.splgal-fit-cover   .splgal-slide img { object-fit: cover;   object-position: center; }
.splgal-fit-contain .splgal-slide img { object-fit: contain; object-position: center; }
.splgal-fit-contain .splgal-slide { background: var(--splgal-fit-bg, #ffffff); }

/* hover che allarga un lato (Split Posts): transizione morbida della larghezza */
.splgal-hoverexp .splgal-panel { transition: flex-basis 0.45s cubic-bezier(0.4, 0, 0.2, 1); }

.splgal-slide::after {
	content: '';
	position: absolute; bottom: 0; left: 0; right: 0; height: 120px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.45));
	pointer-events: none;
}

/* etichetta nome fotografo */
.splgal-label {
	position: absolute; top: 20px; z-index: 20;
	font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--splgal-ui, #fff);
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.15);
	padding: 5px 14px; border-radius: 2px;
	opacity: 0.85;
}
.splgal-panel-a .splgal-label { left: 20px; }
.splgal-panel-b .splgal-label { right: 20px; }

/* contatore */
.splgal-counter {
	position: absolute; bottom: 20px; z-index: 20;
	font-size: 11px; letter-spacing: 0.1em;
	color: var(--splgal-ui, #fff); opacity: 0.5;
}
.splgal-panel-a .splgal-counter { left: 20px; }
.splgal-panel-b .splgal-counter { right: 20px; }

/* frecce */
.splgal-nav {
	position: absolute; left: 50%; transform: translateX(-50%); z-index: 20;
	width: 40px; height: 40px; border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: var(--splgal-ui, #fff);
	cursor: pointer; padding: 0;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.2s, transform 0.15s; outline: none;
	-webkit-tap-highlight-color: transparent;
}
.splgal-nav:hover  { background: rgba(255, 255, 255, 0.28); }
.splgal-nav:active { transform: translateX(-50%) scale(0.92); }
.splgal-up   { top: 16px; }
.splgal-down { bottom: 16px; }
.splgal-nav svg {
	width: 18px; height: 18px; stroke: currentColor; fill: none;
	stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* dots */
.splgal-dots {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
	display: flex; flex-direction: column; gap: 6px;
}
.splgal-panel-a .splgal-dots { right: 12px; }
.splgal-panel-b .splgal-dots { left: 12px; }
.splgal-dot {
	width: 4px; height: 4px; border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
	transition: background 0.25s, transform 0.25s;
}
.splgal-dot.is-active {
	background: var(--splgal-ui, #fff);
	transform: scale(1.4);
}

/* divisore trascinabile */
.splgal-divider {
	position: absolute; top: 0; bottom: 0; left: 50%; z-index: 30;
	width: 24px; transform: translateX(-50%);
	display: flex; align-items: center; justify-content: center;
	cursor: ew-resize; touch-action: none;
}
.splgal-divider::before {
	content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
	width: 1px; background: rgba(255, 255, 255, 0.28); transform: translateX(-50%);
}
.splgal-grab {
	width: 24px; height: 48px; border-radius: 12px; position: relative; z-index: 2;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.35);
	display: flex; align-items: center; justify-content: center; gap: 3px;
	backdrop-filter: blur(4px);
}
.splgal-grab i { width: 2px; height: 16px; background: rgba(255, 255, 255, 0.7); border-radius: 1px; }
.splgal[data-draggable="0"] .splgal-divider { display: none; }

/* MOBILE: pannelli impilati, 50/50, niente divisore */
@media (max-width: 600px) {
	.splgal { flex-direction: column; }
	.splgal-panel { flex: 1 !important; }
	.splgal-divider { display: none !important; }
	.splgal-label { top: 14px; font-size: 9px; padding: 4px 10px; }
	.splgal-up { top: 12px; } .splgal-down { bottom: 12px; }
}

/* ============================================================
   Split Posts — lato testo (articoli)
   ============================================================ */

/* niente gradiente sulle slide del widget articoli */
.splgal-posts .splgal-slide::after { display: none; }

/* immagine sempre centrata, anche se tagliata (crop dal centro) */
.splgal-posts .splgal-slide img { object-position: center center; }

/* placeholder se un articolo non ha immagine in evidenza */
.splgal-noimg {
	width: 100%; height: 100%;
	background: repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 12px, transparent 12px 24px);
}

/* lato testo */
.splgal-post-text {
	background: var(--splgal-text-bg, #fff);
	display: flex;
	align-items: center;
}
.splgal-post-inner {
	padding: 7% 9%;
	max-width: 780px;
	margin: 0 auto;
	color: var(--splgal-text-color, #1a1a1a);
	font-family: inherit; /* eredita i font del tema, non Helvetica */
}
.splgal-post-meta {
	font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
	opacity: 0.55; margin-bottom: 16px;
}
.splgal-post-title {
	font-family: inherit;
	font-size: clamp(30px, 3.6vw, 58px);
	line-height: 1.08; margin: 0 0 18px; font-weight: 700;
}
.splgal-post-title a { color: inherit; text-decoration: none; }
.splgal-post-title a:hover { opacity: 0.7; }
.splgal-post-excerpt {
	font-size: 16px; line-height: 1.65; opacity: 0.82;
}
.splgal-post-link {
	display: inline-block; margin-top: 22px;
	font-size: 14px; letter-spacing: 0.04em; color: inherit;
	text-decoration: none; padding-bottom: 2px;
	border-bottom: 1px solid currentColor;
}
.splgal-post-link:hover { opacity: 0.7; }

/* su mobile: scheda per volta, immagine sopra (piu grande), testo sotto,
   frecce in basso al centro. La pagina scorre normalmente. */
@media (max-width: 600px) {
	.splgal-post-inner { padding: 24px 22px; }
	.splgal-posts .splgal-panel-a { flex: 0 0 55% !important; }
	.splgal-posts .splgal-panel-b { flex: 0 0 45% !important; }
	.splgal-posts .splgal-sidenav { top: auto; bottom: 14px; transform: none; width: 42px; height: 42px; }
	.splgal-posts .splgal-sidenav-left  { left: auto; right: 52%; }
	.splgal-posts .splgal-sidenav-right { right: auto; left: 52%; }
	.splgal-posts .splgal-sidenav:active { transform: scale(0.92); }
	.splgal-posts .splgal-counter { bottom: 64px; }
}

/* frecce laterali articoli: una a sinistra (indietro), una a destra (avanti).
   Stile frostato scuro: leggibile sia sopra l'immagine sia sopra il testo. */
.splgal-sidenav {
	position: absolute; top: 50%; transform: translateY(-50%);
	z-index: 25; padding: 0; margin: 0; cursor: pointer;
	width: 46px; height: 46px; border-radius: 50%;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	backdrop-filter: blur(6px);
	transition: background 0.2s, transform 0.15s;
	-webkit-tap-highlight-color: transparent;
}
.splgal-sidenav:hover  { background: rgba(0, 0, 0, 0.6); }
.splgal-sidenav:active { transform: translateY(-50%) scale(0.92); }
.splgal-sidenav-left  { left: 18px; }
.splgal-sidenav-right { right: 18px; }
.splgal-sidenav svg {
	width: 20px; height: 20px; stroke: currentColor; fill: none;
	stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 600px) {
	.splgal-sidenav { top: 25%; width: 40px; height: 40px; }
	.splgal-sidenav-left  { left: 12px; }
	.splgal-sidenav-right { right: 12px; }
}

/* pulsante toggle "riempi / intero" (Split Gallery) */
.splgal-fittoggle {
	position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
	z-index: 35; width: 40px; height: 40px; border-radius: 50%; padding: 0; cursor: pointer;
	background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.35); color: #fff;
	display: flex; align-items: center; justify-content: center;
	backdrop-filter: blur(6px); transition: background 0.2s;
	-webkit-tap-highlight-color: transparent;
}
.splgal-fittoggle:hover { background: rgba(0, 0, 0, 0.6); }
.splgal-fittoggle svg {
	width: 18px; height: 18px; stroke: currentColor; fill: none;
	stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.splgal-fittoggle .ic-contain { display: none; }
.splgal-fit-contain .splgal-fittoggle .ic-cover { display: none; }
.splgal-fit-contain .splgal-fittoggle .ic-contain { display: block; }

/* ============================================================
   Scorrimento orizzontale (Split Posts): le slide si muovono di lato
   e seguono il verso premuto. Le altezze sono al 100% via CSS,
   stabile anche su mobile (niente misure in px).
   ============================================================ */
.splgal-axis-x .splgal-track {
	bottom: 0;
	display: flex;
}
.splgal-axis-x .splgal-slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100% !important;
	min-height: 0;
	max-height: none;
}