/* -------------------------------------------------- */
/* Arena Casino — faqja "Promotions": karusel "coverflow" (titulli/intro   */
/* janë tani te .page-intro, shih assets/css/explore-page.css) — asnjë     */
/* tekst mbi karta. Karta qendrore është e                                 */
/* madhe dhe e fokusuar; kartat anësore janë pjesërisht të dukshme, më të  */
/* vogla dhe më pak të dukshme (shkallëzimi/rrotullimi/opaciteti          */
/* llogariten frame-pas-frame në assets/js/promotions-ticker.js, sipas    */
/* distancës reale të çdo karte nga qendra e viewport-it të karuselit —   */
/* CSS-ja këtu vendos vetëm madhësinë bazë, formën dhe transicionin e     */
/* lehtë që zbut ndryshimet e shpeshta të JS-it).                         */
/*                                                                          */
/* Struktura është "mobile-first": rregullat bazë (pa media query)        */
/* mbulojnë telefonat, pastaj 3 media queries progresivë (tablet →        */
/* laptop/desktop i vogël → desktop i gjerë) i zgjerojnë vlerat. Madhësitë */
/* përdorin kryesisht vw/clamp(), jo pika të forta ndërprerjeje — kështu   */
/* çdo gjerësi e ndërmjetme (p.sh. 1366, 834, 393px) del natyrshëm mirë,   */
/* jo vetëm gjerësitë e rrumbullakosura standarde.                        */
/* -------------------------------------------------- */

/* -------------------- Zona e karuselit -------------------- */
.promo-section {
	padding-block: clamp(48px, min(9vw, 12vh), 140px);
	max-width: 100vw;
	overflow: hidden;
}

.promo-section__ticker-wrap {
	width: 100%;
	padding-inline: clamp(16px, 5vw, 100px);
}

/* -------------------- Karuseli "coverflow" -------------------- */
.promo-ticker {
	position: relative;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	cursor: grab;
	/* Fsheh scrollbar-in — Firefox/IE/Edge legacy + WebKit (rregulli
	   ::-webkit-scrollbar më poshtë). */
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: auto;
	-webkit-user-select: none;
	user-select: none;
	/* "pinch-zoom" mbetet, por s'lejon browser-in të "kapë" gesture-in
	   vertikalisht si scroll faqeje — swipe horizontal prek prek funksionon
	   pa u ngatërruar me scroll-in vertikal të vetë faqes. */
	touch-action: pan-y;
}

.promo-ticker::-webkit-scrollbar {
	display: none;
}

.promo-ticker.is-dragging {
	cursor: grabbing;
}

.promo-ticker__track {
	display: flex;
	align-items: center;
	gap: clamp(10px, 2.5vw, 32px);
	width: max-content;
	/* I duhet për rotateY() e kartave anësore (shih JS-in) të ketë
	   thellësi reale, jo të rrafshët. */
	perspective: 1600px;
	will-change: scroll-position;
}

.promo-ticker__card {
	position: relative;
	/* Bazë: telefon — karta kryesore ~90vw, me pak nga fqinjët duke dalë. */
	flex: 0 0 clamp(260px, 90vw, 460px);
	aspect-ratio: 16 / 9;
	border-radius: clamp(14px, 2vw, 22px);
	overflow: hidden;
	/* Fiksuar, jo e temuar — placeholder-i para se video-ja të ngarkohet
	   duhet të mbetet gjithmonë i errët, si overlay-i mbi vetë video-n
	   (poshtë), pavarësisht temës aktuale të sitit. */
	background: #0a0a0a;
	border: 1px solid rgba(201, 162, 75, 0.16);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
	transform-style: preserve-3d;
	/* Zbut ndryshimet e transform/opacity që JS-i i vendos çdo frame —
	   pa këtë, shkallëzimi do dukej "i ngrënë"/i papastër. */
	transition: transform 0.2s ease-out, opacity 0.25s ease-out;
}

.promo-ticker__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

.promo-ticker__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 10, 10, 0.8) 0%, rgba(10, 10, 10, 0) 46%);
	pointer-events: none;
}

.promo-ticker__label {
	position: absolute;
	left: clamp(14px, 2vw, 24px);
	right: clamp(14px, 2vw, 24px);
	bottom: clamp(12px, 1.6vw, 20px);
	z-index: 2;
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: clamp(15px, 1.6vw, 21px);
	/* Fiksuar, jo e temuar — teksti qëndron mbi video gjithmonë të errët
	   (shih .promo-ticker__overlay), si .hero__subtitle. */
	color: #f5f3ef;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
	pointer-events: none;
}

/* -------------------- Tablet: 768–1023px -------------------- */
/* Një kartë kryesore e qartë, me pjesë të dukshme të fqinjëve — ~75-85vw,
   siç kërkohet, që të mbetet e qartë se karuseli mund të zvarritet. */
@media (min-width: 768px) {
	.promo-ticker__card {
		flex-basis: clamp(480px, 78vw, 660px);
	}
}

/* -------------------- Laptop / desktop i vogël: 1024–1279px -------------------- */
/* Karta qendrore mbetet dominuese, por s'zë më shumicën e ekranit — lihet
   vend real për fqinjët të duken si karta, jo vetëm cepa. */
@media (min-width: 1024px) {
	.promo-ticker__card {
		flex-basis: clamp(520px, 52vw, 640px);
	}
}

/* -------------------- Desktop: 1280px+ -------------------- */
@media (min-width: 1280px) {
	.promo-ticker__card {
		flex-basis: clamp(600px, 42vw, 820px);
	}
}