/*
Theme Name: Gyerekre Hangolva
Description: Egyedi WordPress téma a gyerekrehangolva.hu számára - page builder nélkül, natív Gutenberg blokkokra épülve. Az eredeti Divi-oldal elfogadott arculatát (arany-barna paletta, sötétkék kontraszt, hullámos/játékos formavilág) őrzi meg, Open Sans betűtípussal.
Author: Kreatívoldal
Version: 1.2.1
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: gyerekrehangolva
*/

/* ==========================================================================
   Design tokens - a jelenlegi élő oldalról kinyert valós ertekek
   (et-divi-customizer-global.min.css alapján, 2026-07-04)
   ========================================================================== */
:root {
	/* --- Cecília eredeti színei. EZEKEN NEM VÁLTOZTATUNK. --------------- */
	--gh-color-gold: #cea354;        /* fő arany-barna akcent */
	--gh-color-gold-soft: #fbe8bd;   /* krém */
	--gh-color-navy: #172d38;        /* sötét kontraszt */
	--gh-color-navy-light: #204256;  /* sötét, átmenethez */
	--gh-color-blue-muted: #558fab;  /* tompított kék */
	--gh-color-ink: #333333;
	--gh-color-ink-soft: #666666;
	--gh-color-bg: #ffffff;
	--gh-color-bg-alt: #f9f9f9;

	/* --- Ugyanazokból származtatott árnyalatok (nincs új színcsalád) ---- */
	/* A teli krém (#fbe8bd) nagy felületen harsány. Nagy háttérhez ezeket a
	   jóval halványabb, ugyanabból a színből kevert árnyalatokat használjuk;
	   a teli krém marad kis felületre (chip, badge, kiemelés). */
	--gh-krem-halvany: #fdfaf4;      /* szinte fehér, épp csak meleg */
	--gh-gold-wash: #fbf6ee;   /* = gh_szin('arany-mosas') */         /* leheletnyi arany háttérmosás */
	--gh-gold-line: rgba(206, 163, 84, 0.24);
	--gh-navy-wash: rgba(23, 45, 56, 0.05);
	--gh-krem-melyebb: #f6e3b8;

	/* --- Tipográfia ---------------------------------------------------- */
	--gh-font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--gh-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

	/* A Fraunces változó tengelyei: lágy betűvégek + szándékos „billegés". */
	--gh-display-axes: 'SOFT' 60, 'WONK' 1;

	/* Folyékony típusskála — a nagy címek nem törnek meg mobilon. */
	--gh-size-display: clamp(2rem, 3.9vw, 3.2rem);
	--gh-size-h2: clamp(1.7rem, 3vw, 2.5rem);
	--gh-size-h3: clamp(1.25rem, 1.7vw, 1.5rem);
	--gh-size-lead: clamp(1.05rem, 1.35vw, 1.25rem);

	/* --- Forma --------------------------------------------------------- */
	/* Szándékosan aszimmetrikus sarkok: ettől lesz rajzolt, nem "dobozos". */
	--gh-radius-soft: 22px;
	--gh-radius-organikus: 42px 18px 38px 20px;
	--gh-radius-organikus-alt: 18px 44px 20px 36px;
	--gh-radius-pill: 50px;
	--gh-radius-blob: 58% 42% 47% 53% / 46% 51% 49% 54%;

	--gh-shadow-soft: 0 18px 40px -22px rgba(23, 45, 56, 0.34);
	--gh-shadow-lift: 0 26px 54px -24px rgba(23, 45, 56, 0.4);

	--gh-ritmus: clamp(64px, 8vw, 120px);   /* szekciók közti levegő */
}

/* ==========================================================================
   Alap reset + tipográfia
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--gh-font-body);
	font-weight: 400;
	color: var(--gh-color-ink);
	background: var(--gh-color-bg);
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--gh-font-display);
	font-variation-settings: var(--gh-display-axes);
	font-weight: 700;
	color: var(--gh-color-navy);
	line-height: 1.08;
	letter-spacing: -0.015em;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1 { font-size: var(--gh-size-display); font-weight: 800; }
h2 { font-size: var(--gh-size-h2); }
h3 { font-size: var(--gh-size-h3); line-height: 1.25; }

a { color: var(--gh-color-gold); text-decoration: none; }
a:hover { color: var(--gh-color-navy); }

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

.gh-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Keskenyebb sáv a folyó szövegnek — a hosszú sor olvashatatlan. */
.gh-container--keskeny { max-width: 780px; }

/* ==========================================================================
   Kézzel rajzolt díszek — squiggle-k, gyűrűk, pöttyök
   (Cecília kérése: „csavart vonalak meg kör alakok, játékosabb legyen")
   ========================================================================== */
.gh-squiggle {
	display: block;
	width: 100%;
	height: auto;
	color: var(--gh-color-gold);
	overflow: visible;
}

.gh-squiggle--alahuzas {
	max-width: 240px;
	margin-top: 10px;
}

/* Középre zárt címeknél a vonal is középre kerül. */
.gh-section__title--center + .gh-squiggle--alahuzas,
.gh-squiggle--kozep { margin-left: auto; margin-right: auto; }

.gh-squiggle--hurok { max-width: 92px; }
.gh-squiggle--iv    { max-width: 190px; }
.gh-squiggle--nyil  { max-width: 110px; }
.gh-squiggle--firka { max-width: 150px; }

/* A vonal „megrajzolódik", amikor a nézetbe ér. */
.gh-js .gh-squiggle path {
	stroke-dasharray: 640;
	stroke-dashoffset: 640;
}

.gh-js .gh-squiggle.is-visible path {
	transition: stroke-dashoffset 1.05s cubic-bezier(.2,.7,.3,1);
	stroke-dashoffset: 0;
}

/* --- Háttérdíszek: gyűrűk, korongok, pöttyrács --------------------------- */
.gh-deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.gh-deco > span { position: absolute; display: block; }

.gh-deco__gyuru {
	border-radius: 50%;
	border: 2px solid var(--gh-gold-line);
}

.gh-deco__gyuru--nagy  { width: 340px; height: 340px; }
.gh-deco__gyuru--kicsi { width: 150px; height: 150px; border-style: dashed; }

.gh-deco__korong { border-radius: var(--gh-radius-blob); }
.gh-deco__korong--arany { width: 190px; height: 190px; background: rgba(206, 163, 84, 0.14); }
.gh-deco__korong--krem  { width: 250px; height: 250px; background: rgba(251, 232, 189, 0.5); }
.gh-deco__korong--kek   { width: 130px; height: 130px; background: rgba(85, 143, 171, 0.14); }

/* A pöttyök korábban 2 px-es radial-gradientből készültek, ami elmosódottnak
   („pixelesnek") hatott. Nagyobb pötty + élesebb határ + ritkább rács. */
.gh-deco__pottyok {
	width: 168px;
	height: 126px;
	background-image: radial-gradient(circle, var(--gh-gold-line) 0 3px, transparent 3.2px);
	background-size: 24px 24px;
	opacity: 0.9;
}

/* Elhelyezés — szándékosan a szekció szélein lógva, nem középre igazítva. */
.gh-deco__pos-1 { top: -70px;  left: -90px; }
.gh-deco__pos-2 { bottom: -80px; right: -60px; }
.gh-deco__pos-3 { top: 18%;   right: 7%; }
.gh-deco__pos-4 { bottom: 12%; left: 5%; }

@media (max-width: 900px) {
	/* Mobilon a díszek csak zavarnának a szűk helyen. */
	.gh-deco__pos-3,
	.gh-deco__pos-4 { display: none; }
	.gh-deco__gyuru--nagy { width: 200px; height: 200px; }
}

/* ==========================================================================
   Gombok - a jelenlegi arany CTA-stílus megőrizve
   ========================================================================== */
/* A gomb nem pirula, hanem enyhén szabálytalan sarkú „matrica", ami
   rákattintáskor tömören megnyomódik. */
.gh-button,
.wp-block-button__link {
	position: relative;
	display: inline-block;
	background: var(--gh-color-gold);
	color: #ffffff !important;
	padding: 15px 34px;
	border: 0;
	border-radius: 30px 12px 30px 12px;
	font-family: var(--gh-font-body);
	font-weight: 700;
	line-height: 1.3;
	cursor: pointer;
	box-shadow: 0 5px 0 0 #a97f36, var(--gh-shadow-soft);
	transition: transform 140ms cubic-bezier(.2,.8,.3,1), box-shadow 140ms ease, border-radius 220ms ease;
}

.gh-button:hover,
.wp-block-button__link:hover {
	color: #ffffff !important;
	transform: translateY(-3px);
	/* Hoverre átfordulnak a sarkok — apró, de észrevehető játék. */
	border-radius: 12px 30px 12px 30px;
	box-shadow: 0 8px 0 0 #a97f36, var(--gh-shadow-lift);
}

.gh-button:active,
.wp-block-button__link:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 0 #a97f36, var(--gh-shadow-soft);
}

.gh-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--gh-color-navy);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.gh-button, .wp-block-button__link { transition: none; }
	.gh-button:hover, .wp-block-button__link:hover { transform: none; border-radius: 30px 12px 30px 12px; }
}

/* ==========================================================================
   Játékos, hullámos formavilág - íves szekcióelválasztók
   (a jelenlegi cikkcakkos képkeretek helyett lekerekített/hullámos verzió,
   lásd FEJLESZTESI-DOKUMENTACIO.md 4.5 - a végleges keret-megoldás a design
   fázisban dől el, ez egy első, működő alapállapot)
   ========================================================================== */
.gh-wave-divider {
	display: block;
	width: 100%;
	height: auto;
	line-height: 0;
}

.gh-section--dark {
	background: linear-gradient(248deg, var(--gh-color-navy-light) 0%, var(--gh-color-navy) 100%);
	color: #ffffff;
	border-radius: 7px;
	padding: 60px 40px;
}

.gh-section--dark h1,
.gh-section--dark h2,
.gh-section--dark h3 {
	color: #ffffff;
}

/* A kártyák szabálytalan sarkúak, és minden második tükrözve — így a rácsok
   nem néznek ki gépiesen egyformának. */
.gh-card {
	position: relative;
	background: #ffffff;
	border: 1px solid rgba(23, 45, 56, 0.07);
	border-radius: var(--gh-radius-organikus);
	box-shadow: var(--gh-shadow-soft);
	overflow: hidden;
	transition: transform 220ms cubic-bezier(.2,.8,.3,1), box-shadow 220ms ease;
}

.gh-card:nth-child(even) { border-radius: var(--gh-radius-organikus-alt); }

.gh-card:hover {
	transform: translateY(-6px) rotate(-0.5deg);
	box-shadow: var(--gh-shadow-lift);
}

.gh-card:nth-child(even):hover { transform: translateY(-6px) rotate(0.5deg); }

@media (prefers-reduced-motion: reduce) {
	.gh-card, .gh-card:hover, .gh-card:nth-child(even):hover { transform: none; transition: none; }
}

/* ==========================================================================
   Generált háttérminták (fal.ai / FLUX)
   Körök, gyűrűk, csavart vonalak — a széleken sűrűsödve, középen üresen,
   hogy a szöveg fölöttük is olvasható maradjon.
   ========================================================================== */
.gh-minta {
	position: relative;
	isolation: isolate;
}

.gh-minta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	pointer-events: none;
}

.gh-minta > .gh-container { position: relative; z-index: 1; }

/*
 * A minták ÁTLÁTSZÓ hátterű WebP-k: csak a rajzolat van bennük, az "üres"
 * papír ki van vágva. Ezért a szekció saját háttérszíne pontosan látszik át,
 * és a hullám-elválasztók lapos kitöltése tökéletesen illeszkedik.
 *
 * (Korábban a minta a saját, kissé eltérő alapszínét is hozta — emiatt a
 * hullám tetején/alján látszott egy nem passzoló színcsík.)
 */
.gh-minta--vilagos::after {
	background-image: url("assets/img/minta-vilagos.webp");
	opacity: 0.5;
}

/* Második, légiesebb világos változat — hogy ne ugyanaz ismétlődjön. */
.gh-minta--vilagos-b::after {
	background-image: url("assets/img/minta-vilagos-b.webp");
	opacity: 0.62;
}

/*
 * Sötét (kék) fejlécek háttere. HÁROM változat van, hogy ne ugyanaz a kék
 * ismétlődjön minden aloldalon:
 *   – alap: a rajzolat a bal és a jobb SZÉLEN sűrűsödik,
 *   – „-b": átlósan a bal FELSŐ és a jobb ALSÓ sarokban,
 *   – „-c": alulról fölfelé nő, mint egy rét.
 * A hozzájuk tartozó navy gradiens is más irányból/másik ragyogással indul,
 * így a szín is variálódik, nem csak a rajz.
 */
.gh-minta--sotet::after {
	background-image: url("assets/img/minta-sotet.webp");
	opacity: 0.7;
}

.gh-minta--sotet-b::after {
	background-image: url("assets/img/minta-sotet-b.webp");
	opacity: 0.6;
}

/*
 * A „-c" rajzolata ALULRÓL nő föl. `cover`-rel egy alacsony fejlécen épp ez a
 * sáv esne le a kép aljáról — ezért itt teljes szélességben, az aljához
 * igazítva tesszük be.
 */
.gh-minta--sotet-c::after {
	background-image: url("assets/img/minta-sotet-c.webp");
	background-size: 100% auto;
	background-position: center bottom;
	opacity: 0.75;
}

/*
 * ⚠️ 2026-07-28 — Cecília visszajelzése: „egy-két helyen belelóg a szövegek
 * hátterébe, és azt zavarónak találom. Inkább legyen kevesebb, de ne lógjon a
 * szövegekbe."
 *
 * A rajzolat a széleken sűrűsödik, DE a tartalom-konténer (1200 px) pont a
 * belső sávban ül, így nagy képernyőn a bal szél örvényei a cím és a bevezető
 * mögé kerültek. Ezért a mintát MASZKKAL kivágjuk a tartalom sávjából: a
 * közepén teljesen eltűnik, és csak a szélek felé úszik be. A minta így
 * díszes keret marad, nem háttérzaj a szöveg alatt.
 *
 * (A világos hero-nál ez a maszk már korábban is megvolt — lásd lentebb.)
 */
.gh-minta--sotet::after,
.gh-minta--sotet-b::after,
.gh-minta--sotet-c::after {
	/* Középen kivágva, a két szél felé úszik be. */
	-webkit-mask-image: linear-gradient(
		to right,
		#000 0%,
		rgba(0, 0, 0, 0.5) 12%,
		transparent 26%,
		transparent 74%,
		rgba(0, 0, 0, 0.5) 88%,
		#000 100%
	);
	mask-image: linear-gradient(
		to right,
		#000 0%,
		rgba(0, 0, 0, 0.5) 12%,
		transparent 26%,
		transparent 74%,
		rgba(0, 0, 0, 0.5) 88%,
		#000 100%
	);
}

.gh-minta--sotet::after   { opacity: 0.55; }
.gh-minta--sotet-b::after { opacity: 0.5; }
.gh-minta--sotet-c::after { opacity: 0.6; }

/*
 * A PROGRAM-fejléc kivétel: itt a szöveg nem középen, hanem a BAL oldalon áll
 * (jobbra az illusztráció), tehát a bal felet kell tisztán hagyni. Ez a
 * világos hero maszkjának a mintája, csak sötétben.
 */
.gh-hero--program.gh-minta--sotet::after,
.gh-hero--program.gh-minta--sotet-b::after,
.gh-hero--program.gh-minta--sotet-c::after {
	opacity: 0.42;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		transparent 44%,
		rgba(0, 0, 0, 0.45) 64%,
		#000 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		transparent 44%,
		rgba(0, 0, 0, 0.45) 64%,
		#000 100%
	);
}

@media (max-width: 900px) {
	/* Mobilon a szöveg a teljes szélességet elfoglalja: oldalirányú maszk
	   helyett csak alul sejlik át a rajzolat. */
	.gh-minta--sotet::after,
	.gh-minta--sotet-b::after,
	.gh-minta--sotet-c::after,
	.gh-hero--program.gh-minta--sotet::after,
	.gh-hero--program.gh-minta--sotet-b::after,
	.gh-hero--program.gh-minta--sotet-c::after {
		opacity: 0.4;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 52%, #000 100%);
		mask-image: linear-gradient(to bottom, transparent 0%, transparent 52%, #000 100%);
	}
}

.gh-hero--solid.gh-minta--sotet-b,
.gh-section--dark.gh-minta--sotet-b {
	background:
		radial-gradient(ellipse 62% 62% at 14% 12%, rgba(85, 143, 171, 0.34), transparent 62%),
		linear-gradient(158deg, var(--gh-color-navy-light) 0%, #142833 100%);
}

.gh-hero--solid.gh-minta--sotet-c,
.gh-section--dark.gh-minta--sotet-c {
	background:
		radial-gradient(ellipse 90% 62% at 50% 112%, rgba(206, 163, 84, 0.24), transparent 64%),
		radial-gradient(ellipse 50% 50% at 88% 6%, rgba(85, 143, 171, 0.24), transparent 60%),
		linear-gradient(196deg, #1c3849 0%, var(--gh-color-navy) 100%);
}

/* ==========================================================================
   Színátmenetes szekciók — ahol nem minta, hanem lágy gradiens adja a díszt
   ========================================================================== */
/*
 * FONTOS: a gradiens SZÉLEIN pontosan azzal a színnel kell végződnie, amivel
 * a szomszédos hullám-él ki van töltve — különben vékony színcsík marad a
 * határon. Felül #ffffff (az intro szekció), alul #faf3e6 (= 'arany-mosas',
 * amivel a következő szekció felső hulláma van kitöltve).
 */
.gh-grad-krem {
	background:
		radial-gradient(ellipse 70% 70% at 10% 22%, rgba(251, 232, 189, .55), transparent 62%),
		radial-gradient(ellipse 55% 60% at 92% 78%, rgba(85, 143, 171, .1), transparent 62%),
		linear-gradient(180deg, #ffffff 0%, var(--gh-gold-wash) 100%);
}

.gh-grad-navy {
	background:
		radial-gradient(ellipse 60% 70% at 85% 8%, rgba(85, 143, 171, .35), transparent 62%),
		radial-gradient(ellipse 55% 65% at 10% 95%, rgba(206, 163, 84, .18), transparent 60%),
		linear-gradient(150deg, var(--gh-color-navy-light) 0%, var(--gh-color-navy) 62%);
}

/* Ahol a generált minta megy, ott a CSS-díszek fölöslegesek — ne duplázzunk. */
.gh-minta .gh-deco { display: none; }

/*
 * A HERO külön eset: itt a szöveg a legfontosabb, a minta pedig épp a bal
 * oldalon, a cím mögött volt a legsűrűbb, és elvitte a figyelmet.
 * Ezért egyrészt jóval halványabb, másrészt maszkkal kivágjuk a szöveg
 * sávját — a minta csak a jobb szél és az alsó sarok felé úszik be.
 */
.gh-hero.gh-minta--vilagos::after {
	opacity: 0.22;
	-webkit-mask-image:
		linear-gradient(to right, transparent 0%, transparent 42%, rgba(0,0,0,.55) 68%, #000 100%);
	mask-image:
		linear-gradient(to right, transparent 0%, transparent 42%, rgba(0,0,0,.55) 68%, #000 100%);
}

@media (max-width: 900px) {
	/* Mobilon a szöveg a teljes szélességet elfoglalja — ott csak alul-hátul
	   sejlik át a minta, oldalirányú maszk nélkül. */
	.gh-hero.gh-minta--vilagos::after {
		opacity: 0.14;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 55%, #000 100%);
		mask-image: linear-gradient(to bottom, transparent 0%, transparent 55%, #000 100%);
	}
}

@media (max-width: 700px) {
	/* Mobilon a széleken sűrűsödő minta a szöveg alá kerülne — halványabban. */
	.gh-minta--vilagos::after { opacity: 0.3; }
	.gh-minta--sotet::after,
	.gh-minta--sotet-b::after,
	.gh-minta--sotet-c::after { opacity: 0.34; }
}

.gh-section--alt {
	background: var(--gh-gold-wash);
}

/* Krém szekció — a hero-val rímel, a lap közepén ad meleg megállót. */
.gh-section--krem {
	background: var(--gh-color-gold-soft);
	background-image: radial-gradient(ellipse 70% 60% at 80% 10%, rgba(255,255,255,.6), transparent 65%);
}

/* Világos hátterű szekción a ghost gomb sötét kontúrt kap. */
.gh-button--sotet.gh-button--ghost {
	color: var(--gh-color-navy) !important;
	border-color: rgba(23, 45, 56, 0.35);
}

.gh-button--sotet.gh-button--ghost:hover {
	background: rgba(23, 45, 56, 0.06);
	border-color: var(--gh-color-navy);
}

/* A hero címe alatti rajzolt vonal. */
.gh-hero__vonal {
	max-width: 300px;
	margin-top: 4px;
	color: var(--gh-color-gold);
}

/* ==========================================================================
   Szekció-ritmus és címek
   ========================================================================== */
.gh-section {
	position: relative;
	padding: var(--gh-ritmus) 0;
}

.gh-section > .gh-container { position: relative; z-index: 1; }

/* A szekciócím balra zárt és lóg egy kicsit — nem minden áll középen. */
.gh-section__title {
	font-size: var(--gh-size-h2);
	margin-bottom: 0.15em;
}

.gh-section__title--center { text-align: center; }

/* Kis szemöldök-felirat a cím fölött. */
.gh-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	font-family: var(--gh-font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gh-color-gold);
}

.gh-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

/*
 * Ha a cím NEM a .gh-section__fej burkolóban van (az aloldalak közvetlenül a
 * konténerbe teszik), akkor magának kell térközt adnia — enélkül a következő
 * blokk rácsúszik a címre.
 */
.gh-container > .gh-section__title { margin-bottom: 26px; }
.gh-container > .gh-section__title--center { margin-bottom: 34px; }

/* A cím alatti bevezető sem tapadhat rá a rácsra. */
.gh-help__lead,
.gh-instagram__lead {
	max-width: 62ch;
	margin: 0 auto 46px;
	text-align: center;
}

.gh-section__fej { max-width: 640px; margin-bottom: 44px; }
.gh-section__fej--kozep { margin-left: auto; margin-right: auto; text-align: center; }
.gh-section__fej--kozep .gh-eyebrow { justify-content: center; }

.gh-lead {
	font-size: var(--gh-size-lead);
	color: var(--gh-color-ink-soft);
	line-height: 1.75;
	margin: 0;
}

/* ==========================================================================
   Program CPT — fejléc, törzs + adatlap, vélemények, kártyák
   (single-program.php / archive-program.php, lásd inc/program.php)
   ========================================================================== */

/* --- Fejléc: kétosztatú, bal oldalt a szöveg, jobbra az illusztráció ------ */
.gh-hero--program .gh-hero__title {
	font-size: clamp(2.1rem, 4.2vw, 3.3rem);
	margin-bottom: 18px;
}

.gh-program-hero__inner {
	grid-template-columns: 1.05fr 0.95fr;
	align-items: center;
	padding-top: clamp(38px, 4.5vw, 62px);
	padding-bottom: clamp(64px, 7vw, 104px);
}

/* Kép nélküli program: egyhasábos, középre zárt fejléc — így nem marad
   kongó üres féloldal. */
.gh-hero--program-kepnelkul .gh-program-hero__inner {
	grid-template-columns: 1fr;
	max-width: 860px;
	text-align: center;
}

.gh-hero--program-kepnelkul .gh-hero__eyebrow,
.gh-hero--program-kepnelkul .gh-hero__cta { justify-content: center; }

.gh-hero--program-kepnelkul .gh-hero__vonal,
.gh-hero--program-kepnelkul .gh-hero__lead { margin-left: auto; margin-right: auto; }

.gh-hero--program .gh-hero__lead {
	max-width: 46ch;
	font-weight: 400;
	font-size: clamp(1.02rem, 1.3vw, 1.18rem);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.92);
	margin-bottom: 18px;
}

/* Típus + jelentkezés-állapot egy sorban, a cím fölött. (Korábban a chip a
   gombsorban ült, és negyedik gombnak látszott.) */
.gh-program-hero__fejsor {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 6px;
}

.gh-program-hero__fejsor .gh-hero__eyebrow { margin: 0; }

.gh-program-hero__fejsor .gh-program__badge {
	padding: 5px 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gh-hero--program-kepnelkul .gh-program-hero__fejsor { justify-content: center; }

/* „Tarkovács Cecília – gyermeknevelési tanácsadó" sor: aláhúzás helyett
   egy rövid arany vonal vezeti be. */
.gh-program-hero__szerzo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 26px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--gh-color-gold-soft);
}

.gh-program-hero__szerzo::before {
	content: "";
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: var(--gh-color-gold);
	flex: none;
}

/*
 * Az Időpont/Ár adatdobozok INNEN KIKERÜLTEK (2026-07-28, Cecília kérése).
 * A hosszú turnus-leírás a keskeny dobozban 8 sorra tört, „zanzásítva" nézett
 * ki, és elvitte a figyelmet a címről meg a jelentkezés-gombról. Az adatok
 * mostantól kizárólag a jobb oldali adatlapon jelennek meg, tagoltan
 * (`.gh-program-adatlap__sorok`).
 */
.gh-program-hero__szerzo { margin-bottom: 30px; }

.gh-hero--program .gh-hero__cta { align-items: center; row-gap: 12px; }

/*
 * A fejléc illusztrációja. 2026-07-28: Cecília kérésére NAGYOBB lett (korábban
 * a fenti kép kisebb volt, mint a szöveg közti fotók — fordítva volt jó), és
 * kaphat OVÁLIS képkeretet, mint a többi oldal portréi.
 *
 * ⚠️ Az ovális keret NEM lehet automatikus: több program fejlécképe Canva-
 * plakát, amire rá van írva a program neve (pl. Dackorszak) — az ovális forma
 * levágná a feliratot. Ezért kapcsoló dönt róla a „Program adatok" panelen
 * (`_gh_program_kep_ovalis`), és fotóknál kell bepipálni.
 *
 * A képet egyik esetben sem VÁGJUK (nincs aspect-ratio + cover), csak a
 * sarkokat kerekítjük — így a kép tartalma megmarad.
 */
.gh-program-hero__media { display: block; }

.gh-program-hero__media img,
.gh-program-hero__media .wp-block-image img {
	width: 100%;
	max-width: 600px;
	/* Flex-elemként a kép automatikus minimális mérete az EREDETI szélessége
	   lenne — ettől mobilon kilógott az egész fejléc. */
	min-width: 0;
	height: auto;
	margin: 0 auto;
	border-radius: var(--gh-radius-organikus);
	transform: rotate(-1.2deg);
}

.gh-program-hero__media--ovalis img,
.gh-program-hero__media--ovalis .wp-block-image img {
	border-radius: var(--gh-radius-blob);
}

.gh-program-hero__media figure { margin: 0; }
.gh-program-hero__media figcaption { display: none; }

/* Elforgatott arany kontúr a kép mögött — ugyanaz a gesztus, mint a főoldali
   portrénál. A `.gh-hero__aside::before` blob-keretét felül kell írni (azonos
   pszeudoelem, csak ott 4:5-ös portréra van szabva). */
.gh-hero__aside.gh-program-hero__media::before {
	content: "";
	position: absolute;
	inset: 12px 4px;
	width: auto;
	height: auto;
	max-width: 610px;
	margin: 0 auto;
	border: 2px solid var(--gh-color-gold);
	border-radius: var(--gh-radius-organikus-alt);
	transform: rotate(3.4deg);
	opacity: 0.45;
	z-index: 0;
}

.gh-hero__aside.gh-program-hero__media--ovalis::before {
	border-radius: var(--gh-radius-blob);
}

.gh-program-hero__media img { position: relative; z-index: 1; }

/* --- Törzs: tartalom + ragadós adatlap ----------------------------------- */
.gh-program-torzs { padding-top: clamp(46px, 5vw, 72px); }

.gh-program-torzs__racs {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: clamp(34px, 4vw, 60px);
	align-items: start;
}

.gh-program-torzs__fo { min-width: 0; }

.gh-program__proza {
	max-width: none;
	margin: 0;
	padding: 0;
	font-size: 1.05rem;
}

.gh-program__proza > :first-child { margin-top: 0; }

.gh-program-blokk { margin-top: clamp(38px, 4vw, 58px); }
.gh-program-blokk:first-child { margin-top: 0; }

.gh-program-blokk__cim {
	font-size: clamp(1.5rem, 2.3vw, 2rem);
	margin: 0 0 2px;
}

.gh-program-blokk__vonal { max-width: 170px; margin-bottom: 22px; }

/*
 * Nagyobb levegő a képek körül.
 *
 * 2026-07-28: a szövegközi fotók a teljes szövegoszlop szélességét kitöltötték
 * (~660 px), ezért óriásinak látszottak — a fejléc képe mellett meg épp
 * fordítva. Cecília kérésére a köztes képek MÉRETE VISSZAFOGVA és középre
 * zárva: illusztráció, nem plakát. A fejléc képe közben nagyobb lett.
 */
.gh-program__proza .wp-block-image {
	margin: 40px auto;
	max-width: 460px;
}

.gh-program__proza .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

/* Ha Cecília szélesnek („full"/„wide") jelöli a képet a szerkesztőben, akkor
   szándékos — ott nem szűkítünk. */
.gh-program__proza .wp-block-image.alignfull,
.gh-program__proza .wp-block-image.alignwide { max-width: none; }

/* Kiemelt doboz („Ha tehát szeretnéd tudni:", „Kinek ajánlott?", turnusok):
   a Gutenberg-csoport szürke háttere helyett meleg, arany keretes kártya.
   A `!important` azért kell, mert a WP a paletta-osztályokat ilyennel tolja. */
.gh-program__proza .wp-block-group.has-background,
.gh-program-jelentkezes .wp-block-group.has-background {
	background-color: var(--gh-gold-wash) !important;
	border: 1px solid var(--gh-gold-line);
	border-radius: var(--gh-radius-organikus);
	box-shadow: var(--gh-shadow-soft);
	margin: 36px 0;
}

.gh-program__proza .wp-block-group.has-background > :first-child { margin-top: 0; }
.gh-program__proza .wp-block-group.has-background > :last-child { margin-bottom: 0; }

.gh-program__proza .wp-block-group.has-background h2,
.gh-program__proza .wp-block-group.has-background h3 {
	font-size: clamp(1.3rem, 1.9vw, 1.6rem);
	margin-top: 0;
}

/* A kiemelt dobozban a felsorolás pipás listává válik. */
.gh-program__proza .wp-block-group.has-background ul {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.gh-program__proza .wp-block-group.has-background li {
	position: relative;
	margin: 0;
	padding-left: 34px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--gh-color-navy);
}

.gh-program__proza .wp-block-group.has-background li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--gh-color-gold-soft);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cea354' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 13px;
	background-position: center;
	background-repeat: no-repeat;
}

/* Sima (nem dobozos) felsorolás: arany pötty a szürke korong helyett. */
.gh-program__proza > ul,
.gh-program-blokk > ul {
	list-style: none;
	padding-left: 0;
}

.gh-program__proza > ul > li,
.gh-program-blokk > ul > li {
	position: relative;
	padding-left: 26px;
}

.gh-program__proza > ul > li::before,
.gh-program-blokk > ul > li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.62em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gh-color-gold);
}

/* --- Adatlap (ragadós oldalsáv) ------------------------------------------ */
.gh-program-adatlap { position: sticky; top: 104px; }

.gh-program-adatlap__doboz {
	background: var(--gh-krem-halvany);
	border: 1px solid var(--gh-gold-line);
	border-radius: var(--gh-radius-organikus);
	box-shadow: var(--gh-shadow-soft);
	padding: 28px 26px;
}

.gh-program-adatlap__cim {
	font-size: 1.15rem;
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px dashed var(--gh-gold-line);
}

.gh-program-adatlap__lista { margin: 0 0 22px; }

.gh-program-adatlap__lista dt {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--gh-color-gold);
	margin-bottom: 3px;
}

/*
 * Az adatok korábban EGY bekezdésbe folytak („keddenként és szerdánként,
 * 09:30–10:30 (14-24 hónaposok) / 11:00–12:00 (8-13 hónaposok), MagNet…"), és
 * Cecília jelezte, hogy így nem átlátható. Mostantól minden adat külön sor,
 * a többértékű mezők pedig pöttyözött listaként állnak egymás alatt.
 */
.gh-program-adatlap__lista dd {
	margin: 0 0 15px;
	padding-bottom: 15px;
	border-bottom: 1px dashed var(--gh-gold-line);
	font-size: 0.94rem;
	line-height: 1.55;
	color: var(--gh-color-navy);
}

.gh-program-adatlap__lista dd:last-of-type {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.gh-program-adatlap__sorok {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.gh-program-adatlap__sorok li {
	position: relative;
	margin: 0;
	padding-left: 15px;
}

.gh-program-adatlap__sorok li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gh-color-gold);
}

.gh-program-adatlap__ar { font-weight: 700; }

.gh-program-adatlap__gomb { display: block; text-align: center; width: 100%; }

.gh-program-adatlap__kerdes {
	margin: 20px 0 0;
	padding-top: 18px;
	border-top: 1px dashed var(--gh-gold-line);
	font-size: 0.85rem;
	line-height: 1.7;
	color: var(--gh-color-ink-soft);
}

.gh-program-adatlap__kerdes a {
	display: block;
	font-weight: 600;
	word-break: break-word;
}

/*
 * Az adatlapon a státusz-chip világos háttéren ül, és NEM lehet tömör arany —
 * úgy második gombnak látszott a CTA fölött. Kontúros chip, elöl állapotjelző
 * ponttal.
 */
.gh-program-adatlap .gh-program__badge.gh-program__badge--statusz {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 15px;
	font-size: 0.84rem;
	background: transparent;
	border: 1px solid var(--gh-gold-line);
	color: var(--gh-color-navy);
}

.gh-program-adatlap .gh-program__badge::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gh-color-gold);
	flex: none;
}

.gh-program-adatlap .gh-program__badge.gh-program__badge--zarva {
	border-color: rgba(23, 45, 56, 0.14);
	color: var(--gh-color-ink-soft);
}

.gh-program-adatlap .gh-program__badge--zarva::before { background: rgba(23, 45, 56, 0.28); }
.gh-program-adatlap .gh-program__badge--varolista::before { background: var(--gh-color-blue-muted); }

/* --- Képek a programról (galéria) ----------------------------------------
 * A Divi-oldalakon volt egy fotógaléria a programoknál, ami a migráció során
 * kimaradt (Cecília jelezte 2026-07-28-án). Visszakerült: a tartalomba tett
 * Gutenberg „Galéria" blokkot a sablon kiemeli a szűk szövegoszlopból, és
 * teljes szélességű, saját szekcióban rajzolja ki (`single-program.php` 3.).
 * A rácsot itt magunk adjuk meg, hogy ne a core-blokk flex-rácsától függjünk.
 */
/*
 * ⚠️ A `:not(#individual-image)` NEM elírás. A WordPress core galéria-stílusa
 * pontosan ezzel a trükkel tolja fel a saját specifikusságát ID-szintre
 * (`figure.wp-block-image:not(#individual-image) { width: calc(33.33% - …) }`),
 * és e nélkül a mi szabályaink alulmaradnának — a képek bélyegkép-méretűek
 * lennének. Ugyanazt a fogást használjuk, `!important` nélkül.
 */
.gh-program-galeria .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 20px;
	margin: 0;
}

.gh-program-galeria .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	margin: 0;
	width: auto;
	max-width: none;
	flex: none;
	align-self: stretch;
}

.gh-program-galeria .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--gh-radius-organikus);
	transition: transform 300ms cubic-bezier(.2,.8,.3,1);
}

/* Minden második kép tükrözött sarokkal — ugyanaz a ritmus, mint a kártyáknál. */
.gh-program-galeria .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(even):not(#individual-image) img {
	border-radius: var(--gh-radius-organikus-alt);
}

.gh-program-galeria .wp-block-gallery.has-nested-images figure.wp-block-image:hover:not(#individual-image) img {
	transform: scale(1.03);
}

.gh-program-galeria .wp-block-gallery figcaption { display: none; }

/* Telefonon 2 hasáb — egy hasábban 12 kép végtelen görgetés lenne. */
@media (max-width: 600px) {
	.gh-program-galeria .wp-block-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gh-program-galeria .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img,
	.gh-program-galeria .wp-block-gallery.has-nested-images figure.wp-block-image:hover:not(#individual-image) img {
		transition: none;
		transform: none;
	}
}

/* --- Google-értékelés összesítő sáv (kreativ-google-velemenyek) ----------
 * A `velemenyek="no"` változat csak az átlagot + darabszámot adja, kártyák
 * nélkül. Ez mindig középre zárt szekcióban ül nálunk (Főoldal, Rólam,
 * Nevelési tanácsadás), ezért itt középre húzzuk a modul balra zárt sávját.
 */
.kgv--csak-fejlec {
	margin-top: 34px;
	text-align: center;
}

.kgv--csak-fejlec .kgv__header {
	justify-content: center;
}

.kgv--csak-fejlec .kgv__header { margin-bottom: 10px; }

.kgv--csak-fejlec .kgv__foot {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
}

/* A teljes Google-blokk (Kapcsolat) a saját szekciócíme alatt ül. */
.gh-reviews--google .kgv { margin-top: 4px; }

/* A Vélemények-blokk (csúszka) itt teljes szélességű szekcióban ül, ezért a
   címe is szekciócím-méretű. */
.gh-program-velemenyek .gh-velemenyek { margin: 0; }

.gh-program-velemenyek .gh-velemenyek__cim {
	font-size: var(--gh-size-h2);
	margin-bottom: 34px;
}

/* --- Szülői vélemények: idézetkártyák hasábokban ------------------------- */
.gh-velemeny-oszlopok {
	columns: 330px 2;
	column-gap: 26px;
}

.gh-velemeny-oszlopok blockquote,
.gh-velemeny-oszlopok .wp-block-quote {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	position: relative;
	margin: 0 0 26px;
	padding: 30px 28px 24px;
	background: #ffffff;
	border: 1px solid rgba(23, 45, 56, 0.07);
	border-left: 1px solid rgba(23, 45, 56, 0.07);
	border-radius: var(--gh-radius-organikus);
	box-shadow: var(--gh-shadow-soft);
	font-style: normal;
	color: var(--gh-color-ink);
}

.gh-velemeny-oszlopok blockquote:nth-of-type(even) { border-radius: var(--gh-radius-organikus-alt); }

.gh-velemeny-oszlopok blockquote::before {
	content: "\201D";
	position: absolute;
	top: -2px;
	right: 22px;
	font-family: var(--gh-font-display);
	font-variation-settings: var(--gh-display-axes);
	font-size: 72px;
	line-height: 1;
	color: var(--gh-color-gold);
	opacity: 0.22;
	pointer-events: none;
}

.gh-velemeny-oszlopok blockquote p {
	margin: 0 0 14px;
	font-size: 0.97rem;
	line-height: 1.75;
	font-style: italic;
	color: var(--gh-color-ink);
}

.gh-velemeny-oszlopok blockquote p:last-of-type { margin-bottom: 16px; }

.gh-velemeny-oszlopok cite {
	display: block;
	font-style: normal;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--gh-color-navy);
}

.gh-velemeny-oszlopok cite::before { content: "— "; color: var(--gh-color-gold); }

/* --- Jelentkezés-szekció -------------------------------------------------- */
.gh-program-jelentkezes__tartalom {
	max-width: none;
	padding: 0;
	font-size: 1.02rem;
}

.gh-program-jelentkezes__tartalom > p { color: var(--gh-color-navy); }

.gh-jelentkezes { margin-top: 28px; }

.gh-jelentkezes__form,
.gh-jelentkezes--zarva {
	background: #ffffff;
	border: 1px solid rgba(23, 45, 56, 0.07);
	border-radius: var(--gh-radius-organikus);
	box-shadow: var(--gh-shadow-soft);
	padding: clamp(24px, 3vw, 38px);
}

.gh-jelentkezes--zarva p { margin: 0; font-weight: 600; color: var(--gh-color-navy); }

.gh-jelentkezes__cimke {
	display: inline-block;
	margin: 0 0 16px;
	padding: 8px 20px;
	border-radius: var(--gh-radius-pill);
	background: var(--gh-color-gold);
	color: #ffffff;
	font-weight: 700;
	font-size: 0.9rem;
}

/* Fluent Forms mezők a téma formavilágába hangolva (a plugin alap CSS-e
   szögletes és idegen volt a lekerekített arculattól). */
.gh-jelentkezes .ff-el-form-control {
	border-radius: 14px;
	border: 1px solid rgba(23, 45, 56, 0.16);
	padding: 11px 14px;
	font-family: var(--gh-font-body);
	font-size: 0.95rem;
}

.gh-jelentkezes .ff-el-form-control:focus {
	border-color: var(--gh-color-gold);
	box-shadow: 0 0 0 3px rgba(206, 163, 84, 0.18);
	outline: none;
}

/* A Fluent Forms alap-skinje középre húzta a címkéket — balra igazítjuk. */
.gh-jelentkezes .ff-el-group,
.gh-jelentkezes .ff-el-input--label { text-align: left; }

.gh-jelentkezes .ff-el-input--label label {
	font-weight: 600;
	color: var(--gh-color-navy);
	font-size: 0.9rem;
}

.gh-jelentkezes .ff-btn-submit {
	background: var(--gh-color-gold) !important;
	border: none !important;
	border-radius: var(--gh-radius-pill) !important;
	padding: 14px 34px !important;
	font-family: var(--gh-font-body);
	font-weight: 700 !important;
	color: #ffffff !important;
	box-shadow: var(--gh-shadow-soft);
}

/* --- „További programok" záró blokk -------------------------------------- */
.gh-program-tovabbi__lab { margin: 40px 0 0; text-align: center; }

/* --- Archívum ------------------------------------------------------------- */
.gh-program-csoport__lead {
	margin: 14px auto 0;
	max-width: 58ch;
	color: var(--gh-color-ink-soft);
}

.gh-program-archiv__zaro-inner { text-align: center; }
.gh-program-archiv__zaro-inner p { color: var(--gh-color-navy); }

.gh-program-archiv__zaro-gombok {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 26px;
}

/* --- Reszponzív ----------------------------------------------------------- */
@media (max-width: 1000px) {
	.gh-program-torzs__racs { grid-template-columns: 1fr; }
	.gh-program-adatlap { position: static; }
	.gh-program-adatlap__doboz { max-width: 520px; }
}

@media (max-width: 900px) {
	.gh-program-hero__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.gh-program-hero__media { order: -1; margin-bottom: 26px; }
	.gh-hero__aside.gh-program-hero__media::before { display: none; }

	/* Álló fotónál a teljes első képernyőt elvitte a kép — magasságra
	   korlátozzuk, arányt tartva (a bannerekbe égetett cím így sem vágódik). */
	.gh-program-hero__media img,
	.gh-program-hero__media .wp-block-image img {
		width: auto;
		max-width: 100%;
		max-height: 300px;
	}
	.gh-hero--program .gh-hero__lead { margin-left: auto; margin-right: auto; }
	.gh-hero--program .gh-hero__cta { justify-content: center; }
	.gh-velemeny-oszlopok { columns: 1; }
}

.gh-program__tipus-badge {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 12px;
	font-weight: 700;
	color: var(--gh-color-gold);
	margin: 0 0 8px;
}

.gh-program__infosor {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 16px;
}

.gh-program__badge {
	display: inline-block;
	background: rgba(255, 255, 255, 0.12);
	border-radius: var(--gh-radius-pill);
	padding: 8px 20px;
	font-size: 14px;
	font-weight: 600;
}

.gh-program__badge--statusz.gh-program__badge--nyitva {
	background: var(--gh-color-gold);
	color: #ffffff;
}

.gh-program__badge--statusz.gh-program__badge--varolista {
	background: var(--gh-color-gold-soft);
	color: var(--gh-color-navy);
}

.gh-program__badge--statusz.gh-program__badge--zarva {
	background: rgba(255, 255, 255, 0.2);
}

/* Íves képkeret mindenhol a tartalomban — ezt kérte Cecília a régi,
   cikkcakkos szélű képek helyett. */
.gh-program__proza img,
.gh-prose img,
.wp-block-image img {
	border-radius: var(--gh-radius-organikus);
}

.gh-program__proza .wp-block-image:nth-of-type(even) img,
.gh-prose .wp-block-image:nth-of-type(even) img {
	border-radius: var(--gh-radius-organikus-alt);
}

/* --- Program-kártya (archívum + „További programok") --------------------- */
.gh-program-archive__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
	gap: 28px;
}

.gh-program-card { display: flex; flex-direction: column; }

.gh-program-card__link {
	display: flex;
	flex-direction: column;
	color: inherit;
}

/*
 * A program-/tanfolyamképekbe bele van égetve a cím (Canva), ezért SOSEM
 * vágjuk (`cover` tilos) — inkább keret legyen körülötte, mint levágott felirat.
 *
 * 2026-07-28: viszont a fix 192 px-es magasság + `contain` miatt a kurzusképek
 * pöttyre zsugorodtak, és krém sáv maradt kétoldalt („túl picik, nem illenek a
 * formába" — Cecília). Most a kép a kártya TELJES szélességét megkapja, és a
 * saját arányában nő — semmi vágás, semmi levegőpocsékolás. Így a közel négyzetes
 * ecsetvonásos kurzusképek ~1,7-szeresükre nőttek.
 */
.gh-program-card__thumb {
	position: relative;
	background-color: var(--gh-gold-wash);
	background-image: radial-gradient(ellipse 80% 80% at 50% 125%, rgba(206, 163, 84, 0.18), transparent 68%);
	overflow: hidden;
}

.gh-program-card__thumb img {
	display: block;
	width: 100%;
	height: auto;
	/* Álló fotó ne nyúljon el a végtelenbe — a kártya arányban maradjon. */
	max-height: 340px;
	object-fit: contain;
	object-position: center;
	border-radius: 0;
}


/* Kép nélküli programnál rajzolt hurok áll a fotó helyén. Mivel a bélyegkép-
   doboznak már nincs fix magassága (a kép adja), itt maga a jel tartja a helyet. */
.gh-program-card__jel {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 192px;
	color: var(--gh-color-gold);
	opacity: 0.55;
}

.gh-program-card__jel svg { width: 92px; }

.gh-program-card__tipus {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 6px 15px;
	border-radius: var(--gh-radius-pill);
	background: rgba(255, 255, 255, 0.94);
	color: var(--gh-color-navy);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	box-shadow: 0 8px 18px -10px rgba(23, 45, 56, 0.6);
}

.gh-program-card__body {
	flex: 1 1 auto;
	padding: 24px 24px 16px;
}

.gh-program-card__title {
	font-size: 1.18rem;
	margin: 0 0 10px;
	transition: color 180ms ease;
}

.gh-program-card:hover .gh-program-card__title { color: var(--gh-color-gold); }

.gh-program-card__desc {
	margin: 0 0 16px;
	color: var(--gh-color-ink-soft);
	font-size: 0.92rem;
	line-height: 1.65;
}

/*
 * A kurzus-csempén a kivonat az utolsó elem a szövegdobozban (nincs alatta
 * adatsor, mint a program-kártyán), ezért az alsó margója fölösleges levegőt
 * adott a gombsor fölé. Ott nem kell.
 */
.gh-program-card__desc:last-child { margin-bottom: 0; }

.gh-program-card__adatok {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 7px;
}

.gh-program-card__adat {
	position: relative;
	padding-left: 25px;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--gh-color-ink-soft);
}

.gh-program-card__adat::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.85;
}

.gh-program-card__adat--idopont::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cea354' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}

.gh-program-card__adat--ar::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cea354' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9H10.5a2 2 0 0 0 0 4h3a2 2 0 0 1 0 4H9M12 7v10'/%3E%3C/svg%3E");
}

.gh-program-card__lab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding: 0 24px 24px;
}

/*
 * Gombsor a kártya alján (Online tanfolyamok: „Részletek" + „Megveszem").
 *
 * 2026-07-28: ehhez a dobozhoz eddig EGYÁLTALÁN nem tartozott szabály, ezért
 * a gombok térköz nélkül a kártya bal alsó sarkára csúsztak, és a lekerekített
 * sarok bele is vágott a „Részletek" gombba. Cecília kérésére középre zárva,
 * a kártya belső margójával, a kártya aljához tapasztva — így minden csempén
 * egy vonalban állnak, függetlenül attól, milyen hosszú a leírás.
 */
.gh-program-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: auto;
	/* Nincs felső belső margó: a szövegdoboz alsó paddingje már ad levegőt. */
	padding: 0 24px 24px;
}

/*
 * A linknek a maradék helyet kell kitöltenie, NEM a kártya teljes magasságát:
 * `height: 100%` mellett a gombsor kilógott a kártyából, és az `overflow:
 * hidden` levágta az alját.
 */
.gh-program-card__link { flex: 1 1 auto; }

.gh-program-card__tovabb {
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--gh-color-gold);
	white-space: nowrap;
	transition: color 180ms ease;
}

.gh-program-card__tovabb::after { content: " \2192"; }
.gh-program-card:hover .gh-program-card__tovabb { color: var(--gh-color-navy); }

/* A státusz-chipek világos kártyán ülnek — a fejléc áttetsző fehérje itt
   nem látszana. */
.gh-program-card .gh-program__badge {
	font-size: 12px;
	padding: 6px 15px;
}

.gh-program-card .gh-program__badge--statusz.gh-program__badge--nyitva {
	background: var(--gh-color-gold);
	color: #ffffff;
}

.gh-program-card .gh-program__badge--statusz.gh-program__badge--varolista {
	background: var(--gh-color-gold-soft);
	color: var(--gh-color-navy);
}

.gh-program-card .gh-program__badge--statusz.gh-program__badge--zarva {
	background: rgba(23, 45, 56, 0.07);
	color: var(--gh-color-ink-soft);
}

.gh-button--sm {
	padding: 9px 20px;
	font-size: 14px;
}

.gh-button--ghost-gold {
	background: transparent;
	color: var(--gh-color-gold) !important;
	box-shadow: none;
	border: 2px solid var(--gh-color-gold);
}

.gh-button--ghost-gold:hover {
	background: var(--gh-color-gold);
	color: #ffffff !important;
}

/* ==========================================================================
   Fejléc - logó, menü, nyelvválasztó
   ========================================================================== */
.gh-header {
	background: var(--gh-color-bg);
	border-bottom: 1px solid rgba(23, 45, 56, 0.06);
	position: sticky;
	top: 0;
	z-index: 100;
}

.gh-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.gh-header__logo {
	display: inline-flex;
	flex: 0 0 auto;
}

/*
 * A logó korábban alig volt kivehető, mert a forrás PNG 500×500-as volt, és a
 * tényleges embléma csak a közepét foglalta el rengeteg átlátszó kerettel.
 * A képfájl most körbevágva érkezik (544×320), így ugyanekkora magasságnál
 * bőven a duplájára nőtt a látható jel.
 */
.gh-header__logo img,
.gh-header__logo-img {
	width: auto;
	height: 76px;
	max-height: 76px;
}

.gh-header__right {
	display: flex;
	align-items: center;
	gap: 20px;
}

.gh-header__nav ul,
.gh-footer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 22px;
}

/* A fejléc-menü SOSEM tördel át több sorba: ha elfogy a hely, a hamburgerre
   váltunk. A lábléc-menü ellenben nyugodtan tördelhet. */
.gh-header__nav ul {
	flex-wrap: nowrap;
}

.gh-footer__nav ul {
	flex-wrap: wrap;
}

.gh-header__nav a {
	color: var(--gh-color-navy);
	font-weight: 600;
	white-space: nowrap;
}

.gh-header__nav a:hover {
	color: var(--gh-color-gold);
}

/* Legördülő almenü — enélkül a WordPress almenüpontjai egy sorba lapulnak ki. */
.gh-header__nav li {
	position: relative;
}

.gh-header__nav .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 7px;
	vertical-align: middle;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
}

.gh-header__nav .sub-menu {
	position: absolute;
	top: 100%;
	left: -14px;
	z-index: 200;
	display: block;
	flex-direction: column;
	align-items: stretch;
	min-width: 220px;
	margin: 0;
	padding: 8px 0;
	gap: 0;
	background: #fff;
	border: 1px solid rgba(23, 45, 56, 0.08);
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(23, 45, 56, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.gh-header__nav li:hover > .sub-menu,
.gh-header__nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.gh-header__nav .sub-menu a {
	display: block;
	padding: 9px 18px;
	font-weight: 500;
	white-space: nowrap;
}

/* Hamburger — desktopon rejtve, a töréspont alatt jelenik meg. */
.gh-nav-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid rgba(23, 45, 56, 0.14);
	border-radius: 999px;
	background: #fff;
	color: var(--gh-color-navy);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.gh-nav-toggle:hover {
	border-color: var(--gh-color-gold);
	color: var(--gh-color-gold);
}

.gh-nav-toggle__bars,
.gh-nav-toggle__bars::before,
.gh-nav-toggle__bars::after {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.gh-nav-toggle__bars {
	position: relative;
}

.gh-nav-toggle__bars::before,
.gh-nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.gh-nav-toggle__bars::before { top: -6px; }
.gh-nav-toggle__bars::after  { top: 6px; }

/* Nyitott állapot: a középső csík eltűnik, a másik kettő X-be fordul. */
.gh-nav-toggle[aria-expanded="true"] .gh-nav-toggle__bars {
	background: transparent;
}

.gh-nav-toggle[aria-expanded="true"] .gh-nav-toggle__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.gh-nav-toggle[aria-expanded="true"] .gh-nav-toggle__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* ==========================================================================
   Nyelvválasztó (GH_Language_Switcher)
   ========================================================================== */
.gh-langswitch {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border-radius: var(--gh-radius-pill);
	background: var(--gh-color-bg-alt);
}

.gh-langswitch__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	padding: 5px 12px;
	border-radius: var(--gh-radius-pill);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--gh-color-ink-soft);
	line-height: 1;
	transition: background 150ms ease, color 150ms ease;
}

.gh-langswitch__item:hover {
	color: var(--gh-color-navy);
	background: rgba(206, 163, 84, 0.15);
}

.gh-langswitch__item.is-current {
	background: var(--gh-color-gold);
	color: #ffffff;
}

/* Sötét háttéren (pl. láblécben) */
.gh-section--dark .gh-langswitch {
	background: rgba(255, 255, 255, 0.1);
}

.gh-section--dark .gh-langswitch__item {
	color: rgba(255, 255, 255, 0.75);
}

.gh-section--dark .gh-langswitch__item:hover {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.15);
}

.gh-section--dark .gh-langswitch__item.is-current {
	background: var(--gh-color-gold);
	color: #ffffff;
}

/* ==========================================================================
   Lábléc - logó krém chipen (sötét háttéren is látható), menü
   ========================================================================== */
/*
 * A lábléc hulláma NEM kivágás, hanem RÁRAJZOLT forma.
 *
 * Kivágásnál a hullám fölött a body fehérje látszott ki — ezért volt ott egy
 * „légüres" fehér folt. Így viszont a navy hullám egyszerűen ráúszik a fölötte
 * lévő szekcióra, ami továbbra is a saját hátterét (színt vagy mintát) mutatja.
 * Teljesen mindegy, mi van fölötte — sosem kell színt egyeztetni.
 */
.gh-footer {
	position: relative;
	padding: clamp(40px, 5vw, 68px) 0 28px;
	border-radius: 0;
}

.gh-footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 88px;
	margin-bottom: -1px;
	background: var(--gh-color-navy);
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0,46 C240,4 480,-4 720,26 C960,56 1200,64 1440,24 L1440,100 L0,100 Z' fill='%23000'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0,46 C240,4 480,-4 720,26 C960,56 1200,64 1440,24 L1440,100 L0,100 Z' fill='%23000'/></svg>");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

@media (max-width: 700px) {
	.gh-footer::before { height: 52px; }
}

.gh-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.gh-footer__logo { display: inline-flex; }

/*
 * Inverz logó: a színes PNG a sötét háttéren korábban krém „chipen" ült, ami
 * csúnya volt. A brightness(0) minden képpontot feketére visz, az invert(1)
 * pedig fehérré — így tiszta, fehér sziluettet kapunk, külön fájl nélkül.
 */
.gh-footer__logo-img {
	width: auto;
	height: 88px;
	max-height: 88px;
	filter: brightness(0) invert(1);
	opacity: 0.95;
}

.gh-footer__leiras {
	margin: 16px 0 18px;
	max-width: 34ch;
	font-size: 0.92rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.66);
}

.gh-footer__cim {
	margin: 0 0 16px;
	font-family: var(--gh-font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gh-color-gold);
}

.gh-footer__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gh-footer__lista a,
.gh-footer__nav a {
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.94rem;
	font-weight: 500;
}

.gh-footer__lista a:hover,
.gh-footer__nav a:hover { color: var(--gh-color-gold); }

/* A lábléc-oldaltérképben az almenüket nem soroljuk fel újra. */
.gh-footer__lista .sub-menu { display: none; }

.gh-footer__zaro {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: clamp(36px, 4vw, 56px);
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.gh-footer__copy,
.gh-footer__keszito {
	margin: 0;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.55);
}

.gh-footer__keszito a {
	color: rgba(255, 255, 255, 0.8);
	font-weight: 600;
}

.gh-footer__keszito a:hover { color: var(--gh-color-gold); }

@media (max-width: 960px) {
	.gh-footer__grid { grid-template-columns: 1fr 1fr; }
	.gh-footer__markajel { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
	.gh-footer__grid { grid-template-columns: 1fr; }
	.gh-footer__zaro { justify-content: flex-start; }
}

/* ==========================================================================
   Reszponzív fejléc
   ========================================================================== */
/* Köztes sáv: a menü még egy sorban elfér, csak szorosabban. */
@media (max-width: 1280px) {
	.gh-header__nav ul {
		gap: 16px;
	}

	.gh-header__nav a {
		font-size: 0.95rem;
	}

	.gh-header__logo img,
	.gh-header__logo-img {
		height: 68px;
	}
}

/* A töréspont alatt a menü lenyíló panellé válik. A 10 menüpont ennél
   keskenyebben már nem fér ki egy sorban — inkább hamburger, mint tördelés. */
@media (max-width: 1100px) {
	.gh-nav-toggle {
		display: inline-flex;
	}

	.gh-header__inner {
		flex-wrap: wrap;
		gap: 12px;
	}

	.gh-header__logo img,
	.gh-header__logo-img {
		height: 60px;
	}

	.gh-header__right {
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-bottom: 8px;
	}

	/* JS nélkül (pl. hiba esetén) a menü legyen látható, ne tűnjön el. */
	.gh-header__right.is-open,
	html:not(.gh-js) .gh-header__right {
		display: flex;
	}

	.gh-header__nav ul {
		flex-wrap: wrap;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.gh-header__nav li {
		border-top: 1px solid rgba(23, 45, 56, 0.08);
	}

	.gh-header__nav a {
		display: block;
		padding: 14px 4px;
		font-size: 1rem;
	}

	/* Mobilon nincs hover — az almenü egyszerűen behúzva, mindig látszik. */
	.gh-header__nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
	}

	.gh-header__nav .sub-menu a {
		padding: 12px 4px 12px 22px;
		font-weight: 500;
		color: var(--gh-color-navy);
		opacity: 0.85;
	}

	.gh-header__nav .menu-item-has-children > a::after {
		display: none;
	}

	.gh-langswitch {
		margin-top: 12px;
		align-self: flex-start;
	}
}

/* ==========================================================================
   Főoldal (front-page.php)
   ========================================================================== */

/* Másodlagos ("ghost") gomb – a hero sötét hátterén */
.gh-button--ghost {
	background: transparent;
	color: #ffffff !important;
	box-shadow: none;
	border: 2px solid rgba(255, 255, 255, 0.65);
}

.gh-button--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #ffffff;
	box-shadow: none;
}

/* ==========================================================================
   HERO — aszimmetrikus, krém alapon, blob-portréval.
   Az eredeti oldal sötétkék, középre zárt fejléc-sávja helyett világos,
   levegős nyitókép, ahol a szöveg és a portré egymásba lóg.
   ========================================================================== */
.gh-hero {
	position: relative;
	/* Halvány, alig meleg alap — a teli krém itt túl harsány volt. */
	background: var(--gh-krem-halvany);
	background-image:
		radial-gradient(ellipse 70% 80% at 88% 30%, rgba(251, 232, 189, .55), transparent 62%),
		radial-gradient(ellipse 60% 60% at 8% 100%, rgba(85, 143, 171, .07), transparent 60%);
	color: var(--gh-color-navy);
	overflow: hidden;
}

.gh-hero::before { content: none; }

.gh-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center;
	gap: clamp(32px, 4vw, 56px);
	padding-top: clamp(40px, 4.5vw, 64px);
	padding-bottom: clamp(52px, 6vw, 84px);
}

/* --- Fotó-hátterű fejléc (Rólam, Nevelési Tanácsadás, Online Tanfolyamok) ---
   Ezek háttérképre épülnek, és a sötét fátyol teszi olvashatóvá a szöveget.
   A főoldal világos heroja miatt ezt külön vissza kell adni nekik. */
.gh-hero--kep {
	background-size: cover;
	background-position: center;
	color: #ffffff;
}

.gh-hero--kep::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(100deg, rgba(23,45,56,.94) 0%, rgba(23,45,56,.78) 48%, rgba(32,66,86,.55) 100%);
}

.gh-hero--kep .gh-hero__title,
.gh-hero--kep .gh-hero__lead { color: #ffffff; }
.gh-hero--kep .gh-hero__title em { color: var(--gh-color-gold); }
.gh-hero--kep .gh-hero__text { color: rgba(255, 255, 255, 0.88); }
.gh-hero--kep .gh-hero__eyebrow { color: var(--gh-color-gold); }

.gh-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-transform: uppercase;
	letter-spacing: 0.17em;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--gh-color-gold);
	margin: 0 0 18px;
}

.gh-hero__eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.gh-hero__title {
	color: var(--gh-color-navy);
	font-size: var(--gh-size-display);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.025em;
	margin: 0 0 22px;
}

/* A cím utolsó szava aranyban, alatta rajzolt vonallal. */
.gh-hero__title em {
	font-style: normal;
	position: relative;
	color: var(--gh-color-gold);
	white-space: nowrap;
}

.gh-hero__lead {
	font-family: var(--gh-font-body);
	font-size: var(--gh-size-lead);
	font-weight: 600;
	color: var(--gh-color-navy);
	margin: 0 0 14px;
	max-width: 34ch;
}

.gh-hero__text {
	font-size: 1rem;
	color: var(--gh-color-ink-soft);
	max-width: 46ch;
	margin: 0 0 32px;
	line-height: 1.75;
}

.gh-hero__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.gh-hero__aside {
	position: relative;
	display: flex;
	justify-content: center;
}

/* A portré szerves blob-formában, mögötte elforgatott arany kerettel —
   ez váltja ki a régi oldal cikkcakkos képkereteit. */
.gh-hero__portrait {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 400px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--gh-radius-blob);
	box-shadow: 0 30px 60px -28px rgba(23, 45, 56, .55);
}

.gh-hero__aside::before {
	content: "";
	position: absolute;
	z-index: 0;
	width: min(400px, 100%);
	height: 100%;
	border-radius: var(--gh-radius-blob);
	border: 2px solid var(--gh-color-gold);
	transform: rotate(-7deg) translate(14px, 12px);
	opacity: .5;
}

/* ==========================================================================
   BEVEZETŐ — nagy, idézetszerű szöveg, balra zárva
   ========================================================================== */
.gh-intro { background: var(--gh-color-bg); }

.gh-intro__inner {
	position: relative;
	max-width: 860px;
	text-align: left;
}

.gh-intro .gh-section__title { text-align: left; }

.gh-intro__text {
	font-family: var(--gh-font-display);
	font-variation-settings: var(--gh-display-axes);
	font-size: clamp(1.2rem, 2.1vw, 1.7rem);
	font-weight: 400;
	line-height: 1.5;
	color: var(--gh-color-navy);
}

/* --- A bevezető három üteme ---------------------------------------------
   Ugyanaz a szöveg, csak tagolva: felütés → fordulat → kifejtés. */
.gh-intro__nyito {
	margin: 26px 0 0;
	max-width: 62ch;
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.8;
	color: var(--gh-color-ink-soft);
}

/* A fordulópont mondat kiemelve — ez a szakasz gondolati tengelye. */
.gh-intro__fordulat {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 30px 0;
	padding: 20px 26px 20px 24px;
	border-left: 4px solid var(--gh-color-gold);
	background: var(--gh-gold-wash);
	border-radius: 6px 22px 22px 6px;
}

.gh-intro__fordulat span {
	font-family: var(--gh-font-display);
	font-variation-settings: var(--gh-display-axes);
	font-size: clamp(1.35rem, 2.4vw, 1.9rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--gh-color-navy);
}

.gh-intro__hurok {
	flex: 0 0 auto;
	width: 54px;
	color: var(--gh-color-gold);
}

.gh-intro__zaro {
	margin: 0;
	max-width: 62ch;
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.8;
	color: var(--gh-color-ink-soft);
}

@media (max-width: 620px) {
	.gh-intro__fordulat { flex-direction: column; align-items: flex-start; gap: 10px; }
	.gh-intro__hurok { width: 44px; }
}

/* ==========================================================================
   "Miben segítek?" — lépcsőzetesen elcsúsztatott kártyák
   ========================================================================== */
/* Fixen 3 oszlop, mert 6 kártyából 4 oszlopnál kettő árván maradna. */
.gh-help__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

@media (max-width: 980px) { .gh-help__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .gh-help__grid { grid-template-columns: 1fr; } }

/* Minden második kártya lejjebb ül: megtöri a merev rácsot. */
@media (min-width: 900px) {
	.gh-help__grid > *:nth-child(even) { transform: translateY(30px); }
	.gh-help__grid > *:nth-child(even):hover { transform: translateY(24px) rotate(.5deg); }
}

.gh-feature {
	padding: 32px 28px 30px;
	border: 1px solid rgba(23, 45, 56, .07);
	border-top: 0;
}

.gh-feature::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--gh-color-gold), var(--gh-krem-melyebb));
}

/* Vonalas SVG ikon lágy krém korongon — a korábbi tömör körök helyett. */
.gh-feature__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin-bottom: 20px;
	border-radius: var(--gh-radius-blob);
	background: var(--gh-color-gold-soft);
	color: var(--gh-color-navy);
}

.gh-ikon {
	width: 30px;
	height: 30px;
	display: block;
}

.gh-feature__title { font-size: 1.18rem; margin: 0 0 10px; }

.gh-feature__text {
	margin: 0;
	color: var(--gh-color-ink-soft);
	font-size: 0.95rem;
	line-height: 1.7;
}

/* ==========================================================================
   "Hogyan segítek?" — a lépések egy rajzolt úton haladnak
   ========================================================================== */
.gh-steps__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 28px;
}

.gh-step {
	display: flex;
	flex-direction: column;
	padding: 34px 28px;
	text-align: left;
	background: #fff;
	/* A .gh-card overflow:hidden levágta a kilógó sorszámot — itt nem kell. */
	overflow: visible;
}

/* A sorszám a kártyán BELÜL ül, így semmi nem vágja le. */
.gh-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: 18px;
	border-radius: var(--gh-radius-blob);
	background: var(--gh-color-gold);
	color: #ffffff;
	font-family: var(--gh-font-display);
	font-variation-settings: var(--gh-display-axes);
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1;
}

/* --- A lépés-szekció sötét háttéren --------------------------------------- */
.gh-steps.gh-section--dark {
	border-radius: 0;
	padding: var(--gh-ritmus) 0;
}

.gh-steps.gh-section--dark .gh-section__title { color: #ffffff; }

/*
 * A kártya háttere korábban `rgba(255,255,255,.05)` volt, vagyis szinte
 * teljesen átlátszó — a generált minta örvényei ÁTLÁTSZOTTAK a kártyák
 * szövegének a háttereként (ezt jelezte Cecília 2026-07-28-án). Most tömör,
 * a szekciónál egy fokkal világosabb navy: a kártya kártyaként olvasható, és
 * a rajzolat kívül marad.
 */
.gh-steps.gh-section--dark .gh-step {
	background: #1d3948;
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: 0 24px 44px -30px rgba(0, 0, 0, 0.75);
}

.gh-steps.gh-section--dark .gh-step__title { color: #ffffff; }
.gh-steps.gh-section--dark .gh-step__text  { color: rgba(255, 255, 255, 0.78); }

.gh-step__title { font-size: 1.3rem; margin: 0 0 12px; }

.gh-step__text {
	color: var(--gh-color-ink-soft);
	font-size: 0.95rem;
	line-height: 1.7;
	margin: 0 0 26px;
	flex: 1 1 auto;
}

.gh-step .gh-button { align-self: flex-start; }


/* ==========================================================================
   Sötét CTA-sáv — ez adja a lap gerincét és a kontrasztot a sok krém közé
   ========================================================================== */
.gh-cta {
	position: relative;
	background: linear-gradient(248deg, var(--gh-color-navy-light) 0%, var(--gh-color-navy) 100%);
	color: #ffffff;
	overflow: hidden;
}

.gh-cta__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
	align-items: center;
	gap: clamp(32px, 5vw, 64px);
}

.gh-cta__cim {
	color: #ffffff;
	font-size: clamp(2rem, 4vw, 3.2rem);
	margin: 0 0 16px;
}

.gh-cta__lead {
	margin: 0;
	max-width: 46ch;
	font-size: var(--gh-size-lead);
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.82);
}

.gh-cta__akcio {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

/* Kézzel húzott nyíl, ami a gombok felé mutat. */
.gh-cta__nyil {
	max-width: 96px;
	margin-bottom: 2px;
	color: var(--gh-color-gold);
	transform: rotate(6deg);
}

/* --- Díszek sötét felületen ---------------------------------------------
   Krém és fehér árnyalatok a navy fölött zöldes-olívává tompulnak. Ezért
   minden sötét szekcióban aranyra váltunk. */
.gh-cta .gh-deco__gyuru,
.gh-section--dark .gh-deco__gyuru,
.gh-hero--solid .gh-deco__gyuru { border-color: rgba(206, 163, 84, 0.36); }

.gh-cta .gh-deco__korong--arany,
.gh-section--dark .gh-deco__korong--arany,
.gh-hero--solid .gh-deco__korong--arany { background: rgba(206, 163, 84, 0.13); }

.gh-cta .gh-deco__korong--krem,
.gh-section--dark .gh-deco__korong--krem,
.gh-hero--solid .gh-deco__korong--krem { background: rgba(206, 163, 84, 0.09); }

.gh-cta .gh-deco__korong--kek,
.gh-section--dark .gh-deco__korong--kek,
.gh-hero--solid .gh-deco__korong--kek { background: rgba(85, 143, 171, 0.22); }

.gh-cta .gh-deco__pottyok,
.gh-section--dark .gh-deco__pottyok,
.gh-hero--solid .gh-deco__pottyok {
	background-image: radial-gradient(rgba(206, 163, 84, 0.4) 2.2px, transparent 2.3px);
}

/* Ugyanez a régi buborék-díszekre, amiket a többi sablon még használ.
   A `--kep` (fotó-hátterű) fejléc is ide tartozik: a krém korongok a sötét
   fátyol fölött zavaros olívazöldre váltottak. */
.gh-section--dark .gh-bubble--cream,
.gh-hero--solid .gh-bubble--cream,
.gh-hero--kep .gh-bubble--cream {
	background: none;
	border: 2px solid rgba(206, 163, 84, 0.26);
}

.gh-section--dark .gh-bubble--gold,
.gh-hero--solid .gh-bubble--gold,
.gh-hero--kep .gh-bubble--gold {
	background: none;
	border: 2px dashed rgba(206, 163, 84, 0.3);
}

.gh-section--dark .gh-bubble--blue,
.gh-hero--solid .gh-bubble--blue,
.gh-hero--kep .gh-bubble--blue {
	background: rgba(85, 143, 171, 0.16);
}

@media (max-width: 860px) {
	.gh-cta__inner { grid-template-columns: 1fr; }
	.gh-cta__nyil { display: none; }
}

/* --- Vélemények --- */
.gh-reviews__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.gh-review {
	display: flex;
	flex-direction: column;
	padding: 30px 28px;
	margin: 0;
}

.gh-review__quote {
	margin: 0 0 20px;
	flex: 1 1 auto;
}

.gh-review__title {
	font-size: 18px;
	color: var(--gh-color-gold);
	margin: 0 0 10px;
}

.gh-review__quote p {
	margin: 0;
	color: var(--gh-color-ink);
	font-size: 15px;
	font-style: italic;
}

.gh-review__author {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 700;
	color: var(--gh-color-navy);
}

.gh-review__avatar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
}

/* --- Friss blogbejegyzések --- */
.gh-posts__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.gh-post__link {
	color: inherit;
	display: block;
	height: 100%;
}

.gh-post__thumb img {
	width: 100%;
	height: 210px;
	object-fit: cover;
}

.gh-post__body {
	padding: 22px 24px 26px;
}

.gh-post__title {
	font-size: 19px;
	margin: 0 0 10px;
}

.gh-post__excerpt {
	margin: 0;
	color: var(--gh-color-ink-soft);
	font-size: 15px;
}

/* --- Blog kártya kategória-címke --- */
.gh-post__cat {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--gh-color-gold);
	margin-bottom: 8px;
}

/* --- Lapozó --- */
.gh-pagination {
	margin-top: 44px;
}

.gh-pagination .nav-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

.gh-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: var(--gh-radius-pill);
	background: var(--gh-color-bg-alt);
	color: var(--gh-color-navy);
	font-weight: 700;
}

.gh-pagination .page-numbers.current,
.gh-pagination .page-numbers:hover {
	background: var(--gh-color-gold);
	color: #ffffff;
}

/* --- Egyetlen bejegyzés (single.php) --- */
.gh-single__meta {
	color: rgba(255, 255, 255, 0.75);
	font-size: 15px;
	margin: 0;
}

.gh-single__thumb {
	margin-top: -30px;
	margin-bottom: 8px;
	position: relative;
	z-index: 2;
}

.gh-single__thumb img {
	width: 100%;
	max-height: 320px;
	object-fit: cover;
	border-radius: var(--gh-radius-organikus);
	box-shadow: none;
}

.gh-single__foot {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 24px 72px;
}

/* --- Olvasható cikktörzs (prose) --- */
.gh-prose {
	max-width: 760px;
	margin: 0 auto;
	padding: 44px 24px 24px;
	font-size: 18px;
	line-height: 1.75;
	color: var(--gh-color-ink);
}

.gh-prose p { margin: 0 0 1.3em; }

.gh-prose h2 { font-size: 28px; margin: 1.6em 0 0.5em; }
.gh-prose h3 { font-size: 22px; margin: 1.4em 0 0.5em; }

.gh-prose img {
	border-radius: var(--gh-radius-soft);
	margin: 1.4em auto;
}

.gh-prose figcaption {
	text-align: center;
	font-size: 14px;
	color: var(--gh-color-ink-soft);
	margin-top: 8px;
}

.gh-prose ul,
.gh-prose ol { margin: 0 0 1.3em; padding-left: 1.4em; }

.gh-prose li { margin-bottom: 0.5em; }

.gh-prose blockquote {
	margin: 1.6em 0;
	padding: 8px 24px;
	border-left: 4px solid var(--gh-color-gold);
	background: var(--gh-color-bg-alt);
	border-radius: 0 var(--gh-radius-soft) var(--gh-radius-soft) 0;
	font-style: italic;
	color: var(--gh-color-ink-soft);
}

.gh-prose a { text-decoration: underline; }

/* --- Instagram --- */
.gh-instagram {
	text-align: center;
}

.gh-instagram__lead {
	max-width: 620px;
	margin: 0 auto 32px;
	color: var(--gh-color-ink-soft);
}

/* ==========================================================================
   Játékos formavilág – hullám-elválasztók, buborékok, finom mozgás
   ========================================================================== */

/* Hullám-szekcióelválasztó (gh_wave() helper) */
.gh-wavesep {
	line-height: 0;
	position: relative;
	z-index: 1;
}

.gh-wavesep svg {
	display: block;
	width: 100%;
	height: 86px;
}

@media (max-width: 700px) {
	.gh-wavesep svg { height: 52px; }
}

@media (max-width: 600px) {
	.gh-wavesep svg { height: 38px; }
}

/* Hero aljára simuló hullám */
.gh-wavesep--hero {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 2;
	background: transparent;
}

.gh-wavesep--hero svg { height: 72px; }

@media (max-width: 600px) {
	.gh-wavesep--hero svg { height: 42px; }
}

/* Footer tetejére simuló hullám */
.gh-footer { position: relative; }
.gh-wavesep--footer { margin-bottom: -1px; background: transparent; }

/* --- Hullám-él a szekción BELÜL (lásd gh_wave_edge()) --------------------
   A minta így végigfut a hullám alatt, nem marad lapos színcsík a határon. */
.gh-wave-edge {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 3;
	line-height: 0;
	pointer-events: none;
}

.gh-wave-edge svg {
	display: block;
	width: 100%;
	height: 92px;
}

.gh-wave-edge--felul { top: -1px; }
.gh-wave-edge--alul  { bottom: -1px; }

/* A szekció tartalma ne csússzon a hullám alá. */
.gh-section:has(> .gh-wave-edge--felul) { padding-top: calc(var(--gh-ritmus) + 40px); }
.gh-section:has(> .gh-wave-edge--alul)  { padding-bottom: calc(var(--gh-ritmus) + 40px); }

@media (max-width: 700px) {
	.gh-wave-edge svg { height: 54px; }
}

/* A lábléc elé kerülő hullám ne hagyjon hajszálcsíkot. */
.gh-wavesep + .gh-footer { margin-top: -1px; }

/* Lebegő buborékok – dekoratív, játékos háttérdísz (CSS-only) */
.gh-bubbles {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.gh-bubble {
	position: absolute;
	border-radius: 50%;
	opacity: 0.5;
	animation: gh-float 9s ease-in-out infinite;
}

.gh-bubble--gold { background: radial-gradient(circle at 35% 30%, var(--gh-color-gold-soft), var(--gh-color-gold)); }
.gh-bubble--blue { background: radial-gradient(circle at 35% 30%, #cfe3ec, var(--gh-color-blue-muted)); }
.gh-bubble--cream { background: var(--gh-color-gold-soft); }

.gh-bubble--a { width: 120px; height: 120px; top: 12%; left: 6%; animation-delay: 0s; }
.gh-bubble--b { width: 70px;  height: 70px;  top: 62%; left: 12%; animation-delay: 1.5s; opacity: 0.35; }
.gh-bubble--c { width: 160px; height: 160px; top: 20%; right: 8%; animation-delay: 0.8s; opacity: 0.25; }
.gh-bubble--d { width: 54px;  height: 54px;  top: 72%; right: 16%; animation-delay: 2.2s; }

/* A dekoratív szekció-tartalom a buborékok fölé kerül */
.gh-section > .gh-container,
.gh-hero > .gh-container { position: relative; z-index: 1; }
.gh-section { position: relative; }

@keyframes gh-float {
	0%, 100% { transform: translateY(0) translateX(0); }
	50%      { transform: translateY(-18px) translateX(8px); }
}

/* Finom scroll-megjelenés – csak ha a JS aktív (gh-js) */
.gh-js .gh-reveal {
	opacity: 0;
	/* 24px-rol csokkentve: ha a megjelenes valamiert nem fut le, a nagyobb
	   elmozdulas racsusztatta a cimeket a kovetkezo blokkra. */
	transform: translateY(10px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	will-change: opacity, transform;
}

.gh-js .gh-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.gh-js .gh-reveal { opacity: 1; transform: none; transition: none; }
	.gh-bubble { animation: none; }
}

/* Kártya-hover – apró játékos emelés */
.gh-card {
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.gh-feature:hover,
.gh-step:hover,
.gh-post:hover,
.gh-program-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -14px rgba(23, 45, 56, 0.35);
}

/* ==========================================================================
   Rólam – bio + kapcsolat szekciók
   ========================================================================== */
.gh-bio__inner {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 48px;
	align-items: start;
}

/* A bio-kép széle eleve cikkcakkos/tépett, ezért NEM kap se keretet, se
   árnyékot — az árnyék a szabálytalan él mögött szögletes foltként ült. */
.gh-bio__media img {
	width: 100%;
	border-radius: 0;
	box-shadow: none;
	position: sticky;
	top: 100px;
}

.gh-bio__subtitle {
	font-size: 22px;
	margin: 28px 0 10px;
}

.gh-bio__note {
	color: var(--gh-color-ink-soft);
	font-style: italic;
	margin: 12px 0 0;
}

.gh-tags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.gh-tag {
	background: var(--gh-color-gold-soft);
	color: var(--gh-color-navy);
	border-radius: var(--gh-radius-pill);
	padding: 7px 16px;
	font-size: 14px;
	font-weight: 600;
}

.gh-help__lead {
	max-width: 760px;
	margin: 0 auto 44px;
	text-align: center;
}

/* Kapcsolat */
.gh-contact__inner {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 44px;
	align-items: start;
}

.gh-contact__list {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

.gh-contact__list li {
	display: flex;
	flex-direction: column;
}

.gh-contact__label {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 12px;
	font-weight: 700;
	color: var(--gh-color-gold);
}

.gh-contact__list a {
	font-size: 18px;
	font-weight: 600;
	color: var(--gh-color-navy);
}

.gh-contact__form {
	background: #ffffff;
	border-radius: var(--gh-radius-soft);
	box-shadow: var(--gh-shadow-soft);
	padding: 32px;
}

/* Kompakt / solid hero (kép nélkül, navy gradiens) */
.gh-hero--solid {
	background: linear-gradient(248deg, var(--gh-color-navy-light) 0%, var(--gh-color-navy) 100%);
	color: #ffffff;
}

/* A sötét fejlécen a szövegszínt vissza kell fordítani — a főoldali,
   krém hero navy betűi itt olvashatatlanok lennének. */
.gh-hero--solid .gh-hero__title { color: #ffffff; }
.gh-hero--solid .gh-hero__title em { color: var(--gh-color-gold); }
.gh-hero--solid .gh-hero__lead  { color: #ffffff; }
.gh-hero--solid .gh-hero__text  { color: rgba(255, 255, 255, 0.85); }
.gh-hero--solid .gh-eyebrow,
.gh-hero--solid .gh-hero__eyebrow { color: var(--gh-color-gold); }

.gh-hero--solid::before { display: none; }

.gh-hero--compact .gh-hero__inner {
	padding-top: 56px;
	padding-bottom: 72px;
	grid-template-columns: 1fr;
}

.gh-hero__inner--center {
	text-align: center;
	max-width: 900px;
	margin: 0 auto;
}

/*
 * Aloldalak fejléce: a főoldali hero szűk sorhossz-korlátai (34ch / 46ch) itt
 * kényelmetlenül keskeny szövegoszlopot csináltak. Egyhasábos, középre zárt
 * fejlécben hadd használja ki a teljes szélességet.
 */
.gh-hero__inner--center .gh-hero__lead,
.gh-hero__inner--center .gh-hero__text,
.gh-hero--compact .gh-hero__lead,
.gh-hero--compact .gh-hero__text,
.gh-hero--kep .gh-hero__lead,
.gh-hero--kep .gh-hero__text {
	max-width: none;
}

.gh-hero__inner--center .gh-hero__eyebrow,
.gh-hero__inner--center .gh-hero__cta { justify-content: center; }

.gh-hero__inner--center .gh-hero__lead { margin-left: auto; margin-right: auto; }

/* Utalási adatok doboz */
.gh-bankbox {
	margin-top: 28px;
	background: var(--gh-color-gold-soft);
	border-radius: var(--gh-radius-soft);
	padding: 24px 26px;
}

.gh-bankbox__title {
	font-size: 18px;
	margin: 0 0 14px;
}

.gh-bankbox__list {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 18px;
}

.gh-bankbox__list dt {
	font-weight: 700;
	color: var(--gh-color-navy);
	font-size: 14px;
}

.gh-bankbox__list dd {
	margin: 0;
	color: var(--gh-color-ink);
	font-size: 14px;
	word-break: break-word;
}

@media (max-width: 900px) {
	.gh-bio__inner,
	.gh-contact__inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.gh-bio__media img { position: static; }
}

/* ==========================================================================
   Árcsomagok + pipás lista + split-lista (Nevelési Tanácsadás)
   ========================================================================== */
.gh-pricing__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	max-width: 860px;
	margin: 0 auto;
}

.gh-price {
	position: relative;
	padding: 36px 30px;
	display: flex;
	flex-direction: column;
}

.gh-price--featured {
	border: 2px solid var(--gh-color-gold);
}

/* A badge a kartyan BELUL ul - kivul az overflow:hidden levagta. */
.gh-price__badge {
	position: absolute;
	top: 14px;
	right: 18px;
	background: var(--gh-color-gold);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 6px 14px;
	border-radius: var(--gh-radius-pill);
}

.gh-price__name {
	font-size: 20px;
	margin: 0 0 6px;
}

.gh-price__amount {
	font-size: 34px;
	font-weight: 800;
	color: var(--gh-color-navy);
	margin: 0 0 4px;
}

.gh-price__per {
	font-size: 15px;
	font-weight: 600;
	color: var(--gh-color-ink-soft);
	margin-left: 6px;
}

.gh-price__where {
	color: var(--gh-color-ink-soft);
	font-size: 14px;
	margin: 0 0 18px;
}

.gh-checklist {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	gap: 10px;
	flex: 1 1 auto;
}

.gh-checklist li {
	position: relative;
	padding-left: 30px;
	color: var(--gh-color-ink);
	font-size: 15px;
}

.gh-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--gh-color-gold-soft);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cea354' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 12px;
	background-position: center;
	background-repeat: no-repeat;
}

.gh-checklist--lg li {
	font-size: 17px;
	font-weight: 600;
	color: var(--gh-color-navy);
	padding-left: 34px;
}

.gh-checklist--lg li::before {
	width: 22px;
	height: 22px;
	background-size: 14px;
}

.gh-splitlist__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 48px;
	align-items: center;
}

.gh-splitlist__media img {
	width: 100%;
	border-radius: var(--gh-radius-soft);
	box-shadow: var(--gh-shadow-soft);
}

@media (max-width: 900px) {
	.gh-splitlist__inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.gh-splitlist__media { order: -1; }
}

/* --- Főoldal reszponzív --- */
@media (max-width: 900px) {
	/*
	 * `minmax(0, 1fr)` és nem `1fr`: a rács sáv automatikus minimuma egyébként
	 * a tartalom min-content mérete, amit egy kép/gomb könnyen 430 px fölé
	 * visz — ettől az egész fejléc kilógott a képernyőből telefonon (a szöveg
	 * jobb széle levágódott). Így a sáv soha nem szélesebb a képernyőnél.
	 */
	.gh-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		text-align: center;
	}

	.gh-hero__inner > * { min-width: 0; }

	.gh-hero__text {
		margin-left: auto;
		margin-right: auto;
	}

	.gh-hero__cta {
		justify-content: center;
	}

	.gh-hero__aside {
		order: -1;
	}

	.gh-hero__portrait {
		max-width: 260px;
	}

	.gh-section {
		padding: 56px 0;
	}
}

/* ==========================================================================
   Divány cikkek gyűjtőoldal (page-divany-cikkek.php)
   Élő kulcsszavas kereső + kártyás rács, saját gh-divany-* osztályokkal,
   hogy a meglévő gh-post-/gh-program-card stílusokat ne érintse.
   ========================================================================== */
.gh-divany-search {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	max-width: 640px;
	margin: 0 auto 40px;
	padding: 10px 20px;
	background: #ffffff;
	border: 2px solid var(--gh-color-gold-soft);
	border-radius: var(--gh-radius-pill);
	box-shadow: var(--gh-shadow-soft);
	position: relative;
}

.gh-divany-search__icon {
	flex: 0 0 auto;
	color: var(--gh-color-gold);
}

.gh-divany-search__input {
	flex: 1 1 220px;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: var(--gh-font-body);
	font-size: 16px;
	color: var(--gh-color-ink);
	padding: 10px 0;
}

.gh-divany-search__input::placeholder {
	color: var(--gh-color-ink-soft);
}

.gh-divany-search__count {
	flex: 0 0 auto;
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--gh-color-ink-soft);
	white-space: nowrap;
}

.gh-divany-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}

.gh-divany-card {
	display: flex;
	flex-direction: column;
}

.gh-divany-card__link {
	color: inherit;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.gh-divany-card__thumb img {
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.gh-divany-card__thumb--placeholder {
	width: 100%;
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(248deg, var(--gh-color-navy-light) 0%, var(--gh-color-navy) 100%);
}

.gh-divany-card__thumb--placeholder span {
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gh-color-gold-soft);
	font-size: 14px;
}

.gh-divany-card__body {
	padding: 20px 22px 24px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.gh-divany-card__title {
	font-size: 18px;
	margin: 0 0 10px;
}

.gh-divany-card__excerpt {
	margin: 0 0 16px;
	color: var(--gh-color-ink-soft);
	font-size: 14px;
	flex: 1 1 auto;
}

.gh-divany-card__cta {
	font-weight: 700;
	color: var(--gh-color-gold);
	font-size: 14px;
}

.gh-divany-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -14px rgba(23, 45, 56, 0.35);
}

.gh-divany-card:hover .gh-divany-card__cta {
	color: var(--gh-color-navy);
}

.gh-divany-empty {
	text-align: center;
	color: var(--gh-color-ink-soft);
	margin: 24px 0 0;
}

.gh-divany-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

@media (max-width: 600px) {
	.gh-divany-search {
		padding: 8px 16px;
	}
}


/* ==========================================================================
   Képek: nincs árnyék
   Cecília képeinek a széle gyakran cikkcakkos/ecsetvonásos. A doboz-árnyék
   ilyenkor szögletes foltként ült a szabálytalan él mögött — csúnya volt.
   ========================================================================== */
.gh-prose img,
.gh-program__proza img,
.wp-block-image img,
.gh-bio__media img,
.gh-splitlist__media img,
.gh-single__thumb img,
.gh-program-hero__media img,
.gh-hero__portrait {
	box-shadow: none !important;
	filter: none;
}

/* ==========================================================================
   Blog — vezércikk, meta-adatok, szerzői doboz
   ========================================================================== */

/* --- Vezércikk: az első bejegyzés széles, kétoszlopos kiemelésben --------- */
.gh-vezercikk {
	margin-bottom: 34px;
	overflow: hidden;
}

.gh-vezercikk__link {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: stretch;
	color: inherit;
}

.gh-vezercikk__thumb img {
	width: 100%;
	height: 100%;
	min-height: 300px;
	object-fit: cover;
}

.gh-vezercikk__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(26px, 3.4vw, 46px);
}

.gh-vezercikk__title {
	font-size: clamp(1.5rem, 2.6vw, 2.15rem);
	margin: 0 0 14px;
}

.gh-vezercikk__excerpt {
	margin: 0 0 22px;
	color: var(--gh-color-ink-soft);
	line-height: 1.75;
}

@media (max-width: 860px) {
	.gh-vezercikk__link { grid-template-columns: 1fr; }
	.gh-vezercikk__thumb img { min-height: 220px; max-height: 260px; }
}

/* --- Kártya-meta: kategória + olvasási idő ------------------------------- */
.gh-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
}

.gh-post__cat {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--gh-radius-pill);
	background: var(--gh-color-gold-soft);
	color: #6b5116;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gh-post__ido {
	font-size: 0.8rem;
	color: var(--gh-color-ink-soft);
}

/* „Tovább olvasom" — hoverre elindul a nyíl. */
.gh-post__tovabb {
	display: inline-block;
	margin-top: auto;
	padding-top: 14px;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--gh-color-gold);
}

.gh-post__tovabb span {
	display: inline-block;
	transition: transform 180ms ease;
}

.gh-post__link:hover .gh-post__tovabb span,
.gh-vezercikk__link:hover .gh-post__tovabb span {
	transform: translateX(5px);
}

.gh-post__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* --- Szerzői doboz a cikk végén ------------------------------------------ */
.gh-szerzo {
	display: flex;
	align-items: center;
	gap: clamp(20px, 3vw, 36px);
	max-width: 820px;
	margin: 54px auto 0;
	padding: clamp(24px, 3vw, 38px);
	background: var(--gh-gold-wash);
	border: 1px solid rgba(206, 163, 84, 0.22);
	border-radius: var(--gh-radius-organikus);
}

.gh-szerzo__kep {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	object-fit: contain;
}

.gh-szerzo__cimke {
	margin: 0 0 4px;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gh-color-gold);
}

.gh-szerzo__nev { margin: 0 0 10px; font-size: 1.4rem; }

.gh-szerzo__bio {
	margin: 0 0 18px;
	color: var(--gh-color-ink-soft);
	line-height: 1.7;
}

@media (max-width: 620px) {
	.gh-szerzo { flex-direction: column; text-align: center; }
	.gh-szerzo__kep { width: 78px; height: 78px; }
}

/* --- Cikkszöveg: nagyobb levegő, iniciálé -------------------------------- */
.gh-single__body.gh-prose {
	max-width: 720px;
	margin: 0 auto;
	font-size: 1.06rem;
	line-height: 1.85;
}

.gh-single__body.gh-prose > p:first-of-type::first-letter {
	float: left;
	margin: 6px 12px 0 0;
	font-family: var(--gh-font-display);
	font-variation-settings: var(--gh-display-axes);
	font-size: 3.6rem;
	font-weight: 800;
	line-height: 0.82;
	color: var(--gh-color-gold);
}

.gh-single__body.gh-prose blockquote {
	margin: 30px 0;
	padding: 4px 0 4px 24px;
	border-left: 4px solid var(--gh-color-gold);
	font-family: var(--gh-font-display);
	font-variation-settings: var(--gh-display-axes);
	font-size: 1.2rem;
	color: var(--gh-color-navy);
}

.gh-kapcsolodo { margin-top: 60px; }