/* -------------------------------------------------- */
/* Arena Casino — faqja "About Us": 3 skena të stivosura (si faqja Casino) */
/* brenda një #about-scroll të vetëm "pin"-uar (GSAP ScrollTrigger) — çdo  */
/* skenë e re rrëshqet nga poshtë e mbulon plotësisht të mëparshmen, ndërsa*/
/* viewport-i mbetet fiksuar dhe vetëm scroll-i vazhdon (shih              */
/* assets/js/about-scroll.js). Teksti mbetet gjithmonë i qendërzuar; 6     */
/* foto (3 majtas, 3 djathtas) hyjnë rreth tij në një kompozim kolazh      */
/* premium ndërsa vetë skena mbërrin.                                     */
/* -------------------------------------------------- */

.about-scroll {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	background: var(--color-bg);
}

.about-scene {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	/* E domosdoshme si sfond i plotë/opak — kur një skenë rrëshqet sipër,
	   duhet ta mbulojë skenën poshtë saj plotësisht, jo vetëm aty ku ka
	   foto/tekst. */
	background: var(--color-bg);
}

.about-scene__stage {
	position: relative;
	width: 100%;
	height: 100%;
}

.about-scene__content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 20;
	text-align: center;
	max-width: 620px;
	width: 88%;
	padding: 0 24px;
}

.about-scene__title {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: clamp(34px, 5.5vw, 64px);
	line-height: 1.05;
	letter-spacing: 1px;
	/* Capitalize, jo uppercase — njësoj si të gjitha titujt e tjerë të
	   faqeve (shih .career-title, .page-intro__title etj.). */
	text-transform: capitalize;
	/* Themed (jo --color-white fiks) — e zezë në light mode, e bardhë në
	   dark mode, sepse vetë .about-scene ndjek --color-bg të temës. */
	color: var(--color-text);
	text-wrap: balance;
	margin: 0 0 22px;
}

.about-scene__desc {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: clamp(15px, 1.6vw, 18px);
	line-height: 1.7;
	/* Themed, njësoj si titulli — ndjek --color-text-muted të temës. */
	color: var(--color-text-muted);
	margin: 0 auto;
}

.about-scene__image {
	position: absolute;
	border-radius: var(--radius-sm);
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
	z-index: 5;
	will-change: transform, opacity;
}

.about-scene__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Pozicionet e 6 "vendeve" të kolazhit — të njëjta për të tri skenat,
   vetëm fotot ndryshojnë. 1-3 majtas, 4-6 djathtas. */
.about-scene__image[data-slot='1'] { top: 8%;   left: 4%;   width: 290px; height: 370px; }
.about-scene__image[data-slot='2'] { top: 38%;  left: 0%;   width: 250px; height: 315px; }
.about-scene__image[data-slot='3'] { top: 70%;  left: 7%;   width: 275px; height: 195px; }
.about-scene__image[data-slot='4'] { top: 10%;  right: 4%;  width: 275px; height: 340px; }
.about-scene__image[data-slot='5'] { top: 42%;  right: 1%;  width: 260px; height: 325px; }
.about-scene__image[data-slot='6'] { top: 68%;  right: 6%;  width: 285px; height: 205px; }

@media (max-width: 1180px) {
	.about-scene__image[data-slot='1'] { width: 220px; height: 280px; }
	.about-scene__image[data-slot='2'] { width: 195px; height: 245px; }
	.about-scene__image[data-slot='3'] { width: 205px; height: 150px; }
	.about-scene__image[data-slot='4'] { width: 215px; height: 265px; }
	.about-scene__image[data-slot='5'] { width: 200px; height: 250px; }
	.about-scene__image[data-slot='6'] { width: 220px; height: 160px; }
}

/* Tablet — të gjashta fotot mbeten të dukshme, thjesht më të vogla dhe
   më afër skajeve, që teksti qendror të ketë vend të mjaftueshëm. */
@media (max-width: 900px) {
	.about-scene__image[data-slot='1'] { top: 6%;  left: 2%;  width: 140px; height: 180px; }
	.about-scene__image[data-slot='2'] { top: 38%; left: 0%;  width: 125px; height: 158px; }
	.about-scene__image[data-slot='3'] { top: 76%; left: 3%;  width: 130px; height: 95px; }
	.about-scene__image[data-slot='4'] { top: 6%;  right: 2%; width: 135px; height: 170px; }
	.about-scene__image[data-slot='5'] { top: 38%; right: 0%; width: 120px; height: 152px; }
	.about-scene__image[data-slot='6'] { top: 74%; right: 3%; width: 135px; height: 98px; }
}

/* Mobile — të gjashta fotot mbeten të dukshme, tani më të mëdha dhe më
   afër tekstit qendror (jo të shtyra ngushtë te skajet) — teksti mban
   z-index më të lartë, ndaj foto+tekst mund të mbivendosen pak pa e
   fshehur kurrë tekstin. */
@media (max-width: 600px) {
	.about-scene__content {
		width: 94%;
	}

	.about-scene__image[data-slot='1'] { top: 2%;  left: 6%;  width: 150px; height: 195px; }
	.about-scene__image[data-slot='2'] { top: 32%; left: 4%;  width: 130px; height: 165px; }
	.about-scene__image[data-slot='3'] { top: 80%; left: 8%;  width: 145px; height: 105px; }
	.about-scene__image[data-slot='4'] { top: 2%;  right: 6%; width: 145px; height: 188px; }
	.about-scene__image[data-slot='5'] { top: 32%; right: 4%; width: 125px; height: 158px; }
	.about-scene__image[data-slot='6'] { top: 78%; right: 7%; width: 150px; height: 108px; }
}