/* =====================================================================
   SKORPION — Carosello resort/tour / offerte (stile Flickity di Salient)
   Riusa le card .sk-related__card + i badge .sk-offer__badge (sk_card_badges).
   Carosello drag-fluido con cursore custom "Drag". Solo token var(--sk-*).
   Caricato on-demand dagli shortcode [skorpion_resort_carousel] /
   [skorpion_offerte_carousel] (dipende da sk-resort-frontend per token+card).
   ===================================================================== */

.sk-carousel {
	/* Colonne visibili: il valore desktop arriva inline da --sk-cols-dt; nelle
	   media query sovrascriviamo --cols (mai settata inline → l'override vince). */
	--cols: var(--sk-cols-dt, 3);
	--gap: var(--sk-space-3, .75rem);
	--peek: .25; /* frazione della card successiva che sborda a destra */

	position: relative;
	color: var(--sk-text, #1B2B32);
	/* Si adatta alla larghezza del suo contenitore (niente full-bleed: dentro una
	   colonna/container deve seguirne la larghezza, non uscirne). La card
	   successiva sborda fino al bordo destro del contenitore. Niente sfondo né
	   padding verticale: lo spazio verticale lo gestisce il contenitore esterno. */
	width: 100%;
}

/* --- Testata: titolo (sx) + CTA opzionale (dx) ---------------------- */
.sk-carousel__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(var(--sk-space-5, 1.5rem), 4vw, var(--sk-space-8, 4rem));
	margin-bottom: clamp(var(--sk-space-5, 1.5rem), 3vw, var(--sk-space-7, 3rem));
}
.sk-carousel__heading { max-width: 24ch; }
.sk-carousel__cta { flex: none; }

/* --- Viewport: contiene track + cursore custom --------------------- */
.sk-carousel__viewport {
	position: relative;
}

/* --- Track: scroll orizzontale nativo (drag + inerzia via JS) -------- */
.sk-carousel__track {
	display: flex;
	gap: var(--gap);
	margin: 0;
	padding: 0;
	list-style: none !important;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	/* Bleed su entrambi i lati: il track sborda fino ai bordi schermo
	   (--sk-bleed-l / --sk-bleed-r, misurate da sk-carousel.js) così le card
	   non vengono segate sul bordo del contenitore. Il padding riprende lo
	   stesso spazio: larghezza delle celle (100% = content box), prima card e
	   fine corsa restano allineate al contenitore. */
	margin-left: calc( -1 * var(--sk-bleed-l, 0px) );
	margin-right: calc( -1 * var(--sk-bleed-r, 0px) );
	padding-left: var(--sk-bleed-l, 0px);
	padding-right: var(--sk-bleed-r, 0px);
	/* Touch: gesti orizzontali al carosello, verticali alla pagina. */
	touch-action: pan-y;
	cursor: grab;
	/* Drag anche da foto/testo: niente selezione testo che parte sotto il cursore. */
	user-select: none;
	-webkit-user-select: none;
}
.sk-carousel__track::-webkit-scrollbar { display: none; }
/* Niente drag nativo di link/immagini: altrimenti il browser avvia il proprio
   trascinamento (link/ghost image) e annulla il nostro drag (pointercancel). */
.sk-carousel__track a,
.sk-carousel__track img {
	-webkit-user-drag: none;
	user-select: none;
}
.sk-carousel__track.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	user-select: none;
}
.sk-carousel__track:focus-visible {
	outline: 2px solid var(--sk-cta, #0068B1);
	outline-offset: 3px;
}
.sk-carousel__track > li,
.sk-carousel__track > li::before,
.sk-carousel__track > li::marker {
	list-style: none !important;
	content: none !important;
}

/* Cella: --cols card piene + una frazione (--peek) della successiva che sborda
   a destra (overflow visibile). Larghezza = (viewport - gap riservati) / (cols+peek). */
.sk-carousel__cell {
	flex: 0 0 calc( ( 100% - var(--cols) * var(--gap) ) / ( var(--cols) + var(--peek) ) );
	scroll-snap-align: start;
}

/* Quando il cursore custom è attivo, nascondiamo il cursore di sistema
   sulla viewport (resta il pallino "Drag"). */
.sk-carousel.has-cursor .sk-carousel__track { cursor: none; }
.sk-carousel.has-cursor.is-grabbing .sk-carousel__track { cursor: none; }

/* --- Cursore custom "Drag" (solo puntatori fine, attivato via JS) ---- */
.sk-carousel__cursor {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 5.25rem;
	height: 5.25rem;
	border-radius: 50%;
	background: var(--sk-ocean-navy, #00265A);
	color: var(--sk-sea-foam, #C7E4E1);
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%) scale(.5);
	transition:
		opacity   var(--sk-dur, .35s) var(--sk-ease, cubic-bezier(.22, 1, .36, 1)),
		transform var(--sk-dur, .35s) var(--sk-ease, cubic-bezier(.22, 1, .36, 1));
}
/* Visibile: scala piena. In drag (root .is-grabbing): si stringe leggermente. */
.sk-carousel__cursor.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.sk-carousel.is-grabbing .sk-carousel__cursor.is-visible { transform: translate(-50%, -50%) scale(.86); }
.sk-carousel__cursor-label {
	font-family: var(--sk-font-label, "sweet-sans-pro", sans-serif) !important;
	font-size: var(--sk-fs-eyebrow, .8125rem);
	font-weight: 700;
	text-transform: uppercase;
}

/* --- Frecce (in basso a destra, come il rail offerte) --------------- */
.sk-carousel__nav {
	display: none; /* visibili solo dopo enhance JS */
	justify-content: flex-end;
	gap: var(--sk-space-2, .5rem);
	margin-top: var(--sk-space-5, 1.5rem);
}
.sk-carousel.is-enhanced .sk-carousel__nav { display: flex; }
.sk-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: var(--sk-surface, #fff);
	border: 1px solid var(--sk-border, rgba(27, 43, 50, .2));
	color: var(--sk-text, #1B2B32);
	border-radius: var(--sk-radius-sm, 5px);
	cursor: pointer;
	transition:
		background var(--sk-dur, .35s) var(--sk-ease),
		border-color var(--sk-dur, .35s) var(--sk-ease),
		opacity var(--sk-dur, .35s) var(--sk-ease);
}
.sk-carousel__arrow:hover { background: var(--sk-ocean-navy, #00265A); border-color: var(--sk-ocean-navy, #00265A); color: var(--sk-text-invert, #F7F4EF); }
.sk-carousel__arrow:focus-visible { outline: 2px solid var(--sk-ocean-navy, #00265A); outline-offset: 2px; }
.sk-carousel__arrow[disabled] { opacity: .35; cursor: default; pointer-events: none; }

/* Stato vuoto (nessun risultato dalla query). */
.sk-carousel__empty {
	margin: 0;
	color: var(--sk-text-muted, #5a6b72);
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
}

/* --- Responsive: colonne (override di --cols, mai settata inline) ----- */
@media (max-width: 900px) {
	.sk-carousel { --cols: 2; }
}
@media (max-width: 560px) {
	.sk-carousel { --cols: 1; } /* 1 piena + peek della successiva (--peek) */
	.sk-carousel__head { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.sk-carousel__cursor { transition: none; }
}