/**
 * Smart Finance Akadémia – képzés adatlap
 *
 * A stíluslap kizárólag az Elementor globális változóiból dolgozik, minden
 * hivatkozás mögött ott a jóváhagyott hexa érték tartalékként. Így ha a Kit
 * beállításai változnak, a sablon követi; ha az Elementor CSS valamiért nem
 * töltődik be, akkor sem esik szét a megjelenés.
 *
 * Elementor rendszer-slotok ezen a projekten:
 *   --e-global-color-primary    #12335C  smart Navy
 *   --e-global-color-secondary  #163458  világosabb navy
 *   --e-global-color-text       számolt  sötét háttér
 *   --e-global-color-accent     #D89A2B  smart Gold
 *
 *   --e-global-typography-primary-*    Főcím    Inter 700  52/44/36
 *   --e-global-typography-secondary-*  Alcím    Inter 700  40/34/30
 *   --e-global-typography-text-*       Kiemelt  Inter 600  28/26/24
 *   --e-global-typography-accent-*     Szöveg   Inter 400  17/17/16
 *
 * Az Elementor a betűméret-változókat media query-kben újradefiniálja, ezért a
 * reszponzív méretezés ezeken keresztül automatikusan öröklődik.
 */

/* =========================================================================
 * 1. TOKENEK
 * ====================================================================== */

.sfa-kepzes {
	/* Színek */
	--sfa-navy:        var(--e-global-color-primary, #12335C);
	--sfa-navy-vilag:  color-mix(in srgb, var(--sfa-navy) 90%, #fff);
	--sfa-sotet:       color-mix(in srgb, var(--sfa-navy) 80%, #000);
	--sfa-gold:        var(--e-global-color-accent, #D89A2B);
	--sfa-gold-sotet:  #B87F1F;
	--sfa-szurke:      #F2F2F2;
	--sfa-feher:       #FFFFFF;
	--sfa-siker:       #2E7D32;
	--sfa-hiba:        #C62828;

	--sfa-szoveg:      #1E2A38;
	--sfa-szoveg-halv: #5A6674;
	--sfa-keret:       #E3E6EA;

	/* Tipográfia */
	--sfa-font:        var(--e-global-typography-accent-font-family, "Inter"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--sfa-font-cim:    var(--e-global-typography-primary-font-family, "Inter"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--sfa-h1:          var(--e-global-typography-primary-font-size, clamp(2.25rem, 1.4rem + 3.2vw, 3.25rem));
	--sfa-h2:          var(--e-global-typography-secondary-font-size, clamp(1.875rem, 1.35rem + 2vw, 2.5rem));
	--sfa-h3:          var(--e-global-typography-text-font-size, clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem));
	--sfa-body:        var(--e-global-typography-accent-font-size, 1.0625rem);

	--sfa-w-cim:       var(--e-global-typography-primary-font-weight, 700);
	--sfa-w-kiemelt:   var(--e-global-typography-text-font-weight, 600);
	--sfa-w-body:      var(--e-global-typography-accent-font-weight, 400);

	/* Rács – 8 px alapú spacing rendszer */
	--sfa-max:         1300px;
	--sfa-gutter:      24px;
	--sfa-radius:      20px;
	--sfa-radius-sm:   10px;

	/* A ragadós panel felső eltolása. A fejléc rögzített, ezért kell hozzá
	   térköz – ha a fejléc magassága változik, elég ezt az egy értéket állítani. */
	--sfa-sticky-top:  104px;

	--sfa-arnyek:      0 2px 8px rgba(11, 31, 58, 0.06), 0 12px 32px rgba(11, 31, 58, 0.08);
	--sfa-arnyek-eros: 0 4px 12px rgba(11, 31, 58, 0.10), 0 20px 48px rgba(11, 31, 58, 0.14);

	font-family: var(--sfa-font);
	font-size: var(--sfa-body);
	font-weight: var(--sfa-w-body);
	line-height: 1.65;
	color: var(--sfa-szoveg);
	background: var(--sfa-feher);
}

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

/* A Hello Elementor a .site-main elemre max-width-et tesz (1140px desktopon,
   mobilon 500px), ami keretet rajzolna a teljes szélességű hero és záró sáv
   köré. A sablon nem használja a site-main osztályt, de ha egy child theme
   visszatenné, ez a szabály semlegesíti. */
main.sfa-kepzes,
body:not([class*="elementor-page-"]) main.sfa-kepzes {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

/*
 * A TARTALOMSÁV SZÉLESSÉGE.
 *
 * Eddig a doboz volt 1300 pixel, és a 24 pixeles lapszéli margó ezen BELÜL
 * futott – vagyis a tényleges tartalom 1252 pixelen ült, 24 pixellel beljebb
 * kezdve. A fejléc, a lábléc és az Elementorral épített oldalak viszont a
 * teljes 1300-at használják tartalomra, a margó pedig kívülre esik.
 *
 * Mérés 2560 pixeles ablakon:
 *   fejléc / lábléc / Elementor-oldalak   tartalom bal széle: 622
 *   sablonos oldalak (Képzések, csomagok) tartalom bal széle: 646   ← 24-gyel beljebb
 *
 * Ezért a doboz mostantól 1300 + 2 × 24 pixel, a tartalom pedig pontosan 1300.
 * Keskeny képernyőn a margó ugyanúgy megvéd a képernyőszéltől, mint eddig.
 */
.sfa-container {
	width: 100%;
	max-width: calc(var(--sfa-max) + 2 * var(--sfa-gutter));
	margin-inline: auto;
	padding-inline: var(--sfa-gutter);
}

.sfa-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * A HOVER NEM VÁLTOZTATHATJA A BETŰVASTAGSÁGOT.
 *
 * Az Elementor Kit ezt a szabályt adja ki minden linkre:
 *
 *   .elementor-kit-11 a:hover {
 *       font-family: var(--e-global-typography-accent-font-family);
 *       font-weight: var(--e-global-typography-accent-font-weight);   ← 400
 *   }
 *
 * Erősebb (0,2,1), mint a legtöbb komponensszabályunk, tehát rámutatáskor
 * visszaállítja a 600-as feliratokat 400-ra: a szöveg elvékonyodik és
 * összébb megy.
 *
 * AZ ELSŐ JAVÍTÁSOM ROSSZ VOLT. `font-weight: inherit`-et írtam ide, ami a
 * SZÜLŐ vastagságát veszi át – nem az elemét. A gomboknál ez véletlenül
 * működött, mert azokat külön 600-ra rögzítettem eggyel lejjebb. Mindenhol
 * máshol viszont – a füleknél, a GYIK kérdéseinél, a kártyacímeknél – pont
 * ez a szabály vékonyította el a szöveget, tehát a javítás okozta a hibát.
 *
 * A HELYES MEGOLDÁS egy egyéni tulajdonság. Az érintett komponensek a saját
 * vastagságukat `--sfa-w-elem`-be is beírják, a hover pedig ezt olvassa
 * vissza. Így minden elem a SAJÁT vastagságát tartja meg, nem a szülőjéét.
 * Új komponensnél elég a `--sfa-w-elem` sort odaírni a `font-weight` mellé.
 */
.sfa-kepzes.sfa-kepzes a:hover,
.sfa-kepzes.sfa-kepzes a:focus,
.sfa-kepzes.sfa-kepzes a:active,
.sfa-kepzes.sfa-kepzes button:hover,
.sfa-kepzes.sfa-kepzes button:focus,
.sfa-kepzes.sfa-kepzes summary:hover,
.sfa-kepzes.sfa-kepzes summary:focus {
	font-family: inherit;
	font-weight: var(--sfa-w-elem, inherit);
}

/* A gomboknál külön is rögzítjük, mert ott a felirat vastagsága
   a komponens része, nem öröklés kérdése. */
.sfa-kepzes.sfa-kepzes .sfa-btn,
.sfa-kepzes.sfa-kepzes .sfa-btn:hover,
.sfa-kepzes.sfa-kepzes .sfa-btn:focus,
.sfa-kepzes.sfa-kepzes .sfa-btn:focus-visible,
.sfa-kepzes.sfa-kepzes .sfa-btn:active {
	font-family: var(--sfa-font);
	font-weight: 600;
	letter-spacing: normal;
}

/* Látható fókuszállapot mindenhol – WCAG 2.1 AA (2.4.7). */
.sfa-kepzes :focus-visible {
	outline: 3px solid var(--sfa-gold);
	outline-offset: 2px;
	border-radius: 4px;
}


/* =========================================================================
 * 2. GOMBOK
 * ====================================================================== */

.sfa-kepzes .sfa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 14px 28px;
	border: 2px solid transparent;
	border-radius: var(--sfa-radius-sm);
	font-family: var(--sfa-font);
	font-size: 1rem;
	font-weight: 600;
	--sfa-w-elem: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	/* A hover nem mozgatja a gombot, csak a színét és az árnyékát váltja –
	   így a mutató alatt nem ugrál semmi. */
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.sfa-kepzes .sfa-btn--primary {
	background: var(--sfa-gold);
	border-color: var(--sfa-gold);
	color: var(--sfa-feher);
}

.sfa-kepzes .sfa-btn--primary:hover,
.sfa-kepzes .sfa-btn--primary:focus-visible {
	background: var(--sfa-gold-sotet);
	border-color: var(--sfa-gold-sotet);
	color: var(--sfa-feher);
}

/* Sötét háttéren: átlátszó, fehér kerettel. */
.sfa-kepzes .sfa-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--sfa-feher);
}

/* Nem fordul át fehérre: a sötét szöveg világos alapon vékonyabbnak látszik,
   és ez a váltás minden hovernél megvillan. Csak a keret és a háttér erősödik. */
.sfa-kepzes .sfa-btn--ghost:hover,
.sfa-kepzes .sfa-btn--ghost:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--sfa-feher);
	color: var(--sfa-feher);
}

/* Világos háttéren: fehér, sötétkék kerettel. */
.sfa-kepzes .sfa-btn--outline {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.35);
	color: var(--sfa-feher);
}

.sfa-kepzes .sfa-btn--outline:hover,
.sfa-kepzes .sfa-btn--outline:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--sfa-gold);
	color: var(--sfa-feher);
}

.sfa-kepzes .sfa-btn--block {
	width: 100%;
}


/* =========================================================================
 * 3. HERO
 * ====================================================================== */

.sfa-hero {
	position: relative;
	isolation: isolate;
	background: var(--sfa-sotet);
	color: var(--sfa-feher);
	padding-block: 32px 120px;
	overflow: hidden;
}

.sfa-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.sfa-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center right;
}

.sfa-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, var(--sfa-sotet) 0%, color-mix(in srgb, var(--sfa-sotet) 94%, transparent) 42%, color-mix(in srgb, var(--sfa-sotet) 55%, transparent) 72%, color-mix(in srgb, var(--sfa-sotet) 35%, transparent) 100%),
		linear-gradient(180deg, color-mix(in srgb, var(--sfa-sotet) 55%, transparent) 0%, transparent 40%);
}

.sfa-hero__inner {
	position: relative;
}

.sfa-hero__body {
	max-width: 620px;
	padding-block: 24px 8px;
}

/* Morzsamenü (a sfa_breadcrumb() kimenete). */
.sfa-kepzes .sfa-breadcrumb {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.72);
}

.sfa-kepzes .sfa-breadcrumb a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
}

.sfa-kepzes .sfa-breadcrumb a:hover {
	color: var(--sfa-feher);
	text-decoration: underline;
}

.sfa-kepzes .sfa-breadcrumb .sep {
	margin-inline: 6px;
	color: rgba(255, 255, 255, 0.4);
}

.sfa-kepzes .sfa-breadcrumb [aria-current="page"] {
	color: var(--sfa-gold);
}

/*
 * A hero szemöldöke arany. Eddig szín nélkül állt, tehát a hero fehér
 * szövegszínét örökölte – a képzés-adatlapon viszont link, és ott aranyként
 * jelent meg. Ugyanaz az elem két oldalon két színnel: pont az a fajta apró
 * eltérés, amitől a webhely nem tűnik egy kézből valónak. A látványterv
 * mindenütt aranyat mutat, tehát az lett a közös.
 */
.sfa-kepzes .sfa-hero__eyebrow {
	margin: 0 0 12px;
	color: var(--sfa-gold);
	font-size: 0.8125rem;
	font-weight: 600;
	--sfa-w-elem: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.sfa-kepzes .sfa-hero__eyebrow a {
	color: var(--sfa-gold);
	text-decoration: none;
}

.sfa-kepzes .sfa-hero__eyebrow a:hover {
	text-decoration: underline;
}

/*
 * A HOSSZÚ MAGYAR ÖSSZETETT SZAVAK MOBILON KILÓGTAK A HERÓBÓL.
 *
 * 375 pixeles kijelzőn a cím 36 pixeles, a szövegoszlop 335 pixel. Egy
 * „magánszemélyeknek” ennél szélesebb, és mivel egy szót nem lehet tördelni,
 * a böngésző kilógatta – a hero `overflow: hidden`-je pedig levágta a végét.
 * (Az „Adózási tudáscsomag – Tudatos adózási döntések magánszemélyeknek”
 * alcímén látszott.)
 *
 * Az `overflow-wrap: break-word` csak akkor tör szót, ha az önmagában sem fér
 * ki egy sorba – tehát a normál címeket nem bántja. A `hyphens: auto` mellé
 * teszi a kötőjelet; a lap `lang="hu-HU"`, így a magyar elválasztást
 * használja, nem vaktában vág.
 */
.sfa-kepzes .sfa-hero__title {
	margin: 0 0 20px;
	font-family: var(--sfa-font-cim);
	font-size: var(--sfa-h1);
	font-weight: var(--sfa-w-cim);
	line-height: 1.14;
	letter-spacing: -0.01em;
	color: var(--sfa-feher);
	text-wrap: balance;
	overflow-wrap: break-word;
	hyphens: auto;
}

.sfa-kepzes .sfa-hero__title-sub {
	color: var(--sfa-gold);
}

.sfa-hero__lead {
	margin: 0 0 28px;
	max-width: 56ch;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.85);
}

.sfa-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 24px;
}

.sfa-hero__trust {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.8);
}

.sfa-hero__trust .sfa-icon {
	flex: none;
	color: var(--sfa-gold);
}

/* Óraszám-jelvény. */
.sfa-hero__badge {
	position: absolute;
	top: 8px;
	right: var(--sfa-gutter);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 116px;
	height: 116px;
	margin: 0;
	border: 2px solid var(--sfa-gold);
	border-radius: 50%;
	background: color-mix(in srgb, var(--sfa-sotet) 72%, transparent);
	text-align: center;
	line-height: 1.25;
}

.sfa-hero__badge-icon {
	color: var(--sfa-gold);
	margin-bottom: 2px;
}

.sfa-hero__badge-top {
	font-size: 1rem;
	font-weight: 600;
	color: var(--sfa-feher);
}

.sfa-hero__badge-bottom {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.78);
}


/* =========================================================================
 * 4. ELŐNYKÁRTYÁK
 * ====================================================================== */

.sfa-elonyok {
	position: relative;
	margin-top: -72px;
	z-index: 2;
}

.sfa-elonyok__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 28px 8px;
	list-style: none;
	background: var(--sfa-feher);
	border-radius: var(--sfa-radius);
	box-shadow: var(--sfa-arnyek);
}

.sfa-elony {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 4px 20px;
}

.sfa-elony + .sfa-elony {
	border-left: 1px solid var(--sfa-keret);
}

.sfa-elony__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(216, 154, 43, 0.10);
	color: var(--sfa-gold);
}

.sfa-elony__text {
	display: block;
}

.sfa-kepzes .sfa-elony__title {
	display: block;
	margin-bottom: 4px;
	font-size: 1rem;
	font-weight: var(--sfa-w-kiemelt);
	color: var(--sfa-navy);
	line-height: 1.35;
}

.sfa-elony__desc {
	display: block;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--sfa-szoveg-halv);
}


/* =========================================================================
 * 5. FŐ ELRENDEZÉS
 * ====================================================================== */

.sfa-fo {
	padding-block: 56px 80px;
}

.sfa-fo__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 350px;
	gap: 56px;
	align-items: start;
}


/* =========================================================================
 * 6. FÜLEK
 * ====================================================================== */

.sfa-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	border-bottom: 1px solid var(--sfa-keret);
	margin-bottom: 36px;
}

.sfa-tabs__tab {
	position: relative;
	padding: 14px 20px;
	border: 0;
	background: none;
	font-family: var(--sfa-font);
	font-size: 0.875rem;
	font-weight: 600;
	--sfa-w-elem: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--sfa-szoveg-halv);
	cursor: pointer;
	transition: color 0.2s ease;
	/* Legalább 44 px érintési felület – WCAG 2.5.5 / spec 03.9. */
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.sfa-tabs__tab::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: -1px;
	height: 3px;
	background: var(--sfa-gold);
	border-radius: 3px 3px 0 0;
	transform: scaleX(0);
	transition: transform 0.2s ease;
}

.sfa-tabs__tab:hover {
	color: var(--sfa-navy);
}

.sfa-tabs__tab.is-active {
	color: var(--sfa-navy);
}

.sfa-tabs__tab.is-active::after {
	transform: scaleX(1);
}

/* JS nélkül minden panel látszik, és a fülek horgonyként működnek.
   A panelek elrejtése csak akkor lép életbe, ha a JS lefutott. */
.sfa-tabs__panel + .sfa-tabs__panel {
	margin-top: 48px;
	padding-top: 40px;
	border-top: 1px solid var(--sfa-keret);
}

.sfa-tabs.is-enhanced .sfa-tabs__panel {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.sfa-tabs.is-enhanced .sfa-tabs__panel[hidden] {
	display: none;
}

/* Ha a fül felirata megismételné a panel címét, a címet csak
   képernyőolvasónak hagyjuk meg. */
.sfa-tabs.is-enhanced .sfa-panel__title--dup {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.sfa-kepzes .sfa-panel__title {
	margin: 0 0 20px;
	font-family: var(--sfa-font-cim);
	font-size: var(--sfa-h3);
	font-weight: var(--sfa-w-cim);
	line-height: 1.25;
	color: var(--sfa-navy);
}


/* =========================================================================
 * 7. SZÖVEGES TARTALOM
 * ====================================================================== */

.sfa-kepzes .sfa-prose > * {
	margin-block: 0 18px;
}

.sfa-kepzes .sfa-prose > *:last-child {
	margin-bottom: 0;
}

.sfa-kepzes .sfa-prose p {
	line-height: 1.75;
}

.sfa-kepzes .sfa-prose a {
	color: var(--sfa-navy);
	text-decoration-color: var(--sfa-gold);
	text-underline-offset: 3px;
}

.sfa-kepzes .sfa-prose ul,
.sfa-kepzes .sfa-prose ol {
	padding-left: 22px;
}

.sfa-kepzes .sfa-prose li + li {
	margin-top: 6px;
}

.sfa-kepzes .sfa-alcim {
	margin: 32px 0 16px;
	font-family: var(--sfa-font-cim);
	font-size: 1.25rem;
	font-weight: var(--sfa-w-kiemelt);
	color: var(--sfa-navy);
}

.sfa-cel {
	margin-top: 28px;
	padding: 20px 24px;
	border-left: 3px solid var(--sfa-gold);
	background: var(--sfa-szurke);
	border-radius: 0 var(--sfa-radius-sm) var(--sfa-radius-sm) 0;
}

.sfa-kepzes .sfa-cel__title {
	margin: 0 0 8px;
	font-size: 1.0625rem;
	font-weight: var(--sfa-w-kiemelt);
	color: var(--sfa-navy);
}

.sfa-cel p {
	margin: 0;
}

/* Kompetenciák – a látványterv szerint két oszlop, oszlopfolytonos sorrenddel. */
.sfa-kompetenciak {
	margin-top: 32px;
	padding: 28px 28px 24px;
	background: var(--sfa-szurke);
	border-radius: var(--sfa-radius-sm);
}

.sfa-kepzes .sfa-kompetenciak__title {
	margin: 0 0 18px;
	font-size: 1.0625rem;
	font-weight: var(--sfa-w-kiemelt);
	color: var(--sfa-navy);
}

.sfa-kompetenciak__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 40px;
}

.sfa-kompetenciak__lista li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
	font-size: 0.9375rem;
	line-height: 1.5;
	break-inside: avoid;
}

.sfa-check {
	flex: none;
	margin-top: 2px;
	color: var(--sfa-siker);
	stroke-width: 2.5;
}


/* =========================================================================
 * 8. TEMATIKA
 * ====================================================================== */

.sfa-tematika {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.sfa-modul {
	padding: 24px 28px;
	border: 1px solid var(--sfa-keret);
	border-radius: var(--sfa-radius-sm);
	background: var(--sfa-feher);
}

.sfa-modul + .sfa-modul {
	margin-top: 16px;
}

/* A modulcímek sorszámát a tartalomkezelő adja meg a címben – nem számozunk. */
.sfa-kepzes .sfa-modul__cim {
	margin: 0 0 10px;
	font-family: var(--sfa-font-cim);
	font-size: 1.125rem;
	font-weight: var(--sfa-w-kiemelt);
	line-height: 1.35;
	color: var(--sfa-navy);
}

.sfa-kepzes .sfa-modul__leiras {
	margin: 0 0 14px;
	font-size: 0.9375rem;
	color: var(--sfa-szoveg-halv);
}

.sfa-modul__pontok {
	margin: 0;
	padding-left: 20px;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.sfa-modul__pontok li::marker {
	color: var(--sfa-gold);
}

.sfa-modul__pontok li + li {
	margin-top: 6px;
}

/* Háromszintű tematika. Ha a modulnál pontok és alcsoportok is vannak,
   előbb a pontok jelennek meg, alattuk az alcsoportok. */
.sfa-alcsoportok {
	margin-top: 18px;
	display: grid;
	gap: 16px;
}

.sfa-alcsoport {
	padding: 16px 18px;
	background: var(--sfa-szurke);
	border-radius: var(--sfa-radius-sm);
}

.sfa-kepzes .sfa-alcsoport__cim {
	margin: 0 0 8px;
	font-size: 0.9375rem;
	font-weight: var(--sfa-w-kiemelt);
	letter-spacing: 0.02em;
	color: var(--sfa-navy);
}


/* =========================================================================
 * 9. INFORMÁCIÓK – TÁBLÁZAT ÉS ADATLISTA
 * ====================================================================== */

.sfa-tabla-wrap {
	overflow-x: auto;
	border: 1px solid var(--sfa-keret);
	border-radius: var(--sfa-radius-sm);
}

.sfa-tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.sfa-tabla th,
.sfa-tabla td {
	padding: 12px 16px;
	text-align: left;
	vertical-align: top;
}

.sfa-tabla thead th {
	background: var(--sfa-navy);
	color: var(--sfa-feher);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.sfa-tabla tbody tr + tr {
	border-top: 1px solid var(--sfa-keret);
}

.sfa-tabla tbody tr:nth-child(even) {
	background: var(--sfa-szurke);
}

.sfa-statusz {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
	background: rgba(90, 102, 116, 0.12);
	color: var(--sfa-szoveg-halv);
}

.sfa-statusz--jelentkezheto,
.sfa-statusz--garantalt {
	background: rgba(46, 125, 50, 0.12);
	color: var(--sfa-siker);
}

.sfa-statusz--majdnem_betelt {
	background: rgba(216, 154, 43, 0.16);
	color: var(--sfa-gold-sotet);
}

.sfa-statusz--elhalasztva {
	background: rgba(198, 40, 40, 0.10);
	color: var(--sfa-hiba);
}

.sfa-adatlista {
	margin: 28px 0 0;
	border-top: 1px solid var(--sfa-keret);
}

.sfa-adatlista__sor {
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr);
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--sfa-keret);
}

.sfa-adatlista dt {
	font-weight: var(--sfa-w-kiemelt);
	color: var(--sfa-navy);
}

.sfa-adatlista dd {
	margin: 0;
}

.sfa-uzenet {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 20px 0 0;
	padding: 16px 20px;
	border-radius: var(--sfa-radius-sm);
	background: rgba(22, 52, 88, 0.06);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.sfa-uzenet .sfa-icon {
	flex: none;
	margin-top: 2px;
	color: var(--sfa-navy-vilag);
}

.sfa-uzenet--info {
	margin-top: 28px;
}

/*
 * A doboz felirata. Nem külön sorban áll, hanem a mondat elején – így nem nő
 * meg a doboz magassága egy rövid értéknél sem, viszont azonnal látszik, mire
 * vonatkozik a szöveg.
 */
.sfa-uzenet__cimke {
	color: var(--sfa-navy);
	font-weight: 700;
}


/* =========================================================================
 * 10. OKTATÓK
 * ====================================================================== */

.sfa-oktatok {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sfa-oktato {
	display: flex;
	gap: 18px;
	padding: 22px;
	border: 1px solid var(--sfa-keret);
	border-radius: var(--sfa-radius-sm);
	background: var(--sfa-feher);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sfa-oktato:hover {
	box-shadow: var(--sfa-arnyek);
}

.sfa-oktato__portre {
	flex: none;
}

.sfa-oktato__img,
.sfa-oktato__placeholder {
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--sfa-szurke);
	color: var(--sfa-navy-vilag);
}

.sfa-kepzes .sfa-oktato__nev {
	margin: 0 0 4px;
	font-family: var(--sfa-font-cim);
	font-size: 1.0625rem;
	font-weight: var(--sfa-w-kiemelt);
	--sfa-w-elem: var(--sfa-w-kiemelt);
	line-height: 1.3;
}

.sfa-kepzes .sfa-oktato__nev a {
	color: var(--sfa-navy);
	text-decoration: none;
}

.sfa-kepzes .sfa-oktato__nev a:hover {
	text-decoration: underline;
	text-decoration-color: var(--sfa-gold);
}

.sfa-oktato__beosztas {
	margin: 0 0 10px;
	font-size: 0.875rem;
	color: var(--sfa-gold-sotet);
}

.sfa-oktato__bemutat {
	margin: 0 0 12px;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--sfa-szoveg-halv);
}

.sfa-cimkek {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.sfa-cimke {
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--sfa-szurke);
	font-size: 0.75rem;
	color: var(--sfa-navy);
}

.sfa-kepzes .sfa-oktato__linkedin {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--sfa-keret);
	border-radius: 8px;
	color: var(--sfa-navy);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.sfa-kepzes .sfa-oktato__linkedin:hover {
	background: var(--sfa-navy);
	color: var(--sfa-feher);
}


/* =========================================================================
 * 11. RAGADÓS INFORMÁCIÓS PANEL
 *
 * Figyelem: a position: sticky nem működik, ha bármelyik szülő elemen
 * overflow: hidden / auto van. Ha a panel nem tapad, ott érdemes keresni.
 * ====================================================================== */

.sfa-panel {
	position: sticky;
	top: var(--sfa-sticky-top);
	align-self: start;
	padding: 28px;
	border-radius: var(--sfa-radius);
	background: var(--sfa-navy);
	color: var(--sfa-feher);
	box-shadow: var(--sfa-arnyek-eros);
}

.sfa-kepzes .sfa-panel__fejlec {
	margin: 0 0 20px;
	font-family: var(--sfa-font-cim);
	font-size: 0.9375rem;
	font-weight: var(--sfa-w-kiemelt);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--sfa-feher);
}

.sfa-panel__lista {
	margin: 0 0 24px;
	padding: 0;
}

.sfa-panel__sor {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sfa-panel__sor:first-child {
	padding-top: 0;
}

.sfa-panel__ikon {
	flex: none;
	margin-top: 2px;
	color: var(--sfa-gold);
}

.sfa-panel dt {
	margin-bottom: 2px;
	font-size: 0.9375rem;
	font-weight: var(--sfa-w-kiemelt);
	color: var(--sfa-feher);
}

.sfa-panel dd {
	margin: 0;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.78);
}

.sfa-panel__dij {
	font-size: 1rem !important;
	font-weight: 600;
	color: var(--sfa-gold) !important;
}

.sfa-panel__hamarosan {
	color: var(--sfa-gold);
	font-weight: 600;
}

.sfa-panel__biztatas {
	margin: 0 0 16px;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.85);
}

.sfa-panel__ctak {
	display: grid;
	gap: 12px;
}

/* A csomag-hivatkozás a gombok alatt. Ez a szabály korábban a listák
   stíluslapjában volt, ami az adatlapon nem töltődik be – ezért maradt
   térköz és elválasztó vonal nélkül. */
.sfa-kepzes .sfa-panel__csomag {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 28px 0 0;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 0.875rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.72);
}

.sfa-kepzes .sfa-panel__csomag .sfa-icon {
	flex: none;
	margin-top: 3px;
	color: var(--sfa-gold);
}

.sfa-kepzes .sfa-panel__csomag a {
	color: var(--sfa-gold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sfa-kepzes .sfa-panel__csomag a:hover {
	color: var(--sfa-feher);
}


/* =========================================================================
 * 12. KINEK AJÁNLJUK + GYIK
 * ====================================================================== */

.sfa-also {
	margin-top: 64px;
	padding-top: 56px;
	border-top: 1px solid var(--sfa-keret);
}

.sfa-also__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 56px;
	align-items: start;
}

.sfa-kepzes .sfa-szekcio-cim {
	margin: 0 0 28px;
	font-family: var(--sfa-font-cim);
	font-size: var(--sfa-h3);
	font-weight: var(--sfa-w-cim);
	line-height: 1.25;
	color: var(--sfa-navy);
}

/* Flexbox, nem grid: az auto-fit grid egyetlen elemnél az egész sávra
   nyújtaná a cellát, és az ikon középre ugrana. Így 1 és 5 elem esetén is
   balra igazodik, és a sorok természetesen törnek. */
.sfa-celcsoport__lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 24px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sfa-celcsoport__elem {
	flex: 0 1 104px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

.sfa-celcsoport__ikon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border: 1px solid var(--sfa-keret);
	border-radius: 50%;
	background: var(--sfa-feher);
	color: var(--sfa-navy);
}

.sfa-celcsoport__nev {
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--sfa-szoveg-halv);
}

/* GYIK harmonika – natív <details>, így JS nélkül is működik. */
.sfa-gyik__lista {
	display: grid;
	gap: 10px;
}

.sfa-gyik__elem {
	border: 1px solid var(--sfa-keret);
	border-radius: var(--sfa-radius-sm);
	background: var(--sfa-feher);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sfa-gyik__elem[open] {
	border-color: var(--sfa-gold);
	box-shadow: 0 4px 14px rgba(11, 31, 58, 0.06);
}

.sfa-kepzes .sfa-gyik__kerdes {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	min-height: 44px;
	font-size: 0.9375rem;
	font-weight: var(--sfa-w-kiemelt);
	--sfa-w-elem: var(--sfa-w-kiemelt);
	color: var(--sfa-navy);
	cursor: pointer;
	list-style: none;
}

/* A natív háromszög elrejtése – saját nyilat használunk. */
.sfa-gyik__kerdes::-webkit-details-marker {
	display: none;
}

.sfa-gyik__kerdes::marker {
	content: "";
}

.sfa-gyik__nyil {
	flex: none;
	color: var(--sfa-gold);
	transition: transform 0.2s ease;
}

.sfa-gyik__elem[open] .sfa-gyik__nyil {
	transform: rotate(180deg);
}

.sfa-gyik__valasz {
	padding: 0 20px 18px;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--sfa-szoveg-halv);
}

.sfa-gyik__valasz p {
	margin: 0 0 12px;
}

.sfa-gyik__valasz p:last-child {
	margin-bottom: 0;
}


/* =========================================================================
 * 13. ZÁRÓ CTA-SÁV
 * ====================================================================== */

.sfa-zaro {
	background: var(--sfa-sotet);
	color: var(--sfa-feher);
	padding-block: 40px;
}

.sfa-zaro__inner {
	display: flex;
	align-items: center;
	gap: 24px;
}

.sfa-zaro__ikon {
	flex: none;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border: 1px solid rgba(216, 154, 43, 0.5);
	border-radius: 16px;
	color: var(--sfa-gold);
}

.sfa-zaro__szoveg {
	flex: 1 1 auto;
}

.sfa-kepzes .sfa-zaro__cim {
	margin: 0 0 4px;
	font-family: var(--sfa-font-cim);
	font-size: 1.375rem;
	font-weight: var(--sfa-w-cim);
	color: var(--sfa-feher);
}

.sfa-zaro__szoveg p {
	margin: 0;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.8);
}

.sfa-zaro__gomb {
	flex: none;
}


/* =========================================================================
 * 14. RESZPONZÍV VISELKEDÉS
 *
 * Töréspontok a specifikáció 03.8 szerint:
 *   mobil 0–767 · tablet 768–1023 · kisebb desktop 1024–1279 · nagy desktop 1280+
 * ====================================================================== */

@media (max-width: 1279px) {

	.sfa-fo__grid {
		grid-template-columns: minmax(0, 1fr) 310px;
		gap: 40px;
	}

	.sfa-elonyok__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 24px;
	}

	.sfa-elony:nth-child(odd) {
		border-left: 0;
	}
}

@media (max-width: 1023px) {

	/* A ragadós panel normál blokká alakul – spec 03.8. */
	.sfa-fo__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.sfa-panel {
		position: static;
		order: -1; /* A jelentkezési adatok a tartalom elé kerülnek. */
	}

	.sfa-also__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

	.sfa-hero__badge {
		display: none; /* Az adatok az információs panelen amúgy is szerepelnek. */
	}
}

@media (max-width: 767px) {

	.sfa-kepzes {
		--sfa-gutter: 20px;
	}

	.sfa-hero {
		padding-block: 24px 96px;
	}

	.sfa-hero__overlay {
		background: linear-gradient(180deg, color-mix(in srgb, var(--sfa-sotet) 92%, transparent) 0%, color-mix(in srgb, var(--sfa-sotet) 86%, transparent) 100%);
	}

	.sfa-hero__actions .sfa-btn {
		width: 100%; /* A CTA-k mobilon teljes szélességűek – spec 03.8. */
	}

	.sfa-elonyok {
		margin-top: -56px;
	}

	.sfa-elonyok__grid {
		grid-template-columns: minmax(0, 1fr);
		padding: 20px 8px;
		row-gap: 20px;
	}

	.sfa-elony {
		border-left: 0 !important;
	}

	.sfa-fo {
		padding-block: 40px 56px;
	}

	.sfa-tabs__nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}

	.sfa-tabs__tab {
		white-space: nowrap;
		padding-inline: 14px;
	}

	.sfa-kompetenciak__lista {
		columns: 1;
	}

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

	.sfa-oktato {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.sfa-cimkek {
		justify-content: center;
	}

	.sfa-adatlista__sor {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	/* Táblázat kártyás nézetben – a fejlécet a data-cimke attribútum pótolja. */
	.sfa-tabla-wrap {
		border: 0;
		overflow: visible;
	}

	.sfa-tabla thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.sfa-tabla,
	.sfa-tabla tbody,
	.sfa-tabla tr,
	.sfa-tabla td {
		display: block;
		width: 100%;
	}

	.sfa-tabla tbody tr {
		margin-bottom: 12px;
		padding: 8px 4px;
		border: 1px solid var(--sfa-keret);
		border-radius: var(--sfa-radius-sm);
		background: var(--sfa-feher) !important;
	}

	.sfa-tabla tbody tr + tr {
		border-top: 1px solid var(--sfa-keret);
	}

	.sfa-tabla td {
		display: grid;
		grid-template-columns: 44% minmax(0, 1fr);
		gap: 12px;
		padding: 8px 12px;
	}

	.sfa-tabla td::before {
		content: attr(data-cimke);
		font-weight: 600;
		color: var(--sfa-navy);
	}

	.sfa-zaro__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.sfa-zaro__gomb {
		width: 100%;
	}
}


/* =========================================================================
 * 15. MOZGÁSCSÖKKENTÉS ÉS NYOMTATÁS
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {

	.sfa-kepzes *,
	.sfa-kepzes *::before,
	.sfa-kepzes *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {

	.sfa-panel,
	.sfa-zaro,
	.sfa-hero__actions,
	.sfa-tabs__nav {
		display: none !important;
	}

	/* Nyomtatásban minden fül tartalma látszik. */
	.sfa-tabs.is-enhanced .sfa-tabs__panel[hidden] {
		display: block !important;
	}

	.sfa-tabs.is-enhanced .sfa-panel__title--dup {
		position: static !important;
		width: auto;
		height: auto;
		clip: auto;
		margin: 0 0 20px;
	}

	.sfa-gyik__elem {
		break-inside: avoid;
	}
}