/* =========================================================================
   Tanulói felület – a paletta világos, csendes oldala.
   Az arculati terv így fogalmaz: a nyilvános oldal a mély oldalt használja,
   a tanulói felületen a szöveg és a hang a főszereplő, a szín csak a keret.
   Szerkezet: bal oldalt a fejezetek és műhelymunkák, középen a lecke.
   ========================================================================= */

.oeg-app {
	display: grid;
	grid-template-columns: 19rem minmax(0, 1fr);
	align-items: start;
	min-height: calc(100vh - 5rem);
	background: #fff;
}

/* ---------- Bal oldali lecke-menü ---------- */

.oeg-app__menu {
	position: sticky;
	top: 5rem;
	max-height: calc(100vh - 5rem);
	overflow-y: auto;
	padding: var(--oeg-t3) var(--oeg-t2);
	background: var(--oeg-pergamen);
	border-right: 1px solid var(--oeg-vonal);
}

.oeg-app__cim {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--oeg-cimsor);
	font-size: 1.05rem;
	line-height: 1.35;
	color: var(--oeg-smaragd);
	padding-bottom: var(--oeg-t2);
	margin-bottom: var(--oeg-t2);
	border-bottom: 1px solid var(--oeg-vonal);
	text-decoration: none;
}

/* Az aura-gyűrű a kurzus jeleként – az arculati terv mockupjából */
.oeg-app__cim::before {
	content: '';
	flex-shrink: 0;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 36%, var(--oeg-arany) 0%, var(--oeg-aura) 62%, transparent 100%);
	box-shadow: 0 0 0 1px rgba(46, 143, 110, 0.35);
}

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

.oeg-app__csoport:first-of-type { margin-top: 0; }

.oeg-app__lista { list-style: none; margin: 0; padding: 0; }

.oeg-lecke-link {
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	padding: 0.6em 0.7em;
	border-radius: var(--oeg-ker);
	font-size: 0.97rem;
	line-height: 1.45;
	color: var(--oeg-szoveg-lgy);
	text-decoration: none;
	transition: background var(--oeg-atmenet), color var(--oeg-atmenet);
}

.oeg-lecke-link:hover { background: #fff; color: var(--oeg-smaragd); }

.oeg-lecke-link[aria-current='page'] {
	background: var(--oeg-smaragd);
	color: var(--oeg-pergamen);
}

.oeg-lecke-link__jel { flex-shrink: 0; color: var(--oeg-aura); font-size: 0.85em; }
.oeg-lecke-link[aria-current='page'] .oeg-lecke-link__jel { color: var(--oeg-arany); }

/* Zárt lecke – megvan a helye, de nem kattintható */
.oeg-lecke-link--zart { opacity: 0.55; cursor: default; }
.oeg-lecke-link--zart:hover { background: transparent; color: var(--oeg-szoveg-lgy); }

/* ---------- A lecke maga ---------- */

.oeg-app__fo {
	padding: var(--oeg-t4) var(--oeg-t3) var(--oeg-t5);
	min-width: 0;
}

.oeg-lecke { max-width: var(--oeg-szoveg-szeles); margin-inline: auto; }

.oeg-lecke__morzsa {
	font-family: var(--oeg-ui);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--oeg-halvany);
	margin-bottom: var(--oeg-t1);
}

.oeg-lecke__motto {
	font-style: italic;
	font-size: 1.2rem;
	line-height: 1.7;
	color: var(--oeg-szoveg-lgy);
	margin-bottom: var(--oeg-t3);
	padding-left: var(--oeg-t2);
	border-left: 2px solid var(--oeg-arany);
}

.oeg-lecke__test { font-size: 1.14rem; line-height: 1.85; }
.oeg-lecke__test > * + * { margin-top: var(--oeg-t2); }
.oeg-lecke__test h2 { font-size: 1.6rem; margin-top: var(--oeg-t3); }
.oeg-lecke__test h3 { font-size: 1.3rem; margin-top: var(--oeg-t3); }

/* Gyakorlat-kiemelés a szövegtörzsben */
.oeg-gyakorlat {
	background: var(--oeg-pergamen);
	border-left: 2px solid var(--oeg-aura);
	border-radius: var(--oeg-ker);
	padding: var(--oeg-t2) var(--oeg-t3);
}

/* Leckeábra */
.oeg-abra {
	margin-block: var(--oeg-t3);
	background: var(--oeg-pergamen);
	border: 1px solid var(--oeg-vonal);
	border-radius: var(--oeg-ker);
	padding: var(--oeg-t2);
}

.oeg-abra img { margin-inline: auto; }

.oeg-abra figcaption {
	font-family: var(--oeg-ui);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--oeg-halvany);
	text-align: center;
	margin-top: var(--oeg-t1);
}

/* ---------- Meditáció-lejátszó ---------- */

.oeg-lejatszo {
	display: flex;
	align-items: center;
	gap: var(--oeg-t2);
	margin-block: var(--oeg-t3);
	padding: var(--oeg-t2);
	background: var(--oeg-smaragd);
	border-radius: var(--oeg-ker);
	color: var(--oeg-pergamen);
}

.oeg-lejatszo__gomb {
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	border: 0;
	border-radius: 50%;
	background: var(--oeg-arany);
	color: var(--oeg-smaragd);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: transform var(--oeg-atmenet);
}

.oeg-lejatszo__gomb:hover { transform: scale(1.06); }
.oeg-lejatszo__gomb svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }

.oeg-lejatszo__test { flex: 1; min-width: 0; }

.oeg-lejatszo__nev {
	font-family: var(--oeg-ui);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	margin-bottom: 0.55rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.oeg-lejatszo__sav {
	appearance: none;
	width: 100%;
	height: 3px;
	border-radius: 2px;
	background: rgba(241, 244, 236, 0.22);
	cursor: pointer;
}

.oeg-lejatszo__sav::-webkit-slider-thumb {
	appearance: none;
	width: 11px; height: 11px;
	border-radius: 50%;
	background: var(--oeg-arany);
}

.oeg-lejatszo__sav::-moz-range-thumb {
	width: 11px; height: 11px;
	border: 0; border-radius: 50%;
	background: var(--oeg-arany);
}

.oeg-lejatszo__ido {
	font-family: var(--oeg-ui);
	font-size: 0.7rem;
	font-variant-numeric: tabular-nums;
	color: rgba(241, 244, 236, 0.6);
	margin-top: 0.4rem;
}

/* ---------- Lapozás ---------- */

.oeg-lapozo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--oeg-t2);
	margin-top: var(--oeg-t4);
	padding-top: var(--oeg-t3);
	border-top: 1px solid var(--oeg-vonal);
}

.oeg-lapozo__kozep { margin-inline: auto; }

.oeg-lapozo__hol {
	font-family: var(--oeg-ui);
	font-size: 0.7rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--oeg-halvany);
}

/* ---------- Zárt tartalom ---------- */

.oeg-zar {
	max-width: 34rem;
	margin: var(--oeg-t5) auto;
	text-align: center;
	padding: var(--oeg-t4) var(--oeg-t3);
	background: var(--oeg-pergamen);
	border: 1px solid var(--oeg-vonal);
	border-radius: var(--oeg-ker);
}

/* ---------- Mobil: a lecke-menü a tartalom fölé ---------- */

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

	.oeg-app__menu {
		position: static;
		max-height: none;
		border-right: 0;
		border-bottom: 1px solid var(--oeg-vonal);
	}

	/* Összecsukható, hogy ne toljon le mindent a leckéről */
	.oeg-app__menu[data-osszecsukhato='1'] .oeg-app__lista,
	.oeg-app__menu[data-osszecsukhato='1'] .oeg-app__csoport { display: none; }

	.oeg-app__menu[data-nyitva='1'] .oeg-app__lista,
	.oeg-app__menu[data-nyitva='1'] .oeg-app__csoport { display: block; }

	.oeg-app__fo { padding: var(--oeg-t3) 1.25rem var(--oeg-t4); }
}

/* A szöveg közé beszúrt meditáció-lejátszó.
   SÖTÉT marad, mint a lecke tetején lévő: a világos szövegfolyamban ez
   egy megállás – a meditáció pillanata vizuálisan is elsötétül. Világos
   háttérrel a pergamen-színű felirat olvashatatlan lett volna. */
.oeg-lejatszo--lecke {
	margin: var(--oeg-t4) 0;
	padding: var(--oeg-t3);
	border: 1px solid rgba(201, 161, 90, 0.5);
	border-radius: 1rem 1rem var(--oeg-ker) var(--oeg-ker);
	box-shadow: 0 18px 40px rgba(6, 18, 15, 0.18);
}

.oeg-lejatszo--lecke .oeg-lejatszo__nev { color: var(--oeg-arany); }

.oeg-lejatszo--lecke + .oeg-lejatszo--lecke { margin-top: calc(var(--oeg-t3) * -1); }

/* ---------- Lejátszó: bővített vezérlők ---------- */

.oeg-lejatszo__vezerlok {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex-shrink: 0;
}

.oeg-lejatszo__ugras,
.oeg-lejatszo__nemit {
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(241, 244, 236, 0.28);
	border-radius: 50%;
	color: rgba(241, 244, 236, 0.8);
	cursor: pointer;
	transition: color var(--oeg-atmenet), border-color var(--oeg-atmenet),
	            background var(--oeg-atmenet);
}

.oeg-lejatszo__ugras svg,
.oeg-lejatszo__nemit svg {
	width: 0.95rem;
	height: 0.95rem;
	fill: currentColor;
}

.oeg-lejatszo__ugras:hover,
.oeg-lejatszo__nemit:hover {
	color: var(--oeg-arany);
	border-color: var(--oeg-arany);
	background: rgba(201, 161, 90, 0.12);
}

.oeg-lejatszo__also {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--oeg-t2);
	margin-top: 0.4rem;
}

.oeg-lejatszo__also .oeg-lejatszo__ido { margin-top: 0; }

.oeg-lejatszo__hangero {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

.oeg-lejatszo__nemit { width: 1.9rem; height: 1.9rem; }

.oeg-lejatszo__hangsav {
	appearance: none;
	width: 5.5rem;
	height: 3px;
	border-radius: 2px;
	background: rgba(241, 244, 236, 0.22);
	cursor: pointer;
}

.oeg-lejatszo__hangsav::-webkit-slider-thumb {
	appearance: none;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--oeg-arany);
}

.oeg-lejatszo__hangsav::-moz-range-thumb {
	width: 10px; height: 10px;
	border: 0; border-radius: 50%;
	background: var(--oeg-arany);
}

/* Szűk helyen a hangerő a saját sorába kerül, hogy az idő ne csússzon ki. */
@media (max-width: 34rem) {
	.oeg-lejatszo { flex-wrap: wrap; }
	.oeg-lejatszo__also { flex-wrap: wrap; }
	.oeg-lejatszo__hangsav { width: 4rem; }
}

/* ---------- Kurzus-oldal ---------- */

.oeg-kurzusoldal__fej {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
	gap: var(--oeg-t4) clamp(var(--oeg-t4), 5vw, var(--oeg-t6));
	align-items: start;
	margin-bottom: var(--oeg-t5);
}

.oeg-kurzusoldal__bevezeto { max-width: none; font-size: 1.15rem; }

.oeg-kurzusoldal__allapot {
	padding: var(--oeg-t3);
	background: var(--oeg-smaragd);
	color: var(--oeg-pergamen);
	border-radius: 1.2rem 1.2rem var(--oeg-ker) var(--oeg-ker);
}

.oeg-kurzusoldal__allapot .oeg-cimke { color: var(--oeg-arany); }
.oeg-kurzusoldal__allapot .oeg-gomb { margin-top: var(--oeg-t3); width: 100%; justify-content: center; }
.oeg-kurzusoldal__allapot .oeg-haladas__szoveg { color: rgba(241, 244, 236, 0.7); }

.oeg-kurzusoldal__adat {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 0 0 0.4em;
}

.oeg-kurzusoldal__adat strong {
	font-family: var(--oeg-cimsor);
	font-size: 1.6rem;
	line-height: 1;
	color: var(--oeg-arany);
	font-weight: 400;
	min-width: 2ch;
}

.oeg-kurzusoldal__adat span {
	font-family: var(--oeg-ui);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(241, 244, 236, 0.72);
}

.oeg-kurzusoldal__leckek h2 { margin-bottom: var(--oeg-t3); }

.oeg-leckelista__elem--zart span:first-child { color: var(--oeg-halvany); }

.oeg-leckelista__elem--zart > span {
	display: flex;
	align-items: baseline;
	gap: var(--oeg-t3);
	padding: var(--oeg-t3) 0;
	color: var(--oeg-szoveg-lgy);
}

.oeg-kurzusoldal__zar {
	margin-top: var(--oeg-t3);
	font-family: var(--oeg-ui);
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--oeg-szoveg-lgy);
}

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