/* Slider Casuale – Gallerie: front-end */

.scg {
	--scg-per-cur: var(--scg-per, 3);
	--scg-cols-cur: var(--scg-cols, 4);
	position: relative;
	width: 100%;
	max-width: var(--scg-w, 100%);
	margin: 0 auto 1.5em;
	box-sizing: border-box;
}
@media (max-width: 600px) {
	.scg {
		--scg-per-cur: var(--scg-per-m, 1);
		--scg-cols-cur: var(--scg-cols-m, 2);
	}
}
.scg *,
.scg *::before,
.scg *::after { box-sizing: border-box; }
.scg [hidden] { display: none !important; }

/* Box */
.scg-box { position: relative; width: 100%; overflow: hidden; }
.scg-box--fissa .scg-viewport { position: absolute; inset: 0; overflow: hidden; }
.scg-track { position: relative; margin: 0; padding: 0; }
.scg-item { position: relative; margin: 0; padding: 0; overflow: hidden; }
.scg .scg-item img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: var(--scg-fit, cover);
}

/* Nasconde le foto finché non sono state mescolate */
.scg:not(.scg--pronto) .scg-track { visibility: hidden; }

/* Slideshow: dissolvenza */
.scg--dissolvenza .scg-track { height: 100%; }
.scg--dissolvenza .scg-item { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.scg--dissolvenza .scg-item.scg-attiva { opacity: 1; z-index: 1; }

/* Slideshow / carosello: scorrimento */
.scg--scorrimento .scg-track {
	display: flex;
	height: 100%;
	gap: var(--scg-gap, 0px);
	transition: transform .6s ease;
	will-change: transform;
}
.scg--scorrimento .scg-item {
	flex: 0 0 calc((100% - (var(--scg-per-cur) - 1) * var(--scg-gap, 0px)) / var(--scg-per-cur));
	height: 100%;
}
.scg--singola.scg--scorrimento .scg-track { gap: 0; }
.scg--singola.scg--scorrimento .scg-item { flex-basis: 100%; }
.scg-senza-transizione { transition: none !important; }

/* Frecce */
.scg .scg-prev,
.scg .scg-next {
	position: absolute;
	top: 50%;
	z-index: 3;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	min-height: 0;
	margin: 0;
	padding: 0 0 .15em;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	background: rgba(0, 0, 0, .45);
	color: #fff;
	font: 400 2rem/1 sans-serif;
	cursor: pointer;
	transition: background .2s;
}
.scg .scg-prev { left: .6rem; }
.scg .scg-next { right: .6rem; }
.scg .scg-prev:hover,
.scg .scg-next:hover { background: rgba(0, 0, 0, .75); }
.scg button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.scg .scg-item:focus-visible { outline: 3px solid #2271b1; outline-offset: -3px; }

/* Indicatori */
.scg-punti { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .75rem; }
.scg .scg-punti button {
	width: .65rem;
	height: .65rem;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	background: currentColor;
	opacity: .3;
	cursor: pointer;
}
.scg .scg-punti button[aria-current="true"] { opacity: .9; }
.scg .scg-punti button:focus-visible { outline-color: currentColor; }

/* Miniature */
.scg--miniature .scg-track {
	display: grid;
	grid-template-columns: repeat(var(--scg-cols-cur), minmax(0, 1fr));
	gap: var(--scg-gap, 10px);
	align-content: start;
}
.scg--miniature .scg-item { aspect-ratio: var(--scg-thumb, 1/1); background: var(--scg-thumb-bg, transparent); }
.scg--miniature .scg-item img { object-fit: var(--scg-thumb-fit, cover); transition: transform .35s ease; }
.scg--miniature .scg-item:hover img { transform: scale(1.06); }
.scg-box--scorrimento .scg-viewport { overflow-y: auto; overscroll-behavior: contain; }
/* Su smartphone un box orizzontale mostrerebbe una sola riga di miniature: lo rende verticale */
@media (max-width: 600px) {
	.scg--miniature .scg-box--fissa { aspect-ratio: 3 / 4 !important; }
}
.scg-cliccabile { cursor: zoom-in; }

/* Anteprima al passaggio del mouse (miniature) */
.scg-anteprima {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 6px;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: scale(.92);
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.scg-anteprima--visibile {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.scg-anteprima img { display: block; max-width: none; margin: 0; border: 0; border-radius: 3px; object-fit: cover; }
.scg-anteprima span { max-width: 100%; padding: 6px 4px 2px; color: #333; font: 13px/1.35 sans-serif; text-align: center; }
.scg-anteprima span[hidden] { display: none; }

/* Carosello a ventaglio */
.scg--ventaglio .scg-viewport { touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.scg--ventaglio.scg--trascina .scg-viewport { cursor: grabbing; }
.scg--ventaglio .scg-track { position: absolute; inset: 0; }
.scg--ventaglio .scg-viewport { z-index: 0; } /* le foto restano sotto frecce e pallini */
.scg--ventaglio .scg-item {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--scg-vw, 40%);
	height: var(--scg-vh, 80%);
	border-radius: 4px;
	background: var(--scg-thumb-bg, transparent);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	cursor: pointer;
	will-change: transform;
	transition: transform .55s cubic-bezier(.22, .61, .36, 1), opacity .55s ease, filter .55s ease;
}
.scg--ventaglio .scg-item img { object-fit: var(--scg-thumb-fit, cover); pointer-events: none; -webkit-user-drag: none; }
.scg--ventaglio .scg-item.scg-centrale { cursor: default; }
.scg--ventaglio.scg--con-modale .scg-item.scg-centrale { cursor: zoom-in; }
.scg--ventaglio:not(.scg--trascina):not(.scg--libero):not(.scg--centrale-max) .scg-item.scg-centrale:hover { --scg-hz: var(--scg-hz-max, 1.12); }
.scg--ventaglio.scg--libero .scg-item,
.scg--ventaglio .scg-item.scg-salto { transition: none; }
/* Riempimento sfumato: livello dietro la foto */
.scg--riempi-sfumato .scg-item { background: transparent; }
.scg-riempimento { position: absolute; inset: 0; z-index: 0; pointer-events: none; transition: opacity .55s ease; }
.scg--riempi-sfumato .scg-item img { position: relative; z-index: 1; }
/* Nel ventaglio solo la foto centrale ha il riempimento: sulle laterali si vede la velatura senza doppie sfumature */
.scg--ventaglio .scg-item:not(.scg-centrale) .scg-riempimento { opacity: 0; }
/* Riempimento sfumato: l'ombra segue la foto, non il riquadro */
.scg--ventaglio.scg--foto-intere .scg-item { box-shadow: none; }
.scg--ventaglio.scg--foto-intere .scg-item img { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .35)); }
.scg-velo { position: absolute; inset: 0; z-index: 995; pointer-events: none; background: var(--scg-banda-col); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.scg-banda { position: absolute; top: 0; bottom: 0; width: var(--scg-banda-w, 0); z-index: 995; pointer-events: none; }
.scg-banda--sx { left: 0; }
.scg-banda--dx { right: 0; }
.scg--bande-piene .scg-banda { background: var(--scg-banda-col); }
.scg--bande-sfumate .scg-banda--sx { background: linear-gradient(to left, transparent 0, var(--scg-banda-col) var(--scg-banda-amp, 100%)); }
.scg--bande-sfumate .scg-banda--dx { background: linear-gradient(to right, transparent 0, var(--scg-banda-col) var(--scg-banda-amp, 100%)); }

/* Selettore di pagina */
.scg-pagine { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem; margin-top: .75rem; }
.scg .scg-pagine button {
	min-width: 2.2rem;
	height: 2.2rem;
	min-height: 0;
	margin: 0;
	padding: 0 .5rem;
	border: 1px solid currentColor;
	border-radius: 4px;
	box-shadow: none;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1;
	opacity: .7;
	cursor: pointer;
}
.scg .scg-pagine button[aria-current="page"] { opacity: 1; font-weight: 700; background: rgba(127, 127, 127, .15); }
.scg .scg-pagine button:disabled { opacity: .3; cursor: default; }
.scg .scg-pagine button:focus-visible { outline-color: currentColor; }
.scg-pagine span { padding: 0 .25rem; opacity: .6; }

/* Finestra modale */
html.scg-bloccato { overflow: hidden; }
.scg-modale {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: scg-entra .2s ease;
}
.scg-modale[hidden],
.scg-modale [hidden] { display: none !important; }
.scg-modale-fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, .9); }
.scg-modale-figura {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 92vw;
	max-height: 92vh;
	margin: 0;
	padding: 0;
	pointer-events: none;
}
.scg-modale-figura img {
	display: block;
	width: auto;
	height: auto;
	max-width: 92vw;
	max-height: 84vh;
	object-fit: contain;
	pointer-events: auto;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.scg-modale-figura figcaption { margin-top: .6rem; color: #eee; font: 15px/1.4 sans-serif; text-align: center; pointer-events: auto; }
.scg-modale-contatore { position: absolute; top: 1.1rem; left: 1rem; color: #ccc; font: 14px/1 sans-serif; }
.scg-modale button {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	margin: 0;
	padding: 0 0 .1em;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font: 400 2.2rem/1 sans-serif;
	cursor: pointer;
}
.scg-modale button:hover { background: rgba(255, 255, 255, .28); }
.scg-modale button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.scg-modale-chiudi { top: .75rem; right: .75rem; width: 2.75rem; height: 2.75rem; }
.scg-modale-schermo { top: 4rem; right: .75rem; width: 2.75rem; height: 2.75rem; }
.scg-modale button.scg-modale-schermo { padding: 0; }
/* A schermo intero la foto usa tutto lo spazio */
.scg-modale--schermo .scg-modale-fondo { background: #000; }
.scg-modale--schermo .scg-modale-figura,
.scg-modale--schermo .scg-modale-figura img { max-width: 100vw; max-height: 100vh; }
.scg-modale--schermo .scg-modale-figura img { box-shadow: none; }
.scg-modale--schermo .scg-modale-figura figcaption { position: absolute; bottom: .75rem; left: 50%; transform: translateX(-50%); padding: .3rem .8rem; border-radius: 4px; background: rgba(0, 0, 0, .55); }
.scg-modale-prev,
.scg-modale-next { top: 50%; transform: translateY(-50%); width: 3.25rem; height: 3.25rem; }
.scg-modale-prev { left: 1rem; }
.scg-modale-next { right: 1rem; }
@media (max-width: 600px) {
	.scg-modale-prev,
	.scg-modale-next { width: 2.5rem; height: 2.5rem; }
	.scg-modale-prev { left: .3rem; }
	.scg-modale-next { right: .3rem; }
}
@keyframes scg-entra { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.scg-item,
	.scg-track,
	.scg-item img,
	.scg-modale { transition: none !important; animation: none !important; }
}

/* Banner a tutta larghezza */
.scg--banner { max-width: var(--scg-w, 100%); margin-bottom: 0; }

/* Zoom lento sulla foto visibile */
.scg--zoom .scg-item img { transform: scale(1); transition: transform 0s linear .9s; }
.scg--zoom .scg-item.scg-attiva img { transform: scale(1.08); transition: transform var(--scg-zoom-durata, 6000ms) linear; }

/* Riquadro di testo sotto la galleria */
.scg-testo { padding: 1.5em 1.25em; line-height: 1.5; }
.scg-testo:not(.scg-testo--fondo) { padding-left: 0; padding-right: 0; }
.scg-testo > :first-child { margin-top: 0; }
.scg-testo > :last-child { margin-bottom: 0; }
.scg-testo a { color: inherit; }

/* ---------- Titolo con effetti, divisore, parole colorate, comparsa ---------- */
.scg-testo .scg-titolo { margin: 0 0 .35em; padding: 0; line-height: 1.2; letter-spacing: .04em; font-weight: 700; color: var(--scg-tit-col, inherit); }
.scg-titolo--gradiente,
.scg-titolo--gradiente_animato {
	background-image: var(--scg-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.scg-titolo--gradiente_animato { background-size: 400% 400%; animation: scg-shimmer 8s ease-in-out infinite; }
@keyframes scg-shimmer {
	0%, 75%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}
.scg-titolo--ombra { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.scg-titolo--contorno { -webkit-text-stroke: 1px rgba(0, 0, 0, .55); }

/* Parole *evidenziate* */
.scg-evid--maiuscolo .scg-evid { text-transform: uppercase; }
.scg-evid--colore .scg-evid { color: var(--scg-evid); -webkit-text-fill-color: var(--scg-evid); }
.scg-evid--pennellata .scg-evid,
.scg-evid--sottolineatura .scg-evid {
	background-image: linear-gradient(var(--scg-evid), var(--scg-evid));
	background-repeat: no-repeat;
	transition: background-size .9s ease .4s;
}
.scg-evid--pennellata .scg-evid { background-position: 0 85%; background-size: 100% .4em; padding: 0 .06em; }
.scg-evid--sottolineatura .scg-evid { background-position: 0 100%; background-size: 100% .08em; }
/* con il gradiente la pennellata sta sotto le lettere, per non coprirle */
.scg-titolo--gradiente.scg-evid--pennellata .scg-evid,
.scg-titolo--gradiente_animato.scg-evid--pennellata .scg-evid { background-position: 0 100%; background-size: 100% .16em; }
.scg-anima:not(.scg-visto) .scg-evid--pennellata .scg-evid { background-size: 0% .4em; }
.scg-anima:not(.scg-visto) .scg-titolo--gradiente.scg-evid--pennellata .scg-evid,
.scg-anima:not(.scg-visto) .scg-titolo--gradiente_animato.scg-evid--pennellata .scg-evid { background-size: 0% .16em; }
.scg-anima:not(.scg-visto) .scg-evid--sottolineatura .scg-evid { background-size: 0% .08em; }

/* Parole che si alternano */
.scg-alterna { display: inline-grid; vertical-align: bottom; }
.scg-alt-parola { grid-area: 1 / 1; visibility: hidden; }
.scg-alt-parola.scg-alt-attiva { visibility: visible; animation: scg-alt-entra .6s ease; }
@keyframes scg-alt-entra { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* Macchina da scrivere: cursore */
.scg-titolo.scg-scrive::after {
	content: '';
	display: inline-block;
	width: .06em;
	height: .9em;
	margin-left: .05em;
	vertical-align: -.05em;
	background: var(--scg-acc, currentColor);
	animation: scg-cursore .8s steps(1) infinite;
}
@keyframes scg-cursore { 50% { opacity: 0; } }

/* Divisore */
.scg-divisore { display: flex; align-items: center; justify-content: center; gap: 16px; margin: .2em 0 1em; }
.scg-testo--sinistra .scg-divisore { justify-content: flex-start; }
.scg-div-linea { display: block; width: 60px; height: 2px; border-radius: 2px; background: var(--scg-grad-linea); }
.scg-divisore--linea .scg-div-linea { width: 140px; }
.scg-div-simbolo { color: var(--scg-acc); font-size: 14px; line-height: 1; }

/* Parole colorate nel testo: {1|parole} */
.scg-testo-corpo .scg-c1 { color: var(--scg-c1); }
.scg-testo-corpo .scg-c2 { color: var(--scg-c2); }
.scg-testo-corpo .scg-c3 { color: var(--scg-c3); }
.scg-testo-corpo .scg-c4 { color: var(--scg-c4); }
.scg-testo-corpo .scg-c5 { color: var(--scg-c5); }
.scg-testo-corpo .scg-c6 { color: var(--scg-c6); }
.scg-testo-corpo .scg-c7 { color: var(--scg-c7); }
.scg-testo-corpo .scg-c8 { color: var(--scg-c8); }
.scg-testo-corpo .scg-c9 { color: var(--scg-c9); }

/* Comparsa quando il riquadro entra nello schermo */
.scg-comparsa--dissolvenza { transition: opacity .8s ease, transform .8s ease; }
.scg-anima.scg-comparsa--dissolvenza:not(.scg-visto) { opacity: 0; transform: translateY(24px); }
.scg-comparsa--sequenza > * { transition: opacity .7s ease, transform .7s ease; }
.scg-comparsa--sequenza > :nth-child(2) { transition-delay: .3s; }
.scg-comparsa--sequenza > :nth-child(3) { transition-delay: .6s; }
.scg-anima.scg-comparsa--sequenza:not(.scg-visto) > * { opacity: 0; transform: translateY(18px); }

@media (prefers-reduced-motion: reduce) {
	.scg-titolo--gradiente_animato,
	.scg-alt-parola.scg-alt-attiva,
	.scg-titolo.scg-scrive::after { animation: none !important; }
	.scg-testo,
	.scg-testo * { transition: none !important; }
}

/* Nastro d'angolo (es. "20 anni") */
.scg-testo { position: relative; }
.scg-nastro {
	position: absolute;
	top: calc(-1 * var(--scg-nastro-su, 0px));
	bottom: 0;
	z-index: 5;
	aspect-ratio: var(--scg-nastro-ar);
	background: var(--scg-nastro) no-repeat left top / contain;
	pointer-events: none;
}
.scg-nastro--sinistra { left: 0; }
.scg-nastro--destra { right: 0; background-position: right top; }
@media (max-width: 1200px) {
	.scg-nastro {
		position: static;
		display: block;
		width: 100%;
		max-width: 520px;
		margin: 0 auto 14px;
		aspect-ratio: var(--scg-nastro-m-ar);
		background-image: var(--scg-nastro-m);
		background-position: center;
	}
}

/* Titoletti dentro il testo: proporzionati alla dimensione del testo, quindi si riducono con lui */
.scg-testo-corpo h1 { font-size: 1.8em; }
.scg-testo-corpo h2 { font-size: 1.5em; }
.scg-testo-corpo h3 { font-size: 1.25em; }
.scg-testo-corpo h4,
.scg-testo-corpo h5,
.scg-testo-corpo h6 { font-size: 1.1em; }
.scg-testo-corpo h1, .scg-testo-corpo h2, .scg-testo-corpo h3,
.scg-testo-corpo h4, .scg-testo-corpo h5, .scg-testo-corpo h6 { line-height: 1.3; margin: .4em 0; }
@media (max-width: 600px) {
	.scg-testo-corpo h1 { font-size: 1.45em; }
	.scg-testo-corpo h2 { font-size: 1.25em; }
	.scg-testo-corpo h3 { font-size: 1.12em; }
}

/* Dimensioni e caratteri applicati dall'editor (relativi al testo: si riducono con lui) */
.scg-testo-corpo .scg-t-s { font-size: .8em; }
/* le dimensioni grandi si riducono da sole sugli schermi stretti (anche con la dimensione del tema) */
.scg-testo-corpo .scg-t-l { font-size: clamp(1.05em, 3.4vw, 1.3em); }
.scg-testo-corpo .scg-t-xl { font-size: clamp(1.15em, 4.4vw, 1.7em); }
.scg-testo-corpo .scg-t-xxl { font-size: clamp(1.3em, 5.8vw, 2.2em); }
.scg-testo-corpo .scg-f1 { font-family: var(--scg-f1); }
.scg-testo-corpo .scg-f2 { font-family: var(--scg-f2); }
.scg-testo-corpo .scg-f3 { font-family: var(--scg-f3); }
.scg-testo-corpo .scg-f4 { font-family: var(--scg-f4); }
.scg-testo-corpo .scg-f5 { font-family: var(--scg-f5); }
.scg-testo-corpo .scg-f6 { font-family: var(--scg-f6); }
.scg-testo-corpo .scg-f7 { font-family: var(--scg-f7); }
.scg-testo-corpo .scg-f8 { font-family: var(--scg-f8); }