/* -------------------------------------------------- */
/* Arena Casino — faqja "FAQ": dy kolona brenda një seksioni "pin"-uar    */
/* (GSAP ScrollTrigger, shih assets/js/faq-section.js). Titulli majtas    */
/* mbetet fiks sepse gjithë seksioni është "pin"-uar; kartat djathtas     */
/* shfaqen një nga një ndërsa scroll-i vazhdon, dhe mbeten të gjitha të   */
/* dukshme (nuk mbulojnë njëra-tjetrën — një listë që rritet).            */
/* -------------------------------------------------- */

.faq-section {
	/* Themed — ndjek --color-bg të temës, jo e zezë fikse. */
	background: var(--color-bg);
}

.faq-pin {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	display: flex;
	align-items: center;
	padding: calc(var(--header-height) + 32px) 24px 32px;
}

.faq-layout {
	position: relative;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(260px, 400px) 1fr;
	gap: 64px;
	align-items: center;
}

.faq-left {
	display: flex;
	flex-direction: column;
}

.faq-title {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: clamp(40px, 6vw, 72px);
	line-height: 1;
	/* Capitalize, jo uppercase — njësoj si të gjitha titujt e tjerë të
	   faqeve; pa efekt të dukshëm këtu vetë ("FAQ" është akronim), por
	   mban deklaratën e njëtrajtshme. */
	text-transform: capitalize;
	/* Themed — e zezë në light mode, e bardhë në dark mode. */
	color: var(--color-text);
	text-wrap: balance;
	margin: 0 0 20px;
}

.faq-intro {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.7;
	color: var(--color-text-muted);
	max-width: 340px;
	margin: 0;
}

.faq-cards {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.faq-card {
	/* Themed — sfond+kufi ndjekin temën, jo vlera fikse errësire. */
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	padding: 22px 28px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
	will-change: transform, opacity;
}

.faq-card__toggle {
	grid-column: 1;
	display: flex;
	align-items: baseline;
	gap: 18px;
	width: 100%;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	text-align: left;
	cursor: pointer;
	color: inherit;
	font: inherit;
}

.faq-card__index {
	flex-shrink: 0;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	color: var(--color-gold);
}

.faq-card__question {
	flex: 1;
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: clamp(17px, 1.6vw, 21px);
	line-height: 1.35;
	color: var(--color-text);
}

.faq-card__icon {
	/* I fshehur në desktop — layout-i dy-kolonësh e shfaq përgjigjen
	   gjithmonë, ndaj ikona +/− s'ka funksion aty (shih breakpoint-in
	   mobile më poshtë, ku bëhet përsëri e dukshme dhe funksionale). */
	display: none;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border: 1px solid rgba(201, 162, 75, 0.35);
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	color: var(--color-gold-light);
	font-size: 16px;
	line-height: 1;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.faq-card__toggle:hover .faq-card__icon {
	background: var(--color-gold);
	color: var(--color-bg);
}

.faq-card__answer-wrap {
	grid-column: 2;
}

.faq-card__answer {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 15px;
	line-height: 1.7;
	color: var(--color-text-muted);
}

@media (max-width: 1080px) {
	.faq-layout {
		grid-template-columns: minmax(220px, 320px) 1fr;
		gap: 40px;
	}

	.faq-card {
		padding: 18px 22px;
		gap: 20px;
	}
}

/* Nën 860px: karta bëhet një kolonë e vetme (pyetja sipër, përgjigja
   poshtë), dhe përgjigja mund të "palohet" me klikun mbi ikonën +/− —
   e vetmja pikë ku ai buton bëhet vërtet funksional pamor. */
@media (max-width: 860px) {
	.faq-pin {
		position: static;
		height: auto;
		overflow: visible;
		padding: 48px 20px;
	}

	.faq-layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.faq-intro {
		max-width: none;
	}

	.faq-card {
		grid-template-columns: 1fr;
	}

	.faq-card__icon {
		display: flex;
	}

	.faq-card__answer-wrap {
		grid-column: 1;
		overflow: hidden;
		max-height: 400px;
		margin-top: 14px;
		transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
		opacity: 1;
	}

	.faq-card.is-collapsed .faq-card__answer-wrap {
		max-height: 0;
		margin-top: 0;
		opacity: 0;
	}
}