/* =========================================================================
   Orosz Energiagyógyászat – alapstílus
   Arculat: IV. Smaragd Aura. A hexeket az inc/arculat.php adja
   CSS-változóként, itt már csak a változókra hivatkozunk.
   ========================================================================= */

:root {
	/* Tipográfia */
	--oeg-cimsor: 'Playfair Display', Georgia, serif;
	--oeg-kenyer: 'EB Garamond', Georgia, serif;
	--oeg-ui: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Ritmus – egyetlen skála, hogy ne szülessenek véletlen térközök */
	--oeg-t1: 0.5rem;
	--oeg-t2: 1rem;
	--oeg-t3: 1.75rem;
	--oeg-t4: 3rem;
	--oeg-t5: 5rem;
	--oeg-t6: 7.5rem;

	--oeg-szeles: 1180px;
	--oeg-szoveg-szeles: 46rem;

	--oeg-ker: 3px;
	--oeg-atmenet: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Alapok ---------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--oeg-pergamen);
	color: var(--oeg-szoveg);
	font-family: var(--oeg-kenyer);
	font-size: 1.125rem;
	line-height: 1.8;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}

img,
picture,
video { max-width: 100%; height: auto; display: block; }

a {
	color: var(--oeg-aura);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--oeg-atmenet);
}

a:hover { color: var(--oeg-arany); }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--oeg-arany);
	outline-offset: 3px;
	border-radius: 2px;
}

h1, h2, h3, h4 {
	font-family: var(--oeg-cimsor);
	font-weight: 600;
	line-height: 1.22;
	color: var(--oeg-smaragd);
	margin: 0 0 var(--oeg-t2);
	text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); }

p { margin: 0 0 var(--oeg-t2); }

blockquote {
	margin: var(--oeg-t3) 0;
	padding-left: var(--oeg-t2);
	border-left: 2px solid var(--oeg-arany);
	font-style: italic;
	color: var(--oeg-szoveg-lgy);
}

/* ---------- Segédosztályok ---------- */

.oeg-burok {
	width: min(100% - 2.5rem, var(--oeg-szeles));
	margin-inline: auto;
}

.oeg-szoveg { max-width: var(--oeg-szoveg-szeles); }

.oeg-cimke {
	font-family: var(--oeg-ui);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--oeg-arany);
	margin-bottom: var(--oeg-t1);
	display: block;
}

.oeg-motto {
	font-style: italic;
	font-size: 1.25rem;
	color: var(--oeg-szoveg-lgy);
}

.oeg-rejtve {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.oeg-atugras {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: var(--oeg-t1) var(--oeg-t2);
	background: var(--oeg-smaragd);
	color: var(--oeg-pergamen);
}

.oeg-atugras:focus { left: var(--oeg-t2); top: var(--oeg-t2); }

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

.oeg-gomb {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--oeg-ui);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.95em 2em;
	border: 1px solid transparent;
	border-radius: var(--oeg-ker);
	cursor: pointer;
	transition: background var(--oeg-atmenet), color var(--oeg-atmenet),
	            border-color var(--oeg-atmenet), transform var(--oeg-atmenet);
}

.oeg-gomb--arany {
	background: var(--oeg-arany);
	color: var(--oeg-smaragd);
}

.oeg-gomb--arany:hover {
	background: var(--oeg-smaragd);
	color: var(--oeg-arany);
	border-color: var(--oeg-arany);
}

.oeg-gomb--vonal {
	background: transparent;
	color: var(--oeg-smaragd);
	border-color: currentColor;
}

.oeg-gomb--vonal:hover {
	background: var(--oeg-smaragd);
	color: var(--oeg-pergamen);
}

/* Sötét alapon álló gombok.
   A nyitó szakasz is ide tartozik: nincs rajta .oeg-sotet osztály, de sötét
   a háttere – enélkül a vonalas gomb smaragd betűt kapna smaragd alapon. */
.oeg-sotet .oeg-gomb--vonal,
.oeg-nyito .oeg-gomb--vonal { color: var(--oeg-pergamen); }

.oeg-sotet .oeg-gomb--vonal:hover,
.oeg-nyito .oeg-gomb--vonal:hover {
	background: var(--oeg-pergamen);
	color: var(--oeg-smaragd);
	border-color: var(--oeg-pergamen);
}

.oeg-gomb--arany:hover,
.oeg-gomb--vonal:hover { transform: translateY(-2px); }

/* ---------- Fejléc ---------- */

.oeg-fejlec {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--oeg-smaragd);
	color: var(--oeg-pergamen);
	border-bottom: 1px solid rgba(201, 161, 90, 0.22);
}

.oeg-fejlec__sor {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--oeg-t2);
	min-height: 5rem;
}

.oeg-logo {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	font-family: var(--oeg-cimsor);
	font-size: 1.3rem;
	line-height: 1.2;
	color: var(--oeg-pergamen);
	text-decoration: none;
}

.oeg-logo__jel {
	width: 2.7rem;
	height: auto;
	flex: none;
	transition: transform var(--oeg-atmenet);
}

.oeg-logo:hover .oeg-logo__jel { transform: scale(1.08); }

.oeg-logo__szo span {
	display: block;
	font-family: var(--oeg-ui);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--oeg-arany);
	margin-top: 0.35em;
}

.oeg-logo img { max-height: 3.4rem; width: auto; }

/* Menü */

.oeg-menu ul {
	display: flex;
	align-items: center;
	gap: var(--oeg-t3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.oeg-menu a {
	font-family: var(--oeg-ui);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--oeg-pergamen);
	text-decoration: none;
	padding: 0.4em 0;
	border-bottom: 1px solid transparent;
	/* A menüpontok két-három szavasak; tördelve a fejléc szétesik. */
	white-space: nowrap;
}

.oeg-menu a:hover,
.oeg-menu .current-menu-item > a {
	color: var(--oeg-arany);
	border-bottom-color: var(--oeg-arany);
}

.oeg-menu-kapcsolo {
	display: none;
	background: none;
	border: 0;
	padding: 0.6rem;
	color: inherit;
	cursor: pointer;
}

.oeg-menu-kapcsolo span {
	display: block;
	width: 24px;
	height: 2px;
	margin: 5px 0;
	background: currentColor;
	transition: transform var(--oeg-atmenet), opacity var(--oeg-atmenet);
}

@media (max-width: 60rem) {
	.oeg-menu-kapcsolo { display: block; }

	.oeg-menu {
		position: absolute;
		inset: 100% 0 auto 0;
		background: var(--oeg-smaragd);
		border-bottom: 1px solid rgba(201, 161, 90, 0.22);
		display: none;
	}

	.oeg-menu[data-nyitva='1'] { display: block; }

	.oeg-menu ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--oeg-t2) 1.25rem var(--oeg-t3);
	}

	.oeg-menu a {
		display: block;
		padding: 0.9em 0;
		border-bottom: 1px solid rgba(241, 244, 236, 0.1);
	}

	.oeg-menu-kapcsolo[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.oeg-menu-kapcsolo[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
	.oeg-menu-kapcsolo[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Szakaszok ---------- */

.oeg-szakasz { padding-block: var(--oeg-t5); }

.oeg-szakasz--sotet,
.oeg-sotet {
	background: var(--oeg-smaragd);
	color: var(--oeg-pergamen);
}

.oeg-sotet h1,
.oeg-sotet h2,
.oeg-sotet h3 { color: var(--oeg-pergamen); }

.oeg-sotet .oeg-motto,
.oeg-sotet p { color: rgba(241, 244, 236, 0.82); }

.oeg-szakasz--fatyol { background: #fff; }

/* Nyitó – az aura-fény a mély smaragdon */

.oeg-nyito {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(32rem, 88vh, 50rem);
	padding-block: var(--oeg-t5);
	background: var(--oeg-arnyekzold);
	color: var(--oeg-pergamen);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}

/* A fénykép. Külön rétegen ül, hogy lassan úszhasson a szöveg alatt anélkül,
   hogy a szöveget is mozgatná. A duotone-hatást a fölé tett smaragd fátyol
   adja: a fotó maga semleges marad, a hangulatot az arculat színe hozza. */
.oeg-nyito__kep {
	position: absolute;
	inset: -4% -4% -4% -4%;
	z-index: -2;
	background: var(--oeg-nyito-kep) center 58% / cover no-repeat;
	filter: saturate(0.72) contrast(1.06) brightness(0.95);
	animation: oeg-sodras 34s ease-in-out infinite alternate;
}

@keyframes oeg-sodras {
	from { transform: scale(1) translate3d(0, 0, 0); }
	to   { transform: scale(1.07) translate3d(0, -1.4%, 0); }
}

/* Fátyol: felül átlátszóbb (látszik a köd), a szöveg mögött sűrűbb. */
.oeg-nyito::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(ellipse 62% 50% at 50% 54%, rgba(12, 38, 32, 0.62) 0%, rgba(6, 18, 15, 0.34) 72%),
		linear-gradient(180deg, rgba(6, 18, 15, 0.72) 0%, rgba(12, 38, 32, 0.1) 34%, rgba(6, 18, 15, 0.72) 100%);
	pointer-events: none;
}

/* Az aura: a logó fénypontjának nagyra nagyított mása, lassan lélegzik. */
.oeg-nyito::before {
	content: '';
	position: absolute;
	inset: -30% 0 auto 50%;
	z-index: -1;
	width: min(90rem, 150vw);
	aspect-ratio: 1;
	transform: translateX(-50%);
	background: radial-gradient(
		circle at 50% 42%,
		rgba(201, 161, 90, 0.22) 0%,
		rgba(46, 143, 110, 0.22) 38%,
		transparent 68%
	);
	animation: oeg-lelegzet 11s ease-in-out infinite alternate;
	pointer-events: none;
}

@keyframes oeg-lelegzet {
	from { opacity: 0.65; }
	to   { opacity: 1; }
}

/* Csak a tartalom kerül a fátyol fölé. Szándékosan NEM `> *`: az a
   háttérréteg és a görgetés-jelző abszolút pozícióját is felülírná,
   és a fénykép nyom nélkül eltűnne. */
.oeg-nyito > .oeg-burok { position: relative; z-index: 1; }

/* A tengely-jel a cím fölött – a logó jele, halkan. */
.oeg-nyito__jel {
	width: 4.8rem;
	height: auto;
	margin: 0 auto var(--oeg-t3);
	opacity: 0.9;
}

/* Görgetés-jelzés: a hérónak legyen alja, ne vágja el a semmi. */
.oeg-nyito__tovabb {
	position: absolute;
	left: 50%;
	bottom: var(--oeg-t3);
	width: 1px;
	height: 3.2rem;
	transform: translateX(-50%);
	background: linear-gradient(180deg, transparent, var(--oeg-arany));
	opacity: 0.7;
}

.oeg-nyito__tovabb::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 5px;
	height: 5px;
	margin-left: -2px;
	border-radius: 50%;
	background: var(--oeg-arany);
	animation: oeg-csepp 2.6s ease-in-out infinite;
}

@keyframes oeg-csepp {
	0%, 100% { transform: translateY(0); opacity: 1; }
	50%      { transform: translateY(-1.4rem); opacity: 0.25; }
}

.oeg-nyito h1 {
	color: var(--oeg-pergamen);
	max-width: 18ch;
	margin-inline: auto;
}

.oeg-nyito .oeg-motto {
	max-width: 42ch;
	margin: var(--oeg-t2) auto var(--oeg-t3);
	color: rgba(241, 244, 236, 0.85);
}

/* ---------- Kártyák ---------- */

.oeg-racs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--oeg-t3);
}

.oeg-kartya {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--oeg-vonal);
	border-radius: var(--oeg-ker);
	overflow: hidden;
	transition: border-color var(--oeg-atmenet), transform var(--oeg-atmenet);
}

.oeg-kartya:hover {
	border-color: var(--oeg-aura);
	transform: translateY(-3px);
}

.oeg-kartya__kep { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

.oeg-kartya__test {
	padding: var(--oeg-t3) var(--oeg-t2) var(--oeg-t2);
	display: flex;
	flex-direction: column;
	gap: var(--oeg-t1);
	flex: 1;
}

.oeg-kartya h3 { margin: 0; }

.oeg-kartya__lab { margin-top: auto; padding-top: var(--oeg-t2); }

/* ---------- Lábléc ---------- */

.oeg-lablec {
	background: var(--oeg-arnyekzold);
	color: rgba(241, 244, 236, 0.72);
	padding-block: var(--oeg-t4) var(--oeg-t2);
	font-size: 0.98rem;
}

.oeg-lablec a { color: rgba(241, 244, 236, 0.72); text-decoration: none; }
.oeg-lablec a:hover { color: var(--oeg-arany); }

.oeg-lablec__racs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--oeg-t3);
	padding-bottom: var(--oeg-t3);
}

.oeg-lablec h4 {
	font-family: var(--oeg-ui);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--oeg-arany);
	margin-bottom: var(--oeg-t2);
}

.oeg-lablec ul { list-style: none; margin: 0; padding: 0; }
.oeg-lablec li + li { margin-top: 0.55em; }

.oeg-lablec__also {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--oeg-t2);
	padding-top: var(--oeg-t2);
	border-top: 1px solid rgba(201, 161, 90, 0.18);
	font-size: 0.85rem;
}

.oeg-lablec__also ul { display: flex; flex-wrap: wrap; gap: var(--oeg-t2); }

/* ---------- Egyszerű tartalmi oldal ---------- */

.oeg-oldal { padding-block: var(--oeg-t4) var(--oeg-t5); }

.oeg-oldal__fej {
	background: var(--oeg-smaragd);
	color: var(--oeg-pergamen);
	padding-block: var(--oeg-t4);
	text-align: center;
}

.oeg-oldal__fej h1 { color: var(--oeg-pergamen); margin: 0; }

.oeg-tartalom > * + * { margin-top: var(--oeg-t2); }
.oeg-tartalom h2 { margin-top: var(--oeg-t3); }
.oeg-tartalom ul,
.oeg-tartalom ol { padding-left: 1.4em; }
.oeg-tartalom li + li { margin-top: 0.4em; }

.oeg-tartalom img { border-radius: var(--oeg-ker); margin-block: var(--oeg-t3); }

/* ---------- Könyvek oldal ---------- */

.oeg-konyvoldal { padding-bottom: 0; }

/* A polc: a nyolc borító egy sorban, kicsit megdöntve, mint egy valódi
   könyvespolcon. Innen lehet a kötethez ugrani. */
.oeg-polc {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	gap: clamp(0.75rem, 2vw, var(--oeg-t3));
	margin-top: var(--oeg-t4);
	padding-bottom: var(--oeg-t3);
	border-bottom: 1px solid rgba(46, 143, 110, 0.28);
}

.oeg-polc__elem img {
	width: clamp(4.5rem, 8vw, 6.5rem);
	border-radius: 2px;
	box-shadow: 0 12px 26px rgba(6, 18, 15, 0.26);
	transition: transform var(--oeg-atmenet), box-shadow var(--oeg-atmenet);
}

.oeg-polc__elem:nth-child(odd) img { transform: rotate(-1.4deg); }
.oeg-polc__elem:nth-child(even) img { transform: rotate(1.2deg); }

.oeg-polc__elem:hover img,
.oeg-polc__elem:focus-visible img {
	transform: translateY(-8px) rotate(0);
	box-shadow: 0 22px 40px rgba(6, 18, 15, 0.34);
}

/* Egy kötet = egy nyitott oldalpár. */
.oeg-konyvek { margin-top: var(--oeg-t5); }

.oeg-konyv {
	position: relative;
	padding-block: clamp(var(--oeg-t4), 7vw, var(--oeg-t6));
	scroll-margin-top: 6rem;
}

/* Váltakozó alap: a páratlan kötetek fátyol-fehéren ülnek, így a lap
   ritmust kap, és nem lesz nyolc egyforma sáv. */
.oeg-konyv--tukor { background: #fff; }

.oeg-konyv .oeg-burok {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
	gap: var(--oeg-t4) clamp(var(--oeg-t4), 6vw, var(--oeg-t6));
	align-items: center;
}

.oeg-konyv--tukor .oeg-konyv__borito { grid-column: 2; grid-row: 1; }
.oeg-konyv--tukor .oeg-konyv__szoveg { grid-column: 1; grid-row: 1; }
.oeg-konyv--tukor .oeg-burok { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }

/* A nagy sorszám: dísz, a képernyőolvasó elől elrejtve. Mindig a BORÍTÓ
   oldalán áll, nem a szövegén – különben a bekezdések alá csúszik. */
.oeg-konyv__szam {
	position: absolute;
	top: -0.35em;
	left: 0;
	z-index: 0;
	font-family: var(--oeg-cimsor);
	font-size: clamp(6rem, 16vw, 12rem);
	line-height: 1;
	color: var(--oeg-aura);
	opacity: 0.09;
	pointer-events: none;
}

.oeg-konyv--tukor .oeg-konyv__szam { left: auto; right: 0; }

.oeg-konyv__borito,
.oeg-konyv__szoveg { position: relative; z-index: 1; }

/* A borító a kötet arányát tartja – nincs vágás, mert a gerinc és a cím
   a fotó szélén van, egy 3:2-es levágás pont azt nyisszantaná le. */
.oeg-konyv__borito img {
	width: 100%;
	height: auto;
	border-radius: var(--oeg-ker);
	box-shadow: 0 22px 48px rgba(6, 18, 15, 0.24);
	transition: transform var(--oeg-atmenet), box-shadow var(--oeg-atmenet);
}

.oeg-konyv:hover .oeg-konyv__borito img {
	transform: translateY(-6px);
	box-shadow: 0 30px 60px rgba(6, 18, 15, 0.3);
}

.oeg-konyv__szoveg { max-width: 40rem; }
.oeg-konyv__szoveg h2 { margin: 0; }

.oeg-konyv__alcim {
	margin: var(--oeg-t1) 0 var(--oeg-t3);
	font-family: var(--oeg-ui);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--oeg-aura);
}

/* Arany hajszálvonal az alcím alatt – ez köti össze a nyolc kötetet. */
.oeg-konyv__alcim::after,
.oeg-konyv__szoveg h2 + .oeg-konyv__lab::before {
	content: '';
	display: block;
	width: 3.5rem;
	height: 1px;
	margin-top: var(--oeg-t2);
	background: var(--oeg-arany);
}

.oeg-konyv__szoveg p + p { margin-top: var(--oeg-t2); }

.oeg-konyv__lab {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--oeg-t2);
	margin-top: var(--oeg-t3);
}

.oeg-konyv__ar {
	font-family: var(--oeg-ui);
	font-weight: 600;
	color: var(--oeg-smaragd);
}

@media (max-width: 56rem) {
	.oeg-konyv .oeg-burok,
	.oeg-konyv--tukor .oeg-burok { grid-template-columns: 1fr; }

	.oeg-konyv--tukor .oeg-konyv__borito,
	.oeg-konyv--tukor .oeg-konyv__szoveg { grid-column: 1; grid-row: auto; }

	.oeg-konyv__borito { max-width: 16rem; }
	.oeg-konyv__szam { font-size: 5.5rem; top: -0.2em; }
}

/* =========================================================================
   Szakaszok képpel – a „sok üres blokk" feloldása.
   A minta végig ugyanaz: szöveg + egy fénykép, amit arany hajszálvonal
   kísér. A kép oldala váltakozik, hogy a lapon legyen ritmus.
   ========================================================================= */

.oeg-szakasz--kep .oeg-burok {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--oeg-t4) clamp(var(--oeg-t3), 6vw, var(--oeg-t6));
	align-items: center;
}

/* A páros szakaszokban a kép balra kerül. A DOM-sorrend nem változik
   (a szöveg marad elöl), csak a rácsban cserélünk – így a képernyőolvasó
   és a mobilnézet is a szöveggel kezd. */
.oeg-szakasz--kep-bal .oeg-szoveg { grid-column: 2; grid-row: 1; }
.oeg-szakasz--kep-bal .oeg-kepdoboz { grid-column: 1; grid-row: 1; }

.oeg-kepdoboz {
	position: relative;
	isolation: isolate;
}

.oeg-kepdoboz img {
	width: 100%;
	max-height: 34rem;
	object-fit: cover;
	object-position: center 22%;
	border-radius: var(--oeg-ker);
	box-shadow: 0 26px 60px rgba(6, 18, 15, 0.28);
}

/* Az elcsúsztatott arany keret – ettől lesz „megkomponált" a kép,
   nem pedig belapátolt. */
.oeg-kepdoboz::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset: auto -1.4rem -1.4rem auto;
	width: 62%;
	height: 62%;
	border: 1px solid var(--oeg-arany);
	border-radius: var(--oeg-ker);
	opacity: 0.55;
}

.oeg-szakasz--kep-bal .oeg-kepdoboz::before {
	inset: -1.4rem auto auto -1.4rem;
}

/* A sötét szakaszok háttérfotója: nagyon halkan, csak mélységnek. */
.oeg-szakasz--fotohatter {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.oeg-szakasz--fotohatter::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -2;
	background: var(--oeg-szakasz-kep) center / cover no-repeat;
	filter: saturate(0.5) brightness(0.5);
}

.oeg-szakasz--fotohatter::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(100deg, rgba(6, 18, 15, 0.94) 30%, rgba(12, 38, 32, 0.7) 100%);
}

/* ---------- Számsor: mi van a tanfolyamban ---------- */

.oeg-adatok {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: var(--oeg-t2);
	margin-top: var(--oeg-t4);
	padding-top: var(--oeg-t3);
	border-top: 1px solid rgba(201, 161, 90, 0.28);
}

.oeg-adat strong {
	display: block;
	font-family: var(--oeg-cimsor);
	font-size: clamp(2rem, 4vw, 2.9rem);
	line-height: 1;
	color: var(--oeg-arany);
	font-weight: 400;
}

.oeg-adat span {
	display: block;
	margin-top: 0.5em;
	font-family: var(--oeg-ui);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(241, 244, 236, 0.66);
}

.oeg-szakasz:not(.oeg-sotet) .oeg-adat span { color: var(--oeg-szoveg-lgy); }

/* ---------- Idézet-sáv ---------- */

.oeg-idezetsav {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: var(--oeg-t6);
	background: var(--oeg-arnyekzold);
	color: var(--oeg-pergamen);
	text-align: center;
}

.oeg-idezetsav::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -2;
	background: var(--oeg-idezet-kep) center / cover no-repeat;
	filter: saturate(0.4) brightness(0.55);
}

.oeg-idezetsav::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(6, 18, 15, 0.66), rgba(6, 18, 15, 0.9));
}

.oeg-idezetsav blockquote {
	max-width: 34ch;
	margin: 0 auto;
	border: 0;
	padding: 0;
	font-family: var(--oeg-cimsor);
	font-size: clamp(1.5rem, 3.4vw, 2.4rem);
	font-style: normal;
	line-height: 1.35;
	color: var(--oeg-pergamen);
}

.oeg-idezetsav cite {
	display: block;
	margin-top: var(--oeg-t3);
	font-family: var(--oeg-ui);
	font-size: 0.7rem;
	font-style: normal;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--oeg-arany);
}

/* ---------- Könyvsáv a kezdőlapon ---------- */

.oeg-konyvsav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	gap: clamp(var(--oeg-t2), 3vw, var(--oeg-t4));
	margin-top: var(--oeg-t4);
}

.oeg-konyvsav img {
	width: clamp(5.5rem, 11vw, 8.5rem);
	border-radius: 2px;
	box-shadow: 0 16px 34px rgba(6, 18, 15, 0.3);
	transition: transform var(--oeg-atmenet);
}

.oeg-konyvsav a:hover img { transform: translateY(-6px) rotate(-1.5deg); }

/* ---------- Feltűnés görgetésre ---------- */

[data-oeg-fel] {
	transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
	            transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: var(--oeg-kesleltet, 0ms);
}


@media (max-width: 56rem) {
	.oeg-szakasz--kep .oeg-burok { grid-template-columns: 1fr; }
	.oeg-szakasz--kep-bal .oeg-szoveg,
	.oeg-szakasz--kep-bal .oeg-kepdoboz { grid-column: 1; grid-row: auto; }
	.oeg-kepdoboz::before { display: none; }
}

/* A rejtés CSAK akkor él, ha a JS lefutott – különben a tartalom eltűnne
   olyan böngészőben, ahol a szkript nem fut. */
[data-oeg-fel] { opacity: 1; transform: none; }

.oeg-js [data-oeg-fel] {
	opacity: 0;
	transform: translateY(1.6rem);
}

.oeg-js [data-oeg-fel][data-lathato] {
	opacity: 1;
	transform: none;
}

/* ---------- Oldal kiemelt képe ---------- */

.oeg-oldal__kep {
	margin: 0 0 var(--oeg-t4);
	max-width: 26rem;
}

.oeg-oldal__kep img {
	width: 100%;
	border-radius: var(--oeg-ker);
	box-shadow: 0 24px 54px rgba(6, 18, 15, 0.22);
}

/* Az oldalfej és a szöveg közé a kép mellé fusson a bevezető, ha van hely. */
@media (min-width: 60rem) {
	.oeg-oldal:has(.oeg-oldal__kep) .oeg-burok {
		display: grid;
		grid-template-columns: 22rem minmax(0, 1fr);
		gap: var(--oeg-t4) var(--oeg-t5);
		align-items: start;
	}

	.oeg-oldal__kep {
		position: sticky;
		top: 7rem;
		max-width: none;
		margin-bottom: 0;
	}
}

/* ---------- Lábléc: készítette ---------- */

.oeg-keszitette {
	margin: 0;
	font-family: var(--oeg-ui);
	font-size: 0.74rem;
	letter-spacing: 0.06em;
	color: rgba(241, 244, 236, 0.55);
}

.oeg-keszitette a {
	color: var(--oeg-arany);
	text-decoration: none;
}

.oeg-keszitette a:hover { text-decoration: underline; }

/* A lábléc alsó sora: balra a copyright, jobbra a készítette. */
.oeg-lablec__also { align-items: center; }
.oeg-lablec__also .oeg-keszitette { margin-left: auto; }

/* Aki kéri, annak ne mozogjon semmi – és ilyenkor a rejtés se éljen.
   Ez a blokk a fájl VÉGÉN áll: a .oeg-js szabályokkal azonos a
   fajsúlya, ezért csak így nyer. */
@media (prefers-reduced-motion: reduce) {
	.oeg-js [data-oeg-fel] { opacity: 1; transform: none; transition: none; }
	.oeg-nyito__kep,
	.oeg-nyito::before,
	.oeg-nyito__tovabb::after { animation: none; }
}

/* ---------- „A tanítás" – kép nélkül, tipográfiával ---------- */

.oeg-tanitas__belso {
	max-width: 62rem;
	margin-inline: auto;
	text-align: center;
}

.oeg-tanitas__idezet {
	max-width: 30ch;
	margin: var(--oeg-t3) auto var(--oeg-t4);
	font-family: var(--oeg-cimsor);
	font-size: clamp(1.35rem, 2.8vw, 1.95rem);
	line-height: 1.4;
	color: var(--oeg-smaragd);
}

/* Az idézet fölé-alá arany hajszálvonal – ez adja a keretet kép helyett. */
.oeg-tanitas__idezet::before,
.oeg-tanitas__idezet::after {
	content: '';
	display: block;
	width: 2.5rem;
	height: 1px;
	margin: var(--oeg-t3) auto;
	background: var(--oeg-arany);
}

/* A magyarázó szöveg két hasábban fut – így nem lesz egy hosszú tömb. */
.oeg-tanitas__hasab {
	columns: 2;
	column-gap: var(--oeg-t5);
	text-align: left;
	margin-bottom: var(--oeg-t4);
}

.oeg-tanitas__hasab p { break-inside: avoid; margin-bottom: var(--oeg-t2); }

@media (max-width: 48rem) {
	.oeg-tanitas__hasab { columns: 1; }
}

/* Az idézet-sáv fotó nélkül: a mélységet a paletta és az aura adja. */
.oeg-idezetsav::before {
	background: radial-gradient(ellipse 70% 80% at 50% 40%, rgba(46, 143, 110, 0.22), transparent 70%);
	filter: none;
}

/* =========================================================================
   Kapcsolat oldal + űrlap
   ========================================================================= */

.oeg-kapcsolat__racs {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: var(--oeg-t5) clamp(var(--oeg-t4), 6vw, var(--oeg-t6));
	align-items: start;
}

.oeg-kapcsolat__bal .oeg-tartalom { max-width: none; }

.oeg-elerhetoseg {
	list-style: none;
	margin: var(--oeg-t4) 0 0;
	padding: 0;
	border-top: 1px solid rgba(46, 143, 110, 0.28);
}

.oeg-elerhetoseg li {
	padding: var(--oeg-t3) 0;
	border-bottom: 1px solid rgba(46, 143, 110, 0.18);
}

.oeg-elerhetoseg .oeg-cimke { margin-bottom: 0.35em; }
.oeg-elerhetoseg a { font-size: 1.15rem; text-decoration: none; }

.oeg-kapcsolat__figyelem {
	margin-top: var(--oeg-t3);
	font-size: 0.92rem;
	color: var(--oeg-szoveg-lgy);
}

/* Az űrlap kártyája – ez a lap súlypontja, ezért kap saját alapot. */
.oeg-kapcsolat__jobb {
	position: relative;
	padding: clamp(var(--oeg-t3), 4vw, var(--oeg-t5));
	background: #fff;
	border: 1px solid rgba(46, 143, 110, 0.22);
	border-radius: var(--oeg-ker);
	box-shadow: 0 30px 70px rgba(6, 18, 15, 0.1);
}

.oeg-kapcsolat__jel {
	width: 2.6rem;
	height: auto;
	margin-bottom: var(--oeg-t2);
}

.oeg-kapcsolat__jobb h2 { margin: 0 0 var(--oeg-t1); }

.oeg-kapcsolat__vezeto {
	color: var(--oeg-szoveg-lgy);
	margin-bottom: var(--oeg-t4);
}

/* ---------- Az űrlap mezői ---------- */

.oeg-urlap__mez { margin: 0 0 var(--oeg-t3); }

.oeg-urlap__par {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 0 var(--oeg-t3);
}

.oeg-urlap label {
	display: block;
	margin-bottom: 0.5em;
	font-family: var(--oeg-ui);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--oeg-smaragd);
}

.oeg-urlap label span[aria-hidden] { color: var(--oeg-arany); }

.oeg-urlap input[type='text'],
.oeg-urlap input[type='email'],
.oeg-urlap input[type='tel'],
.oeg-urlap select,
.oeg-urlap textarea {
	width: 100%;
	padding: 0.85em 1em;
	font-family: var(--oeg-kenyer);
	font-size: 1rem;
	color: var(--oeg-szoveg);
	background: var(--oeg-pergamen);
	border: 1px solid rgba(46, 143, 110, 0.3);
	border-radius: var(--oeg-ker);
	transition: border-color var(--oeg-atmenet), box-shadow var(--oeg-atmenet);
}

.oeg-urlap textarea { resize: vertical; min-height: 9rem; line-height: 1.6; }

.oeg-urlap :is(input, select, textarea):focus {
	outline: none;
	border-color: var(--oeg-aura);
	box-shadow: 0 0 0 3px rgba(46, 143, 110, 0.14);
}

/* A pipa sora nem nagybetűs UI-szöveg, hanem olvasható mondat. */
.oeg-urlap__pipa label {
	display: flex;
	align-items: flex-start;
	gap: 0.7em;
	font-family: var(--oeg-kenyer);
	font-size: 0.92rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--oeg-szoveg-lgy);
	line-height: 1.5;
}

.oeg-urlap__pipa input { margin-top: 0.3em; accent-color: var(--oeg-aura); }

.oeg-urlap__jelzes {
	padding: var(--oeg-t2) var(--oeg-t3);
	margin-bottom: var(--oeg-t3);
	border-left: 3px solid;
	border-radius: var(--oeg-ker);
	font-size: 0.98rem;
}

.oeg-urlap__jelzes--siker {
	border-color: var(--oeg-aura);
	background: rgba(46, 143, 110, 0.1);
	color: var(--oeg-smaragd);
}

.oeg-urlap__jelzes--hiba {
	border-color: #b4553f;
	background: rgba(180, 85, 63, 0.09);
	color: #7d3728;
}

@media (max-width: 62rem) {
	.oeg-kapcsolat__racs { grid-template-columns: 1fr; }
}