/* -------------------------------------------------- */
/* Arena Casino — faqja "Events": galeri orbitale infinite mbi sfond të    */
/* zi. Pozicioni (x/y/scale/z-index/opacity) i çdo imazhi vendoset nga    */
/* GSAP frame pas frame (shih assets/js/events-orbit.js) — CSS-ja këtu    */
/* trajton vetëm dukjen statike të kutive dhe tranzicionin e ngjyrës (hover). */
/* -------------------------------------------------- */

.orbit-gallery {
	position: relative;
	width: 100%;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/* Themed — ndjek --color-bg të temës (si te About Us/FAQ), jo e zezë fikse. */
	background: var(--color-bg);
	padding: calc(var(--header-height) + 40px) 24px 40px;
}

/* Kompozimi kufizohet brenda një kutie 16:9 të qendërzuar — jo e gjithë
   ekrani — që orbita e imazheve të mbetet e dendur dhe e ngjeshur, jo e
   përhapur deri te skajet. */
.orbit-gallery__stage {
	position: relative;
	width: min(1200px, 92vw);
	aspect-ratio: 16 / 9;
	transform-origin: 50% 50%;
}

.orbit-item {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--w, 220px);
	height: var(--h, 280px);
	margin-top: calc(var(--h, 280px) / -2);
	margin-left: calc(var(--w, 220px) / -2);
	border-radius: var(--radius-sm);
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
	will-change: transform, opacity;
}

.orbit-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(0%) brightness(100%);
	transition: filter 0.5s ease;
}

/* Nën ~768px, kutia e skenës (16:9, width: 92vw) bëhet shumë e shkurtër
   në krahasim me 100vh të detyruar — p.sh. ~200px lartësi brenda një
   seksioni ~800px, duke lënë hapësirë boshe të madhe sipër/poshtë (siç u
   raportua). Këtu seksioni ngushtohet për t'iu përshtatur lartësisë reale
   të përmbajtjes (skena + padding), jo ekranit të plotë — animacioni GSAP
   i orbitës (assets/js/events-orbit.js) nuk ndikohet, sepse pozicionohet
   brenda vetë .orbit-gallery__stage, jo relativ me lartësinë e seksionit. */
@media (max-width: 768px) {
	.orbit-gallery {
		min-height: 0;
		padding: calc(var(--header-height) + 32px) 16px 56px;
	}
}

/* Kur ndonjë imazh është nën hover, gjithë të tjerët errësohen dhe humbin
   ngjyrën — imazhi i vetë hover-uar përjashtohet nga :not(.is-hovered),
   ndaj mbetet me ngjyrat origjinale. */
.orbit-gallery.has-hover .orbit-item:not(.is-hovered) img {
	filter: grayscale(100%) brightness(25%);
}