/* Vikingo Katalógus - kurzuskártya-rács és oktatókártya.
   Minden szabály .vk-vhp- előtaggal és explicit resetekkel készül, mert az
   Elementor kit globális stílusai különben felülírnák. A tokenek --vkvhp-*
   lokális változók var(--vk-*, fallback) értékkel: az oldal design systeme
   elsőbbséget élvez. */

.vk-vhp-racs,
.vk-vhp-korhinta,
.vk-vhp-bemutato {
	--vkvhp-ink: var(--vk-ink, #3E2E45);
	--vkvhp-paper: var(--vk-paper, #F3EEEB);
	--vkvhp-cream: var(--vk-paper, #F3EEEB);
	--vkvhp-korall: var(--vk-coral, #FF544D);
	--vkvhp-cim-font: var(--vk-clash-display, 'Clash Display', sans-serif);
	--vkvhp-mono-font: var(--vk-dm-mono, 'DM Mono', monospace);
	--vkvhp-fog: 9px; /* a fűrészfog magassága (a terv 262 px-es kártyáján 8,73 px) */
}

/* ---- Rács ---- */

/* Oszlopszám: ugyanaz a lépcső, mint a Kurzuskörhintánál - nagy kijelzőn a
   rögzített 4 oszlop óriási kártyákat és hosszú /kurzusok/ oldalt ad.
   Alapból a nézet szélességéből: 1 / 2 (560-tól) / 3 (900-tól)
   / 4 (1200-tól) / 5 (1500-tól) / 6 (1800-tól). A widget „Oszlopok" mezője a
   --vkvhp-oszlop-fix inline változóval RÖGZÍT, de csak asztali méretben
   (1200-tól) - alatta az automatikus lépcső marad. */
.vk-vhp-racs {
	--vkvhp-oszlopok: 1;
}

@media (min-width: 560px) {
	.vk-vhp-racs {
		--vkvhp-oszlopok: 2;
	}
}

@media (min-width: 900px) {
	.vk-vhp-racs {
		--vkvhp-oszlopok: 3;
	}
}

@media (min-width: 1200px) {
	.vk-vhp-racs {
		--vkvhp-oszlopok: var(--vkvhp-oszlop-fix, 4);
	}
}

@media (min-width: 1500px) {
	.vk-vhp-racs {
		--vkvhp-oszlopok: var(--vkvhp-oszlop-fix, 5);
	}
}

@media (min-width: 1800px) {
	.vk-vhp-racs {
		--vkvhp-oszlopok: var(--vkvhp-oszlop-fix, 6);
	}
}

.vk-vhp-racs .vk-vhp-racs-sor {
	display: grid;
	grid-template-columns: repeat(var(--vkvhp-oszlopok, 4), 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
}

/* A /kurzusok/ kategória-szakaszai (Elementor konténer, ID = a kategória
   slugja): a mega menü horgonya a rögzített fejléc alá bújna. */
:where(.e-flexbox, .e-con)[id] {
	scroll-margin-top: 120px;
}

.vk-vhp-racs .vk-vhp-racs-szakasz {
	scroll-margin-top: 120px; /* a fejléc mega menüjének horgonya ne bújjon a fejléc alá */
	padding: 40px 0;
	border-top: 1px solid var(--vk-sand, #DCD0C3);
}

.vk-vhp-racs .vk-vhp-racs-szakasz:first-child {
	border-top: 0;
	padding-top: 0;
}

/* ---- Kurzuskártya ---- */

.vk-vhp-racs .vk-vhp-kartya {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	aspect-ratio: 262 / 440;
	padding: 24px 24px calc(32px + var(--vkvhp-fog));
	background: var(--vkvhp-ink);
	color: #FFFFFF;
	text-decoration: none;
	border: 0;
	border-radius: 0;
	/* Fűrészfogas alsó él: a fog szélessége a kártya nyolcada (a terv szerint
	   mindig pontosan 8 egész, nyújtott háromszög), így a két szél mindig
	   teljes foggal zár. A fog egy nyújtható SVG-háromszög maszkcsempe. */
	-webkit-mask:
		linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--vkvhp-fog)) no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 8' preserveAspectRatio='none'%3E%3Cpath d='M0 0h30L15 8Z'/%3E%3C/svg%3E") left bottom / calc(100% / 8) var(--vkvhp-fog) repeat-x;
	mask:
		linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--vkvhp-fog)) no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 8' preserveAspectRatio='none'%3E%3Cpath d='M0 0h30L15 8Z'/%3E%3C/svg%3E") left bottom / calc(100% / 8) var(--vkvhp-fog) repeat-x;
}

.vk-vhp-racs .vk-vhp-kartya:hover,
.vk-vhp-racs .vk-vhp-kartya:focus-visible {
	color: #FFFFFF;
}

/* Nem kattintható kártya (a körhinta „Kattintásra megnyitja…” kapcsolója
   kikapcsolva): sima doboz, nem mutat linkre. A leírás hoverre ugyanúgy
   kinyílik, csak a nyíl marad el (a renderelő ki sem írja). */
.vk-vhp-racs .vk-vhp-kartya--statikus {
	cursor: default;
}

/* Fűrészfog fent is (a rács „Fent és lent” beállítása): a tömör sáv egy
   fognyival lejjebb kezdődik, a felső csempe felfelé mutató fogakat vág. A
   felső térköz az alsóval azonos (32 px + fog), így a két fogazott él és a
   tartalom közti távolság egyforma; a folyékony változata a container
   query blokkban, a fejen. */
.vk-vhp-racs.vk-vhp-racs--cikkcakk-fent .vk-vhp-kartya {
	padding-top: calc(32px + var(--vkvhp-fog));
	-webkit-mask:
		linear-gradient(#000, #000) 0 var(--vkvhp-fog) / 100% calc(100% - 2 * var(--vkvhp-fog)) no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 8' preserveAspectRatio='none'%3E%3Cpath d='M15 0L30 8H0Z'/%3E%3C/svg%3E") left top / calc(100% / 8) var(--vkvhp-fog) repeat-x,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 8' preserveAspectRatio='none'%3E%3Cpath d='M0 0h30L15 8Z'/%3E%3C/svg%3E") left bottom / calc(100% / 8) var(--vkvhp-fog) repeat-x;
	mask:
		linear-gradient(#000, #000) 0 var(--vkvhp-fog) / 100% calc(100% - 2 * var(--vkvhp-fog)) no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 8' preserveAspectRatio='none'%3E%3Cpath d='M15 0L30 8H0Z'/%3E%3C/svg%3E") left top / calc(100% / 8) var(--vkvhp-fog) repeat-x,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 8' preserveAspectRatio='none'%3E%3Cpath d='M0 0h30L15 8Z'/%3E%3C/svg%3E") left bottom / calc(100% / 8) var(--vkvhp-fog) repeat-x;
}

.vk-vhp-racs .vk-vhp-kartya-fej {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

/* Fent is fogazott kártya: a fej sora felülre igazít, mert középre igazítva
   a 48 px-es nyíl-doboz az egysoros kategória-címkét lejjebb tolná, és a
   felső térköz nagyobbnak látszana az alsónál. A nyíl a saját belső
   margójával feljebb ül, így a jele a szöveg sorával indul. */
.vk-vhp-racs.vk-vhp-racs--cikkcakk-fent .vk-vhp-kartya-fej {
	align-items: flex-start;
}

.vk-vhp-racs.vk-vhp-racs--cikkcakk-fent .vk-vhp-kartya-nyil {
	margin-top: -8px;
}

.vk-vhp-racs .vk-vhp-kartya-kategoria {
	flex: 1 1 auto;
	font-family: var(--vkvhp-mono-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--vkvhp-szin, var(--vkvhp-korall));
}

/* 48 px-es doboz 8 px belső margóval: a nyíl maga 32 px, a terv szerint. */
.vk-vhp-racs .vk-vhp-kartya-nyil {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	padding: 8px;
	color: #FFFFFF;
	transition: transform 0.3s ease;
}

.vk-vhp-racs .vk-vhp-kartya-nyil svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Hover: a bal-le nyíl jobb-fel nyíllá fordul (a terv két állapota). */
.vk-vhp-racs .vk-vhp-kartya:hover .vk-vhp-kartya-nyil,
.vk-vhp-racs .vk-vhp-kartya:focus-visible .vk-vhp-kartya-nyil {
	transform: rotate(180deg);
}

.vk-vhp-racs .vk-vhp-kartya-lab {
	--vkvhp-lab-gap: 16px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--vkvhp-lab-gap);
}

.vk-vhp-racs .vk-vhp-kartya-cim {
	max-width: 100%;
	font-family: var(--vkvhp-cim-font);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.04em;
	color: #FFFFFF;
	/* A cím szavait nem választjuk el (a „vállalko-zást” féle törés a
	   kurzusnévben zavaró); a hosszú szó egyben megy új sorba, és csak
	   akkor törik bárhol, ha egymagában sem fér ki. */
	hyphens: manual;
	overflow-wrap: break-word;
}

/* A leírás kinyíló kerete. A magasságot a rácssor animálja (0fr -> 1fr),
   mert az tetszőleges szöveghossznál pontos - max-height-tal nem menne.
   Zárva a negatív felső margó a láb flex-gapjét is eltünteti, így a cím
   PONTOSAN ott ül, ahol egy leírás nélküli kártyán; nyitva a margó
   visszaáll 0-ra, és a gap adja a szokásos térközt. */
.vk-vhp-racs .vk-vhp-kartya-leiras {
	display: grid;
	grid-template-rows: 1fr; /* touch eszközön (nincs hover) mindig nyitva */
	max-width: 100%;
	font-family: var(--vkvhp-cim-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: #FFFFFF;
}

.vk-vhp-racs .vk-vhp-kartya-leiras-szoveg {
	min-height: 0;
	overflow: hidden;
	/* Hosszú leírás sosem lóghat ki a kártyából: legfeljebb 5 sor, a
	   maradék három ponttal zárul. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	overflow-wrap: break-word;
}

/* Hover-képes eszközön a leírás zárva indul, és a kártya hoverjére vagy
   billentyűzetes fókuszára nyílik ki; a cím ettől csúszik feljebb, mert a
   láb a kártya aljára horgonyzott, a kinyíló leírás felfelé növeli. */
@media (hover: hover) and (pointer: fine) {
	.vk-vhp-racs .vk-vhp-kartya-leiras {
		grid-template-rows: 0fr;
		margin-top: calc(-1 * var(--vkvhp-lab-gap));
		opacity: 0;
		transition: grid-template-rows 0.35s ease, margin-top 0.35s ease, opacity 0.2s ease;
	}

	.vk-vhp-racs .vk-vhp-kartya:hover .vk-vhp-kartya-leiras,
	.vk-vhp-racs .vk-vhp-kartya:focus-visible .vk-vhp-kartya-leiras {
		grid-template-rows: 1fr;
		margin-top: 0;
		opacity: 1;
		transition: grid-template-rows 0.35s ease, margin-top 0.35s ease, opacity 0.3s ease 0.08s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vk-vhp-racs .vk-vhp-kartya-leiras {
		transition: none !important;
	}
}

/* Az Elementor konténer gyakran flex: ott a widget-burkoló a tartalma
   szerint nőne (a körhinta-szalag min-contentje széthúzná az oldalt, a
   nyilak a képernyőn kívülre csúsznának). A platform-widget ezért mindig
   a konténere szélességét veszi fel, és sosem nőhet fölé. */
/* :where() = nulla specificitás: így a sablon helyi
   osztályában adott szélesség (pl. a Cikkcakk 8 px-e) mindig nyer, a
   szabály csak ott él, ahol senki nem mondott mást. */
:where([data-e-type^="vk-vhp-"]) {
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

/* ---- Kurzuskörhinta ----
   Ugyanazok a kártyák, mint a rácsban (a gyökéren ott a .vk-vhp-racs osztály
   is, így a kártya-szabályok érvényesek), csak snapelő, görgethető szalagon.
   A nyilak végállapotát a katalogus.js kezeli. */

.vk-vhp-korhinta {
	display: grid;
	grid-template-columns: minmax(44px, 1fr) minmax(0, 6fr) minmax(44px, 1fr);
	gap: 10px;
	min-width: 0;
	max-width: 100%;
	/* Elválasztóvonalat szándékosan nem adunk: azt az oldalszerkesztő
	   teszi a befogadó konténerre, ha kell. */
}

.vk-vhp-korhinta .vk-vhp-korhinta-szalag {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	gap: 16px;
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.vk-vhp-korhinta .vk-vhp-korhinta-szalag::-webkit-scrollbar {
	display: none;
}

/* Oszlopszám: a --vk-korhinta-oszlop mondja meg, hány kártya tölti ki a
   szalagot (a rések levonásával, ezért mindig egész kártya látszik, és a
   snap kártyahatárra áll). Alapból a nézet szélességéből lépcsőzik: a
   Figma 1440-es tervén 4 (308 px-es kártya), ~1500-tól 5, ~1800-tól 6 (a
   kártya így 270-310 px között marad, a terv 262-esének arányában);
   tableten 3 / 2, mobilon egy kártya + a következő kikandikál (85 %). A
   widget „Oszlopok" mezője a --vk-korhinta-oszlop-fix inline változóval
   RÖGZÍT, de csak asztali méretben (1200 px-től) - alatta az automatikus
   lépcső marad, hat oszlop mobilon nem kártya. */
.vk-vhp-korhinta {
	--vk-korhinta-oszlop: 2;
}

@media (min-width: 900px) {
	.vk-vhp-korhinta {
		--vk-korhinta-oszlop: 3;
	}
}

@media (min-width: 1200px) {
	.vk-vhp-korhinta {
		--vk-korhinta-oszlop: var(--vk-korhinta-oszlop-fix, 4);
	}
}

@media (min-width: 1500px) {
	.vk-vhp-korhinta {
		--vk-korhinta-oszlop: var(--vk-korhinta-oszlop-fix, 5);
	}
}

@media (min-width: 1800px) {
	.vk-vhp-korhinta {
		--vk-korhinta-oszlop: var(--vk-korhinta-oszlop-fix, 6);
	}
}

.vk-vhp-korhinta .vk-vhp-kartya {
	flex: 0 0 calc((100% - (var(--vk-korhinta-oszlop) - 1) * 16px) / var(--vk-korhinta-oszlop));
	/* Enélkül a kártya a szövege min-content szélességéig nőne, és az
	   utolsó kártya kilógna a szalagból (flex min-width:auto szabály). */
	min-width: 0;
	scroll-snap-align: start;
}

/* Mobilon egy kártya, a következőből 16 px kandikál ki (Krisztina,
   2026-10: a széles kikandikálás zavart, de a jelzés kell, hogy a sor
   húzható). A kártya a szalag tartalmi szélessége mínusz egy rés és a
   16 px: a --margo változatban így a kártya jobb széle is a 32 px-es
   margóra esik, a kikandikáló csík pedig a margóban ül.
   Az asztali 262/440-es arány itt nem marad: a széles mobilkártya 550 px
   magasra nyúlna, nagy üres résszel a kategória és a fotó között („nem
   szépek az arányok”). A magasság a tartalomé, a soron belül a szalag
   kiegyenlíti; a 32 px-es sorköz a legmagasabb kártyán is levegőt hagy. */
@media (max-width: 560px) {
	.vk-vhp-korhinta .vk-vhp-kartya {
		flex-basis: calc(100% - 32px);
		aspect-ratio: auto;
		row-gap: 32px;
	}
}

/* Oldalsó lapozónyilak: a bal és jobb margóoszlopban, függőlegesen középen,
   doboz és keret nélkül - csak a magas, vékony nyíl (Figma-terv). A téma és
   az Elementor kit globális gombstílusai (háttér, lekerekítés, árnyék,
   fókuszgyűrű) ellen minden állapotot explicit resetelünk - a kit szelektorai
   erősek, ezért itt indokolt az !important. */
.vk-vhp-korhinta .vk-vhp-korhinta-nyil,
.vk-vhp-korhinta .vk-vhp-korhinta-nyil:hover,
.vk-vhp-korhinta .vk-vhp-korhinta-nyil:focus,
.vk-vhp-korhinta .vk-vhp-korhinta-nyil:active {
	-webkit-appearance: none !important;
	appearance: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none;
	text-shadow: none !important;
	transform: none !important;
}

.vk-vhp-korhinta .vk-vhp-korhinta-nyil {
	grid-row: 1;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--vk-course-dusty-mauve, #B5A2BB) !important;
	cursor: pointer;
	transition: color 0.18s ease, opacity 0.18s ease;
}

.vk-vhp-korhinta .vk-vhp-korhinta-nyil--elozo {
	grid-column: 1;
}

.vk-vhp-korhinta .vk-vhp-korhinta-nyil--kovetkezo {
	grid-column: 3;
}

.vk-vhp-korhinta .vk-vhp-korhinta-nyil:hover,
.vk-vhp-korhinta .vk-vhp-korhinta-nyil:focus-visible {
	color: var(--vkvhp-korall) !important;
}

/* Egérkattintás után nincs gyűrű, billentyűzetes fókusznál korall keret. */
.vk-vhp-korhinta .vk-vhp-korhinta-nyil:focus-visible {
	outline: 2px solid var(--vkvhp-korall);
	outline-offset: 4px;
}

.vk-vhp-korhinta .vk-vhp-korhinta-nyil[disabled] {
	opacity: 0.25;
	pointer-events: none;
}

/* Ha minden elem kifér a szalagra, nincs mit lapozni: a nyilak eltűnnek
   (a katalogus.js méri és kapcsolja). */
.vk-vhp-korhinta.vk-vhp-korhinta--allo .vk-vhp-korhinta-nyil {
	display: none !important;
}

.vk-vhp-korhinta .vk-vhp-korhinta-nyil svg {
	display: block;
	width: 23px;
	height: 43px;
}

/* Nyilak a margóban (alapértelmezés, Figma): az első kártya bal éle a
   fölötte álló szöveg bal élére esik, a nyilak a hasáb MELLETT, a szabad
   margó közepén ülnek, függőlegesen a kártyasor közepén. A "hasáb" itt a
   BEFOGADÓ KONTÉNER paddingja: a katalogus.js kiméri a szülő bal/jobb
   paddingját, a widget annyival kifut a konténerből (negatív margó), a
   szalag pedig ugyanannyit pad - így a kártya pontosan a konténer
   szövegvonalán kezd, minden törésponton, bármi is a padding. Padding
   nélküli (teljes szélességű, 0-s) konténerben a mért érték nincs, ekkor
   az oldal konvenciója a margó: 80 px asztali, 32 px tablet/mobil (a
   Főoldal szakaszainak paddingja). NEM a kit 1280-as boxed hasábjához
   igazít: az csak 1440 px-es nézetben esik egybe a 80 px-es paddinggal.
   A hasábon kívülre görgetett kártya a margóban nem látszik (clip-path). */
.vk-vhp-korhinta.vk-vhp-korhinta--margo {
	--vk-korhinta-margo: 80px;
	--vk-korhinta-margo-bal: var(--vk-korhinta-mert-bal, var(--vk-korhinta-margo));
	--vk-korhinta-margo-jobb: var(--vk-korhinta-mert-jobb, var(--vk-korhinta-margo));
	--vk-korhinta-kifutas-bal: var(--vk-korhinta-mert-bal, 0px);
	--vk-korhinta-kifutas-jobb: var(--vk-korhinta-mert-jobb, 0px);
	position: relative;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	max-width: none;
	/* A nyíl 44 px-es gombja 32 px-es margónál túlnyúlna a widgeten, és az
	   oldal vízszintesen görgethetővé válna (6 px, a /kurzusok/ oldalon
	   mérve) - a widget a saját dobozára vág, a 23 px-es nyíl így is látszik. */
	overflow: clip;
	width: calc(100% + var(--vk-korhinta-kifutas-bal) + var(--vk-korhinta-kifutas-jobb));
	margin-left: calc(-1 * var(--vk-korhinta-kifutas-bal));
	margin-right: 0;
}

@media (max-width: 1024px) {
	.vk-vhp-korhinta.vk-vhp-korhinta--margo {
		--vk-korhinta-margo: 32px;
	}
}

.vk-vhp-korhinta.vk-vhp-korhinta--margo .vk-vhp-korhinta-szalag {
	grid-column: 1;
	padding-inline: var(--vk-korhinta-margo-bal) var(--vk-korhinta-margo-jobb);
	scroll-padding-inline: var(--vk-korhinta-margo-bal) var(--vk-korhinta-margo-jobb);
	clip-path: inset(0 var(--vk-korhinta-margo-jobb) 0 var(--vk-korhinta-margo-bal));
}

.vk-vhp-korhinta.vk-vhp-korhinta--margo .vk-vhp-korhinta-nyil {
	position: absolute;
	top: 50%;
	grid-column: auto;
	grid-row: auto;
	align-self: auto;
	width: 44px;
	height: 60px;
	transform: translate(-50%, -50%) !important;
}

.vk-vhp-korhinta.vk-vhp-korhinta--margo .vk-vhp-korhinta-nyil--elozo {
	left: calc(var(--vk-korhinta-margo-bal) / 2);
}

.vk-vhp-korhinta.vk-vhp-korhinta--margo .vk-vhp-korhinta-nyil--kovetkezo {
	left: calc(100% - var(--vk-korhinta-margo-jobb) / 2);
}

/* Mobilon ujjal lapoz a látogató: a nyíl nem kell (a 32 px-es margóban
   csak a kártyát takarná), a jobb margó pedig nem vágja el a kikandikáló
   kártyát - az a képernyő széléig fut ki. Ugyanaz, mint a
   Tartalomkörhintánál. */
@media (max-width: 767px) {
	.vk-vhp-korhinta.vk-vhp-korhinta--margo {
		--vk-korhinta-margo-jobb: 0px;
	}

	.vk-vhp-korhinta.vk-vhp-korhinta--margo .vk-vhp-korhinta-nyil {
		display: none;
	}
}

/* ---- Oktatókörhinta ----
   Világos oktatólapok a kurzuskörhinta lapozó-mechanikájával (Figma-terv:
   hajszálvékony sand elválasztók, DM Mono kategória + korall nyíl, pecsét-
   fotó, Clash Display név, korall titulus). A lap egy <button> (kattintásra
   modál nyílik), ezért a téma/kit gombstílusait minden állapotban explicit
   reseteljük. */

.vk-vhp-oktato-korhinta .vk-vhp-korhinta-szalag {
	gap: 0; /* az elválasztást a lapok hajszálvékony szegélye adja */
}

.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap,
.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap:hover,
.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap:focus,
.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap:active {
	-webkit-appearance: none !important;
	appearance: none !important;
	margin: 0 !important;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none;
	text-shadow: none !important;
	transform: none !important;
	color: var(--vkvhp-ink) !important;
	/* A témák a gombokra tipikusan nowrap-et, verzált betűt és ritkítást
	   tesznek - a lapon a szövegnek normálisan kell törnie. */
	white-space: normal !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	overflow: hidden;
}

.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap {
	flex: 0 0 25%;
	min-width: 0;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 40px;
	box-sizing: border-box;
	padding: 24px 24px 80px !important;
	font-family: var(--vkvhp-cim-font);
	text-align: left;
	cursor: pointer;
}

/* A hajszálvékony elválasztó minden állapotban marad (a fenti reset a
   hover/focus/active szelektorával különben levenné). */
.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap,
.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap:hover,
.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap:focus,
.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap:active {
	border-left: 1px solid var(--vk-sand, #DCD0C3) !important;
}

.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap:last-child,
.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap:last-child:hover,
.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap:last-child:focus,
.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap:last-child:active {
	border-right: 1px solid var(--vk-sand, #DCD0C3) !important;
}

.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap:focus-visible {
	outline: 2px solid var(--vkvhp-korall);
	outline-offset: -2px;
}

@media (max-width: 1024px) {
	.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap {
		flex-basis: 50%;
	}
}

@media (max-width: 560px) {
	.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap {
		flex-basis: 85%;
	}
}

.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap-fej {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
}

.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap-kategoria {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--vkvhp-mono-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--vkvhp-ink);
	overflow-wrap: break-word;
}

/* 48 px-es doboz 8 px belső margóval: a nyíl maga 32 px (mint a kurzuskártyán),
   itt korall színben, világos háttéren. */
.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap-nyil {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	padding: 8px;
	color: var(--vkvhp-korall);
	transition: transform 0.3s ease;
}

.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap-nyil svg {
	display: block;
	width: 100%;
	height: 100%;
}

.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap:hover .vk-vhp-oktato-lap-nyil,
.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap:focus-visible .vk-vhp-oktato-lap-nyil {
	transform: rotate(180deg);
}

/* A pecsétformát maga a feltöltött kép hozza - a CSS csak méretez. */
.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap-foto {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 0 16px;
}

.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap-foto img {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
	border-radius: 0;
}

.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap-szoveg {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap-nev {
	max-width: 100%;
	font-family: var(--vkvhp-cim-font);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.04em;
	color: var(--vkvhp-ink);
	hyphens: auto;
	hyphenate-limit-chars: 10 4 4;
	overflow-wrap: break-word;
}

.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap-titulus {
	max-width: 100%;
	font-family: var(--vkvhp-mono-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--vkvhp-korall);
	overflow-wrap: break-word;
}

/* Folyékony lap-tipográfia: a terv ~317 px-es lapjához képest minden érték a
   lap saját szélességével arányos (a padding a gyerekekre kerül, mert a
   konténer önmagát nem tudja mérni). Régi böngészőben a fix értékek maradnak. */
@supports (container-type: inline-size) {
	.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap {
		container-type: inline-size;
		padding: 0 !important;
		gap: clamp(22px, 12.6cqi, 40px);
	}

	.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap-fej {
		padding: clamp(14px, 7.6cqi, 24px) clamp(14px, 7.6cqi, 24px) 0;
	}

	.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap-foto {
		padding: 0 clamp(22px, 12.6cqi, 40px);
	}

	.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap-szoveg {
		padding: 0 clamp(14px, 7.6cqi, 24px) clamp(44px, 25.2cqi, 80px);
	}

	.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap-kategoria {
		font-size: clamp(12px, 5cqi, 16px);
	}

	.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap-nyil {
		width: clamp(34px, 15.1cqi, 48px);
		height: clamp(34px, 15.1cqi, 48px);
		padding: clamp(6px, 2.5cqi, 8px);
	}

	.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap-nev {
		font-size: clamp(17px, 7.6cqi, 24px);
	}

	.vk-vhp-oktato-korhinta .vk-vhp-oktato-lap-titulus {
		font-size: clamp(12px, 5cqi, 16px);
	}
}

/* ---- Oktató-modál ----
   Natív <dialog> a top layerben; a tokenek a körhinta-gyökérről öröklődnek.
   A tartalmat kattintáskor a katalogus.js tölti ki. */

.vk-vhp-oktato-modal {
	box-sizing: border-box;
	width: min(560px, calc(100vw - 32px));
	max-height: min(85vh, 720px);
	overflow: auto;
	margin: auto;
	padding: clamp(24px, 5vw, 48px);
	border: 0;
	border-radius: 0;
	background: var(--vkvhp-paper, #F3EEEB);
	color: var(--vkvhp-ink, #3E2E45);
	font-family: var(--vkvhp-cim-font, 'Clash Display', sans-serif);
}

.vk-vhp-oktato-modal::backdrop {
	background: rgba(62, 46, 69, 0.45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.vk-vhp-oktato-modal[open] {
	animation: vk-vhp-modal-be 0.25s ease;
}

@keyframes vk-vhp-modal-be {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vk-vhp-oktato-modal[open] {
		animation: none;
	}
}

/* Amíg a modál nyitva van, az oldal nem görög alatta. */
.vk-vhp-modal-nyitva {
	overflow: hidden;
}

.vk-vhp-oktato-modal .vk-vhp-oktato-modal-bezaras,
.vk-vhp-oktato-modal .vk-vhp-oktato-modal-bezaras:hover,
.vk-vhp-oktato-modal .vk-vhp-oktato-modal-bezaras:focus,
.vk-vhp-oktato-modal .vk-vhp-oktato-modal-bezaras:active {
	-webkit-appearance: none !important;
	appearance: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none;
	text-shadow: none !important;
	transform: none !important;
}

.vk-vhp-oktato-modal .vk-vhp-oktato-modal-bezaras {
	position: absolute;
	top: 16px;
	right: 16px;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	padding: 10px !important;
	color: var(--vkvhp-ink, #3E2E45) !important;
	cursor: pointer;
	transition: color 0.18s ease;
}

.vk-vhp-oktato-modal .vk-vhp-oktato-modal-bezaras:hover,
.vk-vhp-oktato-modal .vk-vhp-oktato-modal-bezaras:focus-visible {
	color: var(--vkvhp-korall, #FF544D) !important;
}

.vk-vhp-oktato-modal .vk-vhp-oktato-modal-bezaras:focus-visible {
	outline: 2px solid var(--vkvhp-korall, #FF544D);
	outline-offset: 2px;
}

.vk-vhp-oktato-modal .vk-vhp-oktato-modal-bezaras svg {
	display: block;
	width: 100%;
	height: 100%;
}

.vk-vhp-oktato-modal .vk-vhp-oktato-modal-tartalom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.vk-vhp-oktato-modal .vk-vhp-oktato-modal-foto {
	display: block;
	width: clamp(120px, 30vw, 160px);
	margin-bottom: 16px;
}

.vk-vhp-oktato-modal .vk-vhp-oktato-modal-foto img {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
}

.vk-vhp-oktato-modal .vk-vhp-oktato-modal-kategoria {
	margin: 0;
	font-family: var(--vkvhp-mono-font, 'DM Mono', monospace);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--vk-mauve, #7A687F);
}

.vk-vhp-oktato-modal .vk-vhp-oktato-modal-nev {
	margin: 0;
	font-family: var(--vkvhp-cim-font, 'Clash Display', sans-serif);
	font-size: clamp(24px, 5vw, 32px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.04em;
	color: var(--vkvhp-ink, #3E2E45);
}

.vk-vhp-oktato-modal .vk-vhp-oktato-modal-titulus {
	margin: 0;
	font-family: var(--vkvhp-mono-font, 'DM Mono', monospace);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--vkvhp-korall, #FF544D);
}

.vk-vhp-oktato-modal .vk-vhp-oktato-modal-bio {
	margin: 16px 0 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--vkvhp-ink, #3E2E45);
	white-space: pre-line;
}

/* ---- Kurzusképfolyam (marquee) ----
   Folyamatos, körkörös úszás tisztán CSS transform-animációval (GPU-barát,
   nem akad). A szalagon a képcsoport kétszer szerepel; a -50%-os eltolás
   pontosan egy csoportnyit léptet, így a hurok varratmentes. A sor tempóját
   a katalogus.js számolja px/mp alapon a csoport mért szélességéből
   (--vkvhp-folyam-ido), így minden sor azonos sebességű. */

.vk-vhp-kepfolyam {
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1.7vw, 24px);
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}

.vk-vhp-kepfolyam .vk-vhp-kepfolyam-sor {
	min-width: 0;
	overflow: hidden;
}

.vk-vhp-kepfolyam .vk-vhp-kepfolyam-szalag {
	display: flex;
	width: max-content;
	animation: vk-vhp-kepfolyam-uszas var(--vkvhp-folyam-ido, 80s) linear infinite;
}

.vk-vhp-kepfolyam .vk-vhp-kepfolyam-sor--vissza .vk-vhp-kepfolyam-szalag {
	animation-direction: reverse;
}

.vk-vhp-kepfolyam .vk-vhp-kepfolyam-csoport {
	display: flex;
	gap: clamp(12px, 1.7vw, 24px);
	padding-right: clamp(12px, 1.7vw, 24px);
}

.vk-vhp-kepfolyam .vk-vhp-kepfolyam-kep,
.vk-vhp-kepfolyam img.vk-vhp-kepfolyam-kep {
	display: block;
	width: clamp(150px, 16.7vw, 240px);
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 4px;
	border: 0;
}

@keyframes vk-vhp-kepfolyam-uszas {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* Mozgásérzékeny felhasználónak a folyam áll. */
@media (prefers-reduced-motion: reduce) {
	.vk-vhp-kepfolyam .vk-vhp-kepfolyam-szalag {
		animation: none;
	}
}

/* ---- Szófolyam ----
   A képfolyam marquee-mechanikájára épül (ugyanazok a sor/szalag/csoport
   osztályok), a tartalma cikkcakkos szélű szó-címke. A cikkcakkot clip-path
   adja: a sarkok 5px-szel beljebb ülnek, oldalanként három kifelé mutató fog
   a magasság hatodainál (a Figma 2282:50406 pixelre mért profilja) - így a
   levágás bal és jobb szélen mindig éles, bármekkora a címke és bármilyen
   a szín. A színt a renderer adja inline tokenként (--vkvhp-szo-hatter /
   --vkvhp-szo-szin), a szövegszín a háttér világosságából számolódik. */

.vk-vhp-szofolyam .vk-vhp-szo {
	display: block;
	/* A terv 24px oldalpaddingje + 5px fogmélység: a clip-path a címkéből
	   vágja ki a fogakat, a szöveg így ül a tervi helyén. */
	padding: 12px 29px;
	background: var(--vkvhp-szo-hatter, var(--vk-mauve, #7A687F));
	color: var(--vkvhp-szo-szin, #FFFFFF);
	font-family: var(--vk-dm-mono, 'DM Mono', monospace);
	font-weight: 400;
	font-size: clamp(18px, 1.67vw, 24px);
	line-height: 1.3;
	white-space: nowrap;
	clip-path: polygon(
		5px 0,
		calc(100% - 5px) 0,
		100% 16.666%,
		calc(100% - 5px) 33.333%,
		100% 50%,
		calc(100% - 5px) 66.666%,
		100% 83.333%,
		calc(100% - 5px) 100%,
		5px 100%,
		0 83.333%,
		5px 66.666%,
		0 50%,
		5px 33.333%,
		0 16.666%
	);
}

/* ---- Címkék ----
   A Szófolyam álló testvére (Figma 2922:14840): hatszögletű szó-címkék, JS
   nincs. KÉT RÉTEG: a li a flex-elem, a
   címke EGÉSZBEN ugrik új sorba (flex-wrap); ha egymagában sem fér ki a
   hasábba, a li a hasáb szélességére szűkül, és a BENNE ülő sorbeli
   .vk-vhp-cimke-szo tör több sorba - a box-decoration-break: clone miatt
   minden sortöredék KÜLÖN, teljes hatszöget kap, ami a saját sorának
   szövegéhez simul (Figma-minta: „Automata / értékesítési / futószalagok"
   három lépcsős címke). Ezért a forma nem clip-path (az az egész elemre
   menne), hanem háttér-gradiens a spanon: középső sáv + a négy sarok átlós
   ékje, 1 px-es átfedéssel (különben a csempék találkozásánál hajszálrés
   látszik). Az ék 8,53 px (a terv 32 px-es címkéjén), px-ben rögzített.
   TÉRKÖZ: ami összetartozik, közelebb - a tört címke sorai közt
   4 px (a li line-height 36 px = 32 + 4, a töredék a sorában középen ül),
   a külön címkék közt 12 px (row-gap 8 + 2×2 px fél-köz; column-gap 12);
   a ul felső/alsó 2 px-es fél-közét negatív margó veszi vissza. A színeket a
   renderer adja inline tokenként (--vkvhp-cimke-hatter / --vkvhp-cimke-szin).
   Lista-elem, hogy felolvasónak is felsorolás legyen. */

.vk-vhp-cimkek {
	--vkvhp-cimke-ek: 8.53px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: 12px;
	row-gap: 8px;
	margin: -2px 0;
	padding: 0;
	list-style: none;
	text-align: start;
}

.vk-vhp-cimkek--kozep {
	justify-content: center;
	text-align: center;
}

.vk-vhp-cimkek--jobb {
	justify-content: flex-end;
	text-align: end;
}

.vk-vhp-cimkek .vk-vhp-cimke {
	display: block;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: var(--vk-clash-display, 'Clash Display', sans-serif);
	font-weight: 500;
	font-size: 16px;
	line-height: 36px;
	letter-spacing: 0.04em;
	white-space: normal;
	overflow-wrap: break-word;
}

.vk-vhp-cimkek .vk-vhp-cimke-szo {
	--vkvhp-cimke-h: var(--vkvhp-cimke-hatter, var(--vk-coral, #FF544D));
	display: inline;
	padding: 7px calc(8px + var(--vkvhp-cimke-ek)); /* Clash 16/1.5 tartalomdoboza 18 px + 2×7 = 32 */
	color: var(--vkvhp-cimke-szin, #FFFFFF);
	line-height: 1.5;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	background-color: transparent;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--vkvhp-cimke-h) calc(50% + 0.5px)),
		linear-gradient(to top right, transparent calc(50% - 0.5px), var(--vkvhp-cimke-h) calc(50% + 0.5px)),
		linear-gradient(to bottom left, transparent calc(50% - 0.5px), var(--vkvhp-cimke-h) calc(50% + 0.5px)),
		linear-gradient(to top left, transparent calc(50% - 0.5px), var(--vkvhp-cimke-h) calc(50% + 0.5px)),
		linear-gradient(var(--vkvhp-cimke-h), var(--vkvhp-cimke-h));
	background-size:
		var(--vkvhp-cimke-ek) calc(50% + 0.5px),
		var(--vkvhp-cimke-ek) calc(50% + 0.5px),
		var(--vkvhp-cimke-ek) calc(50% + 0.5px),
		var(--vkvhp-cimke-ek) calc(50% + 0.5px),
		calc(100% - 2 * var(--vkvhp-cimke-ek) + 2px) 100%;
	background-position:
		left top,
		left bottom,
		right top,
		right bottom,
		calc(var(--vkvhp-cimke-ek) - 1px) 0;
}

/* ---- Folyékony kártya-tipográfia (container query) ----
   A terv 262 px széles kártyához adja a méreteket; keskenyebb kártyán minden
   érték a kártya SAJÁT szélességével arányosan kicsinyedik (1cqi = a kártya
   szélességének 1%-a), józan alsó-felső határok között. A padding ezért a
   fejre és a lábra kerül (a kártya a konténer, önmagát nem tudja mérni).
   Régi böngészőben a fenti fix értékek maradnak. */
@supports (container-type: inline-size) {
	.vk-vhp-racs .vk-vhp-kartya {
		container-type: inline-size;
		padding: 0;
	}

	.vk-vhp-racs .vk-vhp-kartya-fej {
		padding: clamp(14px, 9.2cqi, 24px) clamp(14px, 9.2cqi, 24px) 0;
		gap: clamp(8px, 4.6cqi, 12px);
	}

	.vk-vhp-racs .vk-vhp-kartya-lab {
		--vkvhp-lab-gap: clamp(10px, 6.1cqi, 16px);
		padding: 0 clamp(14px, 9.2cqi, 24px) calc(clamp(18px, 12.2cqi, 32px) + var(--vkvhp-fog));
	}

	/* Fent is fogazott kártya: a fej felső térköze a láb alsójával azonos. */
	.vk-vhp-racs.vk-vhp-racs--cikkcakk-fent .vk-vhp-kartya {
		padding-top: 0;
	}

	.vk-vhp-racs.vk-vhp-racs--cikkcakk-fent .vk-vhp-kartya-fej {
		padding-top: calc(clamp(18px, 12.2cqi, 32px) + var(--vkvhp-fog));
	}

	.vk-vhp-racs.vk-vhp-racs--cikkcakk-fent .vk-vhp-kartya-nyil {
		margin-top: calc(-1 * clamp(6px, 3.05cqi, 8px));
	}

	.vk-vhp-racs .vk-vhp-kartya-kategoria {
		font-size: clamp(12px, 6.1cqi, 16px);
	}

	.vk-vhp-racs .vk-vhp-kartya-nyil {
		width: clamp(34px, 18.3cqi, 48px);
		height: clamp(34px, 18.3cqi, 48px);
		padding: clamp(6px, 3.05cqi, 8px);
	}

	.vk-vhp-racs .vk-vhp-kartya .vk-vhp-kartya-avatar {
		width: clamp(56px, 30.5cqi, 80px);
	}

	.vk-vhp-racs .vk-vhp-kartya-cim {
		font-size: clamp(16px, 9.2cqi, 24px);
	}

	.vk-vhp-racs .vk-vhp-kartya-leiras {
		font-size: clamp(13px, 6.1cqi, 16px);
	}
}

/* ---- Avatar (közös a kurzuskártyával és az oktatókártyával) ----
   A pecsétformát maga a feltöltött kép hozza (készre vágott, átlátszó
   hátterű fájl), ezért itt nincs clip-path és nincs háttérszín: a kép
   a saját arányában töltődik be. */

.vk-vhp-kartya-avatar {
	display: block;
	width: 80px;
	max-width: 100%;
}

.vk-vhp-kartya-avatar .vk-vhp-kartya-foto {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
}

/* ---- Oktatóbemutató (az Oktatókártya widget kimenete) ----
   Figma 1342-15563: 3:2 szöveg/fotó oszlop, függőlegesen középre igazítva
   (kevés szövegnél is rendezett), a fotó max 400 px pecsétkép. Több blokk
   váltakozó oldallal; mobilon minden blokk a FOTÓVAL kezdődik. A widget
   nem hoz hátteret - azt a befogadó szakasz adja. */

.vk-vhp-bemutato {
	display: flex;
	flex-direction: column;
	min-width: 0;
	max-width: 100%;
}

/* A vonalak a terv szerint: minden blokk tetején vízszintes sand vonal
   (a blokkok közt is ez választ el), a szöveg- és fotóoszlop közt pedig a
   blokk TELJES magasságát kifutó függőleges elválasztó. Ezért a függőleges
   paddingek az oszlopokon ülnek, nem a blokkon. */
/* A blokk három grid-terület: fej (felcím+név+titulus), törzs (bemutatkozás
   +gomb) és fotó. Asztali nézetben a fej+törzs a szövegoszlopban ül
   függőlegesen középen (az 1fr távtartó sorok centíroznak), mobilon a fej a
   fotó MELLÉ kerül jobbra, a törzs alájuk. */
.vk-vhp-bemutato .vk-vhp-bemutato-blokk {
	display: grid;
	grid-template-columns: 3fr 2fr;
	grid-template-rows: 1fr auto auto 1fr;
	grid-template-areas:
		'.     foto'
		'fej   foto'
		'torzs foto'
		'.     foto';
	gap: 0;
	padding: 0;
	border-top: 1px solid var(--vk-sand, #DCD0C3);
	min-width: 0;
}

.vk-vhp-bemutato .vk-vhp-bemutato-blokk--foto-bal {
	grid-template-columns: 2fr 3fr;
	grid-template-areas:
		'foto .'
		'foto fej'
		'foto torzs'
		'foto .';
}

/* A terv paddingjei a blokk részei (szövegoszlop: 80 px körben, fotóoszlop:
   88 px oldalt), így a widget csupasz, teljes szélességű szakaszba téve is
   a terv szerint néz ki - a befogadó divnek nem kell paddingot adnia. */
.vk-vhp-bemutato .vk-vhp-bemutato-fej {
	grid-area: fej;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	box-sizing: border-box;
	padding: clamp(40px, 5.56vw, 80px) clamp(40px, 5.56vw, 80px) 0;
}

.vk-vhp-bemutato .vk-vhp-bemutato-torzs {
	grid-area: torzs;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	box-sizing: border-box;
	padding: 24px clamp(40px, 5.56vw, 80px) clamp(40px, 5.56vw, 80px);
}

/* Ha nincs törzs (üres bemutatkozás, nincs gomb), a fej alja zárja a blokkot. */
.vk-vhp-bemutato .vk-vhp-bemutato-fej:has(+ .vk-vhp-bemutato-foto) {
	padding-bottom: clamp(40px, 5.56vw, 80px);
}

.vk-vhp-bemutato .vk-vhp-bemutato-felcim {
	margin: 0 0 12px;
	font-family: var(--vkvhp-mono-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--vkvhp-korall);
}

.vk-vhp-bemutato .vk-vhp-bemutato-nev {
	margin: 0;
	padding: 0;
	font-family: var(--vkvhp-cim-font);
	font-size: clamp(26px, 2.3vw, 32px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--vkvhp-ink);
}

.vk-vhp-bemutato .vk-vhp-bemutato-titulus {
	margin: 8px 0 0;
	font-family: var(--vkvhp-mono-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--vk-mauve, #7A687F);
}

.vk-vhp-bemutato .vk-vhp-bemutato-bio {
	width: 100%;
	min-width: 0;
}

.vk-vhp-bemutato .vk-vhp-bemutato-bio p {
	margin: 0 0 16px;
	font-family: var(--vkvhp-cim-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--vkvhp-ink);
	overflow-wrap: break-word;
}

.vk-vhp-bemutato .vk-vhp-bemutato-bio p:last-child {
	margin-bottom: 0;
}

/* CTA-gomb: korall pill, DM Mono felirat, a szövegoszlop jobb szélén (terv).
   A téma/kit link- és gombstílusai ellen minden állapotot explicit
   resetelünk. */
.vk-vhp-bemutato .vk-vhp-bemutato-gomb,
.vk-vhp-bemutato .vk-vhp-bemutato-gomb:hover,
.vk-vhp-bemutato .vk-vhp-bemutato-gomb:focus,
.vk-vhp-bemutato .vk-vhp-bemutato-gomb:active {
	-webkit-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box;
	display: inline-block;
	margin: 48px 0 0 !important;
	padding: 17px 40px !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	outline: none;
	background: var(--vkvhp-korall) !important;
	color: #FFFFFF !important;
	font-family: var(--vkvhp-mono-font) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
	text-transform: none !important;
	white-space: normal !important;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.vk-vhp-bemutato .vk-vhp-bemutato-gomb {
	align-self: flex-end;
}

.vk-vhp-bemutato .vk-vhp-bemutato-gomb:hover,
.vk-vhp-bemutato .vk-vhp-bemutato-gomb:focus-visible {
	background: var(--vk-coral-hover, #E83D36) !important;
}

.vk-vhp-bemutato .vk-vhp-bemutato-gomb:focus-visible {
	outline: 2px solid var(--vkvhp-ink);
	outline-offset: 3px;
}

/* A pecsétformát maga a feltöltött kép hozza - a CSS csak méretez. Az oszlop
   a blokk teljes magasságát kitölti, így a függőleges elválasztó is. */
.vk-vhp-bemutato .vk-vhp-bemutato-foto {
	grid-area: foto;
	min-width: 0;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(40px, 5.7vw, 82px) clamp(32px, 6.12vw, 88px);
	box-sizing: border-box;
}

.vk-vhp-bemutato .vk-vhp-bemutato-blokk--foto-jobb .vk-vhp-bemutato-foto {
	border-left: 1px solid var(--vk-sand, #DCD0C3);
}

.vk-vhp-bemutato .vk-vhp-bemutato-blokk--foto-bal .vk-vhp-bemutato-foto {
	border-right: 1px solid var(--vk-sand, #DCD0C3);
}

.vk-vhp-bemutato .vk-vhp-bemutato-foto img {
	display: block;
	width: 100%;
	max-width: 400px;
	height: auto;
	border: 0;
	border-radius: 0;
}

/* Mobil: a blokk a FOTÓVAL kezd, tőle JOBBRA a fej (felcím + név + titulus),
   a törzs (bemutatkozás + gomb) alattuk teljes szélességben.
   A blokkok közti vízszintes vonal marad, a függőleges eltűnik. */
@media (max-width: 900px) {
	.vk-vhp-bemutato .vk-vhp-bemutato-blokk,
	.vk-vhp-bemutato .vk-vhp-bemutato-blokk--foto-bal {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-rows: auto auto;
		grid-template-areas:
			'foto  fej'
			'torzs torzs';
		align-items: center;
	}

	.vk-vhp-bemutato .vk-vhp-bemutato-blokk .vk-vhp-bemutato-foto {
		border-left: 0;
		border-right: 0;
		align-self: center;
		padding: clamp(24px, 6vw, 40px) clamp(16px, 4vw, 24px) clamp(24px, 6vw, 40px) clamp(20px, 6vw, 32px);
	}

	.vk-vhp-bemutato .vk-vhp-bemutato-foto img {
		width: clamp(120px, 34vw, 200px);
		max-width: none;
	}

	.vk-vhp-bemutato .vk-vhp-bemutato-fej,
	.vk-vhp-bemutato .vk-vhp-bemutato-fej:has(+ .vk-vhp-bemutato-foto) {
		align-self: center;
		padding: clamp(24px, 6vw, 40px) clamp(20px, 6vw, 32px) clamp(24px, 6vw, 40px) 0;
	}

	.vk-vhp-bemutato .vk-vhp-bemutato-torzs {
		padding: 0 clamp(20px, 6vw, 32px) clamp(32px, 8vw, 48px);
	}

	.vk-vhp-bemutato .vk-vhp-bemutato-gomb {
		align-self: center;
	}
}

/* ---- Oklevél ---- */

/* A widget SZÁNDÉKOSAN nem hoz dizájnt: nincs keret, árnyék, padding,
   lebegés és szélességkorlát. Ami itt marad, az mind
   MŰKÖDÉS: a container query egysége, a név elhelyezése a sablonon, és a
   gépelő kurzor. A keretezést az oldal adja, Elementorban. */

.vk-vhp-oklevel {
	--vkvhp-korall: var(--vk-coral, #FF544D);
	--vkvhp-cim-font: var(--vk-clash-display, 'Clash Display', sans-serif);
	width: 100%;
}

/* A cqw egysége EHHEZ a dobozhoz mérődik: a név így a sablon arányához
   igazodik, nem a képernyőhöz - bármilyen oszlopszélességen ugyanoda,
   ugyanakkorán kerül. */
.vk-vhp-oklevel .vk-vhp-oklevel-lap {
	container-type: inline-size;
	position: relative;
}

.vk-vhp-oklevel .vk-vhp-oklevel-lap > img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* A lekerekítés ÖRÖKLŐDIK a widget külső dobozáról egészen a képig. Az
   Elementor a stílusait a widget gyökerére teszi; a kép viszont azon belül
   ül, és semmi nem vágja le a sarkát, ezért a beállított border-radius
   hatástalannak látszott. Az `inherit` lánccal a radius (és csak az)
   lecsorog a képre - overflow:hidden nélkül, tehát semmi mást nem vág le. */
.vk-vhp-oklevel,
.vk-vhp-oklevel .vk-vhp-oklevel-lap,
.vk-vhp-oklevel .vk-vhp-oklevel-lap > img {
	border-radius: inherit;
}

/* A név helye a sablonon (a terv 842x595-ös lapján mérve). */
.vk-vhp-oklevel .vk-vhp-oklevel-nev {
	position: absolute;
	top: 44%;
	left: 22%;
	display: flex;
	align-items: center;
	width: 57%;
	height: 17%;
	margin: 0;
	color: var(--vkvhp-korall);
	font-family: var(--vkvhp-cim-font);
	/* 4% betűköz a Clash-en (Krisztina, 2026-10). A betűköz a nevet kb.
	   6,5%-kal szélesíti, ezért a méret ugyanennyivel kisebb (7 -> 6,6 és
	   5,1 -> 4,8 cqw): a sortörés így marad, egy 20 karakteres név is egy
	   sorban fér el (gépelt mód), és a leghosszabb név is két sorban.
	   Mérve mind a 41 kurzusnéven, 560 és 340 px széles oklevélen. */
	font-size: 6.6cqw;
	font-weight: 500;
	line-height: .94;
	letter-spacing: .04em;
}

.vk-vhp-oklevel .vk-vhp-oklevel-nev--hosszu {
	font-size: 4.8cqw;
}

/* A függőleges padding a lelógó szárak (g, y, j) miatt kell: a túlcsordulás
   rejtése a hosszú nevet vágja el vízszintesen, de mellékhatásként a
   betűszárat is levágta. A padding szimmetrikus, ezért a név a helyén marad. */
.vk-vhp-oklevel .vk-vhp-oklevel-szoveg {
	overflow: hidden;
	max-width: 100%;
	padding-block: .16em;
	text-align: left;
	text-wrap: pretty;
}

/* A kurzor a szövegen BELÜL, inline elemként: így az utolsó karakter után
   áll akkor is, ha a név két sorba törik. Flex-testvérként a teljes
   szövegblokk mellé, függőlegesen középre csúszott volna. */
.vk-vhp-oklevel .vk-vhp-oklevel-kurzor {
	display: inline-block;
	width: 1px;
	height: .78em;
	margin-left: .08em;
	vertical-align: -.04em;
	background: currentColor;
	animation: vk-vhp-oklevel-villog .8s steps(1) infinite;
}

@keyframes vk-vhp-oklevel-villog {
	0%, 48% { opacity: 1; }
	49%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.vk-vhp-oklevel .vk-vhp-oklevel-kurzor {
		animation: none;
	}
}

/* ---- Videókörhinta ----
   A Kurzuskörhinta teljes lapozómechanikáját használja, de a gyökéren nincs
   .vk-vhp-racs, ezért a kurzuskártyák tipográfiája/paddingje nem szivárog át.
   A videók alsó éle ugyanazt a 8 fogas maszkot kapja, mint a kurzuskártya. */
.vk-vhp-video-korhinta .vk-vhp-video-kartya {
	position: relative;
	box-sizing: border-box;
	aspect-ratio: var(--vk-video-arany, 16 / 9);
	padding: 0;
	overflow: hidden;
	background: #000;
	border: 0;
	border-radius: 0;
	-webkit-mask:
		linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--vkvhp-fog)) no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 8' preserveAspectRatio='none'%3E%3Cpath d='M0 0h30L15 8Z'/%3E%3C/svg%3E") left bottom / calc(100% / 8) var(--vkvhp-fog) repeat-x;
	mask:
		linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--vkvhp-fog)) no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 8' preserveAspectRatio='none'%3E%3Cpath d='M0 0h30L15 8Z'/%3E%3C/svg%3E") left bottom / calc(100% / 8) var(--vkvhp-fog) repeat-x;
}

.vk-vhp-video-korhinta .vk-vhp-video-kartya-iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}