/* =====================================================================
   SKORPION — Esempi Lista Nozze.
   La SCHEDA non è qui: è .sk-related__card di sk-resort-frontend.css, la
   stessa dei caroselli resort (stessa tipografia, stesse proporzioni 3:2,
   stessi angoli vivi). Qui solo ciò che è specifico:
     - il foglio bianco A4 sulla foto (segnaposto);
     - il marquee a scorrimento continuo (.sk-en) coi puntini;
     - la griglia statica (.sk-en-grid).
   Il carosello con frecce [skorpion_esempi_nozze_carosello] non aggiunge
   nulla: usa il guscio .sk-carousel del plugin così com'è.
   Caricato on-demand, dopo sk-carousel (che porta token + schede).
   ===================================================================== */

/* --- Foglio A4 sulla foto (segnaposto, contenuto da decidere) ----------- */
.sk-en__cover {
	position: absolute;
	right: var(--sk-space-3, .75rem);
	bottom: var(--sk-space-3, .75rem);
	z-index: 2;
	width: 22%;
	aspect-ratio: 1 / 1.4142;
	background: var(--sk-surface, #fff);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}
/* Piccolo "orecchio" piegato: si legge come un foglio anche da vuoto. */
.sk-en__cover::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 20%;
	aspect-ratio: 1;
	background: linear-gradient(135deg, transparent 50%, var(--sk-bg-alt, #EDE6DD) 50%);
}
/* Con una copertina vera (immagine caricata o prima pagina del PDF) il foglio
   la mostra e l'orecchio sparisce: non serve più suggerire "qui va un foglio". */
.sk-en__cover--img {
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}
.sk-en__cover--img::after { content: none; }

/* --- Finestra del PDF (stesso schema del lightbox gallerie) ------------- */
.sk-en-pdf {
	width: min(100vw, 1100px);
	max-width: 100vw;
	height: min(100vh, 100dvh);
	max-height: 100dvh;
	margin: 0 auto;
	padding: 0;
	border: 0;
	background: var(--sk-slate-ink, #1B2B32);
	color: var(--sk-text-invert, #F7F4EF);
	overflow: hidden;
}
.sk-en-pdf::backdrop { background: rgba(0, 17, 40, .92); }
.sk-en-pdf[open] { display: grid; grid-template-rows: auto 1fr; }
.sk-en-pdf__bar {
	display: flex;
	align-items: center;
	gap: var(--sk-space-4, 1rem);
	padding: var(--sk-space-4, 1rem) clamp(var(--sk-space-4, 1rem), 3vw, var(--sk-space-6, 2rem));
	border-bottom: 1px solid rgba(247, 244, 239, .14);
}
.sk-en-pdf__title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--sk-font-display, "Season-Mix-Trial", Georgia, serif) !important;
	font-weight: var(--sk-weight-display, 300) !important;
	font-size: var(--sk-fs-lead, 1.25rem);
}
.sk-en-pdf__open {
	flex: none;
	color: var(--sk-sea-foam, #C7E4E1) !important;
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: var(--sk-fs-eyebrow, .8125rem);
	text-decoration: underline;
	text-underline-offset: .25em;
}
.sk-en-pdf__close {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: none;
	border: 1px solid rgba(247, 244, 239, .28);
	color: inherit;
	cursor: pointer;
}
.sk-en-pdf__close:hover { background: rgba(247, 244, 239, .12); }
.sk-en-pdf__frame {
	width: 100%;
	height: 100% !important;
	border: 0;
	background: var(--sk-bg-alt, #EDE6DD);
}
/* La scheda con PDF è cliccabile: si vede. */
a.sk-related__link[data-sk-en-pdf] { cursor: pointer; }

/* --- Marquee: nessuna freccia, loop da destra verso sinistra ------------ */
.sk-en {
	position: relative;
	overflow: hidden;
	width: 100%;
}
.sk-en__track {
	display: flex;
	align-items: flex-start;
	/* Stesso passo del carosello resort (--gap di .sk-carousel). */
	gap: var(--sk-space-3, .75rem);
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none !important;
	/* linear: velocità costante, scorrimento graduale senza scatti. */
	animation: sk-en-marquee var(--sk-en-duration, 36s) linear infinite;
}
.sk-en__track > li,
.sk-en__track > li::marker { list-style: none !important; }
.sk-en__cell { flex: none; }
/* In pausa su hover/focus: una scheda che si vuole guardare non scappa. */
.sk-en:hover .sk-en__track,
.sk-en:focus-within .sk-en__track { animation-play-state: paused; }

@keyframes sk-en-marquee {
	from { transform: translateX(0); }
	/* -50%: il markup contiene le schede due volte, quindi a metà corsa la
	   seconda copia è dove iniziava la prima — loop invisibile. */
	to   { transform: translateX(-50%); }
}

/* Larghezza allineata al carosello resort a 3 colonne: lì la scheda è
   (100% - 3*gap)/3.25 dentro lo shell (~427px su 1425px). Qui la striscia è
   max-content, quindi non si può usare la percentuale: si approssima in vw. */
.sk-en__track .sk-en__card { width: clamp(260px, 30vw, 440px); }

/* Puntino separatore tra una scheda e l'altra. */
.sk-en__dot {
	flex: none;
	align-self: center;
	color: var(--sk-border, rgba(27, 43, 50, .35));
	font-size: 1.5rem;
	line-height: 1;
}

@media (max-width: 900px) {
	.sk-en__track .sk-en__card { width: clamp(240px, 46vw, 380px); }
}
@media (max-width: 560px) {
	.sk-en__track .sk-en__card { width: clamp(220px, 78vw, 320px); }
}

/* Niente moto infinito per chi lo ha disattivato: striscia scorribile a mano. */
@media (prefers-reduced-motion: reduce) {
	.sk-en__track {
		animation: none;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.sk-en__track::-webkit-scrollbar { display: none; }
}

/* --- Griglia statica: 3 colonne (4 da schermi larghi) ------------------- */
.sk-en-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sk-space-6, 2rem) var(--sk-space-5, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none !important;
}
.sk-en-grid > li,
.sk-en-grid > li::marker { list-style: none !important; }
@media (min-width: 1400px) {
	.sk-en-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 780px) {
	.sk-en-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.sk-en-grid { grid-template-columns: 1fr; }
}