/* HSZK: programok, pályázatok, naptár
 *
 * A ProgramokB és PalyazatokB artboardok alapján, egy tudatos eltéréssel: a
 * programok banner-kártyaként jelennek meg, nem szöveges sorként. Indok a
 * termék célja — a gyűjtőoldalnak forgalmat kell irányítania az eseményekre,
 * és a HSZK minden programhoz plakátot ad. A terv tipográfiai nyelve
 * (sarok 0, hajszálvonal, Josefin címek, kisbetűs címkék) változatlan.
 *
 * Szabály itt is: kizárólag var(--…), beégetett hex nem.
 */

.archivum-fej { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.archivum-fej h1 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.12; }

.programok-fej {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 32px;
}
.archivum-cim { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }

/* Nézetváltó: egy keret, benne két egyenrangú gomb — a terv szerint. */
.nezet-valto { display: flex; border: 1px solid var(--ink); }
.nezet-gomb {
	display: inline-flex;
	align-items: center;
	min-height: var(--hit);
	padding: 0 18px;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}
.nezet-gomb[aria-current="true"] { background: var(--ink); color: var(--paper); }
.nezet-gomb[aria-current="true"]:hover { color: var(--paper); }

.szurok-sav {
	padding: 14px 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	margin-bottom: 36px;
}
.szuro-jelolok { gap: 8px; }

/* A két logikai szűrő nem csempe, hanem jelölő: be- és kikapcsolható
 * állapot, nem egy készletből való választás. Ezért van pipahelye. */
.jelolo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--hit);
	padding: 0 14px;
	border: 1px solid var(--rule);
	font-size: 13px;
	white-space: nowrap;
}
.jelolo::before {
	content: "";
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	border: 1px solid var(--ink-2);
}
.jelolo[aria-current="true"] { border-color: var(--ink); }
.jelolo[aria-current="true"]::before {
	background: var(--ink);
	border-color: var(--ink);
	box-shadow: inset 0 0 0 2px var(--paper);
}

/* ------------------------------------------------------------------ */
/* Programok — banner-kártyák, napokra tagolva                        */
/* ------------------------------------------------------------------ */

.program-napok { display: flex; flex-direction: column; gap: 36px; }

/* A napcímke teljes szélességben, hajszálvonallal — nem 180 px-es oldalsó
 * hasábban, mint a tervben. Kártyák mellett az oldalhasáb üresen maradna:
 * a legtöbb napra egy program jut. */
.program-nap-cimke {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 14px;
	font-size: 22px;
	line-height: 1.2;
}
.program-nap-cimke::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--rule);
}

.program-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* A kártya egyben kattintható egység: szegély jelzi a határát, és a
 * kiterjesztett link az egészet célponttá teszi. */
.program-kartya {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	border: 1px solid var(--rule);
	background: var(--paper);
	transition: border-color 0.15s ease;
}
.program-kartya:hover { border-color: var(--ink); }

/* A plakát vezet. 300 px-en a HSZK arculati munkái olvashatók, 72 px-en
 * nem voltak azok. */
/* 1 1 300px, nem 0 0 300px.
 *
 * A törzs 999-es `flex-grow`-ja miatt szélesen minden maradékot a szöveg
 * kap, tehát a plakát 300 px marad. Ha viszont a kártya törik — mobilon
 * mindig —, a kép egyedül marad a sorában, és KI KELL töltenie a
 * szélességet. Fix bázissal 300 px-en állt meg, és a kártya jobb szélén
 * fehér csík maradt. Ugyanaz a hiba volt a kiemelt cikkek képén. */
.kartya-kep { flex: 1 1 300px; max-width: 100%; align-self: stretch; }
.kartya-kep img,
.kartya-potlas {
	display: block;
	width: 100%;
	/* A forrásképek 1.91:1 arányúak; ettől eltérve vágnánk a plakátot. */
	aspect-ratio: 1.91;
	height: auto;
	min-height: 0;
	object-fit: cover;
}
/* A kép nélküli programok helyőrzője SZÁNDÉKOSAN halk.
 *
 * Előbb a HSZK tarka mintáját tettem ide, de az aranysárga csempe hangosabb
 * volt, mint a valódi plakátok — a hierarchia megfordult: a kép nélküli
 * programok vonzották a szemet. A helyőrző feladata kitölteni a helyet, nem
 * versenyezni a tartalommal. */
.kartya-potlas {
	display: flex;
	aspect-ratio: 1.91;
	align-items: center;
	justify-content: center;
	background: var(--paper-2);
	border-right: 1px solid var(--rule);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 0.1em;
	color: var(--ink-2);
}

.kartya-torzs {
	flex: 999 1 320px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 18px 20px;
}

/* A CTA a kártya jobb szélére kerül, függőlegesen középre.
 *
 * Korábban a törzs alján állt, és a kártya jobb felén 500 px üres maradt —
 * egy forgalomirányításra szánt felületen a legfontosabb gomb nem lehet a
 * bal alsó sarokban, miközben a jobb fele üres. */
.kartya-cta-hely {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding: 18px 20px 18px 8px;
	margin-left: auto;
}

.program-fej {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
}

/* Az időpont a kártya legerősebb szöveges eleme a cím után. */
.program-ido {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 19px;
	line-height: 1;
	color: var(--ink);
}

/* Fix HSZK-zöld, nem az API `szinHex`-e: következetes jelölő arról, hogy a
 * kártya a HSZK-tól jön, nem jelmagyarázat nélküli színkód. */
.program-pont {
	flex: 0 0 10px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--egyseg-hszk-zold);
}

.program-cim {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(19px, 2vw, 22px);
	line-height: 1.2;
}
.program-meta { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.program-cta { margin-top: 4px; }

.allapot {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 7px;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--on-color);
}

/* A teljes kártya kattintható, nem csak a cím.
 *
 * Kiterjesztett linkkel: a cím linkje egy áttetsző `::after`-rel kitakarja a
 * kártyát. Így EGYETLEN link marad a képernyőolvasónak és a Tab-sorrendben —
 * nem ágyazunk linket linkbe, és nem szórjuk tele a kártyát azonos célú
 * linkekkel. */
.sor-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* A CTA-nak saját célja van (jelentkezés, jegy), ezért a kiterjesztett
 * link FÖLÖTT áll — nem nyelheti el. */
.program-cta,
.palyazat-muvelet,
.palyazat-cimkek { position: relative; z-index: 2; }

/* ------------------------------------------------------------------ */
/* Pályázatlista                                                      */
/* ------------------------------------------------------------------ */

.palyazat-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 2px solid var(--ink);
}

.palyazat-sor {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 32px;
	padding: 22px 12px;
	margin-inline: -12px;
	border-bottom: 1px solid var(--rule);
}
.palyazat-sor:hover { background: var(--paper-2); }

.palyazat-hatarido {
	flex: 0 0 170px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

/* 26 px: a határidő az első kérdés egy pályázatnál, nem a cím. */
.hatarido-nap {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 26px;
	line-height: 1;
	color: var(--ink);
}
.hatarido-folyamatos {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 22px;
	line-height: 1;
	color: var(--ink-2);
}

.palyazat-torzs {
	flex: 999 1 380px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.palyazat-cim {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
}
.palyazat-leiras { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.palyazat-kiiro { font-size: 13px; color: var(--ink-2); }

.palyazat-cimkek { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.cimke-korvonal {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 10px;
	border: 1px solid var(--rule);
	font-size: 12px;
	white-space: nowrap;
}

.palyazat-muvelet { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------------------ */
/* Naptár                                                             */
/* ------------------------------------------------------------------ */

.naptar { display: flex; flex-direction: column; gap: 12px; }

.naptar-fej {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.naptar-honap { font-size: 22px; }
.ikon-gomb.vonalas { border: 1px solid var(--rule); }

/* A rács 720 px alatt nem olvasható, ezért saját görgetődobozban áll
 * (§310) — a vízszintes görgetés itt szándékos és elszigetelt, nem az
 * oldal egészére kiterjedő hiba. */
.naptar-gorgeto { overflow-x: auto; overscroll-behavior-x: contain; }

.naptar-racs { min-width: 720px; }
.naptar-sor { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }

.naptar-fejcella {
	padding: 10px;
	border-right: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-2);
}
.naptar-fejcella:last-child { border-right: 0; }

.naptar-cella {
	min-height: 112px;
	padding: 6px;
	border-right: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.naptar-cella:nth-child(7n) { border-right: 0; }
.naptar-ures { background: var(--paper-2); }
.naptar-ma { box-shadow: inset 0 0 0 2px var(--gold); }

.naptar-szam {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
	color: var(--ink-2);
}

/* A zöld csipen aubergine a szöveg: a §305 szerint zöld felületen soha nem
 * lehet fehér felirat. */
.naptar-csip {
	display: block;
	padding: 4px 6px;
	background: var(--egyseg-hszk-zold);
	color: var(--aubergine);
	font-size: 12px;
	line-height: 1.25;
}
.naptar-csip:hover { color: var(--aubergine); }

/* ------------------------------------------------------------------ */
/* Oldalsávi listák                                                   */
/* ------------------------------------------------------------------ */

/* Önálló komponens, nem a banner-kártya kicsinyítése. 300 px-es hasábban a
 * plakát olvashatatlan folt, három színes állapotcsip pedig hangosabb a
 * címnél — pedig a cím a kattintási célpont. */
.oldal-lista {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.oldal-sor {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 8px;
	margin-inline: -8px;
	border-bottom: 1px solid var(--rule);
}
.oldal-sor:hover { background: var(--paper-2); }

/* Egységes körjelölő naptárikonnal, fölötte arany ívvel — a terv szerint.
 * Egységes, mert itt a jelölő feladata nem az, hogy megmutassa a programot,
 * hanem hogy a lista ritmust kapjon és a sorok elkülönüljenek. */
.oldal-jel {
	position: relative;
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--paper-2);
	color: var(--ink-2);
}

/* Az arany ív a HSZK-jelölő: akkor is ott van, ha plakát tölti ki a kört,
 * és akkor is, ha csak a naptárikon. Ettől marad egységes a lista ritmusa
 * képes és kép nélküli programok között. */
.oldal-jel::before {
	content: "";
	position: absolute;
	inset: -2px;
	border: 2px solid transparent;
	border-top-color: var(--gold);
	border-radius: 50%;
	transform: rotate(-45deg);
}

.oldal-jel-kep { background: none; }
.oldal-jel img {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.oldal-torzs {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.oldal-cim {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.25;
}
.oldal-meta { font-size: 13px; line-height: 1.45; color: var(--ink-2); }

/* Állapot az oldalsávban: félkövér szöveg, nem kitöltött csip. Három
 * színfolt egy 300 px-es hasábban hangosabb lenne a címnél. */
.oldal-allapot {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--ink);
}

/* Az elmaradás figyelmeztetés, nem semleges tény — de szövegszínnel, nem
 * kitöltött csippel: a keskeny hasáb nem bírna el három színfoltot. */
.jelzes-figyelem { color: var(--red-strong); }

/* Körvonalas állapot: a folyamatos pályázat nem sürgős, tehát nem is
 * kitöltött. A kitöltés itt rangsort kódol, nem kategóriát. */
.allapot-korvonal {
	background: var(--paper);
	border: 1px solid var(--ink);
	color: var(--ink);
}

.oldal-sor-palyazat { gap: 0; }
.oldal-sor-palyazat .oldal-torzs { gap: 6px; }

/* A legközelebbi program kiemelve: teljes szélességű plakát a hasábban.
 *
 * Listaelemként áll (a lista első `li`-je), de nem sor: a plakát fölötte,
 * alatta a szöveg. 300 px-en ez az egyetlen hely, ahol a plakát tényleg
 * látszik — és a soron következő esemény a legidőérzékenyebb tartalom. */
.program-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-bottom: 16px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--rule);
}
.program-hero:hover { background: var(--paper-2); }

.program-hero-kep { display: block; }
/* A HSZK-plakátok 1.91:1 bannerek (768x402) — pontosan ezt az arányt
 * használjuk, mert bármi más levágja a feliratot. 16:10-re vágva a
 * „1367 PRES: PTE HALLOWEEN" két széle eltűnt. */
.program-hero-kep img {
	display: block;
	width: 100%;
	height: auto;
}

.program-hero-torzs {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding-top: 12px;
}
.program-hero-cim {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 21px;
	line-height: 1.2;
}

/* Egyetlen metasor, a cím alatt — azonos méret és betűköz végig.
 *
 * A pont a fix HSZK-zöld: jelzi, honnan jön a program, anélkül hogy egy
 * nagybetűs, ritkított címke ülne a cím fölé. A tények (kategória,
 * nemzetközi, időpont, helyszín, ár) egyenrangúak, tehát egyformák is. */
.program-hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ink-2);
}
.program-hero-meta .program-pont { align-self: center; }

.program-hero-cta { margin-top: 6px; }

/* Az állapot a hero egyetlen hangos jelölője — és csak akkor van ott, ha
 * van mit jelezni. Az „Elmarad” nem lehet halk szürke szó az ár mellett. */
.program-hero-torzs .allapot {
	background: var(--ink);
	align-self: flex-start;
}
.program-hero-torzs .allapot-figyelem { background: var(--red-strong); }

/* „Mind a HSZK oldalán” — szöveglink, nem körvonalas gomb. Az oldalsáv
 * másodlagos felület: egy gombkeret itt azt sugallná, hogy ez a fő
 * cselekvés, pedig a programok a célpontok. */
.oldal-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--hit);
	font-size: 14px;
	color: var(--sage-strong);
}
.oldal-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* A nyílt API használatának feltétele, nem udvariasság (handoff.md §252). */
.hszk-forras {
	margin-top: 14px;
	font-size: 11px;
	color: var(--ink-2);
}

/* ------------------------------------------------------------------ */
/* Keskeny nézet                                                      */
/* ------------------------------------------------------------------ */

@media (max-width: 860px) {
	/* Mérve: 860 px alatt a CTA saját sorba törik a programkártyán.
	 *
	 * Ilyenkor a `margin-left: auto` a jobb alsó sarokba lökte, és fölötte
	 * ~100 px üres maradt — a kártya feleslegesen magas lett, a gomb pedig
	 * elszakadt attól a szövegtől, amire vonatkozik. Törés után a bal élre
	 * kerül, a meta alá. */
	.kartya-cta-hely {
		margin-left: 0;
		padding: 0 20px 18px;
	}
}