/* ══════════════════════════════════════════════════════════════════════════
   ENCO – KIAJÁNLÓ OLDALAK
   Blokkonként definiálva. Minden blokk a saját enco-k-* section-osztálya alatt
   áll, és csak a saját ek-* elemeit stilizálja. A központi CSS (mix-*, d-grid,
   aspect-*, layout-p-*) marad az alap, ez csak ráépül.
   Betöltés: main.html, a site.css után.

   Tartalom
     0. Közös alap és színkiosztás ................. .enco-k
     1. Fejezetnyitó ............................... .enco-k-fej
     2. Szakaszfej (cím + bevezető) ................ .ek-fej
     3. Pipás lista ................................ .enco-k-lista
     4. Kártyarács sávképpel ....................... .enco-k-kartyak
     5. Számozott lépések .......................... .enco-k-lepesek
     6. Statisztika-sáv ............................ .enco-k-szamok
     7. Rács-táblázat .............................. .enco-k-tabla
     8. Kiemelt mondat ............................. .enco-k-kiemeles
     9. Csoportosított listák ...................... .enco-k-oszlopok
    10. Fejezetzáró ajánlatkérő .................... .enco-k-cta
   ══════════════════════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  0. KÖZÖS ALAP – .enco-k                                             ║
   ║  Minden kiajánló-section ezt az osztályt is viseli. Itt él a paletta, ║
   ║  a mintázatok és a fejezetenkénti akcentszín.                        ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
.enco-k {
	--ek-kek:     var(--c05, 0, 69, 140);
	--ek-narancs: var(--c03, 250, 99, 41);
	--ek-zold:    20, 140, 69;
	--ek-citrom:  250, 171, 51;

	/* a fejezet akcentszíne – az enco-k-ak-* osztály írja felül */
	--ek-ak: var(--ek-kek);

	/* a kézikönyv színaránya: 10% narancs · 20% citrom · 40% zöld · 30% kék */
	--ek-arany: linear-gradient(to right,
		rgba(var(--ek-narancs), 1) 0 10%,
		rgba(var(--ek-citrom),  1) 10% 30%,
		rgba(var(--ek-zold),    1) 30% 70%,
		rgba(var(--ek-kek),     1) 70% 100%);

	/* arculati szaggatott hullám-mintázat */
	--ek-minta-feher: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='72'%20viewBox='0%200%20240%2072'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-dasharray='2%2012'%3E%3Cpath%20d='M0%2012C48%202%2072%2022%20120%2012S192%2022%20240%2012'/%3E%3Cpath%20d='M0%2036C48%2046%2072%2026%20120%2036S192%2026%20240%2036'/%3E%3Cpath%20d='M0%2060C48%2050%2072%2070%20120%2060S192%2070%20240%2060'/%3E%3C/g%3E%3C/svg%3E");
	--ek-minta-kek: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='72'%20viewBox='0%200%20240%2072'%3E%3Cg%20fill='none'%20stroke='%2300458c'%20stroke-width='2'%20stroke-linecap='round'%20stroke-dasharray='2%2012'%3E%3Cpath%20d='M0%2012C48%202%2072%2022%20120%2012S192%2022%20240%2012'/%3E%3Cpath%20d='M0%2036C48%2046%2072%2026%20120%2036S192%2026%20240%2036'/%3E%3Cpath%20d='M0%2060C48%2050%2072%2070%20120%2060S192%2070%20240%2060'/%3E%3C/g%3E%3C/svg%3E");
	--ek-korok: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='600'%20height='600'%20viewBox='0%200%20600%20600'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-dasharray='2%2014'%3E%3Ccircle%20cx='300'%20cy='300'%20r='40'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='80'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='120'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='160'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='200'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='240'/%3E%3Ccircle%20cx='300'%20cy='300'%20r='280'/%3E%3C/g%3E%3C/svg%3E");

	--ek-r:      1rem;     /* kártya-lekerekítés */
	--ek-r-nagy: 1.75rem;  /* nagy felületek     */
	--ek-arny:   0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -12px rgba(15, 23, 42, .18);
	--ek-arny-2: 0 2px 4px rgba(15, 23, 42, .05), 0 28px 56px -20px rgba(var(--ek-ak), .35);
	--ek-easing: cubic-bezier(.2, .7, .3, 1);
}

/* fejezetenkénti akcentszín */
.enco-k-ak-kek     { --ek-ak: var(--ek-kek); }
/* kék akcent kék mezőn eltűnne – ilyenkor citromra váltunk (a kézikönyv
   párosítása szerint a kék felületek kiemelőszíne a citrom) */
.enco-k-ak-kek.mix-dark-1,
.enco-k-ak-kek.mix-dark-2,
.enco-k-ak-kek.mix-darkest-1,
.enco-k-ak-kek.mix-darkest-2 { --ek-ak: var(--ek-citrom); }
.enco-k-ak-zold    { --ek-ak: var(--ek-zold); }
.enco-k-ak-citrom  { --ek-ak: var(--ek-citrom); }
.enco-k-ak-narancs { --ek-ak: var(--ek-narancs); }

/* a szakasz-címek sose törjenek csúnyán */
.enco-k .ek-cim,
.enco-k .ek-fej-cim,
.enco-k .ek-cta-cim   { text-wrap: balance; letter-spacing: -.015em; }
.enco-k .ek-bevezeto p,
.enco-k .ek-fej-lead p { text-wrap: pretty; }

/* gombok – közös finomítás */
.enco-k .ek-gomb {
	border-radius: 999px;
	padding-inline: 1.6rem;
	font-weight: 700;
	letter-spacing: .01em;
	transition: transform .25s var(--ek-easing), box-shadow .25s var(--ek-easing);
}
.enco-k .ek-gomb:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -8px rgba(var(--mix-accent), .55);
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  1. FEJEZETNYITÓ – .enco-k-fej                                       ║
   ║  Sötét, duotone fotó, arculati színsáv felül, óriás ghost sorszám.   ║
   ║  A sorszám CSS-számláló, tehát nincs hozzá markup és sose csúszik el.║
   ╚══════════════════════════════════════════════════════════════════════╝ */
.enco-k-fej {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	counter-increment: ek-fejezet;
}
/* arculati színsáv a section tetején */
.enco-k-fej::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: .5rem;
	background: var(--ek-arany);
	z-index: 3;
}
/* óriás sorszám a jobb alsó sarokban */
.enco-k-fej::after {
	content: counter(ek-fejezet, decimal-leading-zero);
	position: absolute;
	right: -.06em;
	bottom: -.28em;
	font-size: clamp(9rem, 26vw, 24rem);
	font-weight: 800;
	line-height: .8;
	letter-spacing: -.06em;
	color: rgba(255, 255, 255, .09);
	pointer-events: none;
	user-select: none;
	z-index: 0;
}
.enco-k-fej > .container { position: relative; z-index: 2; }

/* A hullám-mintázatot a site.css .enco-lines osztálya adja (a section
   osztálylistájában), így egy helyen van definiálva. */

/* kicker: színes pötty + ritkított verzál */
.enco-k-fej .ek-kicker p {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: .22em;
	font-weight: 700;
	color: rgba(255, 255, 255, .78);
}
.enco-k-fej .ek-kicker p::before {
	content: "";
	width: 2.5rem;
	height: 3px;
	border-radius: 2px;
	background: rgb(var(--ek-ak));
	flex: 0 0 auto;
}
.enco-k-fej .ek-fej-cim { line-height: 1.12; }
.enco-k-fej .ek-fej-lead p {
	max-width: 46ch;
	color: rgba(255, 255, 255, .8);
	font-weight: 300;
	line-height: 1.5;
}

@media (max-width: 991.98px) {
	.enco-k-fej::after { font-size: 11rem; bottom: -.3em; opacity: .7; }
	.enco-k-fej .ek-kicker p { letter-spacing: .16em; }
	.enco-k-fej .ek-kicker p::before { width: 1.6rem; }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  2. SZAKASZFEJ – .ek-fej                                             ║
   ║  Minden szakasz elejére: akcentszínű kalap-vonal + cím + bevezető.   ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
.enco-k .ek-fej { position: relative; padding-top: 1.5rem !important; }
.enco-k .ek-fej::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 3.25rem;
	height: 4px;
	border-radius: 2px;
	background: rgb(var(--ek-ak));
}
.enco-k .ek-fej .ek-cim { line-height: 1.18; }
.enco-k .ek-fej .ek-bevezeto p {
	margin-top: .9rem;
	max-width: 62ch;
	opacity: .78;
	line-height: 1.6;
}
/* Kék mezőn a teljes arculati gradiens kék vége beleolvadna a háttérbe,
   ezért ott a maradék három szín tölti ki a sávot – a kézikönyv arányát
   megtartva (narancs 1 : citrom 2 : zöld 4). Ugyanez a szabály él a
   site.css-ben a .article-focus kalap-sávjára is. */
.enco-k.mix-dark-1 .ek-fej::before,
.enco-k.mix-dark-2 .ek-fej::before,
.enco-k.mix-darkest-1 .ek-fej::before,
.enco-k.mix-darkest-2 .ek-fej::before {
	width: 4rem;
	background: linear-gradient(to right,
		rgba(var(--ek-narancs), 1) 0 14.3%,
		rgba(var(--ek-citrom),  1) 14.3% 42.9%,
		rgba(var(--ek-zold),    1) 42.9% 100%);
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  3. PIPÁS LISTA – .enco-k-lista (+ .ek-pipa bárhol)                  ║
   ║  Bal oldalt tapadó cím, jobb oldalt hajszálvonalas felsorolás.       ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
.enco-k .ek-pipa ul {
	/* a keretrendszer flexet tesz a listákra – az megakadályozná a hasábolást */
	display: block !important;
	list-style: none;
	margin: 0;
	padding: 0;
}
.enco-k .ek-pipa li {
	position: relative;
	padding: .7rem 0 .7rem 2.6rem;
	margin: 0;
	line-height: 1.5;
	break-inside: avoid;
	border-bottom: 1px solid rgba(var(--mix-text), .09);
	transition: padding-left .25s var(--ek-easing), color .25s var(--ek-easing);
}
.enco-k .ek-pipa li:hover { padding-left: 2.9rem; }
.enco-k .ek-pipa li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .72em;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: .5rem;
	background-color: rgba(var(--ek-ak), .12);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E");
	background-size: .85rem;
	background-position: center;
	background-repeat: no-repeat;
	transition: background-color .25s var(--ek-easing);
}
.enco-k .ek-pipa li:hover::before { background-color: rgba(var(--ek-ak), .24); }

/* kis méret – a csoportosított kártyákon belül */
.enco-k .ek-pipa-sm li { padding: .45rem 0 .45rem 1.9rem; font-size: .9375rem; }
.enco-k .ek-pipa-sm li::before { width: 1.15rem; height: 1.15rem; border-radius: .38rem; background-size: .7rem; top: .58em; }
.enco-k .ek-pipa-sm li:hover { padding-left: 2.1rem; }

@media (min-width: 992px) {
	/* két hasáb – a hasábhatáron elválasztó vonallal */
	.enco-k .ek-pipa-2 ul { column-count: 2; column-gap: 3rem; column-rule: 1px solid rgba(var(--mix-text), .08); }
	/* tapadó bal oszlop a hosszú listák mellett */
	.enco-k-lista .ek-oldal { position: sticky; top: 7rem; align-self: flex-start; }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  4. KÁRTYARÁCS SÁVKÉPPEL – .enco-k-kartyak                           ║
   ║  Széles sávkép, fölé csúszó fehér kártyák, akcentcsík + hover-emelés.║
   ╚══════════════════════════════════════════════════════════════════════╝ */
.enco-k-kartyak .ek-fej { margin-bottom: 2.5rem !important; }

/* --- sávkép --- */
.enco-k-kartyak .ek-banner {
	position: relative;
	display: block;
	border-radius: var(--ek-r-nagy);
	box-shadow: var(--ek-arny);
}
.enco-k-kartyak .ek-banner img { transition: transform 1.2s var(--ek-easing); }
.enco-k-kartyak .ek-banner:hover img { transform: scale(1.04); }
/* alsó sötétítés, hogy a rácsúszó kártyák elváljanak */
.enco-k-kartyak .ek-banner::after {
	content: "";
	position: absolute;
	inset: 40% 0 0 0;
	background: linear-gradient(to bottom, rgba(var(--ek-kek), 0), rgba(var(--ek-kek), .55));
	pointer-events: none;
}

/* --- kártyarács --- */
.enco-k-kartyak .ek-racs { counter-reset: ek-kartya; position: relative; z-index: 2; }
@media (min-width: 992px) {
	.enco-k-kartyak .ek-racs-atfed { margin-top: -5rem; padding-inline: 2.5rem; }
}

.enco-k-kartyak .ek-kartya {
	position: relative;
	height: 100%;
	padding: 2.5rem 1.75rem 1.75rem !important;
	border-radius: var(--ek-r);
	background: #fff;
	box-shadow: var(--ek-arny);
	overflow: hidden;
	counter-increment: ek-kartya;
	transition: transform .35s var(--ek-easing), box-shadow .35s var(--ek-easing);
}
/* felső akcentcsík – hoverre végigfut */
.enco-k-kartyak .ek-kartya::before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	height: 4px;
	width: 3.5rem;
	background: rgb(var(--ek-ak));
	transition: width .45s var(--ek-easing);
}
/* halvány sorszám a jobb felső sarokban */
.enco-k-kartyak .ek-kartya::after {
	content: counter(ek-kartya, decimal-leading-zero);
	position: absolute;
	right: 1rem;
	top: .35rem;
	font-size: 2.75rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.05em;
	color: rgba(var(--ek-ak), .1);
	pointer-events: none;
}
.enco-k-kartyak .ek-kartya:hover { transform: translateY(-6px); box-shadow: var(--ek-arny-2); }
.enco-k-kartyak .ek-kartya:hover::before { width: 100%; }

.enco-k-kartyak .ek-kartya-cim { line-height: 1.3; padding-right: 2.75rem; }
.enco-k-kartyak .ek-kartya article p { opacity: .74; line-height: 1.6; margin-bottom: 0; }

@media (max-width: 991.98px) {
	.enco-k-kartyak .ek-banner { border-radius: var(--ek-r); margin-bottom: 1.5rem; }
	.enco-k-kartyak .ek-kartya { padding: 1.75rem 1.25rem 1.5rem !important; }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  5. SZÁMOZOTT LÉPÉSEK – .enco-k-lepesek                              ║
   ║  Bal oldalt tapadó cím, jobbra folyamat: körös sorszám + kötővonal.  ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
.enco-k-lepesek .ek-sor { counter-reset: ek-lepes; padding: 0 !important; }

.enco-k-lepesek .ek-lepes {
	position: relative;
	counter-increment: ek-lepes;
	padding: 0 0 2.75rem 5.25rem !important;
	margin-bottom: 0 !important;
}
.enco-k-lepesek .ek-sor figure:last-child .ek-lepes { padding-bottom: 0 !important; }

/* sorszám-korong */
.enco-k-lepesek .ek-lepes::before {
	content: counter(ek-lepes, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: -.15rem;
	width: 3.25rem;
	height: 3.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: rgb(var(--ek-ak));
	background: rgba(var(--ek-ak), .1);
	box-shadow: inset 0 0 0 1px rgba(var(--ek-ak), .22);
	transition: background .3s var(--ek-easing), color .3s var(--ek-easing), box-shadow .3s var(--ek-easing);
	z-index: 1;
}
/* kötővonal a korongok között */
.enco-k-lepesek .ek-lepes::after {
	content: "";
	position: absolute;
	left: 1.59rem;
	top: 3.35rem;
	bottom: .35rem;
	width: 2px;
	background: repeating-linear-gradient(to bottom,
		rgba(var(--ek-ak), .45) 0 5px, transparent 5px 11px);
}
.enco-k-lepesek .ek-sor figure:last-child .ek-lepes::after { display: none; }
.enco-k-lepesek .ek-lepes:hover::before {
	background: rgb(var(--ek-ak));
	color: #fff;
	box-shadow: 0 8px 20px -8px rgba(var(--ek-ak), .8);
}

.enco-k-lepesek .ek-lepes-cim { line-height: 1.3; padding-top: .55rem; }
.enco-k-lepesek .ek-lepes article p { opacity: .72; line-height: 1.65; max-width: 62ch; margin-top: .35rem; }

@media (min-width: 992px) {
	.enco-k-lepesek .ek-oldal { position: sticky; top: 7rem; align-self: flex-start; }
}
@media (max-width: 991.98px) {
	.enco-k-lepesek .ek-lepes { padding-left: 4rem !important; }
	.enco-k-lepesek .ek-lepes::before { width: 2.75rem; height: 2.75rem; font-size: .95rem; }
	.enco-k-lepesek .ek-lepes::after { left: 1.34rem; top: 2.85rem; }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  6. STATISZTIKA-SÁV – .enco-k-szamok                                 ║
   ║  Sötét mező, arculati körmintázat, óriás értékek elválasztókkal.     ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
.enco-k-szamok { position: relative; overflow: hidden; }
.enco-k-szamok::before {
	content: "";
	position: absolute;
	right: -12rem;
	top: 50%;
	width: 42rem;
	height: 42rem;
	transform: translateY(-50%);
	background: var(--ek-korok) center / contain no-repeat;
	opacity: .12;
	pointer-events: none;
}
.enco-k-szamok > .container { position: relative; z-index: 1; }

.enco-k-szamok .ek-szamracs { margin-top: 2.75rem; }
.enco-k-szamok .ek-szam {
	position: relative;
	padding: .5rem 2rem !important;
	text-align: center;
}
/* elválasztó hajszálvonal a számok között */
@media (min-width: 992px) {
	.enco-k-szamok .ek-szam::before {
		content: "";
		position: absolute;
		left: 0;
		top: 10%;
		bottom: 10%;
		width: 1px;
		background: rgba(255, 255, 255, .16);
	}
	.enco-k-szamok .ek-szamracs .place > *:first-child .ek-szam::before,
	.enco-k-szamok .ek-szamracs > .content-box > *:first-child .ek-szam::before { display: none; }
}
.enco-k-szamok .ek-szam-ertek {
	line-height: 1;
	letter-spacing: -.035em;
	white-space: nowrap;
}
.enco-k-szamok .ek-szam-ertek b { font-weight: 800; }
/* rövid színes aláhúzás az érték alatt */
.enco-k-szamok .ek-szam-ertek::after {
	content: "";
	display: block;
	width: 2.75rem;
	height: 4px;
	border-radius: 2px;
	margin: 1rem auto 0;
	background: rgb(var(--ek-ak));
}
.enco-k-szamok .ek-szam-cimke p {
	margin: .85rem 0 0;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 600;
	opacity: .72;
}

@media (max-width: 991.98px) {
	.enco-k-szamok .ek-szam { padding: 1.5rem 0 !important; }
	.enco-k-szamok .ek-szam + .ek-szam { border-top: 1px solid rgba(255, 255, 255, .14); }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  7. RÁCS-TÁBLÁZAT – .enco-k-tabla                                    ║
   ║  Sötétkék fejléc, zebracsíkos sorok, kiemelt első oszlop.            ║
   ║                                                                      ║
   ║  FONTOS: a rács elemei a Grid <figure> burkolói, a saját .ek-cella   ║
   ║  dobozunk EZEKEN BELÜL ül (mindig egyedüli gyermekként). A sor- és   ║
   ║  oszlopszámtant ezért a figure-ökön kell végezni, különben minden    ║
   ║  cella :nth-child(1) lenne.                                          ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
.enco-k-tabla .ek-tabla {
	margin-top: 2.5rem;
	border-radius: var(--ek-r);
	overflow: hidden;
	box-shadow: var(--ek-arny);
}

/* --- fejléccellák --- */
.enco-k-tabla .ek-fejcella {
	padding: 1.1rem 1.25rem !important;
	background: rgb(var(--ek-kek));
}
.enco-k-tabla .ek-fejcella p {
	margin: 0;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	line-height: 1.35;
}

/* --- adatcellák --- */
.enco-k-tabla .ek-cella {
	height: 100%;
	padding: 1.05rem 1.25rem !important;
	background: #fff;
	box-shadow: inset 0 -1px 0 rgba(var(--ek-kek), .1);
}
.enco-k-tabla .ek-cella p { margin: 0; line-height: 1.55; }

/* --- zebracsík: a fejlécsor után soronként váltakozva ------------------- */
/* c3 → 3 fejléc-figure (1–3), az adatok 4-től; periódus 2 sor = 6 figure  */
.enco-k-tabla .ek-tabla-c3 figure:nth-child(6n+4) .ek-cella,
.enco-k-tabla .ek-tabla-c3 figure:nth-child(6n+5) .ek-cella,
.enco-k-tabla .ek-tabla-c3 figure:nth-child(6n+6) .ek-cella { background: rgba(var(--ek-kek), .04); }
/* c4 → adatok 5-től; periódus 8 */
.enco-k-tabla .ek-tabla-c4 figure:nth-child(8n+5) .ek-cella,
.enco-k-tabla .ek-tabla-c4 figure:nth-child(8n+6) .ek-cella,
.enco-k-tabla .ek-tabla-c4 figure:nth-child(8n+7) .ek-cella,
.enco-k-tabla .ek-tabla-c4 figure:nth-child(8n+8) .ek-cella { background: rgba(var(--ek-kek), .04); }
/* c2 → adatok 3-tól; periódus 4 */
.enco-k-tabla .ek-tabla-c2 figure:nth-child(4n+3) .ek-cella,
.enco-k-tabla .ek-tabla-c2 figure:nth-child(4n+4) .ek-cella { background: rgba(var(--ek-kek), .04); }

/* --- kiemelt első oszlop ------------------------------------------------ */
.enco-k-tabla .ek-tabla-c2 figure:nth-child(2n+1) .ek-cella,
.enco-k-tabla .ek-tabla-c3 figure:nth-child(3n+1) .ek-cella,
.enco-k-tabla .ek-tabla-c4 figure:nth-child(4n+1) .ek-cella {
	box-shadow: inset 0 -1px 0 rgba(var(--ek-kek), .1), inset 3px 0 0 rgb(var(--ek-ak));
}
.enco-k-tabla .ek-tabla-c2 figure:nth-child(2n+1) .ek-cella p,
.enco-k-tabla .ek-tabla-c3 figure:nth-child(3n+1) .ek-cella p,
.enco-k-tabla .ek-tabla-c4 figure:nth-child(4n+1) .ek-cella p { font-weight: 700; }

/* --- mobil: a táblázat megtartja az oszlopait, vízszintesen görgethető --- */
/* (a fejléc elrejtése és a cellák egymás alá pakolása értelmezhetetlenné
    tenné a puszta százalékokat, ezért maradnak az oszlopok)               */
@media (max-width: 991.98px) {
	.enco-k-tabla .ek-tabla {
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: thin;
		scrollbar-color: rgba(var(--ek-kek), .35) transparent;
		-webkit-overflow-scrolling: touch;
	}
	.enco-k-tabla .ek-tabla-c2 { grid-template-columns: repeat(2, minmax(9rem, 1fr)); }
	.enco-k-tabla .ek-tabla-c3 { grid-template-columns: repeat(3, minmax(8.5rem, 1fr)); }
	.enco-k-tabla .ek-tabla-c4 { grid-template-columns: repeat(4, minmax(8.5rem, 1fr)); }
	.enco-k-tabla .ek-fejcella { padding: .85rem 1rem !important; }
	.enco-k-tabla .ek-cella    { padding: .85rem 1rem !important; }
	.enco-k-tabla .ek-tabla::-webkit-scrollbar { height: 6px; }
	.enco-k-tabla .ek-tabla::-webkit-scrollbar-thumb { background: rgba(var(--ek-kek), .3); border-radius: 3px; }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  8. KIEMELT MONDAT – .enco-k-kiemeles                                ║
   ║  Nagy idézőjel, akcentszínű oldalsáv, halvány arculati mintázat.     ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
.enco-k-kiemeles .ek-idezet {
	position: relative;
	overflow: hidden;
	padding: 3.25rem 3.5rem 3.25rem 6.5rem !important;
	border-radius: var(--ek-r-nagy);
	background: rgba(var(--ek-ak), .06);
	box-shadow: inset 0 0 0 1px rgba(var(--ek-ak), .16);
}
/* akcentszínű oldalsáv */
.enco-k-kiemeles .ek-idezet::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6px;
	background: rgb(var(--ek-ak));
}
/* idézőjel-ikon: maszk, hogy fölvegye a fejezet akcentszínét */
.enco-k-kiemeles .ek-idezet::after {
	content: "";
	position: absolute;
	left: 2.25rem;
	top: 3.1rem;
	width: 3rem;
	height: 3rem;
	background-color: rgba(var(--ek-ak), .45);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14,17H17L19,13V7H13V13H16M6,17H9L11,13V7H5V13H8L6,17Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14,17H17L19,13V7H13V13H16M6,17H9L11,13V7H5V13H8L6,17Z'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}
.enco-k-kiemeles .ek-idezet-szoveg p {
	margin: 0;
	line-height: 1.45;
	font-weight: 400;
	max-width: 56ch;
	letter-spacing: -.005em;
}

@media (max-width: 991.98px) {
	.enco-k-kiemeles .ek-idezet { padding: 4.75rem 1.5rem 2rem !important; border-radius: var(--ek-r); }
	.enco-k-kiemeles .ek-idezet::after { left: 1.5rem; top: 1.5rem; width: 2.25rem; height: 2.25rem; }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  9. CSOPORTOSÍTOTT LISTÁK – .enco-k-oszlopok                         ║
   ║  Kártyák akcentszínű fejléc-sávval, alattuk pipás felsorolás.        ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
.enco-k-oszlopok .ek-racs { margin-top: 2.5rem; }

.enco-k-oszlopok .ek-oszlopkartya {
	height: 100%;
	padding: 0 !important;
	border-radius: var(--ek-r);
	background: #fff;
	box-shadow: var(--ek-arny);
	overflow: hidden;
	transition: transform .35s var(--ek-easing), box-shadow .35s var(--ek-easing);
}
.enco-k-oszlopok .ek-oszlopkartya:hover { transform: translateY(-5px); box-shadow: var(--ek-arny-2); }

/* fejléc-sáv */
.enco-k-oszlopok .ek-oszlopkartya-cim {
	padding: 1.15rem 1.6rem;
	background: rgba(var(--ek-ak), .1);
	box-shadow: inset 0 -1px 0 rgba(var(--ek-ak), .18);
	line-height: 1.3;
}
.enco-k-oszlopok .ek-oszlopkartya-cim b { color: rgb(var(--ek-kek)); }

/* lista a kártyában */
.enco-k-oszlopok .ek-oszlopkartya .ek-pipa { padding: 1.1rem 1.6rem 1.4rem; }
.enco-k-oszlopok .ek-oszlopkartya .ek-pipa li:last-child { border-bottom: 0; padding-bottom: 0; }


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 10. FEJEZETZÁRÓ AJÁNLATKÉRŐ – .enco-k-cta                            ║
   ║  Sötét sáv, arculati színcsík alul, két gomb.                        ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
.enco-k-cta { position: relative; overflow: hidden; }
/* felső akcent-hajszálvonal – az alsó arculati sávot a következő
   fejezetnyitó hozza, így nem lesz dupla csík a két section között */
.enco-k-cta::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: rgba(255, 255, 255, .18);
	z-index: 2;
}
/* halvány hullám-mintázat */
.enco-k-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--ek-minta-feher);
	background-size: 240px 72px;
	opacity: .1;
	pointer-events: none;
}
.enco-k-cta > .container { position: relative; z-index: 1; }

.enco-k-cta .ek-cta-cim { line-height: 1.25; }
.enco-k-cta .ek-cta-szoveg p { opacity: .8; max-width: 58ch; margin: 0; line-height: 1.6; }
.enco-k-cta .ek-gombsor { justify-content: flex-start; padding: 0 !important; }
@media (min-width: 992px) {
	.enco-k-cta .ek-gombsor { justify-content: flex-end; }
}
/* a telefonos gomb legyen áttetsző keretes a sötét mezőn */
.enco-k-cta .ek-gomb-tel {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}
.enco-k-cta .ek-gomb-tel:hover {
	background: #fff;
	color: rgb(var(--ek-kek));
	box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5);
}