/**
 * Tudástár.
 *
 * Ez a fájl SZÁNDÉKOSAN rövid. A hero, a konténer, a kártya, a záró sáv és a
 * gombok stílusa a `kepzes-lista.css`-ből jön – a Tudástár ugyanazokból az
 * elemekből épül, mint a képzések gyűjtőoldala, és ez így is marad. Itt csak
 * az van, ami tényleg csak a cikkeknél fordul elő: a témakörszűrő sáv, a
 * cikksorok, az oldalsáv és a cikk törzsszövege.
 *
 * Ha valami itt is meg ott is szerepelne, az hiba – akkor a közösbe való.
 */

.sfa-tudastar {
	--sfa-td-keret: #E3E8EF;
	--sfa-td-halvany: #EEF2F8;
	--sfa-td-szurke: #5B6472;
}


/* =========================================================================
 * 1. TÉMAKÖR-SZŰRŐ SÁV
 *
 * Vízszintesen görgethető, mert nyolc témakör keskeny képernyőn nem fér ki.
 * A görgetés a SÁVON belül történik (`overflow-x: auto`), tehát nem okoz
 * vízszintes görgetést az egész lapon.
 * ====================================================================== */

.sfa-td-szuro {
	background: #fff;
	border-bottom: 1px solid var(--sfa-td-keret);
	position: relative;
}

/*
 * Belső térköz a sávon. A látványterven a dobozok nem érnek hozzá a sáv
 * széléhez – ez adja a „letisztult panel” érzetet, enélkül szalagnak látszik.
 */
.sfa-td-szuro > .sfa-container {
	padding-block: 12px;
}

/*
 * Jelzés arról, hogy a sáv görgethető. Enélkül keskeny képernyőn úgy néz ki,
 * mintha az utolsó látszó elem lenne az utolsó.
 */
.sfa-td-szuro::after {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
	bottom: 1px;
	content: "";
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	width: 40px;
}

@media (min-width: 1201px) {

	/* Széles képernyőn kifér mind, ott a jelzés fölösleges. */
	.sfa-td-szuro::after {
		display: none;
	}
}

.sfa-td-szuro__lista {
	display: flex;
	gap: 0;

	/*
	 * KÖZÉPRE, HA MARAD HELY.
	 *
	 * A témakörök száma változik: most hat van, de lehet öt vagy nyolc. Balra
	 * zárva a sor jobb oldalán kongó üres sáv marad, amint kevesebb elem van –
	 * pont ezt látni a hatelemes állapotban. A középre igazítás ezt szünteti
	 * meg, és a sor mindig kiegyensúlyozott marad.
	 *
	 * 1024 pixel alatt viszont VISSZAÁLL balra (lásd a töréspontoknál): ott a
	 * sáv görgethető, és középre igazított tartalomnál a görgetődoboz eleje
	 * elérhetetlenné válik.
	 */
	justify-content: center;

	list-style: none;
	margin: 0;
	overflow-x: auto;
	padding: 0;

	/* A görgetősáv elrejtése – a tapintható görgetés marad. */
	scrollbar-width: none;
}

.sfa-td-szuro__lista::-webkit-scrollbar {
	display: none;
}

/*
 * EGYENLŐ SZÉLESSÉGŰ ELEMEK, FELSŐ KORLÁTTAL.
 *
 * `flex: 1 1 0` – a hasábok a TARTALOMTÓL FÜGGETLENÜL egyenlők. Enélkül a
 * „Pénzügy és számvitel” cellája jóval szélesebb lenne, mint az „Adózás”-é,
 * és a köztük lévő vonalak szabálytalan ritmusban állnának.
 *
 * `max-width: 190px` – enélkül hat elem szétterül a teljes 1300 pixelen, és
 * egy-egy 290 pixeles cella közepén elveszik a rövid felirat. Ez volt az, ami
 * „tagolatlannak” látszott.
 *
 * A kettő együtt: nyolc témakörnél a cellák egyenlően összemennek, hatnál
 * megállnak 190-nél, és a maradék helyet a középre igazítás osztja el.
 */
.sfa-td-szuro__lista > li {
	flex: 1 1 0;
	margin: 0;
	max-width: 190px;
	min-width: 118px;
	position: relative;
}

/*
 * AZ ELVÁLASZTÓ VONAL NEM ÉR VÉGIG.
 *
 * Eddig `border-left` volt, ami a sor teljes magasságát átvágja, és rácsos
 * hatást kelt. A látványterven rövid, függőlegesen középre igazított vonal
 * van – ezért lett pszeudoelem, felül-alul behúzva. Ugyanez az oka annak,
 * hogy a sávnak belső térköze van: a kettő együtt adja ki a látványt.
 */
.sfa-td-szuro__lista > li + li::before {
	background: var(--sfa-td-keret);
	bottom: 26px;
	content: "";
	left: 0;
	position: absolute;
	top: 26px;
	width: 1px;
}

/*
 * A KETTŐZÖTT OSZTÁLY NEM ELÍRÁS.
 *
 * Az Elementor Kit `a` szabálya (`.elementor-kit-11 a`) 0,2,0 erősségű, és
 * aranyra festi az összes hivatkozást. Egy sima `.sfa-td-szuro__elem` (0,1,0)
 * ezért veszít vele szemben – emiatt jelent meg minden szűrőelem aranyként,
 * nem csak az aktív. A kettőzés 0,2,0-ra emeli, a szülőosztállyal együtt
 * 0,3,0-ra: ez már biztosan nyer, betöltési sorrendtől függetlenül.
 */
.sfa-tudastar .sfa-td-szuro__elem.sfa-td-szuro__elem {
	align-items: center;
	border: 2px solid transparent;
	border-radius: 12px;
	color: var(--sfa-td-szurke);
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: center;
	min-height: 88px;
	padding: 14px 12px;
	text-align: center;
	text-decoration: none;
	transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}

.sfa-tudastar .sfa-td-szuro__elem.sfa-td-szuro__elem:hover,
.sfa-tudastar .sfa-td-szuro__elem.sfa-td-szuro__elem:focus-visible {
	background: var(--sfa-td-halvany);
	color: var(--sfa-navy, #12335C);
}

.sfa-tudastar .sfa-td-szuro__elem.sfa-td-szuro__elem.is-aktiv {
	border-color: var(--sfa-gold, #D89A2B);
	color: var(--sfa-gold, #D89A2B);
}

.sfa-td-szuro__ikon {
	display: inline-flex;
}

/*
 * Az ikonok SVG-ként jönnek. A `fill: currentColor` azért kell, mert az
 * Elementor „beágyazott ikonok” beállítása mellett a `color` önmagában nem
 * színezi őket – ugyanaz a buktató, mint az aloldalakon.
 */
.sfa-td-szuro__ikon svg {
	fill: currentColor;
	height: 24px;
	width: 24px;
}

.sfa-td-szuro__cimke {
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.25;
}


/* =========================================================================
 * 2. KIEMELT CIKKEK – KÁRTYÁK
 * ====================================================================== */

/*
 * FIGYELEM – EZ A BLOKK EGY MÁR EGYSZER ELKÖVETETT HIBÁT JAVÍT.
 *
 * A `.sfa-kk-racs` alapból FLEX, és a kártyán ott ül a
 * `max-width: calc((100% - 48px) / 3)` – a hasábszélesség kézzel kiszámolva,
 * a réssel csökkentve. Ha ugyanezt a kártyát rácsba tesszük, a rács már
 * kiosztotta neki a teljes cellát, a régi `max-width` viszont ezen belül
 * visszaszűkíti a harmadára. Pont ettől lett csíkká az ajánlatkérés kártyája
 * is: két szélességszabály versenyzett egymással.
 *
 * Ezért a rácsba tett kártyáról LE KELL VENNI a flexes méretezést. A cellát a
 * rács adja, a kártya töltse ki.
 */
.sfa-kk-racs--harom,
.sfa-kk-racs--ketto {
	display: grid;
	gap: 22px;
	align-items: stretch;
}

.sfa-kk-racs--harom {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sfa-kk-racs--ketto {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sfa-kk-racs--harom > .sfa-kk,
.sfa-kk-racs--ketto > .sfa-kk {
	flex: none;
	max-width: none;
	min-width: 0;
	width: auto;
}

.sfa-td-kartya {
	display: flex;
	flex-direction: column;
}

.sfa-td-kartya__kep {
	aspect-ratio: 16 / 9;
	background: var(--sfa-td-halvany);
	display: block;
	overflow: hidden;
	position: relative;
}

.sfa-td-kartya__kep img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
	width: 100%;
}

.sfa-td-kartya:hover .sfa-td-kartya__kep img {
	transform: scale(1.04);
}

.sfa-td-kartya__helyorzo {
	align-items: center;
	color: var(--sfa-tk-szin, #12335C);
	display: flex;
	height: 100%;
	justify-content: center;
	opacity: .35;
}

.sfa-td-kartya__helyorzo svg {
	fill: currentColor;
}

/* A témakör címkéje a képen – a látványterv szerint bal alul. */
.sfa-td-kartya__cimke {
	background: var(--sfa-tk-szin, #12335C);
	bottom: 0;
	color: #fff;
	font-size: .6875rem;
	font-weight: 700;
	left: 0;
	letter-spacing: .08em;
	padding: 6px 12px;
	position: absolute;
	text-transform: uppercase;
}

/*
 * A kártya lába a képzéskártyáétól csak annyiban tér el, hogy bal oldalon
 * dátum és olvasási idő áll ár helyett. A keretet, a térközt és a
 * `space-between` elrendezést a közös `sfa-kk__lab` adja.
 */
.sfa-td-kartya__lab {
	margin-top: auto;
}

.sfa-td-kartya__meta {
	color: var(--sfa-td-szurke);
	font-size: .8125rem;
}


/* =========================================================================
 * 3. FŐ TERÜLET: LISTA + OLDALSÁV
 * ====================================================================== */

.sfa-td-fo__racs {
	display: grid;
	gap: 40px;
	grid-template-columns: minmax(0, 1fr) 330px;
	align-items: start;
}

/* --- Cikksorok --------------------------------------------------------- */

.sfa-td-sorok {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sfa-td-sor + .sfa-td-sor {
	border-top: 1px solid var(--sfa-td-keret);
}

.sfa-td-sor__link {
	align-items: center;
	color: inherit;
	display: grid;
	gap: 18px;
	grid-template-columns: 96px minmax(0, 1fr) 24px;
	padding: 18px 6px;
	text-decoration: none;
	transition: background-color .16s ease;
}

.sfa-td-sor__link:hover,
.sfa-td-sor__link:focus-visible {
	background: var(--sfa-td-halvany);
}

.sfa-td-sor__kep {
	align-items: center;
	aspect-ratio: 4 / 3;
	background: var(--sfa-td-halvany);
	border-radius: 8px;
	color: var(--sfa-navy, #12335C);
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.sfa-td-sor__kep img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.sfa-td-sor__kep svg {
	fill: currentColor;
	opacity: .3;
}

.sfa-td-sor__test {
	display: block;
	min-width: 0;
}

.sfa-td-sor__temakor {
	color: var(--sfa-gold, #D89A2B);
	display: block;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .08em;
	margin-bottom: 4px;
	text-transform: uppercase;
}

.sfa-td-sor__cim {
	color: var(--sfa-navy, #12335C);
	display: block;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
}

.sfa-td-sor__meta {
	color: var(--sfa-td-szurke);
	display: block;
	font-size: .78rem;
	margin-top: 6px;
}

.sfa-td-sor__pont {
	margin: 0 6px;
}

.sfa-td-sor__nyil {
	color: var(--sfa-td-szurke);
	transition: transform .18s ease, color .18s ease;
}

.sfa-td-sor__nyil svg {
	fill: currentColor;
}

.sfa-td-sor__link:hover .sfa-td-sor__nyil {
	color: var(--sfa-gold, #D89A2B);
	transform: translateX(3px);
}

/* --- Lapozó ------------------------------------------------------------ */

.sfa-td-lapozo {
	margin-top: 26px;
	text-align: center;
}

.sfa-td-lapozo .page-numbers {
	border: 1px solid var(--sfa-td-keret);
	border-radius: 8px;
	color: var(--sfa-navy, #12335C);
	display: inline-block;
	margin: 0 3px;
	min-width: 38px;
	padding: 8px 10px;
	text-decoration: none;
}

.sfa-td-lapozo .page-numbers.current,
.sfa-td-lapozo .page-numbers:hover {
	background: var(--sfa-navy, #12335C);
	border-color: var(--sfa-navy, #12335C);
	color: #fff;
}


/* =========================================================================
 * 4. OLDALSÁV
 * ====================================================================== */

.sfa-td-oldalsav {
	display: grid;
	gap: 20px;
}

.sfa-td-doboz {
	background: #fff;
	border: 1px solid var(--sfa-td-keret);
	border-radius: 14px;
	padding: 22px;
}

.sfa-td-doboz--sotet {
	background: var(--sfa-navy, #12335C);
	border-color: transparent;
	color: #fff;
}

.sfa-td-doboz__cim {
	font-size: 1.0625rem;
	font-weight: 700;
	margin: 0 0 14px;
}

.sfa-td-doboz--sotet .sfa-td-doboz__cim {
	color: #fff;
}

.sfa-td-doboz__szoveg {
	color: #D8DEE8;
	font-size: .875rem;
	line-height: 1.6;
	margin: 0 0 16px;
}

.sfa-td-doboz--sotet .sfa-btn {
	width: 100%;
}

/* --- Témakör-pirulák --------------------------------------------------- */

.sfa-td-pilulak {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sfa-td-pilulak > li {
	margin: 0;
}

/*
 * Kettőzött osztály, ugyanazért, mint a szűrőelemeknél: a Kit `a` szabálya
 * különben aranyra festené a pirulák szövegét is.
 */
.sfa-tudastar .sfa-td-pilula.sfa-td-pilula {
	background: #fff;
	border: 1px solid var(--sfa-td-keret);
	border-radius: 999px;
	color: var(--sfa-navy, #12335C);
	display: inline-block;
	font-size: .8125rem;
	padding: 7px 14px;
	text-decoration: none;
	transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

.sfa-tudastar .sfa-td-pilula.sfa-td-pilula:hover,
.sfa-tudastar .sfa-td-pilula.sfa-td-pilula:focus-visible,
.sfa-tudastar .sfa-td-pilula.sfa-td-pilula.is-aktiv {
	background: var(--sfa-td-halvany);
	border-color: var(--sfa-gold, #D89A2B);
	color: var(--sfa-navy, #12335C);
}


/* =========================================================================
 * 5. A CIKK ADATLAPJA
 * ====================================================================== */

.sfa-td-cikk__meta {
	color: rgba(255, 255, 255, .78);
	font-size: .875rem;
	margin: 14px 0 0;
}

.sfa-td-cikk__lead {
	border-left: 3px solid var(--sfa-gold, #D89A2B);
	color: var(--sfa-navy, #12335C);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.65;
	margin: 0 auto 28px;
	max-width: 760px;
	padding-left: 18px;
}

/*
 * Az olvasható sorhossz 65-75 karakter. Egy 1300 pixeles hasábban a szakmai
 * szöveg olvashatatlanul széles lenne – ezért a cikk törzse szűkebb, mint a
 * lap többi része.
 */
.sfa-td-cikk__tartalom {
	margin-inline: auto;
	max-width: 760px;
}

.sfa-td-cikk__tartalom h2 {
	font-size: 1.5rem;
	line-height: 1.3;
	margin: 36px 0 12px;
}

.sfa-td-cikk__tartalom h3 {
	font-size: 1.1875rem;
	margin: 26px 0 8px;
}

.sfa-td-cikk__tartalom p,
.sfa-td-cikk__tartalom li {
	font-size: 1.0625rem;
	line-height: 1.75;
}

.sfa-td-cikk__tartalom ul {
	padding-left: 22px;
}

.sfa-td-cikk__tartalom li + li {
	margin-top: 8px;
}

.sfa-td-cikk__cimkek {
	border-top: 1px solid var(--sfa-td-keret);
	margin: 40px auto 0;
	max-width: 760px;
	padding-top: 20px;
}

.sfa-td-cikk__cimkek-cim {
	color: var(--sfa-td-szurke);
	display: block;
	font-size: .72rem;
	letter-spacing: .08em;
	margin-bottom: 10px;
	text-transform: uppercase;
}

/*
 * A `kepzes-lista.css` a `.sfa-lista + .sfa-lista` párosnál elveszi a felső
 * bélest, mert ott a szekciók egyetlen folyamatos blokként állnak egymás
 * alatt. A Tudástárban viszont ezek külön szakaszok – kiemelt cikkek, majd a
 * lista, majd a kapcsolódók –, és összeragadnának. Nekik visszaadjuk.
 */
.sfa-lista + .sfa-lista.sfa-td-fo,
.sfa-lista + .sfa-lista.sfa-td-kapcsolodo,
.sfa-lista + .sfa-lista.sfa-td-tovabbi {
	padding-top: 56px;
}

.sfa-td-kapcsolodo {
	background: var(--sfa-td-halvany);
}

.sfa-td-kapcsolodo__lead {
	color: var(--sfa-td-szurke);
	margin: -8px 0 22px;
}

.sfa-td-tovabbi__gomb {
	margin-top: 22px;
	text-align: center;
}

/*
 * „Vissza a Tudástárba” – világos háttérre való, halvány gomb.
 *
 * A meglévő `--outline` változat NEM jó ide: annak fehér a szövege és fehér a
 * kerete, tehát sötét sávra készült (a mellette lévő megjegyzés a
 * stíluslapban félrevezető, de nem írom át, mert máshol így használjuk).
 * Fehér háttéren láthatatlan lenne, ezért kap saját, sötétkék változatot.
 */
.sfa-kepzes .sfa-td-vissza.sfa-td-vissza {
	background: transparent;
	border-color: var(--sfa-td-keret);
	color: var(--sfa-navy, #12335C);
}

.sfa-kepzes .sfa-td-vissza.sfa-td-vissza:hover,
.sfa-kepzes .sfa-td-vissza.sfa-td-vissza:focus-visible {
	background: var(--sfa-td-halvany);
	border-color: var(--sfa-gold, #D89A2B);
	color: var(--sfa-navy, #12335C);
}


/* =========================================================================
 * 6. TÖRÉSPONTOK
 * ====================================================================== */

@media (max-width: 1024px) {

	.sfa-td-fo__racs {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Kettő hasáb, nem egy.
	 *
	 * Egy hasábnál a 16:9-es kép egy 1000 pixeles tableten 560 pixel magas
	 * lenne – egyetlen kártya kitöltené a képernyőt. A három cikkből így az
	 * utolsó egyedül marad az alsó sorban, de az a weben megszokott és
	 * rendezett látvány; a képernyőt kitöltő kártya nem az.
	 */
	.sfa-kk-racs--harom {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * A szűrősáv elemei keskeny képernyőn nem nyúlnak szét: fix szélességet
	 * kapnak, és a sáv görgethetővé válik. Enélkül nyolc elem 40 pixeles
	 * hasábokká préselődne.
	 *
	 * A középre igazítás is visszaáll balra: görgethető sávban középre
	 * igazított tartalomnál az első elemek elérhetetlenné válnának.
	 */
	.sfa-td-szuro__lista {
		justify-content: flex-start;
	}

	.sfa-td-szuro__lista > li {
		flex: 0 0 auto;
		max-width: none;
		width: 146px;
	}
}

@media (max-width: 820px) {

	/*
	 * Keskeny képernyőn a 112 pixeles szakaszköz (a szekció saját bélese plusz
	 * a visszaadott felső béles) túl nagy: üres sávnak látszik, nem
	 * elválasztásnak. Itt kevesebb is elég.
	 */
	.sfa-tudastar .sfa-lista {
		padding-block: 36px;
	}

	.sfa-lista + .sfa-lista.sfa-td-fo,
	.sfa-lista + .sfa-lista.sfa-td-kapcsolodo,
	.sfa-lista + .sfa-lista.sfa-td-tovabbi {
		padding-top: 36px;
	}
}

@media (max-width: 700px) {

	.sfa-kk-racs--harom,
	.sfa-kk-racs--ketto {
		grid-template-columns: minmax(0, 1fr);
	}

	.sfa-td-sor__link {
		gap: 14px;
		grid-template-columns: 72px minmax(0, 1fr);
	}

	/* Keskeny képernyőn a nyíl fölösleges: az egész sor kattintható. */
	.sfa-td-sor__nyil {
		display: none;
	}

	.sfa-td-cikk__lead {
		font-size: 1.0625rem;
	}
}