/* ==========================================================================
 * ALX Campaigns — modulul „Campanii și concursuri" (căutare în hero + listă
 * cu carduri featured, rânduri, stare goală și paginare). v1.0.0.
 *
 * Fișier separat de alx-jobs.css / alx-showcase.css, cu tokenuri PROPRII sub
 * `.alx-campaigns` (vezi CONTRACT-alx-campaigns.md §2). Fiecare widget
 * Elementor randează rădăcina `<div class="alx-campaigns alxc-<nume>">`;
 * regulile de mai jos sunt organizate pe widget, în ordinea din contract
 * (§3 gazda de buton, §4.1 căutare, §4.2 listă), urmate de cele două
 * breakpoint-uri consolidate (1024px / 600px, desktop-first ca în restul
 * temei) și, la final, de allowlist-ul propriu de mișcare redusă.
 *
 * Modulul NU are JS; totul e server-rendered, deci nu există stări `.is-*`
 * puse din script — singura e `.is-current` din paginare, pusă de PHP.
 *
 * Versiunea de cache-busting e ALXC_VERSION din alx-campaigns.php (handle CSS
 * `alx-campaigns`, deps `['hello-elementor-child-style']` — vezi CONTRACT §1).
 * ========================================================================== */

.alx-campaigns {
	--alxc-dark:      #231F20;                  /* fundal hero; text/contur butoane pe deschis (Neutral/800 BG) */
	--alxc-ink:       #1C1717;                  /* titluri + meta rânduri (Neutral/900) */
	--alxc-paper:     #F6F5F0;                  /* fundal listă; text pe hero/carduri (Primary dark/50) */
	--alxc-gold:      #958759;                  /* linia aurie din hero (Primary dark/500) */
	--alxc-line-dark: rgba(230, 229, 224, .4);  /* borduri input/select pe fundal întunecat (#E6E5E0 40%) */
	--alxc-faint:     rgba(246, 245, 240, .58); /* placeholders + iconițe pe întunecat (#F6F5F0 58%) */
	--alxc-divider:   rgba(0, 0, 0, .2);        /* separatorii „|" pe fundal deschis */
	--alxc-divider-light: rgba(246, 245, 240, .58); /* separatorii „|" pe imagine */
	--alxc-font-display: 'Instrument Serif', Georgia, serif;
	--alxc-font-body:    'AauxNext', -apple-system, BlinkMacSystemFont, sans-serif;

	font-family: var(--alxc-font-body);
}

/* ============================================================ baze comune === */

/* Câmpurile de căutare au înălțime fixă (46px) CU bordură și padding incluse —
 * fără border-box, bordura ar împinge câmpurile la 48px și ar strica rândul
 * grid-ului aliniat cu butonul CAUTĂ. */
.alx-campaigns * {
	box-sizing: border-box;
}

/* Butoanele vin din sistemul de brand din style.css (.ag-btn-brown/-white/
 * -gradient + .elementor-button interior) — notch, gradient, borduri, hover,
 * toate de acolo. Aici rămâne DOAR gazda de layout, ca la jobs. */
.alxc-btn-host {
	display: inline-flex;
}

/* Plasă de siguranță pentru TOATE linkurile modulului: reset.css din tema
 * părinte pictează orice <a> nestilizat cu #c36 (roz, în afara paletei), iar
 * neutralizarea din style.css dă doar `inherit` — insuficient aici, unde
 * contractul cere culoare EXPLICITĂ + :hover + :focus-visible pe fiecare link.
 * `.elementor-button` e exclus: acelea sunt butoanele de brand, cu culorile
 * lor (cu !important) din style.css. Toate linkurile „de text" ale modulului
 * (paginare, reset căutare) au aceeași pereche ink → gold, deci o singură
 * regulă acoperă tot; componentele de mai jos adaugă doar tipografie/layout. */
.alx-campaigns a:not(.elementor-button),
.alx-campaigns a:not(.elementor-button):link,
.alx-campaigns a:not(.elementor-button):visited {
	color: var(--alxc-ink);
}

.alx-campaigns a:not(.elementor-button):hover,
.alx-campaigns a:not(.elementor-button):focus-visible {
	color: var(--alxc-gold);
}

/* Separatorul „|" din liniile de meta. PHP-ul emite spații normale în jurul
 * span-ului (`{Titlu} <span>|</span> {Tip}`), care la 14px fac ~4px fiecare —
 * marginea de 4px completează până la ~8px per parte, cât cere contractul.
 * Culoarea diferă după fundal, deci se dă contextual (card vs rând) mai jos. */
.alx-campaigns .alxc-sep {
	margin-inline: 4px;
}

/* ---------------------------------------------------- §4.1 căutare (hero) --- */
/* Widgetul e transparent — fundalul întunecat îl dă containerul Elementor al
 * hero-ului, deci `.alxc-search` nu are nevoie de nicio regulă proprie. */

.alx-campaigns .alxc-search__form {
	display: grid;
	/* Coloana `auto` se lățește exact cât gazda butonului CAUTĂ; `stretch`
	 * întinde gazda pe înălțimea rândului (46px, dată de câmpuri). */
	grid-template-columns: 1fr 1fr auto;
	align-items: stretch;
	gap: 16px;
	/* Reset defensiv: unele foi dau margin-bottom pe <form>. */
	margin: 0;
}

/* Câmpul e chiar <label>-ul: clic oriunde pe ramă focusează controlul nativ,
 * fără JS. Rama (bordura) stă pe label, nu pe input — de-aia și starea de
 * focus se mută pe label, prin :focus-within, mai jos. */
.alx-campaigns .alxc-search__field {
	position: relative; /* ancoră pentru caretul absolut al selectului */
	display: flex;
	align-items: center;
	gap: 8px;
	height: 46px;
	padding-inline: 12px;
	border: 1px solid var(--alxc-line-dark);
	background-color: transparent;
}

/* Modificatorii --title/--year nu au reguli proprii: vizual câmpurile sunt
 * identice, diferă doar prezența caretului (element separat). */

/* Outline-ul nativ e suprimat pe input/select (ar desena o a doua cutie ÎN
 * interiorul ramei); indicația de focus devine rama întreagă, luminată de la
 * 40% la plin — adaptarea pattern-ului din jobs (input:focus → border-color),
 * mutată pe label fiindcă acolo trăiește bordura. */
.alx-campaigns .alxc-search__field:focus-within {
	border-color: var(--alxc-paper);
}

.alx-campaigns .alxc-search__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	/* SVG-urile din PHP au stroke="currentColor", deci culoarea se dă de aici. */
	color: var(--alxc-faint);
}

/* 16px pe input nu e doar valoarea din Figma: sub 16px, iOS face zoom automat
 * la focus — mărimea asta îl previne. */
.alx-campaigns .alxc-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: transparent;
	border: 0;
	color: var(--alxc-paper);
	font-family: var(--alxc-font-body);
	font-size: 16px;
}

.alx-campaigns .alxc-search__input::placeholder {
	color: var(--alxc-faint);
	/* Firefox pune opacitate proprie pe placeholder — anulată, ca nuanța
	 * să fie chiar --alxc-faint, nu una și mai stinsă. */
	opacity: 1;
}

.alx-campaigns .alxc-search__input:focus {
	outline: none; /* starea vizibilă e :focus-within pe ramă, mai sus */
}

/* Select nativ „dezbrăcat": fără săgeata de sistem (appearance:none), caretul
 * e SVG-ul absolut de mai jos. Compromis acceptat de contract: textul de
 * start („Selectează anul") apare în --alxc-paper, ca orice valoare — un
 * <select> nu are ::placeholder. */
.alx-campaigns .alxc-search__select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	margin: 0;
	/* 20px dreapta: caretul absolut (dreapta 16px față de ramă) intră ~14px
	 * în cutia selectului — paddingul ține textul în afara lui. */
	padding: 0 20px 0 0;
	background-color: transparent;
	border: 0;
	color: var(--alxc-paper);
	font-family: var(--alxc-font-body);
	font-size: 16px;
	cursor: pointer;
}

.alx-campaigns .alxc-search__select:focus {
	outline: none; /* aceeași convenție ca la input */
}

/* Culoarea selectului (paper) s-ar moșteni pe <option> și în dropdown-ul
 * nativ, care pe unele platforme (Chrome/Windows) are fundal alb → text
 * aproape alb pe alb. Contractul lasă dropdown-ul pe stilul browserului,
 * deci opțiunilor li se dă înapoi o culoare închisă, atât. */
.alx-campaigns .alxc-search__select option {
	color: var(--alxc-ink);
}

.alx-campaigns .alxc-search__caret {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	/* triunghiul plin are fill="currentColor" în PHP */
	color: var(--alxc-paper);
	/* clicul trebuie să cadă prin caret în select, altfel colțul dreapta
	 * al câmpului devine „mort" */
	pointer-events: none;
}

/* Gazda submitului: `display:flex` + `align-self:stretch` o întind pe toată
 * înălțimea rândului de grid (46px, dată de câmpuri), iar butonul interior
 * preia înălțimea prin height:100% mai jos — mecanismul verificat la jobs. */
.alx-campaigns .alxc-search__submit-host {
	display: flex;
	align-self: stretch;
}

/* Scopat cu `.alxc-search__form` (0,3,0) ca să bată determinist
 * `.ag-btn-gradient .elementor-button { height:46px }` (0,2,0) al brandului,
 * indiferent de ordinea reală de încărcare a foilor de stil. `min-width` e o
 * proprietate diferită de `width` (brandul pune `width:max-content
 * !important`), deci rămâne activă necondiționat. Fără :hover/:focus proprii:
 * nu suprascriem nimic vizual din brand, deci stările vin întregi de acolo,
 * iar capcana `button:hover{background:transparent}` din style.css (0,1,1) e
 * deja bătută de brandul însuși la (0,2,0). */
.alx-campaigns .alxc-search__form .alxc-search__submit {
	height: 100%;
	min-width: 200px;
}

/* ------------------------------------------- §4.2-A carduri featured --- */
/* Secțiunea listă stă pe fundalul --alxc-paper dat de containerul Elementor;
 * widgetul rămâne transparent. `.alxc-list` NU are padding propriu (contract,
 * valorile finale): fiecare zonă interioară își poartă singură aerul —
 * featured 10px jos, rândurile 80px sus/jos, paginarea 40px jos. Banda de
 * 10px dintre hero și carduri vine din bordura de jos a hero-ului, nu de aici
 * (cardurile ating hero-ul; containerul Elementor al listei are padding 0). */

.alx-campaigns .alxc-featured {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	/* 10px lateral (marginile față de viewport) + 10px jos, simetric cu
	 * gap-ul dintre carduri; sus 0 — cardurile ating banda hero-ului */
	padding: 0 10px 10px;
}

.alx-campaigns .alxc-card {
	position: relative;
	aspect-ratio: 1 / 1;
	/* imaginea cover poate depăși cutia pătrată — o tăiem la ramă */
	overflow: hidden;
}

.alx-campaigns .alxc-card__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Overlay-ul poartă și scrimul de lizibilitate. Geometria e cea din Figma
 * (Frame 220: bandă de 182px lipită de baza cardului) — nu o fixăm în px, ci o
 * lăsăm să rezulte din conținut + padding 35/48, ceea ce dă exact 182px pe
 * desktop și se adaptează singură când textul curge pe mai multe rânduri.
 * Gradientul are TREI opriri, exact ca fill-ul din Figma (#1B1819 la 0% / 45% /
 * 100% opacitate), scalate cu 0.9 — opacitatea cerută de client. Prima oprire
 * TREBUIE să fie complet transparentă: cu ea la 12.6% (varianta „gradient 2")
 * banda începea brusc și se vedea ca o linie orizontală peste imagine.
 * Opacitatea stă în alfa, nu pe element: `opacity` ar fi stins și textul, nu
 * doar fundalul. Overlay-ul e după <img> în DOM și ambele sunt poziționate,
 * deci ordinea din sursă îl pictează deasupra — fără z-index. */
.alx-campaigns .alxc-card__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 52px 24px 48px;
	text-align: center;
	background: linear-gradient(
		180deg,
		rgba(27, 24, 25, 0) 0%,
		rgba(27, 24, 25, 0.45) 22%,
		rgba(27, 24, 25, 0.8) 55%,
		rgba(27, 24, 25, 1) 100%
	);
}

/* Lățimea e `fit-content` centrat pentru că linia aurie de deasupra (vezi mai
 * jos) trebuie să fie exact cât textul, ca în Figma (Rectangle 57 = „Fill" în
 * Frame 210, care la rândul lui se strânge pe text). */
.alx-campaigns .alxc-card__meta {
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	font-family: var(--alxc-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 22.5px;
	color: var(--alxc-paper);
}

/* Linia aurie de deasupra titlului de pe card — aceeași semnătură vizuală ca
 * linia din hero (Rectangle 57: 2.72px ≈ 3px, #958759, 11px până la text). */
.alx-campaigns .alxc-card__meta::before {
	content: "";
	display: block;
	height: 3px;
	margin-bottom: 11px;
	background-color: var(--alxc-gold);
}

/* pe imagine, separatorul „|" e din varianta luminoasă */
.alx-campaigns .alxc-card__meta .alxc-sep {
	color: var(--alxc-divider-light);
}

.alx-campaigns .alxc-card__actions {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 16px;
}

/* ---------------------------------------------- §4.2-B rânduri de listă --- */

.alx-campaigns .alxc-rows {
	display: flex;
	flex-direction: column;
	gap: 64px;
	/* coloana îngustă centrată din Figma; max-width previne overflow-ul
	 * orizontal pe viewporturi mai mici decât 376 înainte de breakpointul
	 * de 600 să preia controlul */
	width: 376px;
	max-width: 100%;
	margin-inline: auto;
	/* Aerul vertical al rândurilor e pe padding, nu pe margin condiționat de
	 * featured: 80 sus/jos acoperă identic pagina 1 (sub carduri) și paginile
	 * ≥2 (fără carduri) — valorile finale măsurate din Figma. */
	padding-block: 80px;
}

/* Titlul e <h3> — kitul global (post-6.css, încărcat DUPĂ fișierul ăsta)
 * suprascrie doar h2 (49px la 0,1,1), dar contractul cere (0,2,1)+ pe ORICE
 * heading din modul, preventiv; selectorul de aici e (0,3,0) și închide
 * discuția indiferent ce primește h3 în viitor în kit. */
.alx-campaigns .alxc-row .alxc-row__title {
	margin: 0;
	font-family: var(--alxc-font-display);
	font-weight: 400;
	font-size: 31px;
	line-height: 33px;
	letter-spacing: 0.006em; /* 0.6% din Figma */
	color: var(--alxc-ink);
}

.alx-campaigns .alxc-row__meta {
	/* 8px sub titlu, din contract; restul marginilor la zero ca <p>-ul să nu
	 * aducă marginile temei */
	margin: 8px 0 0;
	font-family: var(--alxc-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 22.5px;
	color: var(--alxc-ink);
}

/* pe fundal deschis, separatorul e din varianta întunecată */
.alx-campaigns .alxc-row__meta .alxc-sep {
	color: var(--alxc-divider);
}

.alx-campaigns .alxc-row__actions {
	display: flex;
	gap: 16px;
	margin-top: 16px;
}

/* ------------------------------------------ §4.2-C stare goală + §4.2-D --- */

.alx-campaigns .alxc-empty {
	margin: 0;
	padding-block: 64px;
	font-family: var(--alxc-font-display);
	font-weight: 400;
	font-size: 20px;
	text-align: center;
	color: var(--alxc-ink);
}

/* Culorile linkului de reset (ink → gold) vin din plasa de siguranță de sus;
 * aici rămân sublinierea și tranziția declarată explicit (vezi allowlist-ul
 * reduced-motion de la final). */
.alx-campaigns .alxc-empty a {
	text-decoration: underline;
	transition: color 0.3s ease;
}

/* Distanța față de rânduri o dă padding-block-ul lor de 80 — margin-top: 0
 * e explicit ca <nav> să nu aducă margini din altă parte; 40px jos închid
 * secțiunea (valorile finale din contract). */
.alx-campaigns .alxc-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 0;
	padding-bottom: 40px;
}

/* Numerele și săgețile împart aceeași cutie de minim 28×28: ținta de atins
 * din contract e pe link, nu pe glifă — chevronul de 10px ar fi imposibil de
 * nimerit altfel. Culorile (ink → gold pe hover/focus) vin din plasa de sus. */
.alx-campaigns .alxc-pagination__link,
.alx-campaigns .alxc-pagination__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	min-height: 28px;
	text-decoration: none;
	transition: color 0.3s ease;
}

.alx-campaigns .alxc-pagination__link,
.alx-campaigns .alxc-pagination__dots {
	font-family: var(--alxc-font-body);
	font-weight: 500;
	font-size: 14px;
}

.alx-campaigns .alxc-pagination__dots {
	color: var(--alxc-ink);
}

/* Pagina curentă = subliniere discretă, nu bold și nu chip — contractul e
 * explicit; offset-ul de 4px o coboară sub linia de bază ca în Figma. */
.alx-campaigns .alxc-pagination__link.is-current {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

/* chevronul ia culoarea linkului prin stroke="currentColor" din PHP;
 * modificatorii --prev/--next nu au reguli — direcția e în path-ul SVG */
.alx-campaigns .alxc-pagination__arrow svg {
	display: block;
	width: 10px;
	height: 10px;
}

/* Mesajul din editorul Elementor când nu există postări — doar în editor,
 * niciodată pe front; stilul îl face recognoscibil ca placeholder (ramă
 * întreruptă), pattern preluat de la jobs. */
.alx-campaigns .alxc-editor-empty {
	margin: 0;
	padding: 24px;
	border: 1px dashed var(--alxc-divider);
	font-family: var(--alxc-font-body);
	font-size: 14px;
	text-align: center;
	color: var(--alxc-ink);
}

/* ==========================================================================
 * Breakpoint-uri consolidate — desktop-first, ca în alx-jobs.css: regulile de
 * bază presupun desktop, blocurile de mai jos suprascriu pentru tabletă/mobil.
 * Un singur bloc per prag, cu widget-urile grupate pe subsecțiuni.
 * ========================================================================== */

@media (max-width: 1024px) {
	/* --- căutare: o singură coloană (gap-ul rămâne 16 din bază) --- */
	.alx-campaigns .alxc-search__form {
		grid-template-columns: 1fr;
	}

	/* Pe rândul propriu, submitul nu mai are câmpuri de 46px care să-i dea
	 * înălțimea prin stretch (height:100% ar colapsa la conținut), deci
	 * înălțimea de brand se fixează la loc explicit. Full-width FĂRĂ
	 * !important: brandul forțează `width:max-content !important` +
	 * `max-width:100% !important`, dar nu atinge `min-width` — iar în
	 * rezolvarea CSS min-width câștigă peste amândouă. */
	.alx-campaigns .alxc-search__form .alxc-search__submit {
		height: 46px;
		min-width: 100%;
	}

	/* --- featured: sub 2 coloane cardurile ar cădea sub ~700px și overlay-ul
	 * devine ilizibil — o singură coloană (gap-ul rămâne 10) --- */
	.alx-campaigns .alxc-featured {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	/* --- rânduri: coloana fixă de 376 devine fluidă, cu aer lateral 24 --- */
	.alx-campaigns .alxc-rows {
		width: auto;
		padding-inline: 24px;
	}

	/* clamp-ul din contract: nu scade sub 26, nu urcă peste valoarea desktop */
	.alx-campaigns .alxc-row .alxc-row__title {
		font-size: clamp(26px, 7vw, 31px);
	}

	/* Pe telefon overlay-ul intră ÎN FLUX, iar cardul devine coloană flex cu
	 * conținutul lipit de bază. Motivul e o problemă reală, nu estetică: cu
	 * overlay-ul absolut, textul pe două rânduri plus butoanele ajungeau la
	 * ~253px dintr-un card de 355px și dădeau pe dinafară, fiindcă un element
	 * absolut nu contribuie la înălțimea părintelui. Așa, `aspect-ratio` ține
	 * pătratul cât timp conținutul încape și lasă cardul să crească atunci
	 * când nu încape. Imaginea rămâne absolută, deci acoperă orice înălțime. */
	.alx-campaigns .alxc-card {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	/* `relative`, NU `static`: overlay-ul trebuie să rămână în flux (ca să dea
	 * înălțime cardului), dar și POZIȚIONAT. Cu `static` imaginea de deasupra
	 * — care e `absolute` — se picta peste el, fiindcă în ordinea de pictare
	 * elementele poziționate vin după conținutul nepoziționat: titlul și
	 * gradientul dispăreau complet pe telefon. Fiind mai jos în DOM decât
	 * <img> și având același `z-index: auto`, `relative` îl aduce deasupra. */
	.alx-campaigns .alxc-card__overlay {
		position: relative;
		padding: 28px 20px 24px;
	}

	.alx-campaigns .alxc-card__meta {
		font-size: 13px;
	}

	/* Butoanele de pe card: perechea REGULAMENT+CÂȘTIGĂTORI depășea cu puțin
	 * lățimea utilă a unui card de 355px, se rupea pe două rânduri și umfla
	 * banda peste jumătate de card. Strângem DOAR paddingul lateral, ca să
	 * păstrăm tipografia de brand (style.css impune 15px sub 767px).
	 * `!important` e obligatoriu aici, nu o scurtătură: regula de brand e ea
	 * însăși `padding: 8px 24px !important`, deci specificitatea nu ajunge.
	 * Selectorul e scopat la `.alxc-card__actions`, deci butoanele `.ag-btn-*`
	 * din restul site-ului rămân neatinse; înălțimea de 46px vine tot din
	 * brand, deci ținta de atins rămâne conformă. */
	.alx-campaigns .alxc-card__actions {
		gap: 12px;
	}

	.alx-campaigns .alxc-card__actions .elementor-button {
		padding-inline: 12px !important;
	}

	/* Plasă de siguranță pentru titluri foarte lungi: dacă tot nu încap pe un
	 * rând, curg pe două în loc să iasă din card. */
	.alx-campaigns .alxc-card__actions,
	.alx-campaigns .alxc-row__actions {
		flex-wrap: wrap;
	}
}

/* ==========================================================================
 * prefers-reduced-motion — ALLOWLIST proprie (nu blanket): enumeră explicit
 * DOAR selectorii `.alxc-*` cărora li s-a dat transition mai sus. Fără
 * !important (regula fișierului): selectorii sunt IDENTICI cu cei care au
 * declarat tranzițiile și stau mai târziu în aceeași foaie, deci câștigă
 * prin ordinea sursei. Tranzițiile butoanelor de brand aparțin style.css —
 * nu le atingem de aici. Modulul nu declară niciun @keyframes.
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.alx-campaigns .alxc-empty a,
	.alx-campaigns .alxc-pagination__link,
	.alx-campaigns .alxc-pagination__arrow {
		transition: none;
	}
}