/**
 * A generált tartalmi oldalak stílusrétege (Főoldal, Rólunk, Kapcsolat).
 *
 * MIÉRT VAN EGYÁLTALÁN CSS. Az Elementor beállításain keresztül is lehetne
 * színt és távolságot állítani, de a látványterv olyan részleteket tartalmaz –
 * elválasztó vonalak hasábok között, körvonalas ikonkarikák, a heroba belógó
 * fotó, kártyák egyenlő magassága –, amikre a szerkesztő felületén nincs
 * kapcsoló. Ezek stíluslapba valók.
 *
 * MIÉRT KETTŐZÖTT OSZTÁLYNEVEK. Az Elementor globális készlete (.elementor-kit-*)
 * a h1–h6 és az a elemekre 0,2,1 erősségű szabályt ad, a widgetenkénti szabályai
 * pedig 0,3,0-t. Egyszeres osztállyal (0,1,0) ezek alatt maradnánk, és a
 * beállítás csendben hatástalan lenne. A `.x.x` írásmód 0,2,0-ra emeli az
 * erősséget !important nélkül – ugyanez a trükk kellett a fejlécnél, a
 * láblécnél és a jelentkezési oldalnál is.
 *
 * @package SmartFinanceAkademia
 */

.sfa-o,
.sfa-fo__hero {
	--sfa-navy:        var(--e-global-color-primary, #12335C);
	--sfa-navy-melyy:  color-mix(in srgb, var(--sfa-navy) 80%, #000);
	--sfa-navy-vilag:  color-mix(in srgb, var(--sfa-navy) 90%, #fff);
	--sfa-gold:        var(--e-global-color-accent, #D89A2B);
	--sfa-gold-sotet:  #B87F1F;
	--sfa-szoveg:      #1E2A38;
	--sfa-szoveg-halv: #5A6674;
	--sfa-szoveg-vil:  #C9D3E2;
	--sfa-keret:       #E3E8EF;
	--sfa-hatter:      #F5F7FA;
	--sfa-max:         1300px;
	--sfa-arnyek:      0 2px 8px color-mix(in srgb, var(--sfa-navy) 6%, transparent), 0 12px 32px color-mix(in srgb, var(--sfa-navy) 8%, transparent);
}

/* -------------------------------------------------------------------------
 * 1. KÖZÖS ELEMEK
 * ---------------------------------------------------------------------- */

.sfa-o.sfa-o .elementor-heading-title {
	color: var(--sfa-navy);
	line-height: 1.22;
}

/* A hero főcímének sorköze a sablonos oldalakéval egyezik (1.14, nem 1.22). */
.sfa-o__hero.sfa-o__hero h1.elementor-heading-title,
.sfa-ao__hero.sfa-ao__hero h1.elementor-heading-title {
	line-height: 1.14;
}

/*
 * A szemöldök tipográfiája a sablonos hero `.sfa-hero__eyebrow` szabályát
 * követi: 0.8125rem, 600-as vastagság, 0.09em ritkítás. Eddig 13 pixel,
 * 700-as vastagság és 1.6 pixel ritkítás volt – hajszálnyi eltérés, de két
 * egymás után megnyitott aloldalon látszik.
 */
.sfa-o.sfa-o .sfa-o__szemoldok .elementor-heading-title {
	color: var(--sfa-gold);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .09em;
	line-height: 1.4;
}

/* --- Morzsamenü a generált oldalakon --------------------------------- */

/*
 * A `.sfa-breadcrumb` alapstílusa a képzés-adatlap stíluslapjában lakik, az
 * viszont nem töltődik be minden oldalon. Hogy a shortcode bárhol ugyanúgy
 * nézzen ki, itt önállóan is megadjuk.
 */
.sfa-o .sfa-morzsa.sfa-morzsa {
	color: rgba(255, 255, 255, .72);
	display: flex;
	flex-wrap: wrap;
	font-size: .875rem;
	gap: 8px;
	/*
	 * A sablonos oldalakon a morzsamenü után 24 pixel következik. Itt ehhez
	 * hozzáadódik a konténer 14 pixeles rése is, ezért 10 pixelt adunk meg –
	 * a kettő együtt adja ki a 24-et. Mérve mindkét oldalon: a szemöldök a
	 * hero tetejétől 79 pixelre ül.
	 */
	line-height: 1.65;
	margin-bottom: 10px;
}

.sfa-o .sfa-morzsa.sfa-morzsa a {
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
}

.sfa-o .sfa-morzsa.sfa-morzsa a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

.sfa-o.sfa-o .sfa-o__cim-feher .elementor-heading-title,
.sfa-o.sfa-o .sfa-o__hero .elementor-heading-title {
	color: #fff;
}

.sfa-o.sfa-o .sfa-o__kiemelt {
	color: var(--sfa-gold);
}

.sfa-o.sfa-o .elementor-icon-box-title,
.sfa-o.sfa-o .elementor-icon-box-title span {
	color: var(--sfa-navy);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
}

.sfa-o.sfa-o .elementor-icon-box-description {
	color: var(--sfa-szoveg-halv);
	font-size: .9375rem;
	line-height: 1.6;
	margin: 6px 0 0;
}

.sfa-o.sfa-o .elementor-icon-box-icon .elementor-icon {
	color: var(--sfa-gold);
}

/*
 * AZ IKONOK FEKETÉK VOLTAK. Az Elementor „Inline Font Icons" beállítása
 * bekapcsolva nem betűtípusból rajzolja az ikont, hanem beágyazott SVG-t ad
 * (<span class="elementor-icon"><svg>…). Egy SVG viszont nem a `color`
 * tulajdonságból színeződik, hanem a `fill`-ből – a `color: arany` beállítás
 * tehát tökéletesen elmentődött és tökéletesen hatástalan maradt, az SVG pedig
 * az alapértelmezett feketével rajzolódott.
 *
 * A `fill: currentColor` visszaköti az SVG-t a szöveg színéhez, így minden
 * eddigi színszabály – és minden, amit a szerkesztőben állítasz be – újra
 * érvényes lesz. Ez javítja az összes oldal összes ikonját egyszerre.
 */
.sfa-o .elementor-icon svg,
.sfa-ao .elementor-icon svg {
	fill: currentColor;
}

/* Hero: a sötét sávon a szöveg mindig olvasható marad. */
.sfa-o__hero.sfa-o__hero::before {
	/* Betűre ugyanaz, mint a sablonos oldalak `.sfa-hero__overlay` fátyla –
	   korábban 100 fok és 0.18-as végérték volt, ettől a jobb oldalon
	   erősebben átütött a fotó, mint a másik oldalcsaládon. */
	background: linear-gradient(90deg, var(--sfa-navy-melyy) 0%, color-mix(in srgb, var(--sfa-navy-melyy) 94%, transparent) 42%, color-mix(in srgb, var(--sfa-navy-melyy) 55%, transparent) 72%, color-mix(in srgb, var(--sfa-navy-melyy) 35%, transparent) 100%);
	content: "";
	inset: 0;
	opacity: 1 !important;
	position: absolute;
}

.sfa-o__hero.sfa-o__hero > .e-con-inner {
	position: relative;
	z-index: 1;
}

/*
 * A HERO MAGASSÁGA EGYEZZEN A SABLONOS OLDALAKÉVAL.
 *
 * Mérés a két oldalcsaládon:
 *
 *              Képzések (sablon)   Rólunk (Elementor)
 *   magasság        339 px              640 px
 *   felül            56 px               84 px
 *   alul             64 px               84 px
 *   min-height       nincs              420 px
 *
 * Vagyis az Elementorral generált hero majdnem kétszer akkora volt. Két okból:
 * nagyobb bélessel indult, és rá volt kényszerítve egy 420 pixeles legkisebb
 * magasság is – utóbbi a rövid tartalmú oldalakon (Kapcsolat) csak levegőt
 * termelt.
 *
 * Az `!important` itt nem lustaság. Az Elementor a bélest és a legkisebb
 * magasságot elemre írja ki (`.elementor-100 .elementor-element-xxx`, 0,3,0),
 * amit osztállyal nem lehet forrássorrendtől függetlenül verni. A generátorban
 * is javítottam az értékeket, ez a szabály a MÁR legenerált oldalakat teszi
 * helyre újragenerálás nélkül.
 */
.sfa-o__hero.sfa-o__hero,
.sfa-ao__hero.sfa-ao__hero {
	min-height: 0 !important;
}

/*
 * A sablonos hero így épül fel: 32 pixel béles, morzsamenü, majd a
 * szövegblokk 24 pixeles felső bélessel. A generált heroóknál 56 pixel volt
 * egyben – ugyanaz az összeg, de a morzsamenü 24 pixellel lejjebb ült, és
 * onnantól minden elem elcsúszott. Mérve a két oldalon (a hero tetejéhez
 * képest):
 *
 *                    sablon    generált
 *   morzsamenü        +32        +56
 *   szemöldök         +79       +109
 *   H1               +113       +141
 */
.sfa-o__hero.sfa-o__hero > .e-con-inner,
.sfa-ao__hero.sfa-ao__hero > .e-con-inner {
	padding-block: 32px 64px !important;
}

@media (max-width: 767px) {

	.sfa-o__hero.sfa-o__hero > .e-con-inner,
	.sfa-ao__hero.sfa-ao__hero > .e-con-inner {
		padding-block: 24px 44px !important;
	}
}

/*
 * A hero szövegblokkja pontosan annyi, mint a sablonból épített oldalakon:
 * ott a `.sfa-hero__body` 620 pixel, a bevezető pedig 56 karakter széles.
 * Korábban itt 540 pixel volt – elég közel ahhoz, hogy ne tűnjön hibának,
 * és elég távol ahhoz, hogy a két oldalcsalád egymás mellett ne stimmeljen.
 */
.sfa-o.sfa-o .sfa-o__hero-lead {
	max-width: 620px;
}

.sfa-o.sfa-o .sfa-o__hero-lead p {
	color: rgba(255, 255, 255, .85);
	font-size: 1.0625rem;
	line-height: 1.7;
	max-width: 56ch;
}

/* --- Gombok ----------------------------------------------------------- */

.sfa-o.sfa-o .sfa-o__gombsor {
	margin-top: 12px;
}

.sfa-o.sfa-o .sfa-o__gomb .elementor-button {
	border-radius: 6px;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	padding: 15px 26px;
	text-transform: uppercase;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.sfa-o.sfa-o .sfa-o__gomb--arany .elementor-button {
	background-color: var(--sfa-gold);
	border: 1px solid var(--sfa-gold);
	color: #fff;
}

.sfa-o.sfa-o .sfa-o__gomb--arany .elementor-button:hover {
	background-color: var(--sfa-gold-sotet);
	border-color: var(--sfa-gold-sotet);
	color: #fff;
}

.sfa-o.sfa-o .sfa-o__gomb--sotet .elementor-button {
	background-color: var(--sfa-navy);
	border: 1px solid var(--sfa-navy);
	color: #fff;
}

.sfa-o.sfa-o .sfa-o__gomb--sotet .elementor-button:hover {
	background-color: #061A38;
	color: #fff;
}

.sfa-o.sfa-o .sfa-o__gomb--vonalas .elementor-button {
	background-color: transparent;
	border: 1px solid var(--sfa-keret);
	color: var(--sfa-navy);
}

.sfa-o.sfa-o .sfa-o__gomb--vonalas .elementor-button:hover {
	border-color: var(--sfa-navy);
	color: var(--sfa-navy);
}

.sfa-o.sfa-o .sfa-o__gomb--vonalas-feher .elementor-button {
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, .55);
	color: #fff;
}

.sfa-o.sfa-o .sfa-o__gomb--vonalas-feher .elementor-button:hover {
	background-color: rgba(255, 255, 255, .12);
	border-color: #fff;
	color: #fff;
}

.sfa-o.sfa-o .sfa-o__gomb--vonalas-arany .elementor-button {
	background-color: transparent;
	border: 1px solid var(--sfa-gold);
	color: var(--sfa-gold-sotet);
}

.sfa-o.sfa-o .sfa-o__gomb--vonalas-arany .elementor-button:hover {
	background-color: var(--sfa-gold);
	color: #fff;
}

/* --- Számsáv ---------------------------------------------------------- */

.sfa-o.sfa-o .sfa-o__szam .elementor-icon-box-wrapper {
	align-items: center;
	gap: 14px;
}

.sfa-o.sfa-o .sfa-o__szam .elementor-icon-box-icon {
	margin: 0;
}

.sfa-o.sfa-o .sfa-o__szam .elementor-icon {
	font-size: 30px;
}

.sfa-o.sfa-o .sfa-o__szam .elementor-icon-box-title,
.sfa-o.sfa-o .sfa-o__szam .elementor-icon-box-title span {
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.1;
}

.sfa-o.sfa-o .sfa-o__szam .elementor-icon-box-description {
	margin-top: 2px;
}

/*
 * A NÉGY SZÁM ELOSZTÁSA.
 *
 * Eddig négy egyforma, 307 pixeles hasáb volt, a tartalom mindegyikben balra
 * zárva. Csakhogy a feliratok hossza nagyon eltérő („céges partner" vs.
 * „szakmai tapasztalat"), így a csoportok közti rések szemre egyenetlenek
 * lettek, a sor jobb széle pedig üresen maradt – a mérés szerint a hasábok
 * pontosan kitöltötték az 1300-at, csak épp nem úgy NÉZETT ki.
 *
 * A megoldás nem egyenlő hasábok, hanem tartalom szerinti szélesség és a két
 * szélre feszítés: így az első elem a bal, az utolsó a jobb szélen ül, a
 * maradék hely pedig egyenletesen oszlik el köztük.
 */
@media (min-width: 1025px) {

	.sfa-o__szamok.sfa-o__szamok,
	.sfa-o__szamok.sfa-o__szamok > .e-con-inner {
		justify-content: space-between;
	}

	.sfa-o__szamok.sfa-o__szamok > .e-con,
	.sfa-o__szamok.sfa-o__szamok > .e-con-inner > .e-con {
		flex: 0 1 auto !important;
		max-width: none !important;
		width: auto !important;
	}
}

.sfa-o__szamsav--sotet.sfa-o__szamsav--sotet .elementor-heading-title,
.sfa-o__szamsav--sotet.sfa-o__szamsav--sotet .elementor-icon-box-title,
.sfa-o__szamsav--sotet.sfa-o__szamsav--sotet .elementor-icon-box-title span {
	color: #fff;
}

.sfa-o__szamsav--sotet.sfa-o__szamsav--sotet .sfa-o__szemoldok .elementor-heading-title {
	color: var(--sfa-gold);
}

.sfa-o__szamsav--sotet.sfa-o__szamsav--sotet .elementor-icon-box-description {
	color: var(--sfa-szoveg-vil);
}

/* --- Záró CTA-sáv ----------------------------------------------------- */

.sfa-o__cta.sfa-o__cta .elementor-icon-box-wrapper {
	align-items: center;
	gap: 20px;
}

.sfa-o__cta.sfa-o__cta .elementor-icon {
	color: var(--sfa-gold);
	font-size: 40px;
}

.sfa-o__cta.sfa-o__cta .elementor-icon-box-title,
.sfa-o__cta.sfa-o__cta .elementor-icon-box-title span {
	color: #fff;
	font-size: 1.625rem;
	font-weight: 700;
}

.sfa-o__cta.sfa-o__cta .elementor-icon-box-description {
	color: var(--sfa-szoveg-vil);
	font-size: 1rem;
}

/* --- Vízszintes sorok: a rés miatti tördelés kivédése ----------------- */

/*
 * A hasábok szélességét az Elementor százalékban írja ki, a hasábok közti rést
 * viszont nem vonja le belőle. Két 50%-os hasáb 32 pixeles réssel már
 * szélesebb a sornál, a böngésző pedig tördeléskor NEM zsugorít: előbb új sorba
 * tolja az elemet, és csak utána osztaná el a helyet. Ezért csúsztak egymás alá
 * a blokkok minden oldalon.
 *
 * Asztali nézetben ezért kikapcsoljuk a tördelést. A hasábok arányát ez
 * megtartja – a zsugorodás a szélességgel arányosan történik –, csak a rés
 * fér el végre. Tabletnél és mobilnál marad a tördelés, ott ez a kívánt
 * viselkedés.
 */
@media (min-width: 1025px) {

	.sfa-o__sor.sfa-o__sor,
	.sfa-o__sor.sfa-o__sor > .e-con-inner {
		flex-wrap: nowrap;
	}

	.sfa-o__sor.sfa-o__sor > .e-con,
	.sfa-o__sor.sfa-o__sor > .e-con-inner > .e-con {
		min-width: 0;
	}
}

/* --- Shortcode-ból jövő listák beillesztése --------------------------- */

/*
 * A képzéslisták saját `<section>`-t hoznak magukkal, saját fehér háttérrel és
 * saját függőleges bélésével – önálló oldalon ez helyes. Egy Elementor-szekció
 * belsejében viszont ettől egy fehér, lekerekítetlen doboz ül a színes sávban,
 * és kétszereződik a térköz. Itt tehát mindkettőt semlegesítjük: a hátteret a
 * befoglaló Elementor-konténer adja.
 */
.sfa-o .sfa-lista.sfa-lista {
	background: transparent;
	padding-bottom: 0;
	padding-top: 0;
}

.sfa-o .sfa-lista.sfa-lista .sfa-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* -------------------------------------------------------------------------
 * 2. FŐOLDAL
 * ---------------------------------------------------------------------- */

/*
 * A HERO: EGY KÉP, RÁLEBEGŐ SZÖVEGGEL.
 *
 * MI VOLT ELŐTTE, ÉS MIÉRT NEM MŰKÖDÖTT.
 *
 * Eredetileg két hasáb állt egymás mellett: balra sötétkék szövegoszlop,
 * jobbra a fotó. A színátmenetet a KÉPOSZLOPRA tettem – vagyis az átmenet
 * csak a kép területén belül futott. A két hasáb határán ezért függőleges
 * varrat keletkezett: bal oldalon lapos sötétkék, jobb oldalon azonnal induló
 * fotó. Nem az átmenet volt rossz, hanem az, hogy nem volt mit átmennie: a
 * szöveg oldalán nem volt kép.
 *
 * MOST: a kép a TELJES hero háttere (abszolút pozíció), a szöveg pedig
 * rálebeg. Nincs két hasáb, tehát nincs varrat sem.
 *
 * Miért nem beégetett fátyol a képen? Mert az rögzítené a kivágást, két
 * fájlt kellene karbantartani, és a kép cseréjekor – ami biztosan meg fog
 * történni – az egész elromlana. A CSS-átmenet felbontásfüggetlen, és
 * töréspontonként más irányba fordítható.
 */
.sfa-fo__hero.sfa-fo__hero {
	background: var(--sfa-navy-melyy);
	min-height: 560px;
	overflow: hidden;
	position: relative;
}

.sfa-fo__hero.sfa-fo__hero > .e-con-inner {
	max-width: 100%;
	padding: 0;
}

/*
 * A szövegoszlop a kép FÖLÖTT áll.
 *
 * A szélessége korlátozva van, különben a cím átnyúlna a fotó világos részére,
 * és az arany kiemelés olvashatatlanná válna. A bal oldali belső margót a
 * `max()` számolja, hogy a szöveg pontosan ott kezdődjön, ahol a többi
 * szekcióé.
 */
.sfa-fo__hero-szoveg.sfa-fo__hero-szoveg {
	justify-content: center;
	max-width: min(58%, calc((100vw - var(--sfa-max)) / 2 + 720px));
	padding: 76px 48px 76px max(24px, calc((100vw - var(--sfa-max)) / 2));
	position: relative;
	width: 100%;
	z-index: 2;
}

.sfa-fo__hero.sfa-fo__hero .sfa-fo__cim .elementor-heading-title {
	color: #fff;
	font-size: clamp(2.25rem, 1.3rem + 3.4vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.1;
}

.sfa-fo__hero.sfa-fo__hero .sfa-fo__lead p {
	color: #D8DEE8;
	font-size: 1.0625rem;
	line-height: 1.65;
	margin: 0;
	max-width: 30em;
}

/* A tervben ez a bekezdés bal oldalon arany vonallal van kiemelve. */
.sfa-fo__hero.sfa-fo__hero .sfa-fo__idezet p {
	border-left: 3px solid var(--sfa-gold);
	color: #AFBBCB;
	font-size: .9375rem;
	line-height: 1.7;
	margin: 0;
	max-width: 34em;
	padding-left: 18px;
}

/*
 * A látványterven a fotó nem éles vonallal ér véget, hanem balra elhalványul a
 * világos háttérbe. Ez adja a hero összefüggő hatását – enélkül két egymás mellé
 * tett téglalap látszik. A fátyol a képoszlopra kerül, nem a képre: így akkor is
 * működik, ha a szerkesztőben más képet teszel be.
 */
/*
 * A kép nem hasáb, hanem háttér: kitölti az egész herót.
 */
.sfa-fo__hero-kep.sfa-fo__hero-kep {
	inset: 0;
	max-width: none;
	padding: 0;
	position: absolute;
	width: 100%;
	z-index: 0;
}

/*
 * A fátyol két rétegből áll:
 *
 *   1. VÍZSZINTES – balra tömör sötétkék, jobbra teljesen átlátszó. Ez tartja
 *      olvashatóan a szöveget, és engedi látszani a fotót ott, ahol nincs
 *      szöveg.
 *   2. FÜGGŐLEGES, csak felül – hogy a fejléc logója és menüje akkor is
 *      olvasható maradjon, ha világos képrészlet kerül alá.
 */
.sfa-fo__hero-kep.sfa-fo__hero-kep::after {
	background:
		linear-gradient(
			90deg,
			var(--sfa-navy-melyy) 0%,
			color-mix(in srgb, var(--sfa-navy-melyy) 98%, transparent) 30%,
			color-mix(in srgb, var(--sfa-navy-melyy) 80%, transparent) 48%,
			color-mix(in srgb, var(--sfa-navy-melyy) 28%, transparent) 72%,
			transparent 92%
		),
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--sfa-navy-melyy) 50%, transparent) 0%,
			transparent 34%
		);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.sfa-fo__hero-kep.sfa-fo__hero-kep .elementor-widget-container,
.sfa-fo__hero-kep.sfa-fo__hero-kep figure,
.sfa-fo__hero-kep.sfa-fo__hero-kep .elementor-widget-image {
	height: 100%;
}

.sfa-fo__hero-kep.sfa-fo__hero-kep img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* --- „Miért válassza…" sötétkék sáv ---------------------------------- */

.sfa-fo__miert.sfa-fo__miert .elementor-heading-title {
	color: #fff;
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
	font-weight: 700;
}

/*
 * Hat egyenlő hasáb. A százalékos szélesség helyett `flex: 1 1 0`, mert a
 * százalék a résekkel együtt túlcsordul, és a hatodik elem új sorba ugrik –
 * pontosan ez történt az ajánlatkérő oldal folyamatábrájánál is.
 */
.sfa-fo__elonyok.sfa-fo__elonyok > .e-con {
	flex: 1 1 0 !important;
	max-width: none !important;
	padding: 4px 20px;
	position: relative;
}

.sfa-fo__elonyok.sfa-fo__elonyok > .e-con + .e-con::before {
	background: rgba(255, 255, 255, .16);
	content: "";
	inset: 6px auto 6px 0;
	position: absolute;
	width: 1px;
}

.sfa-fo__miert.sfa-fo__miert .elementor-icon-box-title,
.sfa-fo__miert.sfa-fo__miert .elementor-icon-box-title span {
	color: #fff;
	font-size: .9375rem;
}

.sfa-fo__miert.sfa-fo__miert .elementor-icon-box-description {
	color: rgba(255, 255, 255, .72);
	font-size: .8125rem;
	line-height: 1.55;
}

.sfa-fo__miert.sfa-fo__miert .elementor-icon {
	color: var(--sfa-gold);
}

/* --- Számok + vélemény ------------------------------------------------ */

.sfa-fo__velemeny-doboz.sfa-fo__velemeny-doboz {
	background: var(--sfa-hatter);
	border-left: 3px solid var(--sfa-gold);
	border-radius: 10px;
	padding: 26px 28px;
}

.sfa-fo__velemeny.sfa-fo__velemeny blockquote {
	border: 0;
	color: var(--sfa-navy);
	font-size: 1rem;
	font-style: italic;
	line-height: 1.6;
	margin: 0;
	padding: 0;
	quotes: none;
}

.sfa-fo__velemeny.sfa-fo__velemeny .sfa-fo__velemeny-nev {
	color: var(--sfa-szoveg-halv);
	font-size: .875rem;
	margin: 12px 0 0;
}

/* -------------------------------------------------------------------------
 * 3. RÓLUNK
 * ---------------------------------------------------------------------- */

.sfa-o.sfa-o .sfa-o__kep-lekerekitett img {
	border-radius: 14px;
	box-shadow: var(--sfa-arnyek);
	display: block;
	width: 100%;
}

.sfa-ro__kuldetes.sfa-ro__kuldetes .elementor-heading-title {
	font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2rem);
	font-weight: 700;
}

.sfa-ro__kuldetes.sfa-ro__kuldetes p {
	color: var(--sfa-szoveg-halv);
	font-size: 1rem;
	line-height: 1.7;
}

/* --- „Miért jött létre" panel ---------------------------------------- */

.sfa-ro__miert.sfa-ro__miert .sfa-ro__miert-cim .elementor-heading-title {
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* A tervben a cím alatt rövid arany vonal áll. */
.sfa-ro__miert.sfa-ro__miert .sfa-ro__miert-cim .elementor-widget-container::after {
	background: var(--sfa-gold);
	content: "";
	display: block;
	height: 3px;
	margin: 14px auto 0;
	width: 54px;
}

.sfa-ro__okok.sfa-ro__okok .elementor-icon {
	align-items: center;
	background: #fff;
	border: 2px solid var(--sfa-gold);
	border-radius: 50%;
	color: var(--sfa-gold);
	display: inline-flex;
	height: 62px;
	justify-content: center;
	width: 62px;
}

/*
 * Az Elementor ikonos doboza akkor is kiírja a címsor elemét, ha a cím üres –
 * ilyenkor egy magas, láthatatlan sor marad az ikon és a szöveg között. Ezeknél
 * az elemeknél szándékosan nincs cím, ezért elrejtjük.
 */
.sfa-ro__okok.sfa-ro__okok .elementor-icon-box-title {
	display: none;
}

.sfa-ro__okok.sfa-ro__okok .elementor-icon-box-description {
	color: var(--sfa-szoveg);
	font-size: .875rem;
	margin-top: 14px;
}

.sfa-ro__zaro-mondat.sfa-ro__zaro-mondat p {
	color: var(--sfa-navy);
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
}

/* --- Szakmai hátterünk ------------------------------------------------ */

.sfa-ro__hatter.sfa-ro__hatter .sfa-ro__hatter-cim .elementor-heading-title {
	font-size: 1.375rem;
	font-weight: 700;
}

.sfa-ro__hatter.sfa-ro__hatter p {
	color: var(--sfa-szoveg-halv);
	font-size: .9375rem;
	line-height: 1.7;
}

.sfa-ro__logo-doboz.sfa-ro__logo-doboz img {
	max-height: 130px;
	object-fit: contain;
	width: auto;
}

/* --- Szakmai vezető --------------------------------------------------- */

.sfa-ro__vezeto.sfa-ro__vezeto .elementor-heading-title {
	color: #fff;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	font-weight: 700;
}

.sfa-ro__vezeto.sfa-ro__vezeto .sfa-o__szemoldok .elementor-heading-title {
	color: var(--sfa-gold);
}

.sfa-ro__vezeto.sfa-ro__vezeto p {
	color: var(--sfa-szoveg-vil);
	font-size: .9375rem;
	line-height: 1.7;
}

.sfa-ro__vezeto.sfa-ro__vezeto .sfa-ro__vezeto-titulus p {
	color: var(--sfa-gold);
	font-size: .9375rem;
	font-weight: 600;
	margin: 0;
}

.sfa-ro__vezeto.sfa-ro__vezeto .sfa-ro__idezet blockquote {
	border: 0;
	border-left: 3px solid var(--sfa-gold);
	color: #fff;
	font-size: 1rem;
	font-style: italic;
	line-height: 1.6;
	margin: 6px 0 0;
	padding: 2px 0 2px 18px;
	quotes: none;
}

/* --- Értékeink és célcsoportok --------------------------------------- */

.sfa-ro__ertekek.sfa-ro__ertekek .elementor-icon {
	align-items: center;
	border: 2px solid var(--sfa-gold);
	border-radius: 50%;
	color: var(--sfa-gold);
	display: inline-flex;
	height: 62px;
	justify-content: center;
	width: 62px;
}

.sfa-ro__ertekek.sfa-ro__ertekek .elementor-icon-box-description {
	font-size: .8125rem;
}

.sfa-ro__cel-kartya.sfa-ro__cel-kartya {
	flex: 1 1 0 !important;
	min-width: 170px;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.sfa-ro__cel-kartya.sfa-ro__cel-kartya:hover {
	border-color: var(--sfa-gold);
	box-shadow: var(--sfa-arnyek);
}

.sfa-ro__celcsoportok.sfa-ro__celcsoportok .elementor-icon {
	color: var(--sfa-navy);
	font-size: 24px;
}

.sfa-ro__celcsoportok.sfa-ro__celcsoportok .elementor-icon-box-description {
	font-size: .8125rem;
}

/* -------------------------------------------------------------------------
 * 4. KAPCSOLAT
 * ---------------------------------------------------------------------- */

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

.sfa-o.sfa-o .sfa-ka__kartya-cim .elementor-heading-title {
	font-size: 1.5rem;
	font-weight: 700;
	position: relative;
}

.sfa-o.sfa-o .sfa-ka__kartya-cim .elementor-widget-container::after {
	background: var(--sfa-gold);
	content: "";
	display: block;
	height: 3px;
	margin-top: 12px;
	width: 44px;
}

/* Az elérhetőség-sorok: kék körben az ikon, mellette a szöveg. */
.sfa-ka__elem.sfa-ka__elem .elementor-icon-box-wrapper {
	align-items: flex-start;
	gap: 16px;
}

.sfa-ka__elem.sfa-ka__elem .elementor-icon {
	align-items: center;
	background: var(--sfa-navy);
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	font-size: 17px;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.sfa-ka__elem.sfa-ka__elem .elementor-icon-box-icon {
	margin: 0;
}

.sfa-ka__elem.sfa-ka__elem .elementor-icon-box-description a {
	color: var(--sfa-navy);
	text-decoration: none;
}

.sfa-ka__elem.sfa-ka__elem .elementor-icon-box-description a:hover {
	text-decoration: underline;
}

.sfa-ka__vh-gomb.sfa-ka__vh-gomb {
	padding-left: 60px;
}

.sfa-ka__bizalom.sfa-ka__bizalom {
	border-top: 1px solid var(--sfa-keret);
	margin-top: 6px;
	padding-top: 22px;
}

.sfa-ka__bizalom.sfa-ka__bizalom .elementor-icon {
	color: var(--sfa-navy);
}

.sfa-ka__bizalom.sfa-ka__bizalom .elementor-icon-box-title,
.sfa-ka__bizalom.sfa-ka__bizalom .elementor-icon-box-title span {
	font-size: .875rem;
}

.sfa-ka__bizalom.sfa-ka__bizalom .elementor-icon-box-description {
	font-size: .75rem;
}

/* Az egyik bizalmi elemnek nincs alsó sora – ne hagyjon üres helyet. */
.sfa-ka__bizalom.sfa-ka__bizalom .elementor-icon-box-description:empty {
	display: none;
}

.sfa-ka__terkep.sfa-ka__terkep iframe {
	border-radius: 10px;
}

.sfa-ka__terkep.sfa-ka__terkep .sfa-ka__cim-szoveg p {
	color: var(--sfa-szoveg-halv);
	font-size: .875rem;
	line-height: 1.6;
	margin: 0;
}

.sfa-ka__terkep.sfa-ka__terkep .sfa-ka__cim-szoveg strong {
	color: var(--sfa-navy);
}

/* --- Visszahívás-sáv -------------------------------------------------- */

.sfa-ka__visszahivas.sfa-ka__visszahivas .elementor-icon-box-wrapper {
	align-items: center;
	gap: 20px;
}

.sfa-ka__visszahivas.sfa-ka__visszahivas .elementor-icon {
	align-items: center;
	border: 2px solid var(--sfa-gold);
	border-radius: 50%;
	color: var(--sfa-gold);
	display: inline-flex;
	font-size: 24px;
	height: 64px;
	justify-content: center;
	width: 64px;
}

.sfa-ka__visszahivas.sfa-ka__visszahivas .elementor-icon-box-title,
.sfa-ka__visszahivas.sfa-ka__visszahivas .elementor-icon-box-title span {
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
}

.sfa-ka__visszahivas.sfa-ka__visszahivas .elementor-icon-box-description {
	color: var(--sfa-szoveg-vil);
	font-size: .9375rem;
}

/*
 * Az űrlap sötét háttéren áll. A mezők maguk világosak maradnak (azt az
 * űrlapok bővítmény stíluslapja adja), csak a köréjük tartozó feliratokat
 * kell világosra váltani.
 */
.sfa-ka__visszahivas.sfa-ka__visszahivas .sfu-urlap__cim,
.sfa-ka__visszahivas.sfa-ka__visszahivas .sfu-urlap__leiras,
.sfa-ka__visszahivas.sfa-ka__visszahivas .sfu-jelolo,
.sfa-ka__visszahivas.sfa-ka__visszahivas .sfu-jelolo a {
	color: #fff;
}


/* --- Szakmai vezető: a portré a kártya aljára áll ---------------------- */

/*
 * KÉT HIBÁM VOLT ITT.
 *
 * 1. Rossz feltevés. Abból indultam ki, hogy a fotónak saját háttere lesz,
 *    amit átmenettel kell beleolvasztani a kártya kékjébe. A tényleges fotó
 *    viszont kivágott portré, sötét háttéren: annak nincs mit beleolvasztani,
 *    a fátyol tehát láthatatlan munkát végzett, a `cover` pedig fölöslegesen
 *    nyújtotta a képet, és fölötte-alatta kék sáv maradt.
 *
 * 2. Rossz kapaszkodó. A szabályokat a `sfa-ro__vezeto-keposzlop` osztályra
 *    írtam, ami viszont csak a generátor újabb változatával készült oldalakon
 *    van rajta. A meglévő oldalon nincs, tehát a teljes szabálycsomag
 *    hatástalan volt – hiába települt a stíluslap.
 *
 * Ezért itt SZERKEZETRE hivatkozunk, nem osztályra: a kártya első hasábja a
 * kép, a második a szöveg. Ez a régi és az újonnan generált oldalon egyaránt
 * érvényes. Az osztályok is benne maradnak kapaszkodónak.
 */
/*
 * A kártya a BELSŐ sávra kerül, a külső konténer csak a lapszéli margót adja.
 * A `!important` és a nullázott béles azért kell, mert a korábbi generátor a
 * hátteret, a lekerekítést és egy 40 pixeles bélest a KÜLSŐ konténerre írt –
 * attól a portré nem tudott a kártya aljáig érni, hanem 40 pixellel fölötte
 * állt meg. Ezek az értékek az oldal Elementor-adatában ülnek, azokat CSS-ből
 * csak így lehet felülírni.
 */
.sfa-ro__vezeto.sfa-ro__vezeto {
	background-color: transparent !important;
	padding-block: 16px 72px !important;
	padding-inline: 24px !important;
}

.sfa-ro__vezeto.sfa-ro__vezeto > .e-con-inner {
	background: var(--sfa-navy);
	border-radius: 18px;
	overflow: hidden;
	padding: 0 !important;
}

/* A képhasáb: a portré a kártya aljára ül, a kártya alsó éle vágja el. */
.sfa-ro__vezeto.sfa-ro__vezeto > .e-con-inner > .e-con:first-child,
.sfa-ro__vezeto-keposzlop.sfa-ro__vezeto-keposzlop {
	align-self: stretch;
	justify-content: flex-end;
	padding: 0;
}

.sfa-ro__vezeto.sfa-ro__vezeto > .e-con-inner > .e-con:first-child .elementor-widget-container,
.sfa-ro__vezeto.sfa-ro__vezeto > .e-con-inner > .e-con:first-child figure {
	margin: 0;
}

/*
 * A PORTRÉ MAGASSÁGA SZABJA MEG A KÁRTYA MAGASSÁGÁT – EZT KELL KORLÁTOZNI.
 *
 * A képhasáb 34 százalék, azaz 1300 pixeles sávban körülbelül 440 pixel
 * széles. Egy álló portré ekkora szélességnél 600 pixel fölé nő, a mellette
 * álló szöveg viszont 400 pixel körül véget ér. A különbség egy nagy, üres
 * sötétkék folt a kártya alján – ettől hatott a szekció túl nagynak.
 *
 * A `max-height` a szöveg magasságához igazítja a portrét, a `width: auto`
 * pedig megtartja az arányát (nem nyúlik meg). A hasáb `justify-content:
 * flex-end` beállítása miatt a kép továbbra is a kártya alsó élén áll.
 */
.sfa-ro__vezeto.sfa-ro__vezeto > .e-con-inner > .e-con:first-child img {
	border-radius: 0;
	box-shadow: none;
	display: block;
	height: auto;
	margin-inline: auto;
	max-height: 420px;
	max-width: 100%;
	object-fit: contain;
	object-position: bottom center;
	width: auto;
}

/* A szöveghasáb kapja a kártya bélesét. */
.sfa-ro__vezeto.sfa-ro__vezeto > .e-con-inner > .e-con:last-child,
.sfa-ro__vezeto-szoveg.sfa-ro__vezeto-szoveg {
	padding: 42px 44px 42px 12px;
}

/* --- Kapcsolat: a felső két kártya egyforma magas --------------------- */

/*
 * Az „egy hosszúságú" kártyákhoz nem trükk kell, hanem az, hogy a hasábok
 * nyúljanak ki a sor magasságára (`stretch`), a kártya pedig töltse ki a
 * hasábot. Az űrlapos kártya a magasabb, az elérhetőségek követik.
 */
.sfa-ka__fosav.sfa-ka__fosav > .e-con-inner > .e-con,
.sfa-ka__alsosav.sfa-ka__alsosav > .e-con-inner > .e-con {
	align-self: stretch;
	height: auto;
}

/* Az elérhetőség-lista alul elszakad a kártya aljától, hogy ne lógjon ki. */
.sfa-ka__elerhetoseg.sfa-ka__elerhetoseg {
	justify-content: flex-start;
}

/* --- Kapcsolat: a bizalmi ikonsor az űrlap alatt ---------------------- */

/*
 * A látványterven négy egyenlő mező, függőleges elválasztókkal, középre
 * igazítva. Elválasztó nélkül egyetlen elmosódó szövegsávnak látszott.
 */
.sfa-ka__bizalom.sfa-ka__bizalom > .e-con {
	align-items: center;
	flex: 1 1 0 !important;
	justify-content: flex-start;
	max-width: none !important;
	padding: 4px 14px;
	position: relative;
	text-align: center;
}

.sfa-ka__bizalom.sfa-ka__bizalom > .e-con + .e-con::before {
	background: var(--sfa-keret);
	content: "";
	inset: 4px auto 4px 0;
	position: absolute;
	width: 1px;
}

.sfa-ka__bizalom.sfa-ka__bizalom .elementor-icon-box-wrapper {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	justify-content: flex-start;
}

.sfa-ka__bizalom.sfa-ka__bizalom .elementor-icon-box-icon {
	margin: 0;
}

.sfa-ka__bizalom.sfa-ka__bizalom .elementor-icon-box-title,
.sfa-ka__bizalom.sfa-ka__bizalom .elementor-icon-box-title span {
	display: block;
	line-height: 1.3;
}

.sfa-ka__bizalom.sfa-ka__bizalom .elementor-icon-box-description {
	margin-top: 4px;
}

/* --- Kapcsolat: a visszahívó űrlap a sötét sávon --------------------- */

/*
 * Itt az űrlap `cimke="felul"` módban fut: a címke a mező fölött áll, ezért
 * fehérre kell váltania. A mezők maguk világosak maradnak – azt az űrlapok
 * bővítmény stíluslapja adja, ahhoz itt nem nyúlunk.
 */
/*
 * CSAK a felül álló címkék lesznek fehérek. A lebegő címke ugyanis a mező
 * FEHÉR hátterében ül, amíg a mező üres – ha azt is fehérre festenénk,
 * láthatatlanná válna, és a látogató üres dobozokat látna felirat nélkül.
 * Pontosan ez történt, amíg az űrlap még lebegő módban futott ezen a sávon.
 */
.sfa-ka__visszahivas.sfa-ka__visszahivas .sfu-mezo--cimke-felul .sfu-cimke,
.sfa-ka__visszahivas.sfa-ka__visszahivas .sfu-csoport__cim,
.sfa-ka__visszahivas.sfa-ka__visszahivas .sfu-leiras,
.sfa-ka__visszahivas.sfa-ka__visszahivas .sfu-jelolo span {
	color: #fff;
}

.sfa-ka__visszahivas.sfa-ka__visszahivas .sfu-jelolo a {
	color: var(--sfa-gold);
}

.sfa-ka__visszahivas.sfa-ka__visszahivas .sfu-urlap-doboz {
	background: none;
	box-shadow: none;
	padding: 0;
}

/* -------------------------------------------------------------------------
 * 5. TÖRÉSPONTOK
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {

	.sfa-fo__hero-szoveg.sfa-fo__hero-szoveg {
		padding: 56px 20px;
	}

	.sfa-fo__elonyok.sfa-fo__elonyok > .e-con {
		flex: 1 1 30% !important;
	}

	/* Tableten három hasáb fér el, a negyedik előtt nem kell vonal. */
	.sfa-fo__elonyok.sfa-fo__elonyok > .e-con:nth-child(3n + 1)::before {
		display: none;
	}

	.sfa-ro__cel-kartya.sfa-ro__cel-kartya {
		flex: 1 1 30% !important;
	}

	/*
	 * Tableten a szövegoszlop szélesebb lehet, mert a hero is keskenyebb –
	 * 58%-nál a cím két-három szavas sorokban törne.
	 */
	.sfa-fo__hero-szoveg.sfa-fo__hero-szoveg {
		max-width: 74%;
		padding: 56px 32px 60px max(20px, calc((100vw - var(--sfa-max)) / 2));
	}

	.sfa-fo__hero-kep.sfa-fo__hero-kep::after {
		background:
			linear-gradient(
				90deg,
				var(--sfa-navy-melyy) 0%,
				color-mix(in srgb, var(--sfa-navy-melyy) 97%, transparent) 42%,
				color-mix(in srgb, var(--sfa-navy-melyy) 74%, transparent) 62%,
				color-mix(in srgb, var(--sfa-navy-melyy) 30%, transparent) 84%,
				color-mix(in srgb, var(--sfa-navy-melyy) 12%, transparent) 100%
			),
			linear-gradient(180deg, color-mix(in srgb, var(--sfa-navy-melyy) 50%, transparent) 0%, transparent 34%);
	}
}

@media (max-width: 767px) {

	/*
	 * MOBILON UGYANAZ AZ ELRENDEZÉS, CSAK ELFORGATVA.
	 *
	 * Korábban itt a kép a szöveg ELÉ került (`order: 1`), és 220 pixel
	 * magasan letolta a címet – ezért kezdődött a szöveg olyan mélyen. Most a
	 * kép háttér marad, a szöveg pedig rögtön a fejléc alatt indul.
	 *
	 * Az átmenet FÜGGŐLEGESRE vált: keskeny képernyőn nincs bal-jobb
	 * felosztás, tehát felül kell sötétnek lennie, ahol a szöveg van, és alul
	 * engedhetünk a fotónak.
	 */
	.sfa-fo__hero.sfa-fo__hero {
		min-height: 0;
		text-align: left;
	}

	.sfa-fo__hero-szoveg.sfa-fo__hero-szoveg {
		justify-content: flex-start;
		max-width: 100%;
		padding: 36px 20px 44px;
	}

	.sfa-fo__hero-kep.sfa-fo__hero-kep::after {
		background: linear-gradient(
			180deg,
			var(--sfa-navy-melyy) 0%,
			color-mix(in srgb, var(--sfa-navy-melyy) 96%, transparent) 44%,
			color-mix(in srgb, var(--sfa-navy-melyy) 80%, transparent) 68%,
			color-mix(in srgb, var(--sfa-navy-melyy) 58%, transparent) 100%
		);
	}

	/*
	 * A kép középpontja jobbra tolva: a legtöbb fotón a lényeg nem a bal
	 * szélen van, keskeny kivágásnál viszont pont az veszne el.
	 */
	.sfa-fo__hero-kep.sfa-fo__hero-kep img {
		object-position: 60% center;
	}

	.sfa-o.sfa-o .sfa-o__gombsor > .elementor-widget {
		width: 100%;
	}

	.sfa-o.sfa-o .sfa-o__gombsor .elementor-button {
		display: block;
		text-align: center;
	}

	.sfa-fo__elonyok.sfa-fo__elonyok > .e-con {
		flex: 1 1 100% !important;
	}

	.sfa-fo__elonyok.sfa-fo__elonyok > .e-con::before {
		display: none;
	}

	.sfa-ro__cel-kartya.sfa-ro__cel-kartya {
		flex: 1 1 100% !important;
	}

	.sfa-o__cta.sfa-o__cta .elementor-icon-box-wrapper {
		align-items: flex-start;
		flex-direction: column;
	}

	.sfa-ka__vh-gomb.sfa-ka__vh-gomb {
		padding-left: 0;
	}

	/*
	 * Mobilon a portré a szöveg FÖLÉ kerül, tehát nem tud a kártya aljára
	 * állni. Ott középre igazítva, korlátozott magassággal mutatjuk, hogy ne
	 * foglalja el a fél képernyőt, mielőtt a szöveghez érne az olvasó.
	 */
	.sfa-ro__vezeto-keposzlop.sfa-ro__vezeto-keposzlop img {
		margin-inline: auto;
		max-height: 320px;
		object-fit: contain;
		object-position: bottom center;
		width: auto;
	}

	.sfa-ro__vezeto-szoveg.sfa-ro__vezeto-szoveg {
		padding: 24px 20px 30px;
	}

	.sfa-ka__bizalom.sfa-ka__bizalom > .e-con:nth-child(odd)::before {
		display: none;
	}
}

/* =========================================================================
 * RESZPONZÍV ELRENDEZÉS – RÁCCSAL, NEM SZÁZALÉKKAL
 *
 * MIÉRT ÍRTAM ÚJRA. Eddig minden sor az Elementor százalékos hasábszélességére
 * épült, és a rés ehhez hozzáadódott – vagyis minden töréspontnál külön ki
 * kellett számolni, mennyit vonjunk le. Ez a számolás töréspontonként és
 * soronként másképp jött ki, ezért javítottam hetekig egyesével, és ezért
 * bukkant fel újra meg újra máshol.
 *
 * A rács ezt a matekot megszünteti. `repeat(N, minmax(0, 1fr))`: legyen N
 * egyenlő oszlop – a rést a böngésző vonja le, nem én.
 *
 * KÉT DOLGOT KELLETT JAVÍTANI 1.14.3-BAN.
 *
 * 1. „Dobozolt" konténereknél rossz elemre került a rács.
 *    Az Elementor a `boxed` konténert két elemből építi: egy teljes szélességű
 *    külsőből, és egy `.e-con-inner` belsőből, amiben a tartalom ül. Ha a rács
 *    a külsőre kerül, akkor a rácsnak EGYETLEN eleme van – maga a belső doboz –,
 *    és az kap egy `1fr` oszlopnyi helyet: háromoszlopos rácsnál a lap
 *    harmadát. Pontosan ezért zsugorodott csíkká az ajánlatkérés és a
 *    jelentkezés fehér kártyája.
 *    Megoldás: a rács mindig a tényleges tartalomdobozt kapja – teljes
 *    szélességű konténernél magát az elemet, dobozoltnál a `.e-con-inner`-t.
 *
 * 2. `1fr` helyett `minmax(0, 1fr)`.
 *    Az `1fr` valójában `minmax(auto, 1fr)`: a sáv soha nem lehet keskenyebb a
 *    tartalma legkisebb szélességénél. Egyetlen hosszú szó tehát szélesebbre
 *    feszíti a saját oszlopát, a többi pedig összemegy – így lesz „nem
 *    egységes" egy amúgy egyenlő rács. A `minmax(0, 1fr)` ezt kizárja.
 *
 * HOGYAN ÁLLÍTJUK AZ OSZLOPSZÁMOT. Egyetlen egyéni tulajdonsággal
 * (`--sfa-oszlop`), amit az osztályon állítunk. Az öröklődés miatt a
 * `.e-con-inner` is látja, tehát a töréspontoknál elég egy helyen írni.
 *
 * A darabszámokat a sor elemszámának OSZTÓIRA választottam, hogy soha ne
 * maradjon árva elem az utolsó sorban:
 *
 *   6 elemes sorok:  6 → 3 → 2 → 1
 *   4 elemes sorok:  4 → 2 → 1
 *   5 elemes sor:    5 → 3 → 1     (az ötnek nincs jobb osztója)
 *   3 elemes sor:    3 → 1
 * ====================================================================== */

.sfa-ro__okok.sfa-ro__okok:not(:has(> .e-con-inner)),
.sfa-ro__ertekek.sfa-ro__ertekek:not(:has(> .e-con-inner)),
.sfa-ro__celcsoportok.sfa-ro__celcsoportok:not(:has(> .e-con-inner)),
.sfa-o__szamok.sfa-o__szamok:not(:has(> .e-con-inner)),
.sfa-ka__bizalom.sfa-ka__bizalom:not(:has(> .e-con-inner)),
.sfa-fo__elonyok.sfa-fo__elonyok:not(:has(> .e-con-inner)),
.sfa-ao__elonyok.sfa-ao__elonyok:not(:has(> .e-con-inner)),
.sfa-ao__lepesek.sfa-ao__lepesek:not(:has(> .e-con-inner)),
.sfa-ao__bizalom.sfa-ao__bizalom:not(:has(> .e-con-inner)),
.sfa-ro__okok.sfa-ro__okok > .e-con-inner,
.sfa-ro__ertekek.sfa-ro__ertekek > .e-con-inner,
.sfa-ro__celcsoportok.sfa-ro__celcsoportok > .e-con-inner,
.sfa-o__szamok.sfa-o__szamok > .e-con-inner,
.sfa-ka__bizalom.sfa-ka__bizalom > .e-con-inner,
.sfa-fo__elonyok.sfa-fo__elonyok > .e-con-inner,
.sfa-ao__elonyok.sfa-ao__elonyok > .e-con-inner,
.sfa-ao__lepesek.sfa-ao__lepesek > .e-con-inner,
.sfa-ao__bizalom.sfa-ao__bizalom > .e-con-inner {
	align-items: stretch;
	display: grid !important;
	grid-template-columns: repeat(var(--sfa-oszlop, 1), minmax(0, 1fr));
}

/*
 * A hasábok a rácstól kapják a szélességet, ezért az Elementor százalékait
 * semlegesíteni kell – különben azok visszaszűkítenék a rácscellát.
 */
.sfa-ro__okok.sfa-ro__okok > .e-con,
.sfa-ro__ertekek.sfa-ro__ertekek > .e-con,
.sfa-ro__celcsoportok.sfa-ro__celcsoportok > .e-con,
.sfa-o__szamok.sfa-o__szamok > .e-con,
.sfa-ka__bizalom.sfa-ka__bizalom > .e-con,
.sfa-fo__elonyok.sfa-fo__elonyok > .e-con,
.sfa-ao__elonyok.sfa-ao__elonyok > .e-con,
.sfa-ao__lepesek.sfa-ao__lepesek > .e-con,
.sfa-ao__bizalom.sfa-ao__bizalom > .e-con,
.sfa-ro__okok.sfa-ro__okok > .e-con-inner > .e-con,
.sfa-ro__ertekek.sfa-ro__ertekek > .e-con-inner > .e-con,
.sfa-ro__celcsoportok.sfa-ro__celcsoportok > .e-con-inner > .e-con,
.sfa-o__szamok.sfa-o__szamok > .e-con-inner > .e-con,
.sfa-ka__bizalom.sfa-ka__bizalom > .e-con-inner > .e-con,
.sfa-fo__elonyok.sfa-fo__elonyok > .e-con-inner > .e-con,
.sfa-ao__elonyok.sfa-ao__elonyok > .e-con-inner > .e-con,
.sfa-ao__lepesek.sfa-ao__lepesek > .e-con-inner > .e-con,
.sfa-ao__bizalom.sfa-ao__bizalom > .e-con-inner > .e-con {
	flex: none !important;
	max-width: none !important;
	min-width: 0;
	width: auto !important;
}

/* --- Alap oszlopszámok ------------------------------------------------- */

/* Hat elemes sorok */
.sfa-ro__okok,
.sfa-ro__ertekek,
.sfa-ro__celcsoportok,
.sfa-fo__elonyok {
	--sfa-oszlop: 6;
}

/* Négy elemes sorok */
.sfa-o__szamok,
.sfa-ka__bizalom {
	--sfa-oszlop: 4;
}

/* Három elemes sor (ajánlatkérés – előnyök) */
.sfa-ao__elonyok {
	--sfa-oszlop: 3;
}

/* Öt elemes sor (ajánlatkérés – lépések) */
.sfa-ao__lepesek {
	--sfa-oszlop: 5;
}

/*
 * A jelentkezés „bizalom" sávján mindkét osztály rajta van
 * (`sfa-ao__elonyok sfa-ao__bizalom`), ezért ennek KÉSŐBB kell jönnie, mint az
 * `sfa-ao__elonyok` hármas értékének – különben a három nyerne.
 */
.sfa-ao__bizalom {
	--sfa-oszlop: 4;
}

/* --- Töréspontok ------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * SZÁMSÁV: A NÉGY BLOKK A TELJES SZÉLESSÉGET FOGJA KÖZRE
 *
 * A rács négy egyenlő cellát ad, a blokkok tartalma viszont balra zárva ül a
 * cellájában. Mivel az utolsó felirat („céges partner") rövidebb a cellánál,
 * a sor jobb oldalán marad egy 200 pixeles üres farok: a sáv balra húzottnak
 * látszik, pedig a rács matematikailag egyenletes. Ez az, ami „nincs a
 * helyén".
 *
 * Megoldás: a cellák a tartalmukhoz igazodnak (`max-content`), a maradék
 * helyet pedig a `space-between` osztja szét KÖZÉJÜK. Így az első blokk a bal,
 * a negyedik a jobb szélen zár, a térközök egyenlők – ez a látványterv
 * elrendezése.
 *
 * `minmax(0, max-content)`, nem sima `max-content`: ha egyszer hosszabb
 * felirat kerül bele, a cella zsugorodhat, és nem lóg ki a sávból.
 *
 * Csak akkor él, amíg egy sorban van mind a négy blokk. Kettő vagy egy
 * oszlopnál visszakapcsolunk az egyenlő cellákra, mert ott a `space-between`
 * összevissza térközöket adna.
 * ---------------------------------------------------------------------- */

@media (min-width: 781px) {

	.sfa-o__szamok.sfa-o__szamok:not(:has(> .e-con-inner)),
	.sfa-o__szamok.sfa-o__szamok > .e-con-inner {
		grid-template-columns: repeat(var(--sfa-oszlop, 1), minmax(0, max-content));
		justify-content: space-between;
	}
}

@media (max-width: 1200px) {

	.sfa-ro__okok,
	.sfa-ro__ertekek,
	.sfa-ro__celcsoportok,
	.sfa-fo__elonyok,
	.sfa-ao__lepesek {
		--sfa-oszlop: 3;
	}
}

@media (max-width: 980px) {

	/*
	 * Az ajánlatkérés és a jelentkezés kártyái már itt kettőre váltanak.
	 * Ezek nem a lap teljes szélességét kapják (belső béles + kártyakeret),
	 * ezért hamarabb fogy el a hely bennük, mint a Rólunk soraiban.
	 */
	.sfa-ao__elonyok,
	.sfa-ao__bizalom {
		--sfa-oszlop: 2;
	}
}

@media (max-width: 780px) {

	.sfa-ro__okok,
	.sfa-ro__ertekek,
	.sfa-ro__celcsoportok,
	.sfa-fo__elonyok,
	.sfa-o__szamok,
	.sfa-ka__bizalom,
	.sfa-ao__bizalom {
		--sfa-oszlop: 2;
	}

	/* Háromelemes sor: kettőnél árván maradna az utolsó – inkább egy alá. */
	.sfa-ao__elonyok {
		--sfa-oszlop: 1;
	}
}

@media (max-width: 560px) {

	.sfa-ro__okok,
	.sfa-ro__ertekek,
	.sfa-ro__celcsoportok,
	.sfa-fo__elonyok,
	.sfa-o__szamok,
	.sfa-ka__bizalom,
	.sfa-ao__bizalom,
	.sfa-ao__elonyok,
	.sfa-ao__lepesek {
		--sfa-oszlop: 1;
	}
}

/* -------------------------------------------------------------------------
 * KÉTHASÁBOS TARTALMI SOROK: 1025 PIXEL ALATT EGYMÁS ALÁ
 *
 * Ezek nem rácsok, hanem szöveg + kép párosok. Tableten a két hasáb már
 * annyira keskeny lenne, hogy a szöveg négy-öt szavas sorokban törne – ezért
 * itt nem szűkítünk, hanem egymás alá tesszük őket.
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {

	.sfa-o__sor.sfa-o__sor > .e-con,
	.sfa-o__sor.sfa-o__sor > .e-con-inner > .e-con {
		max-width: 100% !important;
		width: 100% !important;
	}

	/* A vezetői kártyán a portré fölülre kerül, középen. */
	.sfa-ro__vezeto.sfa-ro__vezeto > .e-con-inner > .e-con:first-child img {
		margin-inline: auto;
		max-height: 340px;
		width: auto;
	}

	.sfa-ro__vezeto.sfa-ro__vezeto > .e-con-inner > .e-con:last-child {
		padding: 8px 24px 32px;
	}
}


/* =========================================================================
 * A SZAKMAI VEZETŐ RÉSZLETES BEMUTATKOZÁSA (lenyíló, a sötét kártya alatt)
 *
 * Világos blokk, hogy ne legyen két sötét sáv egymás alatt. Ugyanolyan széles
 * és ugyanúgy lekerekített, mint a fölötte álló kártya – így összetartozónak
 * látszik, de nem versenyez vele.
 * ====================================================================== */

.sfa-vr {
	background: var(--sfa-feher, #fff);
	border: 1px solid var(--sfa-keret, #E3E8EF);
	border-radius: 18px;
	overflow: hidden;
}

.sfa-vr__rekesz + .sfa-vr__rekesz {
	border-top: 1px solid var(--sfa-keret, #E3E8EF);
}

/* --- A nyitható fejsor ------------------------------------------------- */

.sfa-vr__fej {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 16px;
	list-style: none;
	padding: 20px 26px;
	transition: background .15s ease;
}

/* A böngésző saját nyilát elrejtjük, a sajátunkat tesszük ki helyette. */
.sfa-vr__fej::-webkit-details-marker {
	display: none;
}

.sfa-vr__fej:hover,
.sfa-vr__rekesz[open] .sfa-vr__fej {
	background: var(--sfa-szurke, #F5F7FA);
}

.sfa-vr__nyil {
	align-items: center;
	border: 1.5px solid var(--sfa-gold);
	border-radius: 50%;
	color: var(--sfa-gold);
	display: inline-flex;
	flex: none;
	height: 30px;
	justify-content: center;
	transition: transform .2s ease;
	width: 30px;
}

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

.sfa-vr__cim {
	color: var(--sfa-navy);
	font-size: 1.0625rem;
	font-weight: 700;
}

.sfa-vr__alcim {
	color: var(--sfa-halvany, #5A6674);
	font-size: .875rem;
	margin-left: auto;
	text-align: right;
}

.sfa-vr__test {
	border-top: 1px solid var(--sfa-keret, #E3E8EF);
	padding: 26px 26px 32px;
}

/* --- Szakmai út: idővonal ---------------------------------------------- */

.sfa-vr__lead {
	color: var(--sfa-szoveg);
	font-size: 1.0625rem;
	line-height: 1.7;
	margin: 0 0 28px;
	max-width: 70ch;
}

.sfa-vr__lead strong {
	color: var(--sfa-navy);
}

/*
 * AZ ÉVSZÁM, A PONT ÉS A SZÖVEG EGY RÁCS HÁROM HASÁBJA.
 *
 * Az első változatban mindhárom abszolút pozícióval állt, egymástól függetlenül
 * megadott eltolásokkal – ezért csúszott el az évszám a saját pontjától, és
 * ezért nem volt a pont a vonal közepén. Rácsban ez nem fordulhat elő: a három
 * elem ugyanannak a sornak a hasábjai, tehát együtt mozognak. Átméretezni is
 * egy helyen kell: a `grid-template-columns` első két értéke.
 */
.sfa-vr__idovonal {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sfa-vr__idovonal li {
	display: grid;
	grid-template-columns: 62px 30px minmax(0, 1fr);
	line-height: 1.65;
	padding-bottom: 24px;
}

.sfa-vr__idovonal li:last-child {
	padding-bottom: 0;
}

.sfa-vr__ev {
	color: var(--sfa-navy);
	font-size: .9375rem;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	padding-right: 16px;
	text-align: right;
}

/*
 * A „sín”: a függőleges vonal és rajta a pont. A `.825em` a sormagasság fele
 * (1.65 ÷ 2), tehát a pont pontosan az első szövegsor közepén ül – akkor is,
 * ha a betűméret később változik.
 */
.sfa-vr__sin {
	position: relative;
}

.sfa-vr__sin::before {
	background: var(--sfa-keret, #E3E8EF);
	bottom: -24px;
	content: "";
	left: 50%;
	position: absolute;
	top: .825em;
	transform: translateX(-50%);
	width: 2px;
}

.sfa-vr__idovonal li:last-child .sfa-vr__sin::before {
	display: none;
}

.sfa-vr__sin::after {
	background: var(--sfa-feher, #fff);
	border: 2.5px solid var(--sfa-gold);
	border-radius: 50%;
	content: "";
	height: 11px;
	left: 50%;
	position: absolute;
	top: .825em;
	transform: translate(-50%, -50%);
	width: 11px;
}

.sfa-vr__idovonal p {
	color: var(--sfa-szoveg);
	margin: 0;
}

/* --- Referenciák -------------------------------------------------------- */

.sfa-vr__szamsor {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 30px;
}

.sfa-vr__szam {
	background: var(--sfa-szurke, #F5F7FA);
	border: 1px solid var(--sfa-keret, #E3E8EF);
	border-radius: 10px;
	flex: 1 1 200px;
	padding: 16px 20px;
}

.sfa-vr__szam b {
	color: var(--sfa-navy);
	display: block;
	font-size: 1.625rem;
	line-height: 1.1;
}

.sfa-vr__szam span {
	color: var(--sfa-halvany, #5A6674);
	font-size: .8125rem;
}

.sfa-vr__refracs {
	display: grid;
	gap: 28px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.sfa-vr__refcsoport h4 {
	color: var(--sfa-navy);
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .06em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.sfa-vr__refcsoport h4::after {
	background: var(--sfa-gold);
	content: "";
	display: block;
	height: 2px;
	margin-top: 8px;
	width: 34px;
}

.sfa-vr__refcsoport ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sfa-vr__refcsoport li {
	color: var(--sfa-szoveg);
	font-size: .90625rem;
	padding: 5px 0 5px 16px;
	position: relative;
}

.sfa-vr__refcsoport li::before {
	background: var(--sfa-gold);
	border-radius: 50%;
	content: "";
	height: 5px;
	left: 0;
	position: absolute;
	top: 13px;
	width: 5px;
}

/* --- Amit kínálunk ------------------------------------------------------ */

.sfa-vr__ajanlat {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.sfa-vr__ajanlat > div {
	background: var(--sfa-szurke, #F5F7FA);
	border: 1px solid var(--sfa-keret, #E3E8EF);
	border-radius: 10px;
	font-size: .90625rem;
	line-height: 1.6;
	padding: 18px 20px;
}

.sfa-vr__ajanlat b {
	color: var(--sfa-navy);
	display: block;
	font-size: .9375rem;
	margin-bottom: 5px;
}

/* --- Mobil -------------------------------------------------------------- */

@media (max-width: 640px) {

	.sfa-vr__fej,
	.sfa-vr__test {
		padding-left: 18px;
		padding-right: 18px;
	}

	/* Az alcím kis kijelzőn a címet szorítaná – ott a cím a fontos. */
	.sfa-vr__alcim {
		display: none;
	}

	.sfa-vr__idovonal li {
		grid-template-columns: 48px 26px minmax(0, 1fr);
	}

	.sfa-vr__ev {
		font-size: .875rem;
		padding-right: 10px;
	}
}