/* -------------------------------------------------- */
/* Arena Casino — faqja "Career": intro + tabelë pozicionesh, ku çdo       */
/* rresht hapet/mbyllet (accordion, shih assets/js/career-page.js) për të  */
/* treguar detajet e plota. Butonat ripërdorin .btn-gold ekzistuese        */
/* (main.css) — të njëjtin font, madhësi dhe border-radius si gjithkund   */
/* tjetër në sit.                                                          */
/* -------------------------------------------------- */

.career-intro {
	max-width: 900px;
	margin: 0 auto;
	padding: calc(var(--header-height) + 64px) 24px 40px;
	text-align: center;
}

.career-title {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: clamp(40px, 6vw, 72px);
	line-height: 1.1;
	/* Capitalize, jo uppercase — çdo fjalë e shkruar siç është (Grow Your
	   Career With Us), pa e detyruar CSS-i në të gjitha të mëdha. */
	text-transform: capitalize;
	color: var(--color-text);
	/* Shpërndan rreshtat në mënyrë të barabartë kur titulli mbështillet
	   (p.sh. jo një fjalë e vetme "Us" e vetmuar në rreshtin e fundit) —
	   veçanërisht e dobishme për SQ/DE/IT, ku titulli shpesh është më i
	   gjatë se anglishtja. Injorohet pa efekt në browser-at që s'e mbulojnë. */
	text-wrap: balance;
	margin: 0 0 24px;
}

.career-lead {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 17px;
	line-height: 1.7;
	color: var(--color-text-muted);
	margin: 0 0 8px;
}

.career-table {
	max-width: 1100px;
	margin: 0 auto 96px;
	padding: 0 24px;
}

.career-table__head {
	display: grid;
	grid-template-columns: 1fr 140px 130px;
	gap: 24px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--color-border);
}

.career-table__head span {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-gold);
}

.career-row {
	border-bottom: 1px solid var(--color-border);
}

.career-row__head {
	display: grid;
	grid-template-columns: 1fr 140px 130px;
	gap: 24px;
	align-items: center;
	padding: 20px 0;
	cursor: pointer;
}

.career-row__position {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: clamp(16px, 1.6vw, 19px);
	color: var(--color-text);
}

.career-row__chevron {
	flex-shrink: 0;
	display: inline-block;
	color: var(--color-gold);
	font-size: 18px;
	line-height: 1;
	transition: transform 0.3s ease;
}

.career-row__head[aria-expanded='true'] .career-row__chevron {
	transform: rotate(90deg);
}

.career-row__contract {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.career-row__apply {
	justify-self: start;
	/* .btn-gold ka margin-top:24px si default (mendon veten brenda një
	   heroje) — këtu është brenda një rreshti tabele, ndaj rivendoset. */
	margin-top: 0;
	padding: 10px 26px;
}

.career-row__detail {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.45s ease, opacity 0.3s ease;
}

.career-row__detail-inner {
	padding: 4px 0 32px;
}

.career-detail__intro {
	font-size: 15px;
	line-height: 1.75;
	color: var(--color-text-muted);
	margin: 0 0 22px;
	max-width: 780px;
}

.career-detail__label {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-gold);
	margin: 22px 0 10px;
}

.career-detail__list {
	margin: 0;
	padding-left: 20px;
	color: var(--color-text-muted);
	font-size: 15px;
	line-height: 1.85;
}

.career-detail__info {
	margin: 24px 0 0;
	font-size: 14px;
	letter-spacing: 0.5px;
	color: var(--color-text-muted);
}

.career-detail__info a {
	color: var(--color-gold-light);
}

.career-detail__notice {
	margin: 12px 0 0;
	max-width: 780px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--color-text-muted);
	opacity: 0.85;
}

.career-detail__notice a {
	color: var(--color-gold-light);
}

@media (max-width: 720px) {
	.career-lead--secondary {
		display: none;
	}

	.career-table__head {
		display: none;
	}

	.career-row__head {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"position apply"
			"contract apply";
		row-gap: 4px;
		column-gap: 16px;
	}

	.career-row__position {
		grid-area: position;
	}

	.career-row__contract {
		grid-area: contract;
	}

	.career-row__apply {
		grid-area: apply;
		align-self: center;
		justify-self: end;
	}
}