/* 1367 gyűjtőoldal – komponensek
 *
 * A tokens.css adja a változókat, a reset-et, a .wrap-ot, a .tile/.pat-*
 * mintákat, a .nav-link-et és a lábléc hátterét. Ez a fájl AZT NEM ismétli:
 * csak amit a komponensek tesznek hozzá.
 *
 * Szabály: itt kizárólag var(--…) hivatkozás szerepelhet, beégetett hex nem.
 */

/* ------------------------------------------------------------------ */
/* Alap                                                               */
/* ------------------------------------------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

/* A lábléc mindig az ablak aljára kerül, akkor is, ha kevés a tartalom —
 * különben rövid oldalon (üres keresés, 404, egy-cikkes lapoldal) a fekete
 * lábléc a képernyő közepén ér véget, alatta meg fehér sáv marad.
 *
 * A body a tokens.css-ben kap hátteret és betűt; itt csak az elrendezését
 * adjuk meg. A `svh` a mobil címsáv ki-be csúszását is kezeli, a `vh` a
 * tartalék azoknak a böngészőknek, amik még nem ismerik. */
body {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	/* Mondatkezdő nagybetű a címekben – a nagybetűsítés tiltott. */
	text-transform: none;
}

p { margin: 0; }
img { max-width: 100%; }

.hl { overflow-wrap: anywhere; min-width: 0; text-wrap: balance; }

.atlepo {
	position: absolute;
	left: -9999px;
	z-index: 50;
	padding: 12px 18px;
	background: var(--paper);
	color: var(--ink);
}
.atlepo:focus { left: var(--gutter); top: 8px; }

/* A fő gomb. Fehér szöveg a sage-strong-on 5,1:1 – a világos zöldön
 * és az aranyon SOHA nem lehet fehér felirat. */
.gomb {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: var(--hit);
	padding: 0 18px;
	/* A `.gomb` `<button>`-ön is használatos (keresőűrlap), ott pedig a
	 * böngésző saját keretet és kurzort ad — linken ez a két sor nem
	 * csinál semmit, gombon viszont nélkülük kilóg a rendszer stílusa. */
	border: 0;
	cursor: pointer;
	background: var(--sage-strong);
	color: var(--on-color);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* A gombszöveg nem törhet két sorba. */
	white-space: nowrap;
}
.gomb:hover { color: var(--on-color); }

/* Gutenberg-gombok a téma gombnyelvén.
 *
 * NEM a blokkok.css-ben: a címlap Gólyáknak és Csatlakozz paneljei
 * widgetterületről jönnek, tehát blokk-gombokat tartalmaznak — a
 * blokkok.css viszont szándékosan kimarad a címlapról. Enélkül a
 * gombok a Gutenberg lekerekített alapértelmezését kapták, pedig a
 * terv szerint a sarok mindenhol 0.
 *
 * A `.wp-block-buttons` saját térközt használ, azt nem írjuk felül. */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--hit);
	padding: 0 20px;
	border-radius: 0;
	background: var(--sage-strong);
	color: var(--on-color);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}
.wp-block-button__link:hover { color: var(--on-color); }

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--rule);
	color: var(--ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--ink);
	color: var(--ink);
}

/* A Gólyáknak panel arany alapján a hajszálvonal nem látszik: ott a
 * szöveg színe adja a keretet. */
.golyaknak-panel .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--ink);
}

/* ------------------------------------------------------------------ */
/* Fejléc                                                             */
/* ------------------------------------------------------------------ */

.fejlec { position: relative; overflow-x: clip; }

.fejlec-logo { display: block; }

/* Az arculati fejléc teljes szélesen, legalább 920 px-re méretezve és
 * középre vágva – kisebb méreten a rajz felismerhetetlen lenne. */
.fejlec-logo img {
	display: block;
	width: max(100%, 920px);
	max-width: none;
	height: auto;
	margin-left: 50%;
	transform: translateX(-50%);
}

.fejlec-szoveg {
	display: block;
	padding: 28px 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 44px;
	text-align: center;
}

.fejlec-sav {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	pointer-events: none;
}

/* Keskeny nézetben a vezérlők a lap SZÉLÉHEZ kerülnek, nem a
 * tartalomrácshoz.
 *
 * A terv két artboardja szándékosan különbözik: a MainB a `.wrap` margóját
 * használja, a MobileB `padding: 0 8px`-et. Nálunk mindkettőn a `.wrap`
 * margója volt (keskenyen 16 px), és mivel a fejlécgrafika sötét középső
 * sávja 520 px alatt a szélekig ér (mérve: rgb(54,49,60) a gombok mögött),
 * a fehér lap elé becsúszott egy széles sötét csík — a gomb beleejtett
 * foltnak látszott, nem záróelemnek.
 *
 * 640 px-ig megyünk, nem 520-ig: fölötte a lap amúgy is fehér háttéren ül,
 * tehát a beljebb húzás ott nem látszik, a kerek szám viszont kevesebb
 * meglepetést tartogat. */
@media (max-width: 640px) {
	.fejlec-sav {
		padding-inline: 0;
	}
}

/* Szélesen a fejléc ikonsávja ELTŰNIK.
 *
 * Ott a teljes menü látszik, tehát a hamburger csak egy második, szűkebb
 * belépő lenne ugyanahhoz — a fiók minden pontja ott van a menüsávban is.
 * A keresőre viszont szükség van, ezért az átköltözik a menüsáv végére.
 *
 * A töréspont ugyanaz a 860 px, ahol a menüsáv megjelenik: a két szabály
 * egymás tükörképe, és nem csúszhatnak el egymástól. */
@media (min-width: 861px) {
	.fejlec-sav { display: none; }
}

@media (max-width: 860px) {
	.nav-kereso { display: none; }
}

/* A menüsáv keresőgombja nem lapon ül, hanem a sáv fehér hátterén — ott
 * nincs mit takarnia. */
.nav-kereso {
	background: none;
	margin-left: 8px;
}

/* A fejléc ikongombjai FEHÉR LAPON ülnek, és a lap a fejléc teljes
 * magasságát kitölti.
 *
 * A fejlécgrafika `max(100%, 920px)` széles és középre vágott: 520 px
 * alatti nézetben a rajz sötét középső sávja ér a szélekig (mérve:
 * rgb(54,49,60) a gombok mögött), és a 44×44-es fehér lap lyukat ütött
 * bele — fölötte-alatta megmaradt a sötét csík.
 *
 * Teljes magasságú lappal a két vezérlő a sáv két záróeleme lesz, nem
 * beleejtett folt. Töréspont nélkül működik: az ikon mindig fehéren ül,
 * tehát a sötét ikonszín minden szélességnél olvasható marad. */
.ikon-gomb {
	pointer-events: auto;
	width: var(--hit);
	height: 100%;
	min-height: var(--hit);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--paper);
	border: 0;
	cursor: pointer;
	font-size: 20px;
	color: var(--ink);
}

.kereso-fiok {
	border-bottom: 1px solid var(--rule);
	background: var(--paper-2);
	padding: 16px 0;
}
/* A keresőűrlap (searchform.php) mindenhol ugyanaz: mező + gomb egy
 * sorban. A 16 px-es betűméret nem esztétika — ennél kisebbnél az iOS
 * ráközelít a mezőre fókuszáláskor, és elcsúszik az egész nézet. */
.kereso-urlap {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.kereso-urlap input[type="search"] {
	flex: 999 1 220px;
	min-width: 0;
	min-height: var(--hit);
	padding: 0 12px;
	border: 1px solid var(--rule);
	background: var(--paper);
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--ink);
}
.kereso-urlap .gomb { flex: 0 0 auto; }

/* ------------------------------------------------------------------ */
/* Főnavigáció                                                        */
/* ------------------------------------------------------------------ */

.fonav {
	position: relative;
	z-index: 5;
	background: var(--paper);
	border-bottom: 1px solid var(--rule);
	box-shadow: 0 6px 14px -12px var(--ink-2);
}

.fonav-sor {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 30px;
	padding-top: 2px;
	padding-bottom: 8px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 16px;
}

.nav-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: var(--hit);
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	color: var(--ink);
	cursor: pointer;
}

.chev { transition: transform 0.15s ease; }
.nav-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

.nyelv {
	display: flex;
	align-items: center;
	margin-left: 8px;
	border: 1px solid var(--rule);
}
.nyelv-gomb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	min-width: 40px;
	padding: 0 8px;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
}
.nyelv-gomb[aria-current="true"] { background: var(--aubergine); color: var(--on-color); }

/* ------------------------------------------------------------------ */
/* Lenyíló panelek                                                    */
/* ------------------------------------------------------------------ */

.panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--paper);
	border-top: 1px solid var(--rule);
	box-shadow: 0 18px 30px -18px var(--shadow);
}
.panel[hidden] { display: none; }

.panel-lapok {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 40px;
	padding-top: 24px;
	padding-bottom: 28px;
}

.lap-racs {
	flex: 999 1 560px;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 8px;
}

.lap-csempe {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-height: 72px;
	padding: 0 16px;
	/* A tarka mintákon aubergine a szöveg; a sötétebb 1367-mintán fehér.
	 * Ez a minta tulajdonsága, nem a lapé – ezért itt dől el, nem adatban. */
	color: var(--aubergine);
}
/* A `tarka-1367.svg` MINDKÉT osztályon él (`pat-ehok` és `pat-1367`), és
 * sötét: rajta a felirat fehér. A szabály korábban csak a `pat-ehok`-ot
 * nevezte meg — vagyis a NÉVHEZ volt kötve, nem a mintához —, ezért az
 * archívum csempéjén aubergine felirat került aubergine alapra, és a lap
 * neve egyszerűen eltűnt. A markup végig helyes volt. */
.lap-csempe.pat-ehok,
.lap-csempe.pat-1367 { color: var(--paper); }
.lap-csempe:hover { color: var(--aubergine); }
.lap-csempe.pat-ehok:hover,
.lap-csempe.pat-1367:hover { color: var(--paper); }

.lap-nev {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 19px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.lap-kiado {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.panel-hivas {
	flex: 1 1 240px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink-2);
}

.panel-racs,
.panel .panel-menu {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 8px 32px;
	padding-top: 20px;
	padding-bottom: 24px;
	margin: 0;
	list-style: none;
	font-family: var(--font-body);
}

.panel-elem,
.panel .panel-menu a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 0;
	border-bottom: 1px solid var(--rule);
}
.panel-cim {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 18px;
}
.panel-leiras { font-size: 13px; color: var(--ink-2); }

/* ------------------------------------------------------------------ */
/* Mobil menüfiók                                                     */
/* ------------------------------------------------------------------ */

/* Teljes képernyős lap, nem lebegő panel. Így nem kell háttérfedő réteg, a
 * bezáró gomb mindig látszik, és nincs olyan köztes állapot, amiben a
 * felhasználó nem tudja, hol van. */
.fiok {
	position: fixed;
	inset: 0;
	z-index: 40;
	display: flex;
	flex-direction: column;
	max-width: 390px;
	background: var(--paper);
	border-right: 1px solid var(--rule);
	box-shadow: 0 0 40px -10px var(--shadow);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.fiok[hidden] { display: none; }

.fiok-fej {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 8px 8px 16px;
	border-bottom: 1px solid var(--rule);
}

/* Az 1367 jel lekerekített alja arculati elem — ez a kivétel a „sarok 0”
 * szabály alól, a bélyegkép és a díszpont mellett. */
.fiok-jel {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 18px;
	background: var(--aubergine);
	border-radius: 0 0 22px 22px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 20px;
	color: var(--on-color);
}

.csak-olvasonak {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.fiok-kereso { display: flex; gap: 8px; padding: 16px; }
.fiok-kereso input {
	flex: 1;
	min-width: 0;
	height: var(--hit);
	padding: 0 12px;
	border: 1px solid var(--ink);
	background: var(--paper);
	font-family: var(--font-body);
	/* 16 px, hogy az iOS ne zoomoljon rá a fókuszálásnál. */
	font-size: 16px;
	color: var(--ink);
}
.fiok-kereso button {
	width: var(--hit);
	height: var(--hit);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--aubergine);
	border: 0;
	color: var(--on-color);
	cursor: pointer;
}

.fiok-nav { display: flex; flex-direction: column; padding: 0 16px; }

.fiok-fo,
.fiok-csoport > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 56px;
	border-bottom: 1px solid var(--rule);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 22px;
	cursor: pointer;
}
.fiok-fo[aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-decoration-thickness: 3px;
	text-underline-offset: 8px;
}

.fiok-csoport > summary { list-style: none; }
.fiok-csoport > summary::-webkit-details-marker { display: none; }
.fiok-csoport > summary::after {
	content: '';
	width: 10px;
	height: 10px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.15s ease;
}
.fiok-csoport[open] > summary::after { transform: rotate(225deg) translateY(-2px); }

.fiok-tartalom { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 16px; }

.fiok-link {
	display: flex;
	align-items: center;
	min-height: var(--hit);
	font-size: 16px;
}

.fiok-lap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 52px;
	padding: 0 14px;
	color: var(--aubergine);
}
.fiok-lap.pat-ehok,
.fiok-lap.pat-ehok:hover { color: var(--paper); }
.fiok-lap:hover { color: var(--aubergine); }
.fiok-lap-nev {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.fiok-lap-kiado {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.fiok-hivas {
	display: flex;
	align-items: center;
	min-height: var(--hit);
	font-size: 14px;
	color: var(--sage-strong);
}

.fiok-gyorsok { display: flex; flex-direction: column; gap: 10px; padding: 20px 16px; }
.fiok-gyorsok-lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fiok-gyorsok-lista a {
	display: flex;
	align-items: center;
	min-height: var(--hit);
	padding: 0 12px;
	border: 1px solid var(--rule);
	font-size: 13px;
}

.fiok-nyelv { padding: 0 16px 24px; }

/* A fiók viszi a navigációt, ezért a felső sorból kiesnek a lenyílók és a
 * nyelvváltó: három lenyíló gomb és a HU/EN egy 390 px-es sorban tördel és
 * szorít, miközben ugyanaz a tartalom a fiókban rendezetten elérhető. */
@media (max-width: 860px) {
	/* A főnavigáció EGÉSZE eltűnik, nem csak a lenyílói.
	 *
	 * Korábban csak a három panelgomb és a nyelvváltó rejtőzött el, és a
	 * sávban ott maradt a „Friss” meg a „Pályázatok” — egy kételemű menü,
	 * amiből semmi nem árulja el, hogy van még három másik. A fiók
	 * ugyanezt az öt pontot tartalmazza, harmonikákkal; a sáv tehát nem
	 * kiegészítette, hanem elfedte a teljes menüt.
	 *
	 * A belépési pont a hamburgergomb, ami a fejlécben végig látszik. */
	.fonav { display: none; }

	/* A Csatlakozz sáv háttérgrafikája 1920×770 arányú.
	 *
	 * `cover` mellett keskeny nézetben a teljes MAGASSÁG látszik, és
	 * vízszintesen vágunk — a rajz középső szürke sávja így elvékonyodik,
	 * a cím pedig félig fölé csúszik. Szélesen fordítva: ott a sáv tölti
	 * ki a dobozt, és az ornamens marad a széleken, ahogy a terv mutatja.
	 *
	 * Mobilon ezért elmarad a grafika, és a sáv a téma halk felületét
	 * kapja. A díszítés nem ér annyit, hogy a felirat félúton kilógjon
	 * a hátteréből. */
	.csatlakozz {
		background-image: none;
		background-color: var(--paper-2);
	}
}

/* ------------------------------------------------------------------ */
/* Cikksor és jelvény                                                 */
/* ------------------------------------------------------------------ */

.oszlop { padding-top: 40px; padding-bottom: 72px; }

.szekcio-cim { font-size: clamp(24px, 3vw, 28px); margin-bottom: 24px; }

.cikk-lista { display: flex; flex-direction: column; }

.cikk-sor { display: flex; align-items: flex-start; gap: 12px; }

/* A bélyegkép 112 px széles, 3:2 arányú — nem 44 px-es kör.
 *
 * Eltérés a tervtől (§113 kerek bélyegképet ír), és a mérés indokolja: a
 * friss lista hét sorából négynek VAN valódi fotója, egy 44 pixeles körben
 * viszont egy fényképből semmi nem látszik. Az a méret dísz, nem
 * információ — a lapok pedig valódi képi anyagot küldenek.
 *
 * A kör is emiatt esett ki: 112 px-en egy kör szokatlan a hírfolyamban, és
 * a fotó széleit vágná. A sor 69-ről ~91 px-re nőtt; cserébe a képek
 * tényleg mutatnak valamit.
 *
 * A kerekítés máshol (díszpont, lapjelző) változatlanul megmarad. */
.cikk-kep { flex: 0 0 112px; align-self: flex-start; }
.cikk-kep img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
/* Kép nélküli sor: a szöveg a teljes szélességet kapja, és a sor
 * alacsonyabb marad — a hiány így ritmus lesz, nem lyuk. */
.cikk-sor-kep-nelkul .cikk-torzs { flex: 1 1 auto; }

@media (max-width: 560px) {
	/* Keskenyen 112 px a sor harmadát vinné — ott 84 px elég. */
	.cikk-kep { flex-basis: 84px; }
}

.cikk-torzs { min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.jelveny {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	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);
}

.cikk-cim { font-size: 17px; line-height: 1.3; }

.kulso-jelzes { font-style: italic; }

/* A forrás jelölése a metasorban: színes pont + a lap neve.
 *
 * A pont önmagában nem hordozna információt (az ETK és az ÁJK színe közel
 * azonos), ezért a név MINDIG ott van mellette — a §74 pont ezt követeli
 * meg. A pont a gyors felismerést adja, a név az egyértelműséget.
 *
 * A sor EGYSÉGES: azonos méret, betűcsalád és betűköz végig. Korábban a
 * lapnév félkövér és sötét volt, a többi szürke normál, a kártyán ráadásul
 * az egész sor nagybetűs és ritkított — három eltérés egyetlen sorban, amitől
 * összetoldottnak látszott. A hangsúlyt most egyedül a szín adja. */
.lap-jelzo {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-weight: 600;
	color: var(--ink);
}
.lap-pont {
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	/* baseline-igazításnál a kör megemelkedne, ezért kézzel ültetjük le */
	transform: translateY(-1px);
}

/* A metasor elemeit középpont választja el — a tervben is így szerepel
 * („[helyszín] · [szervező] · [ár]”). CSS-ből, hogy a markupban ne
 * szemetelje tele a tartalmat elválasztó karakter. */
.cikk-meta > * + *::before,
.oldal-meta > * + *::before {
	content: "·";
	margin-right: 8px;
	color: var(--rule);
}

.ures { display: flex; flex-direction: column; gap: 16px; max-width: 60ch; }

/* ------------------------------------------------------------------ */
/* Címlap                                                             */
/* ------------------------------------------------------------------ */

.hero {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 24px 56px;
	padding-top: 40px;
	padding-bottom: 40px;
}

.hero-illu { flex: 0 1 420px; width: 100%; max-width: 420px; height: auto; }

.hero-szoveg {
	flex: 1 1 400px;
	min-width: 0;
	max-width: 560px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.hero-cim { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.12; }
.hero-lead { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.hero-jelvenyek { display: flex; flex-wrap: wrap; gap: 8px; }

.jelveny-nagy { height: 32px; padding: 0 12px; font-size: 12px; }
.jelveny-nagy:hover { color: var(--on-color); }

/* A kis, nagybetűs címke a tervben előírt elem (téma, rovat, szűrőfelirat) —
 * nem díszítés, hanem a kártyák másodlagos információs szintje. */
.kis-cim {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-2);
	white-space: nowrap;
}

.gyorsok { padding-bottom: 56px; }
.gyorsok-sav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 10px;
	padding: 14px 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}
.gyorsok-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gyorsok-lista a {
	display: inline-flex;
	align-items: center;
	min-height: var(--hit);
	padding: 0 16px;
	border: 1px solid var(--rule);
	font-size: 13px;
	white-space: nowrap;
}

.cimlap-torzs {
	display: flex;
	flex-wrap: wrap;
	gap: 48px 56px;
	padding-bottom: 72px;
}
.cimlap-fo {
	flex: 999 1 620px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.cimlap-oldalsav {
	flex: 1 1 300px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* Szekciófej: cím, díszpont, hajszálvonal. A díszpont a PTE arculat eleme —
 * a kerekítés rá és a bélyegképre engedett, máshol a sarok 0. */
.szekcio-fej { display: flex; align-items: center; gap: 12px; }
.szekcio-fej h2 { font-size: 24px; white-space: nowrap; }
.szekcio-fej.kicsi h2 { font-size: 19px; }
.diszpont-kor {
	flex: 0 0 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sage);
}
.vonal { flex: 1 1 auto; height: 1px; background: var(--rule); }

/* Kiemelt kártya */
.kiemelt-lista { display: flex; flex-direction: column; gap: 32px; }

/* A kártyákat hajszálvonal választja el.
 *
 * Nélküle a két kártya képei egy oszlopot rajzoltak, a szövegek egy másikat,
 * és az egész egyetlen nagy blokknak látszott — nem két külön cikknek. A
 * vonal ugyanaz az eszköz, amivel az oldal többi listája tagolva van. */
.kiemelt-lista > * + * { padding-top: 32px; border-top: 1px solid var(--rule); }

.kiemelt {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 20px 32px;
}

/* Váltakozó oldal. Csak a VIZUÁLIS sorrend fordul meg: a DOM-ban a kép
 * marad elöl, tehát a Tab-sorrend és a felolvasás változatlan. */
.kiemelt-tukor { flex-direction: row-reverse; }

/* A teljes kártya kattintható; a „Tovább” gomb a kiterjesztett link FÖLÖTT
 * marad, mert külső cikknél más a célja (az eredeti oldal). */
.kiemelt-cim .sor-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.kiemelt .gomb-vonalas { position: relative; z-index: 2; }

/* 1 1 300px, nem 0 0 300px.
 *
 * A törzs 999-es `flex-grow`-ja miatt szélesen gyakorlatilag minden
 * maradékot a szöveg kap, tehát a kép 300 px marad. Ha viszont a kártya
 * törik, a kép egyedül marad a sorában, és ott KI KELL töltenie a
 * szélességet — fix bázissal mobilon beljebb húzódott, és a tükrözött
 * kártyán a jobb szélhez tapadt. */
.kiemelt-kep { flex: 1 1 300px; max-width: 100%; display: block; }
.kiemelt-kep img,
.kiemelt-potlas {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.kiemelt-potlas {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(40px, 8vw, 64px);
	color: var(--aubergine);
}
/* Balra zárt, nem középre.
 *
 * A terv középre zárja a kártya szövegét. Egy kártyán, egyedül, ez működik;
 * az oldalon viszont minden más balra zár — a szekciócímek, a szűrők, a
 * lista, az oldalsáv. Két-három középre zárt kártya közéjük téve nem
 * kiemelésnek látszik, hanem szigetnek. A 26 px-es cím középre zárva
 * ráadásul rendre rossz helyen tört („Így zajlott a 2026-” / „os PTE…”). */
.kiemelt-torzs {
	flex: 999 1 300px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	text-align: left;
}
.kiemelt-jelzesek { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* `pretty`, nem `balance`: a balance egyenlő hosszúra húzta a sorokat, és
 * emiatt a „2026-os” kötőjelénél tört — mintha az évszám lenne kettévágva.
 * A pretty csak az árva szót kerüli, a törés helyét nem erőlteti. */
.kiemelt-cim { font-size: 26px; line-height: 1.15; text-wrap: pretty; }
.kiemelt-kivonat { font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* Felvezetők: a hossz CSS-ből szabott, nem a szövegből vágott.
 *
 * A tárolt kivonat 300 karakterig tart, és kártyánként más fér el belőle.
 * Ha a PHP vágná, a vágás a doboz szélességétől függetlenül ugyanott lenne,
 * és a kártyák alja lépcsőzne. A `line-clamp` a tényleges sorokat számolja,
 * tehát minden kártya ugyanannyi SORT mutat — a rács alja egyenes marad.
 *
 * Soronként: a kártya három sort visel el a kép alatt, a folyó sora kettőt
 * (ott a bélyegkép 100 px magas, ennél több sor már alálógna), a széles
 * másodlagos szintén kettőt. */
.kartya-kivonat,
.cikk-kivonat,
.nyito-masod-kivonat {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--ink-2);
	overflow-wrap: anywhere;
}

.kartya-kivonat {
	-webkit-line-clamp: 3;
	font-size: 14px;
	line-height: 1.55;
}

.cikk-kivonat,
.nyito-masod-kivonat {
	-webkit-line-clamp: 2;
	font-size: 14px;
	line-height: 1.5;
}

/* A sor törzse 3 px-es réssel dolgozik — az cím és metasor között helyes,
 * három elem között viszont összetapadna. A felvezető hozza a saját
 * levegőjét, és a kép nélküli sorok ritmusa sem változik. */
.cikk-kivonat { margin-block: 3px 1px; }
/* Ugyanaz a metasor, mint a cikksorban — nincs nagybetűsítés és nincs
 * ritkítás, mert azok a lapnévvel és a dátummal együtt háromféle
 * tipográfiát adnának egyetlen sorban. */
.kiemelt-meta,
.cikk-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ink-2);
}

/* ------------------------------------------------------------------ */
/* Képes cikk-kártyák a friss lista elején                            */
/* ------------------------------------------------------------------ */

.kartya-racs {
	display: grid;
	/* Három fér ki a fő hasábban, keskenyebben kettő, mobilon egy —
	 * töréspontok nélkül, mert a hasáb szélessége az oldalsávtól is függ.
	 *
	 * `auto-fill`, nem `auto-fit`: az auto-fit összezárja az üres sávokat,
	 * így EGY kártya az egész hasáb szélességét elfoglalná, és nagyobb lenne,
	 * mint fölötte a kiemelt cikk. */
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 24px 20px;
	margin-bottom: 8px;
}

.cikk-kartya {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}
.cikk-kartya .sor-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.kartya-borito { display: block; overflow: hidden; }
.kartya-borito img,
.kartya-borito-potlas {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.25s ease;
}
.cikk-kartya:hover .kartya-borito img { transform: scale(1.03); }

.kartya-borito-potlas {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 34px;
	color: var(--aubergine);
}

/* A kártyacím legfeljebb három sor.
 *
 * A rács sorai a legmagasabb kártyához igazodnak, és a lapok címadása
 * nagyon szórt: a „Én mindig is szerettem az irodában időt tölteni…”
 * típusú interjúcím 227 px-es hasábban hat sor, amitől a mellette álló
 * kétsoros kártya alatt fél kártyányi üres hely marad.
 *
 * A levágás nem információvesztés: a kártya feladata a kattintás, a teljes
 * cím pedig egy koppintásra ott van. A sorok lista-változatában NINCS
 * levágás — ott a cím a tartalom, nem csalétek. */
.kartya-cim {
	font-size: 18px;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* A metasor a kártya ALJÁRA kerül.
 *
 * A kártyák egyforma magasak (a rács sora igazítja őket), a címek viszont
 * egy- és háromsorosak között váltakoznak — így a forrás és a dátum
 * kártyánként más magasságban állt, és a sor fésületlennek látszott.
 * Alulra tolva mindhárom metasor egy vonalban van. */
.cikk-kartya .cikk-meta {
	margin-top: auto;
	padding-top: 6px;
	font-size: 12px;
}

.gomb-vonalas {
	display: inline-flex;
	align-items: center;
	min-height: var(--hit);
	padding: 0 20px;
	border: 1px solid var(--rule);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Szűrők */
.szurok { display: flex; flex-direction: column; gap: 12px; }
.szuro-sor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.szuro-sor .kis-cim { flex: 0 0 52px; }
.szuro-csempek { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }

.csempe {
	display: inline-flex;
	align-items: center;
	min-height: var(--hit);
	padding: 0 14px;
	border: 1px solid var(--rule);
	background: var(--paper);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	white-space: nowrap;
}
.csempe[aria-current="true"] {
	background: var(--aubergine);
	border-color: var(--aubergine);
	color: var(--on-color);
}
.csempe[aria-current="true"]:hover { color: var(--on-color); }
.csempe-torles { border-color: var(--ink); }

.korabbi { align-self: flex-end; }

.cikk-lista .cikk-sor { padding: 12px 0; border-bottom: 1px solid var(--rule); }

.ures-szuro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 32px 24px;
	background: var(--paper-2);
	text-align: center;
}
.ures-cim { font-family: var(--font-display); font-weight: 700; font-size: 19px; }

.oldal-lapok { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

/* ------------------------------------------------------------------ */
/* Cikkoldal                                                          */
/* ------------------------------------------------------------------ */

.cikk-torzs-racs {
	display: flex;
	flex-wrap: wrap;
	gap: 48px 56px;
	padding-top: 36px;
	padding-bottom: 72px;
}
.cikk-oldal {
	flex: 999 1 620px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.cikk-oldalsav {
	flex: 1 1 300px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.elonezet-jelzes {
	padding: 12px 16px;
	background: var(--paper-2);
	border-left: 3px solid var(--gold);
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink);
}

.morzsa {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-size: 12px;
	color: var(--ink-2);
}
.morzsa a { color: var(--ink-2); white-space: nowrap; }

.cikk-fej { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cikk-focim { font-size: clamp(32px, 3.8vw, 48px); line-height: 1.08; }
/* Ugyanaz a metasor, mint a listákban és a kártyákon.
 *
 * Volt nagybetűs és ritkított; így a lapnév, a dátum és az olvasási idő
 * háromféle tipográfiát adott egyetlen sorban, és a sor nem egy sornak
 * látszott. Az oldal minden nézetében ugyanaz a szabály: azonos méret,
 * azonos betűköz, a hangsúlyt egyedül a színes pont adja. */
.cikk-fej-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ink-2);
}
.cikk-fej-meta .lap-jelzo { color: var(--ink); }

.cikk-muveletek { display: flex; flex-wrap: wrap; gap: 8px; }
.cikk-muveletek button { cursor: pointer; }

/* Lapozás a szomszédos cikkekre (saját bejegyzés, `single.php`).
 *
 * Az archívumban ennek valódi haszna van: a 634 régi cikk között a
 * látogatónak nincs más útja — a címlap a lapcsalád FRISS folyamát mutatja,
 * nem ezt. Keskenyen egymás alá kerül: két cím egy sorban 320 px-en
 * olvashatatlanul összenyomódna. */
.cikk-lapozo {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--rule);
}
.cikk-lapozo-elem {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding: 12px 14px;
	background: var(--paper-2);
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.25;
}
.cikk-lapozo-elem:hover { background: var(--paper-3, var(--paper-2)); text-decoration: underline; }
.cikk-lapozo-elem .kis-cim { font-weight: 400; }

@media (min-width: 640px) {
	.cikk-lapozo { grid-template-columns: 1fr 1fr; }
	/* A „Következő” jobbra zár: a lapozósáv két vége a két irány. */
	.cikk-lapozo-jobb { text-align: right; align-items: flex-end; }
}

.cikk-kiemelt-kep { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cikk-kiemelt-kep img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* A cikkszöveg. A 680 px-es korlát nem esztétika: 17 px-es törzsnél ez tartja
 * a sorhosszt a kényelmes 70–80 karakteres sávban. */
.prose {
	max-width: 680px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink);
}
.prose > * + * { margin-top: 18px; }
.prose h2 { margin-top: 30px; font-size: 24px; line-height: 1.2; }
.prose h3 { margin-top: 24px; font-size: 20px; line-height: 1.25; }
.prose a { color: var(--pte-kek); text-decoration: underline; text-underline-offset: 3px; }
.prose img { height: auto; }
.prose ul,
.prose ol { padding-left: 24px; }
.prose li + li { margin-top: 8px; }
.prose figure { margin: 0; }
.prose figcaption { margin-top: 8px; font-size: 12px; color: var(--ink-2); }

.prose blockquote {
	margin: 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--gold);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 21px;
	line-height: 1.4;
	color: var(--ink);
}

.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th,
.prose td { padding: 8px 10px; border-bottom: 1px solid var(--rule); text-align: left; }

.prose iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* Az „Eredetileg megjelent” doboz keretét a lap mintája adja: 3 px padding a
 * mintás elemen, benne fehér felület. Így a keret arculati elem, nem szegély. */
.eredeti-doboz { max-width: 680px; padding: 3px; }
.eredeti-belso {
	background: var(--paper);
	padding: 22px 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
}
.eredeti-szoveg { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.eredeti-lap { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.eredeti-megj { font-size: 13px; color: var(--ink-2); }

/* ------------------------------------------------------------------ */
/* Gólyáknak és Csatlakozz                                            */
/* ------------------------------------------------------------------ */

.golyaknak { padding-bottom: 72px; }

/* A kép és az arany panel ÖSSZEÉR: nincs köztük rés, a panel a képből nő
 * ki. Ezért nincs `gap` — a terv is így rajzolja. */
.golyaknak-racs { display: flex; flex-wrap: wrap; align-items: center; }

.golyaknak-illu { flex: 1 1 420px; min-width: 0; width: 100%; height: auto; }

.golyaknak-panel {
	flex: 1 1 380px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 40px clamp(20px, 3vw, 44px);
	background: var(--gold);
	/* Aranyon SOHA nem fehér a szöveg (§305) — itt a sötét tinta megy. */
	color: var(--ink);
}
.golyaknak-cim { font-size: clamp(28px, 3vw, 36px); line-height: 1.1; }
.golyaknak-panel p { font-size: 16px; line-height: 1.55; }

.golyaknak-gombok {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 6px;
	margin: 0;
	list-style: none;
}
.golyaknak-gombok a {
	display: inline-flex;
	align-items: center;
	min-height: var(--hit);
	padding: 0 16px;
	border: 1px solid var(--ink);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}
.golyaknak-gombok a:hover { background: var(--ink); color: var(--gold); }

/* A sáv teljes szélességű, az arculati háttérrel.
 *
 * NINCS `aspect-ratio`. Az `aspect-ratio: 1920/640` és a `min-height: 340px`
 * visszacsatolt egymásra: a kikényszerített 340 px magasságból az arány
 * 1020 px SZÉLESSÉGET számolt vissza, és a sáv 390 px-es nézetablakban is
 * 1020 px széles maradt. Az `overflow-x: clip` eltakarta a görgetősávot, de
 * a tartalom egy 1020-as dobozhoz igazodva került középre — mobilon a
 * szöveg láthatóan elcsúszott.
 *
 * A magasság most közvetlenül a nézetablakból jön: a tervezett 1920×640
 * arány harmada a szélességnek, de legalább 340 px. Ugyanaz a forma,
 * visszacsatolás nélkül. */
.csatlakozz {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: max(340px, 33.33vw);
}
.csatlakozz-torzs {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}
.csatlakozz-cim { font-size: clamp(26px, 3vw, 38px); color: var(--navy); }
.csatlakozz-torzs p {
	max-width: 520px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink-2);
}
.csatlakozz-torzs .gomb { align-self: center; padding: 0 22px; }

/* ------------------------------------------------------------------ */
/* PTE-sáv                                                            */
/* ------------------------------------------------------------------ */

/* A PTE-logó pozitív változata kék jelből és FEKETE feliratból áll (PTE
 * Brandbook 2025, 24. o.) — ez világos alapot kíván, ezért van ez a fehér
 * sáv a fekete lábléc fölött. Negatív (fehér) változat hivatalosan létezik,
 * de a sávnak így is a világos alap a helyes megoldása: a lábléc fekete,
 * és a logó nem úszhat el benne elválasztás nélkül. */
.pte-sav {
	background: var(--paper);
	border-top: 1px solid var(--rule);
	margin-top: 48px;
}
.pte-sav-sor {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 40px;
	padding-top: 28px;
	padding-bottom: 28px;
}
.pte-logo { display: block; width: 240px; max-width: 100%; }
.pte-logo img { display: block; width: 100%; height: auto; }
.pte-logo-szoveg {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: 15px;
	color: var(--pte-fekete);
}

.szlogen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pte-fekete);
}
.szlogen span { white-space: nowrap; }
.diszpont { height: 9px; width: auto; }
.diszpont-szoveg { letter-spacing: 0; }

/* ------------------------------------------------------------------ */
/* Lábléc                                                            */
/* ------------------------------------------------------------------ */

.labléc { color: var(--on-dark); }

.labléc-belso {
	padding-top: 64px;
	padding-bottom: 28px;
	min-height: 460px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
}

.labléc-racs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 32px 40px;
}

.labléc-blokk { display: flex; flex-direction: column; gap: 4px; }
.labléc-blokk ul { margin: 0; padding: 0; list-style: none; }

/* A Gólyáknak gombsor menüből is ugyanúgy néz ki, mint beégetve. */
.golyaknak-lista {
	display: contents;
	margin: 0;
	padding: 0;
	list-style: none;
}

.labléc-cim {
	margin-bottom: 6px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 17px;
	color: var(--on-dark);
}
.labléc-leiras { font-size: 13px; line-height: 1.6; color: var(--on-dark-2); }

.labléc a {
	line-height: 32px;
	font-size: 13px;
	color: var(--on-dark);
	white-space: nowrap;
}
.labléc a:hover { color: var(--gold); }

.labléc-alj {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	padding-top: 20px;
	border-top: 1px solid var(--aubergine);
	font-size: 12px;
	color: var(--on-dark-2);
}

/* ------------------------------------------------------------------ */
/* 404                                                                */
/* ------------------------------------------------------------------ */

.hiba-oldal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px 64px;
	padding-top: 56px;
	padding-bottom: 72px;
}
.hiba-illu { flex: 1 1 420px; min-width: 0; width: 100%; max-width: 560px; height: auto; }
.hiba-szoveg {
	flex: 1 1 400px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* A 404 maga dísz, nem információ: a cím mondja el, mi történt. Ezért
 * `aria-hidden`, és ezért engedhető meg neki az arany. */
.hiba-szam {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(64px, 10vw, 96px);
	line-height: 0.9;
	color: var(--gold);
}
.hiba-cim { font-size: clamp(28px, 3vw, 38px); line-height: 1.15; }
.hiba-lead { font-size: 16px; line-height: 1.6; color: var(--ink-2); }

.hiba-kereso { display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; }
.hiba-kereso input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 12px;
	border: 1px solid var(--ink);
	background: var(--paper);
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--ink);
}

.gomb-aubergine {
	display: inline-flex;
	align-items: center;
	height: 48px;
	padding: 0 18px;
	background: var(--aubergine);
	color: var(--on-color);
	border: 0;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

.hiba-kiutak { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
/* A kiutak kontúrja a szövegszín, nem a hajszálvonal: itt a gomb a fő
 * cselekvés, nem másodlagos dísz. */
.gomb-vonalas.erosebb { border-color: var(--ink); }

/* ------------------------------------------------------------------ */
/* Süti-sáv                                                           */
/* ------------------------------------------------------------------ */

.suti-sav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 45;
	background: var(--aubergine);
	color: var(--on-dark);
}
.suti-sav[hidden] { display: none; }

.suti-sor {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 40px;
	padding-top: 24px;
	padding-bottom: 24px;
}

.suti-szoveg { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.suti-cim { font-size: 20px; color: var(--on-dark); }
.suti-szoveg p { font-size: 14px; line-height: 1.55; color: var(--on-dark-2); }

/* A tervben a link `--kek-on-dark` tokent használ, ami a tokens.css-ben NEM
 * létezik. Nem találok ki hozzá hex értéket (beégetett hex nem lehet), és a
 * --pte-kek az aubergine háttéren nem adna 4,5:1-et. Ezért a világos
 * szövegszín aláhúzással: a kontraszt garantált, az aláhúzás pedig önmagában
 * jelzi, hogy link. Ha a tervező megadja a tokent, ez a szabály cserélhető. */
.suti-szoveg a {
	color: var(--on-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.suti-gombok { display: flex; flex-wrap: wrap; gap: 8px; }

/* A két gomb egyenrangú: azonos háttér, méret és súly (handoff.md §119). */
.suti-gomb {
	height: var(--hit);
	padding: 0 18px;
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--paper);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Mozgás                                                             */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ------------------------------------------------------------------ */
/* Nyitósáv: vezető cikk + két másodlagos                             */
/* ------------------------------------------------------------------ */

.nyito {
	border-bottom: 1px solid var(--rule);
	padding-top: 28px;
	padding-bottom: 32px;
	margin-bottom: 8px;
}

/* A vezető kétharmadot kap, a másodlagosak egyharmadot. Nem fele-fele:
 * két egyforma súlyú elem mellett a szem nem tudja, hová nézzen, és a
 * „vezető” szó értelmét veszti. */
.nyito-racs {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 28px 44px;
}

.nyito-vezeto {
	position: relative;
	flex: 999 1 460px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.nyito-vezeto-kep { display: block; overflow: hidden; }
.nyito-vezeto-kep img,
.nyito-vezeto-kep .nyito-potlas {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.nyito-vezeto-cim { font-size: clamp(28px, 3.1vw, 40px); line-height: 1.1; text-wrap: pretty; }

/* ---- Képes vezető: a cím a képen ---------------------------------- */

/* A kép 3:2, nem 16:9: a ráírt címnek hely kell az alsó harmadban anélkül,
 * hogy a fotó lényegét takarná. */
.nyito-vezeto-kepes .nyito-vezeto-kep img { aspect-ratio: 3 / 2; }

/* Rács, nem abszolút pozicionálás.
 *
 * A ráírt cím doboza korábban `position: absolute; inset: auto 0 0 0` volt,
 * tehát a CIKK aljához tapadt, nem a KÉPÉHEZ. Amíg a cikk nem volt magasabb
 * a képnél, ez egybeesett — a kivonat visszatételével viszont a cikk
 * megnőtt, a fátyol lecsúszott a kép alá, és RÁÍRÓDOTT a kivonatra. Mérve:
 * a kép 679-nél ért véget, a fátyol 770-ig tartott, a kivonat 679-nél
 * kezdődött.
 *
 * Rácsban a kép és a ráírás ugyanabba a cellába kerül, tehát a ráírás a
 * képhez igazodik, a kivonat pedig a következő sorban, alatta marad. */
.nyito-vezeto-kepes {
	position: relative;
	display: grid;
	grid-template-rows: auto auto;
	row-gap: 12px;
}
.nyito-vezeto-kepes .nyito-vezeto-kep,
.nyito-vezeto-kepes .nyito-vezeto-torzs { grid-area: 1 / 1; }
.nyito-vezeto-kepes .nyito-vezeto-kivonat { grid-area: 2 / 1; }

/* A fátyol csak az alsó részen sűrű: fölötte a fotó érintetlen marad.
 * Egyenletes sötétítés az egész képen tompává tenné a fényképet. */
.nyito-vezeto-kepes .nyito-vezeto-torzs {
	align-self: end;
	/* A `z-index` nem díszítés, hanem a rácsra állás következménye.
	 *
	 * Hover közben a kép `transform: scale(1.03)`-at kap, és a transzformált
	 * elem a festésben úgy viselkedik, mintha pozicionált volna `z-index: 0`
	 * értékkel — tehát a pozicionált réteghez kerül. A ráírás viszont rácselem
	 * lett, az pedig a folyamréteghez tartozik, és ezért ALÁ került: mérve a
	 * fátyol és a fehér cím hover közben teljesen eltűnt, miközben a számított
	 * stílus (háttér, opacity, visibility) végig változatlan maradt.
	 *
	 * Abszolút pozicionálással ez nem fordult elő, mert akkor a ráírás is a
	 * pozicionált rétegben volt, a kép UTÁN. */
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 72px 28px 24px;
	/* Három lépcső, nem kettő: két megállónál a rámpa vége éles vonalként
	 * látszott a képen, főleg világos fotóknál. */
	background: linear-gradient(
		to top,
		var(--fatyol) 0%,
		var(--fatyol) 30%,
		var(--fatyol-fel) 62%,
		transparent 100%
	);
	color: var(--on-color);
}
.nyito-vezeto-kepes .nyito-vezeto-cim { font-size: clamp(26px, 3.2vw, 42px); }
.nyito-vezeto-kepes .nyito-vezeto-cim a { color: var(--on-color); }
/* Sötét fátylon a szín nem tud visszajelezni: a globális `a:hover` zsályára
 * váltana, az pedig a fátylon olvashatatlan. Marad a fehér, és aláhúzás
 * jelzi a hovert — ugyanaz a megoldás, mint a programcsempe címénél. */
.nyito-vezeto-kepes .nyito-vezeto-cim a:hover {
	color: var(--on-color);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.nyito-vezeto-kepes .cikk-meta { color: var(--on-dark-2); }
.nyito-vezeto-kepes .lap-jelzo { color: var(--on-color); }

@media (max-width: 560px) {
	/* Keskenyen a ráírás elfogyasztaná a képet: ott a cím alá kerül.
	 * Rácsban ez annyi, hogy saját sort kap a kép alatt. */
	.nyito-vezeto-kepes { grid-template-rows: auto auto auto; row-gap: 8px; }
	.nyito-vezeto-kepes .nyito-vezeto-torzs {
		grid-area: 2 / 1;
		align-self: auto;
		padding: 12px 0 0;
		background: none;
		color: var(--ink);
	}
	.nyito-vezeto-kepes .nyito-vezeto-kivonat { grid-area: 3 / 1; }
	.nyito-vezeto-kepes .nyito-vezeto-cim a,
	.nyito-vezeto-kepes .lap-jelzo { color: var(--ink); }
	/* A fehér hover-szín itt FEHÉR PAPÍRRA esne: keskenyen nincs fátyol, a
	 * cím a lapon áll. Mérve: érintőeszközön a hover beragad, és a vezető
	 * cikk címe egyszerűen eltűnt. */
	.nyito-vezeto-kepes .nyito-vezeto-cim a:hover { color: var(--sage-strong); }
	.nyito-vezeto-kepes .cikk-meta { color: var(--ink-2); }
	.nyito-vezeto-kepes .nyito-vezeto-kep img { aspect-ratio: 16 / 9; }
}
.nyito-vezeto-kivonat {
	max-width: 62ch;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-2);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* A két másodlagos egymás alatt, hajszálvonallal elválasztva — a lap
 * többi listájának a nyelvén. */
.nyito-tovabbi {
	flex: 1 1 280px;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.nyito-masod {
	position: relative;
	display: flex;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--rule);
}
.nyito-masod:first-child { padding-top: 0; }
.nyito-masod:last-child { border-bottom: 0; }

.nyito-masod-kep { flex: 0 0 96px; display: block; }
.nyito-masod-kep img,
.nyito-masod-kep .nyito-potlas {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.nyito-masod-torzs { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
/* A fejléc-címek legfeljebb három sor: a lapok címadása szórt, és egy
 * nyolcsoros interjúcím egymaga kétszer akkora, mint a mellette lévő
 * három tétel együtt. A teljes cím egy koppintásra ott van. */
.nyito-masod-cim {
	font-size: 17px;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.nyito-potlas {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 34px;
	color: var(--aubergine);
}

/* A teljes kártya kattintható. */
.nyito-vezeto-cim a::after,
.nyito-masod-cim a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* ------------------------------------------------------------------ */
/* Programsáv                                                         */
/* ------------------------------------------------------------------ */

/* Sötét felület: a plakátok harsány, telített munkák — fehér alapon
 * egymás mellett széteső foltok, sötéten viszont összeáll belőlük egy
 * sáv, és a lap egyhasábos ritmusa is megtörik egyszer. */
.program-sav {
	background: var(--aubergine);
	color: var(--on-dark);
	padding: 28px 0 24px;
	margin-bottom: 36px;
}

.program-sav-fej {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 18px;
}
.program-sav-fej h2 { font-size: clamp(22px, 2.4vw, 28px); color: var(--on-dark); }
.program-sav-link { font-size: 14px; color: var(--on-dark-2); text-decoration: underline; }
.program-sav-link:hover { color: var(--on-dark); }

.program-sav-lista {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(240px, 1fr);
	gap: 20px;
	/* Középre, mint a fejléce: a lista maga is `.wrap`, de egy sima
	 * `margin: 0` itt felülírta a `.wrap` `margin: 0 auto`-ját — széles
	 * képernyőn a cím a tartalomsávban állt, a plakátok a lap bal szélén. */
	margin: 0 auto;
	padding: 0 var(--gutter) 6px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	/* A margó MEGTARTÁSA illesztéskor.
	 *
	 * Az illesztés a csempe bal szélét a görgetőablak bal széléhez húzza, az
	 * pedig a belső margót nem veszi figyelembe — a böngésző betöltéskor
	 * rögtön 16 px-et görgetett, és ettől az első plakát a képernyő bal
	 * széléhez tapadt, miközben a sáv címe 16 px-re állt tőle. Mérve 390
	 * px-en: a cím bal széle 16, az első csempéé 0.
	 *
	 * A `scroll-padding` ugyanennyivel beljebb viszi a görgetőablakot, így az
	 * illesztett csempe a lap margójára esik. */
	scroll-padding-inline: var(--gutter);
}
.program-sav-lista::-webkit-scrollbar { height: 6px; }
.program-sav-lista::-webkit-scrollbar-thumb { background: var(--on-dark-2); }

.program-csempe {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	scroll-snap-align: start;
}
.program-csempe-kep { display: block; }
.program-csempe-kep img,
.program-csempe-potlas {
	display: block;
	width: 100%;
	aspect-ratio: 1.91;
	object-fit: cover;
}
/* Kép nélküli program a sávban: TÍPUS-PLAKÁT, nem üres keret.
 *
 * Korábban átlátszó doboz állt itt egy hajszálkerettel és a „HSZK” szóval.
 * Két baja volt. Egy: a közös képkeret-szabály papírszíne sütött át alóla,
 * tehát a sötét sávban fehér lyuknak látszott — pontosan úgy, mint egy le
 * nem töltött kép. Kettő: négy kép nélküli program mellett négyszer
 * ugyanaz a szó állt, ami nem mond semmit egyikről sem.
 *
 * A helyére a program KATEGÓRIÁJA kerül. Ez nem kitalált tartalom: a
 * csempe alatti metasor az időt, a helyszínt és az árat írja ki, a
 * kategóriát NEM — tehát új információ, nem ismétlés, és csempénként más.
 *
 * Halkabb marad a valódi plakátoknál: egy fokkal világosabb felület a sáv
 * saját színéből, egyetlen dísszel. A pont ugyanaz a HSZK-zöld, ami a
 * programkártyán is jelöli a forrást — a sáv alatt nincs külön
 * forrásmegjelölés, ezt a láblécen teljesítjük.
 *
 * A tarka minta itt szándékosan NEM jó: korábban ki volt próbálva, és
 * hangosabb volt a valódi plakátoknál — a hierarchia megfordult, a kép
 * nélküli programok vonzották a szemet. */
.program-csempe-potlas {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	padding: 14px;
	background: var(--aubergine-2);
}
.program-csempe-potlas::before {
	content: '';
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--egyseg-hszk-zold);
}
.program-csempe-kat {
	font-family: var(--font-display);
	font-weight: 700;
	/* A leghosszabb magyar kategória („Kirándulás”) a legkeskenyebb,
	 * 240 px-es csempén is elfér. */
	font-size: clamp(18px, 2vw, 26px);
	line-height: 1.1;
	color: var(--on-dark);
	overflow-wrap: anywhere;
}
.program-csempe-cim { font-size: 17px; line-height: 1.25; color: var(--on-dark); }
.program-csempe-cim a { color: var(--on-dark); }
.program-csempe-cim a:hover { color: var(--on-dark); text-decoration: underline; }
/* A metasor a csempe aljára: a címek egy- és kétsorosak között
 * váltakoznak, és enélkül a dátumok lépcsőzve álltak. */
.program-csempe-meta {
	margin-top: auto;
	font-size: 13px;
	line-height: 1.45;
	color: var(--on-dark-2);
}

.program-sav .blokk-forras { margin-top: 16px; color: var(--on-dark-2); }

/* Keskenyen szélesebb csempe.
 *
 * A 240 px-es csempe egy 390 px-es képernyőn 61%-ot foglal, és az 1,91:1-es
 * plakát így 126 px magas — annyiban a HSZK plakátjainak a szövege már nem
 * olvasható, pedig a sáv éppen a plakátokért van. 78vw-n a plakát 159 px
 * magas, a következő csempéből pedig továbbra is kilátszik 50 px, tehát a
 * görgethetőség is látszik. A 340 px-es felső határ a 480–560 px közötti
 * készülékeké: ott a 78vw már indokolatlanul nagy lenne. */
@media (max-width: 560px) {
	.program-sav-lista { grid-auto-columns: minmax(min(78vw, 340px), 1fr); }
}

@media (max-width: 860px) {
	.nyito { padding-top: 20px; }
	.nyito-racs { gap: 20px; }
}

/* ------------------------------------------------------------------ */
/* Oldalsáv: laponként a legfrissebb                                  */
/* ------------------------------------------------------------------ */

/* Csak szöveg, kép nélkül — fölötte a nyitósáv és a programsáv is képpel
 * dolgozik, és ha itt is kártyák jönnének, a címlap egyetlen hosszú
 * képfolyam lenne. A lap színe adja a jelölést. */
.laponkent {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--rule);
}

.laponkent-sor {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px 0;
	border-bottom: 1px solid var(--rule);
}

.laponkent-lap {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--ink);
}

.laponkent-cim {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
}
/* A cím a sor kattintási célpontja; a lapnév fölötte marad, mert az
 * máshova visz. */
.laponkent-cim::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.laponkent-lap { position: relative; z-index: 2; }

.laponkent-datum { font-size: 12px; color: var(--ink-2); }

/* A programsáv szerkeszthető területe a plakátok alatt. */
.program-sav-blokkok { padding-top: 18px; }
.program-sav-blokkok p { color: var(--on-dark-2); }
.program-sav-blokkok h2,
.program-sav-blokkok h3 { color: var(--on-dark); }

/* Az első másodlagos cikk széles képpel, a többi fejlécként.
 *
 * Négy egyforma bélyegképes sor ugyanolyan egyhangú lenne, mint kettő
 * volt. Egy közepes anyag képpel, alatta három puszta fejléc — ez a
 * hírportálok hasábritmusa, és a szem végig tud futni rajta. */
.nyito-masod-szeles {
	flex-direction: column;
	gap: 10px;
	padding-bottom: 18px;
}
.nyito-masod-szeles .nyito-masod-kep { flex: 1 1 auto; width: 100%; }
.nyito-masod-szeles .nyito-masod-kep img,
.nyito-masod-szeles .nyito-masod-kep .nyito-potlas { aspect-ratio: 16 / 9; }
.nyito-masod-szeles .nyito-masod-cim { font-size: 20px; }

/* A fejléc-sorok képe kisebb és másodlagos: a cím viszi a sort.
 *
 * `align-self: flex-start` KELL: flex-sorban a doboz alapból a sor teljes
 * magasságára nyúlik, és mivel a képdobozok kaptak halk hátteret, a kép
 * alatti üres rész szürke csíkként látszott (mérve 15–57 px). Addig csak
 * azért nem tűnt fel, mert fehér volt a fehéren. */
.nyito-masod:not( .nyito-masod-szeles ) .nyito-masod-kep {
	flex: 0 0 72px;
	align-self: flex-start;
}

/* ------------------------------------------------------------------ */
/* Képek: közös viselkedés                                            */
/* ------------------------------------------------------------------ */

/* 1. Halk alap a képdobozok alatt.
 *
 * A lusta betöltésű képek helye addig FEHÉREN állt, és a kép beugrásakor
 * villant egyet — egy hosszú címlapon görgetés közben végig. A halk
 * felület előre kirajzolja a kép helyét, és a villanás megszűnik.
 *
 * 2. Vágódoboz a nagyításhoz: a `overflow: hidden` nélkül a hover-zoom
 * kilógna a szomszéd elemek alá. */
.nyito-vezeto-kep,
.nyito-masod-kep,
.kiemelt-kep,
.kartya-borito,
.cikk-kep,
.program-csempe-kep,
.kartya-kep,
.egyseg-kep,
.oldal-jel-kep {
	background: var(--paper-2);
	overflow: hidden;
}

/* A programsáv képkerete SÖTÉT alapot kap.
 *
 * A fenti papírszín a kép betöltéséig látszó alap — világos lapon helyes.
 * A programsáv viszont az egyetlen sötét felület, ahol ez a szabály él, és
 * ott pont a fordítottját csinálja: a valódi plakát eltakarja, a kép
 * nélküli csempe alól viszont kisüt, és le nem töltött képnek látszik.
 * Mérve: a sáv #36313c, a keret mögötte #f2f2f0. */
.program-csempe-kep { background: var(--aubergine-2); }

/* 3. Egységes hover: a kép lassan ráközelít.
 *
 * Eddig egyetlen helyen volt ilyen (a képes cikk-kártyán), így a lap
 * többi képe halottnak hatott — a látogató nem kapott visszajelzést
 * arról, hogy a kép maga is kattintható. A 3% alig észrevehető, de
 * elég: a cél a visszajelzés, nem a látványosság.
 *
 * Csökkentett mozgást kérő beállításnál a nagyítás teljesen elmarad —
 * lásd a szakasz végi szabályt. A globális `transition-duration: 0.01ms`
 * csak gyorssá tenné, nem szüntetné meg. */
.nyito-vezeto-kep img,
.nyito-masod-kep img,
.kiemelt-kep img,
.kartya-borito img,
.cikk-kep img,
.program-csempe-kep img,
.kartya-kep img,
.egyseg-kep img {
	transition: transform 0.3s ease;
}

.nyito-vezeto:hover .nyito-vezeto-kep img,
.nyito-masod:hover .nyito-masod-kep img,
.kiemelt:hover .kiemelt-kep img,
.cikk-kartya:hover .kartya-borito img,
.cikk-sor:hover .cikk-kep img,
.program-csempe:hover .program-csempe-kep img,
.program-kartya:hover .kartya-kep img,
.egyseg-kartya:hover .egyseg-kep img {
	transform: scale(1.03);
}

/* Csökkentett mozgásnál nincs nagyítás. A globális szabály csak a
 * TARTAMOT nullázza, az állapotváltozás attól még megtörténne. */
@media ( prefers-reduced-motion: reduce ) {
	.nyito-vezeto:hover .nyito-vezeto-kep img,
	.nyito-masod:hover .nyito-masod-kep img,
	.kiemelt:hover .kiemelt-kep img,
	.cikk-kartya:hover .kartya-borito img,
	.cikk-sor:hover .cikk-kep img,
	.program-csempe:hover .program-csempe-kep img,
	.program-kartya:hover .kartya-kep img,
	.egyseg-kartya:hover .egyseg-kep img {
		transform: none;
	}
}

/* A képes vezetőnél a kivonat a kép ALATT áll: a fátyolba téve a
 * sötétítés a fotó feléig érne, és a kép maga veszne el. */
.nyito-vezeto-kepes .nyito-vezeto-kivonat { padding-top: 14px; }