/* ============================================================
   WordPress-illesztés
   A designrendszer.css a látványterv stíluslapja, változatlanul.
   Ez a fájl az, ami a WordPress saját jelöléséhez igazítja: a blokkok
   burkolóelemei, a szerkesztő, az adminsáv és a WooCommerce.
   Ha a design változik, a designrendszer.css változik — ez marad.
   ============================================================ */

/* ------------------------------------------------------------
   1 · A blokkok burkolói ne tegyenek semmit
   A WordPress minden blokk köré tesz egy <div>-et. A mi szakaszaink
   teljes szélességűek, tehát ezek a burkolók átlátszóak és méret
   nélküliek maradnak.
   ------------------------------------------------------------ */
.wp-site-blocks,
.wp-site-blocks > *,
.szsz-tartalom,
.szsz-tartalom > * { margin-block: 0 }

/* A WordPress a bejegyzés tartalmát még egy burkolóba teszi
   (.entry-content / .wp-block-post-content), és a core elrendezés-stíluslapja
   ennek a gyerekei közé térközt ad — ettől került szürke csík a fekete
   nyitókép és a sárga sáv közé. A mi szakaszaink maguk hozzák a saját
   térközüket, itt tehát nem kell. */
.szsz-tartalom.szsz-tartalom > *,
.szsz-tartalom .entry-content > *,
.szsz-tartalom .wp-block-post-content > * { margin-block: 0 !important }

.wp-site-blocks > .wp-block-template-part { margin: 0 }

/* A témánk maga intézi a szélességeket, a core layout ne szóljon bele. */
.szsz-tartalom > .alignfull,
.szsz-tartalom > .alignwide { max-width: none; width: auto; margin-left: 0; margin-right: 0 }

/* ------------------------------------------------------------
   2 · Ragadós nyitóvideó
   A .page burkolót a téma teszi a tartalom köré (lásd
   szsz_videosav_burkolas), és a designrendszer.css emeli a videó fölé.
   Itt csak a kikapcsolható változat kell.
   ------------------------------------------------------------ */
.vband.nem-ragados { position: static }

/* ------------------------------------------------------------
   3 · Adminsáv
   Bejelentkezve a WordPress 32 px-es sávot tesz az oldal tetejére.
   A ragadós elemek ezt vegyék figyelembe.
   ------------------------------------------------------------ */
.admin-bar { --wp-admin--admin-bar--height: 32px }
@media screen and (max-width: 782px) {
	.admin-bar { --wp-admin--admin-bar--height: 46px }
}
/* Keskeny képernyőn a WordPress sávja nem ragad, hanem elgördül. */
@media screen and (max-width: 600px) {
	.admin-bar { --wp-admin--admin-bar--height: 0px }
}
/* A ragadós fejléc bejelentkezve a sáv ALÁ kerüljön, ne mögé. Enélkül a
   fejléc teteje a sáv mögé bújt, a többi ragadós elem (a szöveg melletti
   kép, a nyitóvideó) pedig a sáv magasságával lejjebb állt meg — köztük egy
   üres, színes csík maradt. */
.admin-bar .site-head { top: var(--wp-admin--admin-bar--height, 0px) }

/* ------------------------------------------------------------
   4 · Helykitöltők
   Amíg egy bejegyzéshez nincs kiemelt kép, a panel ne essen össze.
   ------------------------------------------------------------ */
.ph-ures {
	display: block; width: 100%; height: 100%;
	background:
		repeating-linear-gradient(135deg, var(--rule) 0 10px, transparent 10px 20px),
		var(--paper);
}
.facerow .ph img,
.collexp .ph img { width: 100%; height: 100%; object-fit: cover }

/* ------------------------------------------------------------
   4a · A WebP-burkoló ne álljon a kép útjába
   A kepek.php minden képet <picture> elembe tesz, hogy a böngésző WebP-t
   kérhessen. A látványterv szabályai viszont a képre írnak „height:100%”-ot,
   ami így a <picture>-höz mérődött — annak pedig nincs magassága. A kép a
   saját arányában maradt, és a magas szövegoszlop mellett alul üres sáv
   keletkezett. A display:contents eltünteti a burkolót az elrendezésből
   (a forrásválasztás ugyanúgy működik), a kép pedig újra kitölti a helyét.
   ------------------------------------------------------------ */
picture { display: contents }
.shopband > picture > img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	object-position: center 42%;
}
@media (prefers-reduced-motion: no-preference) {
	.vband > picture > img { animation: settle 2.8s var(--ease) both }
}

/* ------------------------------------------------------------
   4a+ · Szöveg melletti kép hosszú szövegnél
   A kép a képernyő magasságáig ér és ragad: amíg a szöveg fut, a kép a
   helyén marad, és csak a szakasz végén indul el, a szöveggel együtt —
   annyit mozdul, amennyi feltétlenül szükséges.
   Rövid szövegnél minden marad a régiben: a kép a blokk teljes magassága.
   ------------------------------------------------------------ */
@media (min-width: 861px) {
	.sec.withpic > figure {
		position: sticky; align-self: start;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--head-h, 0px));
		height: min(100%, calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--head-h, 0px)));
	}
}

/* ------------------------------------------------------------
   4b · Szöveges oldal: két hiányzó szabály
   A látványterv .sec>.hd szabályai csak közvetlen gyereket néznek, a
   képes szakaszban viszont a fej a .col-ban ül — így cím nélkül maradna.
   A .rev a felezett soroknál már létező mintát követi.
   ------------------------------------------------------------ */
.sec.withpic > .col > .hd {
	display: flex; flex-direction: column; gap: 13px; align-items: flex-start; max-width: 46ch;
}
.sec.withpic > .col > .hd h2 {
	font-family: var(--f-disp); font-weight: 400; margin: 0;
	font-size: clamp(1.6rem, 2.9vw, 2.35rem); line-height: 1.16; letter-spacing: -.006em;
}
/* A felütés ugyanaz, mint a sima szakaszban: kiemelt szedés, nem szürke tömb. */
.sec.withpic > .col > .hd p {
	font-family: var(--f-disp); font-style: italic;
	font-size: 1.06rem; line-height: 1.6; color: var(--ink-2); margin: 0;
}
.sec.withpic.rev > .col { order: 2 }

/* A számozott lépések rácsa a darabszámhoz igazodik: a látványterv fix három
   oszlopánál négy lépés esetén üres szürke cella maradna a sor végén. */
.steps3.db-1 { grid-template-columns: 1fr }
.steps3.db-2,
.steps3.db-4 { grid-template-columns: repeat(2, 1fr) }

/* Ha a hármas sor nem jön ki, az utolsó elem NEM nyúlik két hasábra — marad
   egyhasábos, mellette üres hely. Az üres helyet ez a cella tölti ki papír
   színnel; a -1px bal margó elnyeli a közte és az utolsó elem közti vonalat,
   mert ott már nincs mit elválasztani. */
.steps3.db-5::after,
.steps3.db-7::after,
.steps3.db-8::after,
.steps3.db-10::after,
.steps3.db-11::after {
	content: ""; background: var(--paper); margin-left: -1px;
}
.steps3.db-7::after,
.steps3.db-10::after { grid-column: span 2 }

/* Sorszám nélküli hármas (Forma · Funkció · Történet): a cím kerül felülre. */
.steps3.nincs-szam h3 { font-size: .78rem }
@media (max-width: 820px) {
	/* Egyhasábos elrendezésben nincs mit kitölteni. */
	.steps3::after { display: none }
}

/* ------------------------------------------------------------
   4c · Portfólió-fej és galéria
   ------------------------------------------------------------ */

/* Adatsor nélkül ne maradjon üres fél hasáb a cím mellett. */
.pfhead.nincs-meta { grid-template-columns: 1fr }
.pfhead.nincs-meta .t { max-width: 62ch }

/* ------------------------------------------------------------
   Galéria — a főoldali arcsor (90 arc) mintájára
   Ugyanaz a mozdulat, mint a főoldalon: egyforma keskeny, fekete-fehér
   panelek, ráállva az egyik kinyílik és kiszíneződik. A különbség: a fekvő
   kép a TELJES arányáig nyílik (szélesség = magasság × arány), így ráállva
   az egész kép látszik, nem csak egy kivágás.
   ------------------------------------------------------------ */
.sec.galeria { padding-left: 0; padding-right: 0 }
.sec.galeria > .hd { padding: 0 var(--gut); margin-bottom: clamp(20px, 2.4vw, 32px) }

.facerow.galsor {
	--h: clamp(300px, 32vw, 460px);
	border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.facerow.galsor + .facerow.galsor { border-top: none; margin-top: 1px }

.facerow.galsor > figure {
	margin: 0; flex: 1 1 0; min-width: 0; overflow: hidden; outline: none;
	display: flex; flex-direction: column; background: var(--paper);
	transition: flex 1.7s var(--ease);
}
.facerow.galsor .ph { display: block; height: var(--h); aspect-ratio: auto; overflow: hidden; background: var(--rule) }
.facerow.galsor .nyit { display: block; height: 100%; cursor: zoom-in }

/* Arcra nagyítás: nyugalomban a keskeny panel az arcot mutatja közelről
   (mint a főoldali arcsor portréi), ráállva a kép visszaáll teljes méretre.
   A fókuszpontot (--fx, --fy) és a nagyítást (--z) a képhez eltárolt arcpont
   adja; ahol nincs, ott a kép felső harmada, nagyítás nélkül. */
.facerow.galsor img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	object-position: var(--fx, 50%) var(--fy, 32%);
	transform-origin: var(--fx, 50%) var(--fy, 32%);
	transform: scale(var(--z, 1));
	transition: transform 1.7s var(--ease), filter .6s var(--ease);
}
.facerow.galsor > figure:hover img,
.facerow.galsor > figure:has(.nyit:focus-visible) img { transform: scale(1) }

/* Ráállva: az álló a főoldali mértékben nő, a fekvő a teljes arányáig. */
.facerow.galsor:hover > figure { flex-grow: .9 }
.facerow.galsor > figure.allo:hover,
.facerow.galsor > figure.allo:has(.nyit:focus-visible) { flex-grow: 2.4 }
.facerow.galsor > figure.fekvo:hover,
.facerow.galsor > figure.fekvo:has(.nyit:focus-visible) { flex: 0 0 min(calc(var(--h) * var(--ar)), 68%) }

.facerow.bw.galsor > figure:hover img,
.facerow.bw.galsor > figure:has(.nyit:focus-visible) img { filter: grayscale(0) contrast(1) }
.facerow.galsor > figure:has(.nyit:focus-visible) { box-shadow: inset 0 0 0 2px var(--acc) }
.facerow.galsor .nyit:focus-visible { outline: none }

.facerow.galsor .cap { padding: 11px 16px 14px; font-size: .81rem; color: var(--ink-2) }

/* Kevés kép egy sorban: ne nyúljanak szét óriási álló kivágássá, hanem
   természetes álló szélességben álljanak, balra zárva. */
.facerow.galsor.keves { background: transparent }
.facerow.galsor.keves > figure { flex: 0 0 calc(var(--h) * 2 / 3); border-right: 1px solid var(--rule) }
.facerow.galsor.keves:hover > figure { flex-grow: 0 }
.facerow.galsor.keves > figure:hover,
.facerow.galsor.keves > figure:has(.nyit:focus-visible) { flex: 0 0 calc(var(--h) * var(--ar)) }

/* Érintőképernyőn nincs ráállás: a panelek a saját arányukban, színesen
   állnak, a fekvők teljes szélességben. */
@media (max-width: 900px) {
	/* Mobilon a sorok feloldódnak egyetlen rácsba: így a teljes szélességű
	   fekvő kép után a következő álló visszatölti a mellette maradt rést,
	   és nem marad üres szürke cella. */
	.sec.galeria .galkepek {
		display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
		grid-auto-flow: dense; background: var(--rule);
		border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
	}
	.facerow.galsor, .facerow.galsor.keves { display: contents }
	.facerow.galsor > figure,
	.facerow.galsor:hover > figure,
	.facerow.galsor > figure:hover,
	.facerow.galsor.keves > figure { flex: none; border-right: none }
	.facerow.galsor .ph { height: auto; aspect-ratio: 2/3 }
	.facerow.galsor > figure.fekvo { grid-column: span 2 }
	.facerow.galsor > figure.fekvo .ph { aspect-ratio: var(--ar) }
	.facerow.bw.galsor img { filter: none; transform: none }
}

/* ------------------------------------------------------------
   Nagyító: a galériakép kattintásra teljes méretben, külön rétegen
   ------------------------------------------------------------ */
dialog.szsz-nagyito {
	width: 100vw; height: 100vh; max-width: none; max-height: none;
	margin: 0; padding: 0; border: none; background: rgba(10, 10, 12, .94); color: #F2F2EF;
}
dialog.szsz-nagyito::backdrop { background: rgba(10, 10, 12, .94) }
dialog.szsz-nagyito[open] { display: grid; grid-template-rows: 1fr auto; animation: szsz-nagyito-be .35s var(--ease) }
@keyframes szsz-nagyito-be { from { opacity: 0 } to { opacity: 1 } }
.szsz-nagyito .kep {
	display: flex; align-items: center; justify-content: center; min-height: 0;
	padding: clamp(12px, 4vw, 56px) clamp(12px, 7vw, 110px) 0;
}
.szsz-nagyito img { max-width: 100%; max-height: 100%; object-fit: contain; display: block }
.szsz-nagyito .sav {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 14px clamp(12px, 4vw, 40px) 18px;
	font-family: var(--f-ui); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
}
.szsz-nagyito button {
	background: none; border: 1px solid rgba(242, 242, 239, .35); color: inherit; cursor: pointer;
	font: inherit; letter-spacing: inherit; padding: 10px 16px;
}
.szsz-nagyito button:hover, .szsz-nagyito button:focus-visible { border-color: var(--acc); color: var(--acc); outline: none }
.szsz-nagyito .lapoz { display: flex; gap: 8px }
.szsz-nagyito .szamlalo { opacity: .7 }

@media (prefers-reduced-motion: reduce) {
	.facerow.galsor > figure { transition: none }
}

/* ------------------------------------------------------------
   4d · Közreműködők (stáblista)
   A régi oldalon egy bekezdésbe tördelt felsorolás volt. Rácsban a szem
   végig tud futni rajta: a szerep halvány mikrocímke, a név a fogás.
   ------------------------------------------------------------ */
/* A rácsvonalak cellánként húzódnak, nem a burkoló háttereként: az utolsó
   sorban maradó üres helyen így nem marad szürke folt. */
.stab {
	display: grid; gap: 0;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	border-top: 1px solid var(--rule); margin-top: clamp(20px, 2.4vw, 32px);
}
.stab .stabtetel {
	display: flex; flex-direction: column; gap: 6px;
	padding: 16px clamp(14px, 1.6vw, 20px);
	border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule);
}
.stab .stabtetel:first-child { border-left: 1px solid var(--rule) }
.stab .lbl { font-size: .62rem; color: var(--ink-3) }
.stab .nev { font-family: var(--f-disp); font-size: 1.02rem; line-height: 1.3; color: var(--ink) }
.stab .nev a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule) }
.stab .nev a:hover { border-bottom-color: var(--acc) }
.stab .nev a span { font-size: .72em; color: var(--ink-3) }

/* A szövegbe ágyazott hivatkozás. A régi oldalon a közreműködők nevei
   linkelve voltak; látszódjanak is annak, de ne törjék meg az olvasást. */
.szsz-tartalom .sec .body a,
.szsz-tartalom .sec .hd a {
	color: var(--ink); text-decoration: none;
	border-bottom: 1px solid var(--rule);
	transition: border-color .18s var(--ease);
}
.szsz-tartalom .sec .body a:hover,
.szsz-tartalom .sec .hd a:hover { border-bottom-color: var(--acc) }

/* Idézet a hosszú történetben: a szövegfal megtörése. */
.szsz-tartalom .sec .body > .wp-block-quote {
	max-width: 52ch; align-self: flex-start;
}

/* A galéria a portfólió-oldal alján ül; a záró sáv vonala elég. */
.szsz-tartalom .wp-block-szsz-galeria + .wp-block-szsz-zarosav .pgend { border-top: none }

/* A szakaszok egymás után következnek; a lap alján ne duplázódjon a vonal. */
.szsz-tartalom > .wp-block-szsz-zarosav:last-child .pgend { border-bottom: none }

/* ------------------------------------------------------------
   5 · A blokkszerkesztő
   A szerkesztőben a saját blokkjaink szerveroldali előnézettel
   jelennek meg, tehát pontosan úgy néznek ki, mint az oldalon.
   Néhány apróság kell csak.
   ------------------------------------------------------------ */
.editor-styles-wrapper { background: var(--paper) }

.szsz-szerkeszto .szsz-kep-hely {
	display: flex; align-items: center; justify-content: center;
	height: 100%; min-height: 240px; padding: 20px; text-align: center;
	background: var(--rule); color: var(--ink-2);
	font-size: .9rem; font-family: var(--f-ui);
}

/* A felezett szakasz szerkesztés közben ne animáljon. */
.szsz-szerkeszto { opacity: 1 !important; transform: none !important; animation: none !important }

/* A szerveroldali előnézet köré a WordPress betöltésjelzőt tesz. */
.wp-block-server-side-render > .components-placeholder { min-height: 120px }

/* ------------------------------------------------------------
   6 · Alapblokkok a mi tipográfiánkban
   Amit a hosszú szöveges oldalak használnak.
   ------------------------------------------------------------ */
.szsz-tartalom .wp-block-quote {
	border: none; margin: clamp(24px, 3vw, 40px) 0;
	padding-left: clamp(16px, 2vw, 26px);
	border-left: 2px solid var(--acc);
	font-family: var(--f-disp); font-size: 1.22rem; line-height: 1.5;
}
.szsz-tartalom .wp-block-quote cite {
	display: block; margin-top: 10px;
	font-family: var(--f-ui); font-size: .82rem; font-style: normal; color: var(--ink-3);
}

.szsz-tartalom .wp-block-table table { border-collapse: collapse; width: 100% }
.szsz-tartalom .wp-block-table td,
.szsz-tartalom .wp-block-table th {
	border: none; border-bottom: 1px solid var(--rule);
	padding: 11px 14px 11px 0; text-align: left; font-size: .95rem;
}
.szsz-tartalom .wp-block-table th { font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3) }

.szsz-tartalom .wp-block-image figcaption { color: var(--ink-3); font-size: .79rem; margin-top: 8px }

/* ------------------------------------------------------------
   7 · WooCommerce — az ajándékutalványhoz szükséges minimum
   ------------------------------------------------------------ */
.woocommerce .szsz-tartalom { padding: clamp(40px, 6vw, 88px) var(--gut) }
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	border-radius: 0; background: var(--ink); color: var(--paper);
	font-family: var(--f-ui); font-weight: 700; font-size: .82rem;
	letter-spacing: .06em; text-transform: uppercase;
	padding: 13px 22px; line-height: 1; border: 1px solid var(--ink);
	transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.woocommerce .button:hover { transform: translateY(2px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35) }
.woocommerce .price { font-family: var(--f-disp); font-size: 1.5rem; color: var(--ink) }
.woocommerce .quantity input { border: 1px solid var(--rule); border-radius: 0; padding: 10px }
.woocommerce-message,
.woocommerce-info { border-top-color: var(--acc); background: var(--paper) }

/* ------------------------------------------------------------
   8 · Hozzáférhetőség
   ------------------------------------------------------------ */
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 10px; left: 10px; z-index: 999;
	width: auto; height: auto; clip-path: none;
	background: var(--ink); color: var(--paper); padding: 12px 18px; font-size: .9rem;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important; animation-iteration-count: 1 !important;
		transition-duration: .001ms !important; scroll-behavior: auto !important;
	}
}

/* ============================================================
   9 · Eseményoldal (PHYSIS-bemutató és a későbbi kampányok)
   Minden méret, szín és betű a designrendszer tokenjeiből jön:
   --ink, --paper, --acc, --rule, --f-disp, --f-ui, --gut.
   ============================================================ */

/* ---- nyitókép óriási névvel ---- */
.nagycim {
	background: var(--ink); color: var(--paper);
	padding: clamp(26px, 3vw, 44px) var(--gut) clamp(40px, 5vw, 80px);
	border-bottom: 1px solid var(--ink);
}
.nagycim .nk-meta { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap }
.nagycim .lbl { color: rgba(242, 242, 239, .72) }

/* A név a sor szélességéhez igazodik — ugyanolyan nagy, mint a mintán. */
.nagycim .nk-szo {
	font-family: var(--f-ui); font-weight: 700; margin: clamp(10px, 1.4vw, 20px) 0 0;
	font-size: clamp(3.4rem, 19.4vw, 19rem); line-height: .82;
	letter-spacing: -.035em; color: var(--paper);
}
.nagycim .nk-also {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(24px, 4vw, 64px); align-items: end; margin-top: clamp(24px, 4vw, 60px);
}
.nagycim .nk-t { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 42ch }
.nagycim .nk-t h1 {
	font-family: var(--f-ui); font-weight: 500; margin: 0;
	font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.12; letter-spacing: -.02em;
}
.nagycim .nk-t p { margin: 0; font-size: 1rem; line-height: 1.62; color: rgba(242, 242, 239, .82); max-width: 44ch }
.nagycim .nk-kep { margin: 0 }
.nagycim .nk-kep .fig { display: block; aspect-ratio: 16/10; overflow: hidden; background: rgba(242, 242, 239, .08) }
.nagycim .nk-kep img { width: 100%; height: 100%; object-fit: cover; display: block }
.nagycim .nk-kep figcaption {
	margin-top: 10px; font-family: var(--f-ui); font-size: .74rem;
	letter-spacing: .04em; color: rgba(242, 242, 239, .6);
}
@media (max-width: 860px) {
	.nagycim .nk-also { grid-template-columns: 1fr }
	.nagycim .nk-kep { order: -1 }
}

/* ---- sárga sáv ---- */
.szsav {
	background: var(--acc); color: var(--ink);
	padding: clamp(18px, 2vw, 28px) var(--gut);
	display: flex; justify-content: space-between; align-items: center; gap: 10px 32px; flex-wrap: wrap;
	min-height: clamp(64px, 6vw, 92px);
}
.szsav.halk { background: var(--surface); }
.szsav p { margin: 0; font-size: 1.02rem; line-height: 1.45 }
.szsav .b { font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.28rem); letter-spacing: -.01em }
.szsav .j { color: var(--ink); opacity: .78; max-width: 62ch }

/* ---- programkártya ---- */
.esemeny {
	padding: clamp(26px, 3.4vw, 48px) var(--gut);
	border-bottom: 1px solid var(--rule); background: var(--paper);
}
/* A sor első programja is kapjon felül vonalat — enélkül a rovatfej és az
   első kártya egybefolyik. */
.band + .esemeny,
.sec + .esemeny { border-top: 1px solid var(--rule) }
/* A vonal végigfut az oldalon, a három hasáb viszont egy középre zárt,
   szűkebb rácsban ül — így a dátum és a jegyinfó a leírás mellett marad. */
.esemeny .ev-racs {
	display: grid; grid-template-columns: 148px minmax(0, 1fr) 286px;
	gap: clamp(18px, 2.2vw, 32px);
	max-width: 1120px; margin-inline: auto;
}
/* A programkártyák háttere egységes — egyetlen esemény sem kap sárga mezőt.
   A „kiemelt” kapcsoló ezért ma nem fest semmit (a jelölés megmarad arra az
   esetre, ha egyszer más módon — például vonallal — kellene kiemelni). */
.esemeny.kiemelt { background: var(--paper) }

/* Váltakozó háttér: egymás után álló programok így nem olvadnak egybe.
   Szándékosan nem :nth-child — a kártyák elé kerülő blokkok (rovatfej, sáv)
   száma oldalanként más, a testvérlánc viszont csak a programokat számolja.
   A leghosszabb illeszkedő lánc a legerősebb, ezért páronként váltogat. */
.esemeny,
.esemeny + .esemeny + .esemeny,
.esemeny + .esemeny + .esemeny + .esemeny + .esemeny,
.esemeny + .esemeny + .esemeny + .esemeny + .esemeny + .esemeny + .esemeny,
.esemeny + .esemeny + .esemeny + .esemeny + .esemeny + .esemeny + .esemeny + .esemeny + .esemeny { background: var(--paper) }
.esemeny + .esemeny,
.esemeny + .esemeny + .esemeny + .esemeny,
.esemeny + .esemeny + .esemeny + .esemeny + .esemeny + .esemeny,
.esemeny + .esemeny + .esemeny + .esemeny + .esemeny + .esemeny + .esemeny + .esemeny,
.esemeny + .esemeny + .esemeny + .esemeny + .esemeny + .esemeny + .esemeny + .esemeny + .esemeny + .esemeny { background: var(--paper-2) }

.esemeny .ev-datum { display: flex; flex-direction: column; gap: 4px }
.esemeny .ev-datum .nap {
	font-family: var(--f-ui); font-weight: 500; font-size: clamp(1.95rem, 3vw, 2.7rem);
	line-height: 1.02; letter-spacing: -.02em; white-space: nowrap;
}
.esemeny .ev-datum .napnev { font-size: .88rem; color: var(--ink-2) }
.esemeny .ev-datum .ido { font-size: .88rem; font-weight: 600; margin-top: 4px }
.esemeny .ev-megj {
	margin: 10px 0 0; padding-left: 10px; border-left: 2px solid var(--acc);
	font-size: .8rem; color: var(--ink-2); line-height: 1.45;
}

/* A programkártya rovatjelzője („FELFEDEZÉS · GODOT ART EXPO”) nem szürke
   apróbetű, hanem a kártya felütése: sötétebb betű és a lapon megszokott
   sárga aláhúzás — ugyanaz a háttér-átmenetes megoldás, mint a linkeknél
   (.u), csak véglegesen kirajzolva, nem mozgásra. */
.esemeny .ev-t > .lbl {
	display: inline-block; color: var(--ink); font-size: .715rem;
	padding-bottom: 6px;
	background-image: linear-gradient(var(--acc), var(--acc));
	background-repeat: no-repeat; background-position: 0 100%;
	background-size: 100% 2px;
}
.esemeny .ev-t h3 {
	font-family: var(--f-disp); font-weight: 400; margin: 13px 0 0;
	font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.14; letter-spacing: -.008em;
}
.esemeny .ev-nevek { margin: 14px 0 0; font-weight: 600; font-size: .95rem }
.esemeny .ev-szoveg { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; max-width: 62ch }
.esemeny .ev-szoveg p { margin: 0; font-size: 1rem; line-height: 1.68; color: var(--ink-2) }
.esemeny .ev-hely { margin: 20px 0 0; font-size: .95rem; line-height: 1.6; color: var(--ink-2) }
.esemeny .ev-hely strong { color: var(--ink) }
.esemeny .ev-jegyzet { margin: 14px 0 0; font-size: .84rem; line-height: 1.55; color: var(--ink-3); max-width: 62ch }

.esemeny .ev-jegy {
	display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
	padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--rule);
}
.esemeny .ev-jegy p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--ink-2) }
.esemeny .ev-jegy strong { color: var(--ink) }
.esemeny .ev-kiemelt {
	padding-left: 12px; border-left: 2px solid var(--acc);
	font-size: .92rem !important; color: var(--ink) !important;
}
.esemeny .ev-apro { font-size: .8rem !important; color: var(--ink-3) !important }
.esemeny .ev-jegy .btn { align-self: stretch; justify-content: space-between }
.esemeny .btn.nemaktiv {
	display: inline-flex; align-items: center; justify-content: center; align-self: stretch;
	background: var(--rule); color: var(--ink-3); border: 1px solid var(--rule);
	font-family: var(--f-ui); font-weight: 700; font-size: .78rem; letter-spacing: .04em;
	text-transform: uppercase; padding: 12px 16px; line-height: 1.25; cursor: default;
	/* Hosszú felirat is elfér: tördel, nem lóg ki a hasábból. */
	white-space: normal; text-align: center; text-wrap: balance;
}
@media (max-width: 1100px) {
	.esemeny .ev-racs { grid-template-columns: 124px minmax(0, 1fr); }
	.esemeny .ev-jegy { grid-column: 1 / -1; border-left: none; padding-left: 0; padding-top: 18px; border-top: 1px solid var(--rule) }
}
/* ---- programkártya mobilon ----
   Egy hasábban minden egymás alá kerül, ezért a kártya három része (mikor,
   mi, hogyan veszek részt) csak akkor olvasható, ha vizuálisan is elválik.
   A dátum fejlécsorrá válik saját vonallal, a cím onnan indul, a jegyinfó
   pedig külön, behúzott blokk marad. */
@media (max-width: 700px) {
	.esemeny { padding: 28px var(--gut) 32px }
	.esemeny .ev-racs { grid-template-columns: 1fr; gap: 0 }

	.esemeny .ev-datum {
		flex-direction: row; align-items: baseline; flex-wrap: wrap;
		column-gap: 10px; row-gap: 0;
		padding-bottom: 13px; border-bottom: 1px solid var(--rule);
	}
	.esemeny .ev-datum .lbl { font-size: .62rem }
	.esemeny .ev-datum .nap { font-size: 2.05rem }
	.esemeny .ev-datum .napnev { font-size: .95rem; color: var(--ink) }
	/* A kezdés saját sorba kerül, hogy ne fusson össze a nap nevével. */
	.esemeny .ev-datum .ido {
		flex-basis: 100%; margin-top: 5px; font-size: .95rem; color: var(--ink);
	}
	.esemeny .ev-megj { flex-basis: 100%; margin-top: 11px }

	/* A cím a dátumvonal alatt, tisztes levegővel indul. */
	.esemeny .ev-t { padding-top: 20px }
	.esemeny .ev-t h3 { font-size: 1.52rem; margin-top: 12px }
	.esemeny .ev-nevek { margin-top: 10px }
	.esemeny .ev-szoveg { margin-top: 12px }
	.esemeny .ev-szoveg p { font-size: .97rem; line-height: 1.6 }
	.esemeny .ev-hely { margin-top: 16px }
	.esemeny .ev-jegyzet { margin-top: 12px }

	/* Jegyinfó: nem vonal választja el, hanem behúzás — így nem tűnik
	   újabb programnak, csak ugyanannak a kártyának a zárórészeként. */
	.esemeny .ev-jegy {
		margin-top: 22px; padding: 16px 0 0 14px;
		border-top: none; border-left: 2px solid var(--ink); gap: 11px;
	}
	.esemeny .ev-jegy .lbl { letter-spacing: .12em; font-size: .64rem }
	.esemeny .ev-jegy .btn { padding: 13px 15px }
}

/* ---- helyszínek ---- */
.sec.helyszinek .hsz-racs {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 44px); margin-top: clamp(20px, 2.6vw, 36px);
}
.sec.helyszinek .hsz { border-top: 1px solid var(--ink); padding-top: 16px }
.sec.helyszinek .hsz h3 {
	font-family: var(--f-disp); font-weight: 400; margin: 10px 0 0;
	font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.18;
}
.sec.helyszinek .hsz-cim { margin: 14px 0 0; font-size: .95rem; line-height: 1.55; color: var(--ink-2) }
.sec.helyszinek .hsz-apro { margin: 10px 0 0; font-size: .82rem; line-height: 1.5; color: var(--ink-3) }
.sec.helyszinek .hsz .u { display: inline-block; margin-top: 16px; font-size: .88rem; font-weight: 600 }
@media (max-width: 860px) { .sec.helyszinek .hsz-racs { grid-template-columns: 1fr } }

/* ---- partnerlogók ---- */
.sec.logosor .logo-racs {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(20px, 3vw, 40px);
}
.sec.logosor .logo-cella { display: flex; align-items: center; justify-content: center }
.sec.logosor img { max-width: min(100%, 260px); height: auto; display: block }
@media (max-width: 700px) { .sec.logosor .logo-racs { grid-template-columns: repeat(2, 1fr) } }

/* ---- kétoszlopos rovatfej (cím balra, kifejtés jobbra) ---- */
.band-head.ketoszlop {
	display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	gap: clamp(22px, 4vw, 64px); max-width: none;
	/* A cím a kifejtés magasságának közepén áll, nem a tetején. */
	align-items: center; margin-bottom: 0;
}
.band-head.ketoszlop .bh-bal { display: block }
.band-head.ketoszlop .bh-bal .lbl { margin-bottom: 10px; display: block }
.band-head.ketoszlop .bh-jobb { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 18px) }
.band-head.ketoszlop .bh-jobb p.sm { max-width: 56ch }
.band-head.ketoszlop::after { grid-column: 1; margin-top: 4px }
@media (max-width: 860px) {
	.band-head.ketoszlop { grid-template-columns: 1fr; gap: 18px }
	.band-head.ketoszlop .bh-bal { max-width: none }
}

/* Nyitókép nélkül ne maradjon üres fél hasáb a szöveg mellett. */
.nagycim .nk-also:not(:has(.nk-kep)) { grid-template-columns: minmax(0, 1fr) }
.nagycim .nk-also:not(:has(.nk-kep)) .nk-t { max-width: 62ch }

/* Teljes szélességű nyitókép: a szöveg a név alatt marad, a kép a szakasz
   aljában fut végig, a lap szélétől a lap széléig. */
.nagycim.szeleskep .nk-also { grid-template-columns: minmax(0, 1fr); align-items: start }
.nagycim.szeleskep .nk-t { max-width: 62ch }
.nagycim.szeleskep .nk-kep {
	margin: clamp(24px, 3.4vw, 48px) calc(var(--gut) * -1) calc(clamp(40px, 5vw, 80px) * -1);
}
.nagycim.szeleskep .nk-kep .fig { aspect-ratio: 16 / 9 }
.nagycim.szeleskep .nk-kep figcaption { padding: 0 var(--gut) clamp(16px, 2vw, 24px) }
@media (max-width: 860px) {
	.nagycim.szeleskep .nk-kep { order: 0 }
	.nagycim.szeleskep .nk-kep .fig { aspect-ratio: 4 / 3 }
}

/* Háttérkép-mód: a nyitóblokk maga a fotó, a szöveg rajta ül.
   A kép a szakasz teljes felületét kitölti, fölötte egy sötét átmenet tartja
   olvashatóan a szöveget — balról erősebben, ahol a szöveg van. */
.nagycim.hatterkep {
	position: relative; overflow: hidden;
	min-height: min(88vh, 940px);
	display: flex; flex-direction: column;
	padding-bottom: clamp(32px, 4vw, 64px);
}
/* A .nk-also NEM kap position-t: a kép abszolút pozíciója a szakaszhoz
   igazodjon, ne ehhez a dobozhoz. A szöveg a saját burkolójával emelkedik. */
.nagycim.hatterkep > .nk-meta,
.nagycim.hatterkep > .nk-szo { position: relative; z-index: 2 }
.nagycim.hatterkep > .nk-also { margin-top: auto; grid-template-columns: minmax(0, 1fr) }
.nagycim.hatterkep .nk-t { position: relative; z-index: 2 }

.nagycim.hatterkep .nk-kep { position: absolute; inset: 0; margin: 0 }
.nagycim.hatterkep .nk-kep .fig { aspect-ratio: auto; height: 100%; background: none }
.nagycim.hatterkep .nk-kep img { width: 100%; height: 100%; object-fit: cover; object-position: center }
.nagycim.hatterkep::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(90deg, rgba(10,10,12,.9) 0%, rgba(10,10,12,.72) 34%, rgba(10,10,12,.28) 62%, rgba(10,10,12,.12) 100%),
		linear-gradient(0deg, rgba(10,10,12,.72) 0%, rgba(10,10,12,.12) 42%, rgba(10,10,12,.5) 100%);
}
.nagycim.hatterkep .nk-kep figcaption {
	position: absolute; right: var(--gut); bottom: 12px; z-index: 3; margin: 0;
	color: rgba(242,242,239,.62);
}
.nagycim.hatterkep .nk-t { max-width: 46ch }
/* Asztali nézetben maga a KÉP szélesebb a sávnál (a burkoló figure nem, hogy a
   képfelirat a helyén maradjon): a motívum így jobbra kerül, ki a szöveg alól,
   a fotó haszontalan jobb széle pedig kifut a képből. */
@media (min-width: 861px) {
	.nagycim.hatterkep .nk-kep img { width: 110%; max-width: none }
}
@media (max-width: 860px) {
	.nagycim.hatterkep { min-height: min(92vh, 760px) }
	.nagycim.hatterkep .nk-kep img { object-position: 62% center }
	.nagycim.hatterkep::after {
		background:
			linear-gradient(0deg, rgba(10,10,12,.88) 0%, rgba(10,10,12,.42) 48%, rgba(10,10,12,.62) 100%);
	}
}

/* Partnerlogók: a képek nem azonos arányúak, ezért nem szélességre, hanem
   MAGASSÁGRA igazodnak — így optikailag egyforma súlyúak. A fehér hátterű
   logók a multiply keverésnek köszönhetően beleolvadnak a lap színébe. */
.sec.logosor .logo-cella img {
	max-height: clamp(54px, 6.2vw, 88px);
	max-width: min(100%, 240px);
	width: auto; height: auto;
	mix-blend-mode: multiply;
}

/* ------------------------------------------------------------
   Logó, rovatjelzők, lábléc — 1.26.0
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Képnagyítás fókusza — 1.34.0
   ------------------------------------------------------------ */

/* Két külön dolog rontotta el ugyanazt: hol áll a kép a dobozban, és mi körül
   nagyodik.

   1. A KIVÁGÁS. A portréink álló, 2:3 arányú fotók (640×855), a gyűjtőoldal
      panelje viszont fekvő doboz (639×460). Az `object-fit: cover` a kép
      középső 54%-át mutatja, vagyis fölülről és alulról is levág 23-23%-ot —
      és az arc meg a szemüveg épp a felső harmadban van, tehát azt vágta le.
      Ezért nem középre, hanem 18%-ra állítjuk a függőleges pozíciót: a
      látható sáv fölfelé csúszik, az arc bejön.
   2. A NAGYÍTÁS FÓKUSZA. A transform alapból a doboz mértani közepe körül
      tágít. A kivágás után az arc a doboz felső harmadában ül, az origó
      ezért oda kerül.

   EGYETLEN közös szám viszont nem jó: a portfólión arc van a felső harmadban,
   a kollekciókon tárgyfotó, ahol a közép a helyes. Ezért a panelek képein a
   fókuszt a PHP írja ki képenként (`szsz_fokusz_attr()`), soronkénti stílusban:
   alapból tartalomtípus szerint (portfólió 18%, kollekció és kirakat 50%,
   magazin 40%), és bejegyzésenként felülírható a szerkesztő oldalsávjában, a
   „Képkivágás függőleges fókusza” mezőben.

   Itt csak az marad, amit PHP-ból nem érünk el: a Rólunk oldal csapatrácsa
   (kézzel írt HTML) és a nagyítás fókusza azoknál a képeknél, ahol nincs
   soronkénti stílus. A tárgyfotók és enteriőrök (.fig, .shgrid, .msgband,
   .feature) középről nagyítanak, ott nem állítunk semmit. */
.csapat img { object-position: 50% 18% }

/* A nagyítás fókusza ott, ahol a PHP nem ír ki soronkénti stílust. A panelek
   képein a soronkénti stílus ezt felülírja — épp ez a cél. */
.face img,
.facerow img,
.gy-sor .ph img,
.collgrid img,
.collexp .ph img,
.campaign .strip4 span img,
.csapat img {
	transform-origin: 50% 28%;
}

/* ---- fejléc: balra zárt embléma-sor (1.34.0) ----

   A fejléc a fekvő logó felépítését veszi át: JEL | elválasztóvonal | SZEMÜVEG-
   SZABÓSÁG felirat. A felirat itt már nem grafika, hanem a menü első pontja, és
   utána jön a többi menüpont — az egész sor balra zárva, az időpontfoglalás a
   jobb szélen.

   A logó arányait egyetlen szám tartja: a fekvő logón a SZEMÜVEGSZABÓSÁG
   nagybetűi a jel magasságának 13,1%-át teszik ki (145 px-es jelnél 19 px), a
   METAMORPH felirat nagybetűinek pedig a 75%-át. Itt fordítva számolunk: a
   menü betűmérete az elsődleges (ez a lap olvashatóságát adja).

   A logóarányt a fejlécben NEM lehet tartani: 13,1%-nál vagy a jel lesz
   irdatlan (olvasható menü mellett 100 px fölött), vagy a menü olvashatatlan
   (elfogadható jel mellett 7-8 px). A ragadós sáv így a képernyő harmadát
   vinné el. Amit átveszünk a logóból, az a FORMA — jel, vonal, felirat, ugyaz
   a betű, csupa nagybetű, 0,22 em ritkítás —, az arány pedig a fejléc
   dolgához igazodik. Az eredeti arány a láblécben és a nyomtatott logóban él,
   ahol van hely hozzá. */
.site-head {
	--menu-fs: clamp(10px, .72vw, 12.5px);
	--logo-h: clamp(46px, 4.2vw, 68px);
	display: flex; flex-wrap: nowrap; align-items: center;
	gap: clamp(13px, 1.4vw, 24px);
	padding-top: 7px; padding-bottom: 7px;
	transition: padding .28s var(--ease);
}
.brand { margin: 0; gap: clamp(10px, 1.1vw, 16px) }
.brand .logo { height: var(--logo-h); width: auto; max-width: none; display: block;
	flex: none; transition: height .28s var(--ease) }
/* A WebP-kiszolgálás <picture> burkolót tesz a kép köré; display:contents
   mellett a benne lévő <source> is flex-elemmé válik, és a rés miatt a
   márka doboza szélesebb lett a logónál. */
.brand picture { display: block; flex: none; line-height: 0 }

/* Az elválasztó ugyanaz a vékony vonal, ami a fekvő logóban is ott van a jel és
   a felirat között: a jel magasságának 70%-a. */
.fej-vonal {
	flex: none; width: 1px; align-self: center;
	height: calc(var(--logo-h) * .7); background: var(--ink);
	transition: height .28s var(--ease);
}

/* A menü betűje a logó betűje: Karla Medium, csupa nagybetű, 0,22 em ritkítás.
   A negatív jobb margó a ritkítás utolsó betű utáni felesleges részét veszi
   vissza, hogy a menüpontok közti rések egyformák legyenek. */
.site-head .nav { flex-wrap: nowrap; white-space: nowrap; gap: clamp(14px, 1.4vw, 26px) }
.site-head .nav a,
.site-head .brand .sub {
	font-family: var(--f-ui); font-weight: 500; font-size: var(--menu-fs);
	letter-spacing: .22em; text-transform: uppercase; line-height: 1.2;
	color: var(--ink); margin-right: -.22em;
}
.site-head .brand .sub {
	padding-left: clamp(10px, 1.1vw, 16px);
	border-left: 1px solid var(--ink); color: var(--ink);
}
.site-head .btn { margin-left: auto; flex: none }

/* Görgetés közben a ragadós sáv összehúzódik (a .tomor osztályt a mozgas.js
   teszi rá 60 px után). Itt szándékosan NEM tartjuk a logóarányt: a menünek
   olvashatónak kell maradnia, a jel viszont elfér kisebben is. */
.site-head.tomor { padding-top: 5px; padding-bottom: 5px }
.site-head.tomor .brand .logo { height: clamp(32px, 2.8vw, 46px) }
.site-head.tomor .fej-vonal { height: clamp(22px, 2vw, 32px) }

@media (max-width: 900px) {
	/* Szűkebb képernyőn két sor: fent a logó és az időpontfoglalás, alattuk a
	   menü. A ::after sortörést csinál, hogy a linkek együtt kerüljenek a
	   második sorba. */
	.site-head { flex-wrap: wrap; row-gap: 12px }
	.site-head .brand { order: 1 }
	.site-head .fej-vonal { display: none }
	.site-head .btn { order: 2; margin-left: auto }
	.site-head::after { content: ""; order: 3; flex-basis: 100%; height: 0 }
	.site-head .nav { order: 4; flex-wrap: wrap; white-space: normal; width: 100% }
}
@media (max-width: 560px) {
	.site-head.tomor .brand .logo { height: 40px }
	.site-foot { --foot-logo-h: 104px }
}

/* ---- lábléc: a logó és alatta a felirat ----
   A jel és a felirat egy egység: a kettő közös dobozban ül, és a jel a felirat
   KÖZEPÉRE igazodik. (A felirat a szélesebb — a jel négyzetes.) A felirat a
   fejléc arányánál visszafogottabb, 13,1% helyett 9,2%: a láblécben ez már
   aláírás, nem címfelirat. */
.site-foot { --foot-logo-h: 148px }
.site-foot .foot-jel {
	display: inline-flex; flex-direction: column; align-items: center;
	width: fit-content; max-width: 100%;
}
.site-foot .brand .logo { height: var(--foot-logo-h); width: auto; max-width: none;
	display: block; flex: none }
.site-foot .foot-marka {
	font-family: var(--f-ui); font-weight: 500;
	font-size: calc(var(--foot-logo-h) * .092);
	letter-spacing: .22em; text-transform: uppercase; line-height: 1.25;
	color: var(--ink); margin: 12px 0 0; white-space: nowrap;
	/* A ritkítás utolsó betű utáni része nélkül marad középen a felirat. */
	text-indent: .22em;
}

/* A nagy cím fölötti rovatjelző eddig blokkonként más méretű volt: a felezett
   szakaszokban a `.feature .txt p` szabály (1rem) verte a `.lbl`-t. Egységes
   méret, sötétebb betű, és a lapon megszokott sárga aláhúzás — ugyanaz a
   háttér-átmenetes megoldás, mint a linkeknél, csak véglegesen kirajzolva. */
.feature .txt p:not(.lbl) { font-size: 1rem; color: var(--ink-2) }

.band-head > .lbl,
.creed > .lbl,
.feature .txt > p.lbl,
.sec > .hd > .lbl,
.words > .lbl {
	display: inline-block;
	font-size: .7rem; font-weight: 700; letter-spacing: .22em; line-height: 1.2;
	text-transform: uppercase; color: var(--ink);
	padding-bottom: 7px; margin-bottom: 4px;
	background-image: linear-gradient(var(--acc), var(--acc));
	background-repeat: no-repeat; background-position: 0 100%;
	background-size: 100% 2px;
	/* Egy sorban marad: két sornál az aláhúzás a teljes doboz alját befesti,
	   nem a szöveg végéig tart. A hosszabb jelzők szűk képernyőn zsugorodnak. */
	white-space: nowrap; max-width: 100%;
	/* A felezett szakasz szövegoszlopa flex, ott az inline-block magától
	   végigfeszülne — így viszont a sárga vonal csak a szövegig ér. */
	align-self: flex-start; width: fit-content;
}
/* A középre zárt hitvallás-blokkban a jelző is középen marad. */
.creed > .lbl { align-self: center }
@media (max-width: 900px) {
	.band-head > .lbl,
	.creed > .lbl,
	.feature .txt > p.lbl,
	.sec > .hd > .lbl,
	.words > .lbl { font-size: .63rem; letter-spacing: .16em }
}
@media (max-width: 560px) {
	.band-head > .lbl,
	.creed > .lbl,
	.feature .txt > p.lbl,
	.sec > .hd > .lbl,
	.words > .lbl { font-size: .58rem; letter-spacing: .1em }
}
/* A két hasábos rovatfejnél a jelző külön sorban ül a cím fölött. */
.band-head.ketoszlop .bh-bal .lbl { display: inline-block; margin-bottom: 10px }

/* Lábléc: a közösségi csatornák ugyanolyan visszafogott linkoszlop, mint a
   dokumentumok — ikonok és nagybetűs kiemelés nélkül. */
.site-foot .social { display: none }

/* ============================================================
   GYŰJTŐOLDALAK — a kinyíló panelsor („A” változat)
   Kollekciók, Kirakat, Magazin, Portfólió, címkeoldalak, keresés.
   A korábbi négyoszlopos rács (.collgrid) helyett ugyanaz a panel,
   ami a főoldali ICON-soron van: az egér alatt kinyílik.
   ============================================================ */

.gy-lap { padding-bottom: clamp(48px, 6vw, 96px) }

/* ---- rovatfejléc ---- */
.gy-fej {
	display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
	padding: clamp(34px, 4.6vw, 78px) var(--gut) clamp(20px, 2.4vw, 32px);
	max-width: calc(58ch + 2 * var(--gut));
}
.gy-fej .lbl {
	display: inline-block; width: fit-content; max-width: 100%;
	font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
	color: var(--ink); margin: 0 0 4px; padding-bottom: 7px;
	background-image: linear-gradient(var(--acc), var(--acc));
	background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 2px;
}
.gy-fej h1 {
	font-family: var(--f-disp); font-weight: 400;
	font-size: clamp(2.1rem, 4.4vw, 3.3rem); line-height: 1.04;
	letter-spacing: -.02em; margin: 0;
}
.gy-fej .gy-le { margin: 8px 0 0 }
.gy-fej .gy-le p { font-size: 1.04rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 .7em }
.gy-fej .gy-le p:last-child { margin-bottom: 0 }
.gy-fej .gy-db {
	font-family: var(--f-ui); font-size: .72rem; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 12px 0 0;
}

/* ---- vezérpanel ----
   A rovat kiemelt eleme. Felépítése a főoldali .feature sávé: az egyik oldalon
   a szöveg, a másikon a fotó. Nem nyílik ki — a kivonat eleve látszik. */
.gy-vezer {
	display: grid; grid-template-columns: 1fr 1.15fr; gap: 1px;
	background: var(--rule); text-decoration: none; color: inherit;
	min-height: clamp(360px, 40vw, 520px);
}
.gy-vezer .txt {
	background: var(--paper); display: flex; flex-direction: column;
	align-items: flex-start; justify-content: center; gap: 9px;
	padding: clamp(30px, 4.4vw, 64px) var(--gut);
}
.gy-vezer .lbl {
	font-family: var(--f-ui); font-size: .68rem; font-weight: 700;
	letter-spacing: .22em; text-transform: uppercase; color: var(--ink);
	margin-bottom: 4px; padding-bottom: 7px;
	background-image: linear-gradient(var(--acc), var(--acc));
	background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 2px;
}
.gy-vezer .cim {
	font-family: var(--f-disp); font-weight: 400;
	font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.08; letter-spacing: -.015em;
}
.gy-vezer .alcim { font-size: clamp(1rem, 1.3vw, 1.12rem); color: var(--ink-2); line-height: 1.5 }
.gy-vezer .tx {
	font-family: var(--f-ui); font-size: .97rem; line-height: 1.62;
	color: var(--ink-2); max-width: 46ch; margin-top: 6px;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
}
.gy-vezer .linkline {
	font-family: var(--f-ui); font-size: .7rem; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
	margin-top: 14px; padding-bottom: 6px;
	background-image: linear-gradient(var(--ink), var(--ink));
	background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px;
	transition: background-size .45s var(--ease);
}
.gy-vezer:hover .linkline, .gy-vezer:focus-visible .linkline { background-size: 100% 1px }
.gy-vezer .pic { position: relative; overflow: hidden; background: var(--rule) }
.gy-vezer .pic img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; display: block;
	transition: transform .85s var(--ease);
}
/* A panelsoron a kinyílás adja a mozgást, itt viszont csak a kép van — ezért
   határozottabb a nagyítás, mint a kis paneleken (1,03 helyett 1,055). */
.gy-vezer:hover .pic img, .gy-vezer:focus-visible .pic img { transform: scale(1.055) }
/* A vezérpanel és az első panelsor közé szünet kell. A panelsorok közt a
   feliratsáv (cím + alcím) ad levegőt — a vezérpanel alján viszont a fotó fut
   ki a szélig, így a következő sor képei közvetlenül nekitapadtak. */
.gy-vezer + .gy-sor { margin-top: clamp(30px, 3.4vw, 60px) }

@media (max-width: 900px) {
	.gy-vezer { grid-template-columns: 1fr; min-height: 0 }
	.gy-vezer .pic { order: -1; aspect-ratio: 4/3 }
	.gy-vezer .txt { padding-top: clamp(26px, 5vw, 40px); padding-bottom: clamp(30px, 5vw, 44px) }
	.gy-vezer + .gy-sor { margin-top: clamp(22px, 5vw, 34px) }
}

/* ---- panelsorok ---- */
.gy-sorok { border-top: 1px solid var(--rule) }
.gy-sorok.van-vezer { border-top: 0 }
.gy-sor.sor2 { border-top: 1px solid var(--rule) }
/* Kép nélküli bejegyzésnél sávozott helykitöltő, hogy a sor ne essen szét. */
.gy-sor .ph-ures {
	display: flex; align-items: center; justify-content: center; height: 100%;
	background: repeating-linear-gradient(45deg, var(--rule) 0 10px, var(--paper-2) 10px 20px);
}

/* ---- lapozó ---- */
.gy-lapozo { border-top: 1px solid var(--rule); padding: clamp(22px, 2.6vw, 34px) var(--gut) 0 }
.gy-lap-be { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.gy-lapozo a, .gy-lapozo span.page-numbers {
	font-family: var(--f-ui); font-size: .8rem; letter-spacing: .04em;
	color: var(--ink); text-decoration: none;
	padding: 9px 14px; border: 1px solid var(--rule); background: var(--surface);
	transition: background .3s var(--ease), border-color .3s var(--ease);
}
.gy-lapozo a:hover, .gy-lapozo a:focus-visible { border-color: var(--ink) }
.gy-lapozo span.page-numbers.current { background: var(--acc); border-color: var(--acc); font-weight: 600 }
.gy-lapozo span.page-numbers.dots { border-color: transparent; background: transparent; color: var(--ink-3) }
.gy-lapozo a::before, .gy-lapozo a::after { display: none !important; content: none !important }

/* ---- keresőmező a találati lapon ---- */
.gy-kereso { padding: 0 var(--gut) clamp(18px, 2.2vw, 28px); max-width: 44em }
.gy-kereso .wp-block-search__inside-wrapper { border: 1px solid var(--rule); background: var(--surface) }
.gy-kereso .wp-block-search__input { border: none; background: transparent; padding: 12px 14px;
	font-family: var(--f-ui); font-size: .95rem; color: var(--ink) }
.gy-kereso .wp-block-search__button {
	background: var(--acc); color: var(--acc-ink); border: none; cursor: pointer;
	font-family: var(--f-ui); font-size: .72rem; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase; padding: 12px 18px;
}

/* A sorokon belüli panel a designrendszer .facerow.exp szabályait használja;
   itt csak annyit állítunk, ami a gyűjtőoldalon más:

   1. A kép alacsonyabb, mert több sor van egymás alatt.
   2. A feliratsáv magasabb és a szöveg sorokra van vágva. A főoldali ICON-soron
      a cím egy név — itt egy egész mondat („Csalár Bence és a tökéletes
      illeszkedés”), ami vágás nélkül kitolná az alcímet a sávból. */
.gy-sor.facerow.exp .ph { height: clamp(320px, 32vw, 460px) }
.gy-sor.facerow.exp .cap { height: clamp(148px, 12vw, 178px) }
.gy-sor.facerow.exp .ttl { max-width: 23ch }
/* Soronként legfeljebb három panel van, így a kinyílás visszafogottabb lehet,
   mint a főoldali hatos soron — a szomszédok nem préselődnek össze. */
.gy-sor.facerow.exp:hover > a { flex-grow: .82 }
.gy-sor.facerow.exp > a:hover,
.gy-sor.facerow.exp > a:focus-within { flex-grow: 1.9 }

/* Félig maradt utolsó sor: a hiányzó helyet egyetlen üres cella tölti ki, így a
   panelek ugyanolyan szélesek, mint a teli sorokban — a rács végig hármas
   osztású marad, az utolsó két panel nem nyúlik szét fél oldal szélesre.
   A -1px bal margó elnyeli az utolsó panel és az üres hely közti elválasztót:
   ott már nincs mit elválasztani. */
.gy-sor.csonk .gy-ures {
	flex: 1 1 0; min-width: 0; background: var(--paper); margin-left: -1px;
}
.gy-sor.csonk .gy-ures.u2 { flex-grow: 2 }
.gy-sor.csonk:hover .gy-ures { flex-grow: .82 }
.gy-sor.csonk:hover .gy-ures.u2 { flex-grow: 1.64 }
@media (max-width: 900px) {
	/* Mobilon a sorok amúgy is tördelnek, ott az üres cella csak lyukat ütne. */
	.gy-sor.csonk .gy-ures { display: none }
}
.gy-sor.facerow.exp .ttl b,
.gy-sor.facerow.exp .ttl > span {
	display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.gy-sor.facerow.exp .ttl b { -webkit-line-clamp: 2 }
.gy-sor.facerow.exp .ttl > span { -webkit-line-clamp: 2 }
.gy-sor.facerow.exp .more .tx {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
@media (max-width: 900px) {
	.gy-sor.facerow.exp .ph { height: min(58vw, 340px) }
	.gy-sor.facerow.exp .cap { height: auto }
	.gy-sor.facerow.exp .ttl { max-width: none }
	.gy-sor.facerow.exp .ttl b,
	.gy-sor.facerow.exp .ttl > span { -webkit-line-clamp: 3 }
}

/* ---- Rólunk: a csapat rácsa ----
   A .facerow felépítését használja, de az elemek nem linkek (nincs hova
   mutatniuk), ezért a .facerow a-ra írt szabályokat itt div-re is megadjuk. */
.csapat > div { background: var(--paper); display: block; overflow: hidden }
.csapat .ph { display: block; aspect-ratio: 2/3; overflow: hidden; background: var(--rule) }
.csapat img { width: 100%; height: 100%; object-fit: cover; display: block;
	filter: grayscale(1) contrast(1.03); transition: filter .6s var(--ease) }
.csapat > div:hover img { filter: grayscale(0) contrast(1) }
.csapat .cap { padding: 15px 16px 22px; display: flex; flex-direction: column; gap: 3px }
.csapat .cap b { font-family: var(--f-ui); font-weight: 700; font-size: .95rem }
.csapat .cap span { font-size: .84rem; color: var(--ink-2) }

/* ------------------------------------------------------------
   Oldalfej: a jobb oldali adatlista igazítása — 1.34.0
   ------------------------------------------------------------ */

/* 1. A lista a bal hasáb ALJÁHOZ kerül, vagyis a gombok vonalához. Eddig
      felülre volt igazítva, és a cím mellett lebegett a semmiben.
      Ugyanez a portfólió-oldalak fejlécén (.pfhead .pfmeta) is. */
.pghead .quick,
.pfhead .pfmeta { align-self: end }

/* 2. A soron belül a címke (CÍM, E-MAIL, TELEFON) és az érték eddig a doboza
      tetejéhez igazodott. A címke .63rem-es, az érték .95rem-es, így a két
      szöveg alapvonala nem esett egybe — ettől látszott csúszásnak. A
      baseline igazítás a betűk talpát hozza egy vonalba. */
.pghead .quick,
.pfhead .pfmeta { align-items: baseline }
.pghead .quick dt, .pghead .quick dd,
.pfhead .pfmeta dt, .pfhead .pfmeta dd { line-height: 1.45 }
/* A .pfmeta dt eddig külön középre volt igazítva — ezt a baseline váltja. */
.pfhead .pfmeta dt { align-self: baseline }

@media (max-width: 860px) {
	/* Egyhasábos elrendezésben nincs mihez alulra igazítani. */
	.pghead .quick,
	.pfhead .pfmeta { align-self: start }
}

/* ------------------------------------------------------------
   Nyitó videósáv: háttérklip és a lejátszóablak — 1.37.0
   ------------------------------------------------------------ */

/* A háttérklip ugyanúgy tölti ki a sávot, mint a kép (a .vband video szabály
   a designrendszerben már megvan). A kép „leülő” animációja a klipre nem kell. */
.vband .vband-klip { object-fit: cover }

/* A lejátszóablak: natív <dialog>, 16:9-es kerettel, sötét háttér előtt. */
.yt-ablak {
	padding: 0; border: 0; background: transparent; color: #F2F2EF;
	width: min(92vw, 1280px); max-width: none; max-height: none; overflow: visible;
}
.yt-ablak::backdrop { background: rgba(10, 10, 12, .88) }
.yt-keret { position: relative; aspect-ratio: 16 / 9; background: #000;
	box-shadow: 0 18px 60px rgba(0, 0, 0, .45) }
.yt-keret iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.yt-zar {
	position: absolute; top: -48px; right: 0;
	width: 40px; height: 40px; display: grid; place-items: center;
	background: transparent; border: 1.5px solid rgba(242, 242, 239, .7); border-radius: 50%;
	color: #F2F2EF; font: 400 1.6rem/1 var(--f-ui); cursor: pointer;
	transition: background .2s var(--ease), color .2s var(--ease);
}
.yt-zar:hover, .yt-zar:focus-visible { background: #F2F2EF; color: #16161A; outline: none }
/* Álló képernyőn a keret a szélességhez igazodik, a bezáró gomb befér fölé. */
@media (max-width: 700px) { .yt-ablak { width: 100vw } .yt-zar { right: 12px } }

/* Gombsor egy felezett szakasz szövegoszlopában (pl. a főoldali látásvizsgálat- és
   kerettervezés-blokk alján). A lista után kell levegő, mobilon a gombok tördelnek. */
.feature .txt .btns { margin-top: clamp(18px, 2vw, 28px) }

/* Kinyíló (collexp) panelsor hosszú címmel — pl. a főoldali Kirakat sor
   („Kirakatban a művészet – Art Deco”). A felirat magassága eddig rögzített volt,
   a 16 karakteres címszélesség miatt a hosszú cím és alcím kilógott belőle.
   Most szélesebb a cím, a sáv pedig a tartalomhoz nő (legalább az eredeti
   magasság), a sor paneljei közt egyformán. */
.collexp .cap { height: auto; min-height: clamp(108px, 9.5vw, 132px); flex: 1 1 auto }
/* A kinyíló leírás nem szólhat bele a sáv magasságába: láthatatlanul is ott van
   a dobozban, és a hosszú kivonat a sávot a kétszeresére nyújtotta (egérrel
   rámenve pedig ugrált). contain:size mellett a mérete nem a tartalmából jön,
   hanem a sávból — ami nem fér ki, azt levágja. */
.collexp .more { contain: size; align-self: stretch }
.collexp .ttl { max-width: 26ch }

/* Beágyazott videó (YouTube) a szöveges szakaszban — pl. a kollekcióoldalak
   Sajtó blokkja. Nem a keskeny szöveghasábban marad, hanem a szakasz teljes
   szélességét kitölti, így hangsúlyos. */
.sec .wp-block-embed { margin: clamp(22px, 2.6vw, 36px) 0 0; max-width: none; width: 100% }
.sec .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; background: var(--ink) }
.sec .wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100% }
.sec .body:has(.wp-block-embed) { max-width: none }
.sec .body:has(.wp-block-embed) > p { max-width: 64ch }

/* Csapat-rács (Rólunk): ha az utolsó sor nem telik meg, a hiányzó helyeken a
   rács elválasztószíne (sötétebb szürke) látszott. A rács háttere most az
   oldalé; az elválasztó vonalat minden kártya maga rajzolja a hézagba. */
.facerow.csapat { background: transparent }
.facerow.csapat > * { box-shadow: 0 0 0 1px var(--rule) }

/* Kulcsszó-sáv link nélkül: puszta kép, nagyítás és lejátszásjel nélkül. */
.msgband span.vid { display: block }
.msgband span.vid:hover img { transform: none }

/* Képaláírások ki (lásd szsz_kepfeliratok()). A saját blokkok már ki sem írják;
   ez a WordPress alapblokkjaira (kép, galéria, beágyazás) vonatkozik. */
.szsz-tartalom .wp-block-image figcaption,
.szsz-tartalom .wp-block-gallery figcaption,
.szsz-tartalom .wp-block-embed figcaption,
.szsz-tartalom .wp-element-caption { display: none }

/* Felezett szakasz hosszú szöveggel (legalább négy bekezdés, pl. a főoldali
   Kézművesség blokk): a 42 karakteres hasáb túl magasra nyújtotta a blokkot.
   Ilyenkor a szöveg szélesebb hasábot kap, így a blokk alacsonyabb. */
.feature:has(> .txt > p:not(.lbl) ~ p:not(.lbl) ~ p:not(.lbl) ~ p:not(.lbl)) > .txt > p:not(.lbl) { max-width: 80ch }
/* Az oszlopok fele-fele arányban maradnak: a kép a lap közepétől indul, mint a
   többi felezett szakaszban (Arnold kérése, 2026-10-05). Csak a hasáb szélesebb. */

/* Széles bekezdés a felezett szakaszban: a bekezdés „szeles” osztályt kap
   (Speciális → További CSS-osztály), ettől a hasáb a lista szélességéig nyúlik,
   a kép oszlopa nem változik. Hosszú szövegű
   blokkhoz (főoldal, Kézművesség), ahol a pontok is egész bekezdések. */
.feature .txt > p.szeles { max-width: none }


/* ---- sütisáv (Meta Pixel hozzájárulás) ---- */
.sutisav {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
	display: flex; align-items: center; justify-content: space-between; gap: 14px 28px; flex-wrap: wrap;
	padding: 16px var(--gut); background: var(--paper); border-top: 1px solid var(--ink);
	box-shadow: 0 -10px 30px rgba(19, 19, 24, .08);
}
.sutisav[hidden] { display: none }
.sutisav-sz { margin: 0; font-family: var(--f-ui); font-size: .92rem; line-height: 1.5; color: var(--ink-2); max-width: 70ch }
.sutisav-g { display: flex; gap: 10px; flex-wrap: wrap }
.sutisav button.btn { cursor: pointer; -webkit-appearance: none; appearance: none }
.sutisav button.btn:not(.solid):not(:hover) { background: transparent }

/* ------------------------------------------------------------
   Szakasz „teljes kép” móddal: a kép nem vágódik, és egyben elfér a
   képernyőn (legfeljebb a látható magasság) — álló portrénál a teljes alak.
   A kép a sorban áll (nem kitöltő háttér), a maradék hely papírszínű.
   ------------------------------------------------------------ */
.sec.withpic.teljes-kep { align-items: center; background: var(--paper); }
.sec.withpic.teljes-kep > figure {
	display: flex; align-items: center; justify-content: center;
	background: var(--paper); aspect-ratio: auto;
}
.sec.withpic.teljes-kep .fig { position: static; inset: auto; background: none; display: flex; justify-content: center; }
.sec.withpic.teljes-kep .fig picture { display: contents; }
.sec.withpic.teljes-kep .fig img {
	width: auto; height: auto; max-width: 100%; object-fit: contain;
	max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--head-h, 0px));
}
.sec.withpic.teljes-kep .fig:hover img { transform: none; }
@media (min-width: 861px) {
	.sec.withpic.teljes-kep > figure { position: relative; top: auto; height: auto; align-self: center; }
}
@media (max-width: 860px) {
	.sec.withpic.teljes-kep figure { aspect-ratio: auto; }
	.sec.withpic.teljes-kep .fig img { max-height: 85vh; }
}

/* Alcím a szakasz szövegén belül (pl. két összevont szövegblokk között). */
.sec .body h3 {
	font-family: var(--f-disp); font-weight: 400; color: var(--ink);
	font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.2; margin: 12px 0 0;
}
/* Teljes képes szakasz: a szöveg a kép mellett áll, ezért erősebb szedést kap,
   hogy ne vesszen el a nagy kép mellett. Az első bekezdés felütés. */
.sec.withpic.teljes-kep > .col { justify-content: center; gap: 22px; }
.sec.withpic.teljes-kep .body { gap: 18px; max-width: 54ch; }
.sec.withpic.teljes-kep .body > p {
	font-size: clamp(1.02rem, 1.15vw, 1.12rem); line-height: 1.72; color: var(--ink);
}
.sec.withpic.teljes-kep .body > p:first-child {
	font-family: var(--f-disp); font-size: clamp(1.3rem, 1.9vw, 1.6rem);
	line-height: 1.42; letter-spacing: -.005em; color: var(--ink);
}
.sec.withpic.teljes-kep .body h3 {
	font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin-top: 18px;
	padding-top: 18px; border-top: 1px solid var(--rule);
}