/* ==========================================================================
   Főoldal és a téma Elementor-widgetjei.

   Két réteg:
   - SZAKASZ (nyitókép, hullámok, hátterek, térközök) — csak a kódolt
     főoldalon; ablakszélességre (@media) reagál.
   - KOMPONENS (hírrács, csempék, programkártyák, polaroidok, füzet,
     beiskolázás, alapítvány, számadatok, mottó) — a főoldalon és az
     Elementor-widgetekben ugyanaz; a SAJÁT DOBOZA szélességére
     (@container) reagál, így egy keskeny Elementor-hasábban is jól törik.

   A konténer: a <main> minden .keret-je és minden widget (.psa-w) —
   lásd layout.css. A konténertöréspontok úgy vannak választva, hogy a
   főoldalon ugyanott váltsanak, mint a régi ablaktöréspontok: 1100 px-es
   ablakban a keret belseje 1036 px, 760 px-esben 699,2 px (761-ben 700,1).

   Az inc/assets.php a kezdőlapon tölti be, máshol akkor, ha egy
   Elementor-widget igényli (get_style_depends).
   ========================================================================== */

/* ==========================================================================
   SZAKASZOK
   ========================================================================== */

/* Nyitókép ----------------------------------------------------------------- */
.nyito { position: relative; background: var(--kek-50); overflow: hidden; }
.nyito::before { /* pöttyös papír */
	content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(var(--kek-100) 2px, transparent 2.5px); background-size: 26px 26px; opacity: .9;
}
.nyito > .keret {
	position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr .98fr; gap: 48px; align-items: center;
	padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6vw, 90px);
}
.nyito h1 { font-size: clamp(42px, 5.4vw, 70px); color: var(--sotetkek); margin-top: 18px; line-height: 1.02; }
.nyito h1 .kiemelt { color: var(--kek); white-space: nowrap; }
.nyito-bevezeto { margin-top: 20px; font-size: 19px; line-height: 1.6; color: var(--tinta-70); max-width: 48ch; }
.nyito-gombok { position: relative; display: flex; flex-wrap: wrap; gap: 16px 18px; margin-top: 58px; }
.nyito-gombok--kezirat-nelkul { margin-top: 32px; }
.kezirat {
	position: absolute; left: 6px; top: -6px; transform: translateY(-100%) rotate(-5deg);
	font-family: var(--betu-kezi); font-weight: 700; font-size: 25px; color: var(--piros); line-height: 1;
	display: flex; align-items: flex-end; gap: 4px; white-space: nowrap;
}
.kezirat svg { width: 46px; height: 34px; color: var(--piros); margin-bottom: -14px; }

.nyito-kep { position: relative; z-index: 1; }
.folt {
	position: relative; aspect-ratio: 1 / .92; border: 9px solid #fff; box-shadow: var(--arnyek-l);
	border-radius: 44% 56% 52% 48% / 48% 42% 58% 52%; overflow: hidden; background: var(--kek-100);
}
.folt img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
.kor-kep {
	position: absolute; left: -30px; bottom: -26px; width: 44%; aspect-ratio: 1; border-radius: 50%;
	border: 8px solid #fff; overflow: hidden; box-shadow: var(--arnyek-l); transform: rotate(-6deg);
}
.kor-kep img { width: 100%; height: 100%; object-fit: cover; }
.nyito-kep .matrica { position: absolute; z-index: 2; font-size: 17px; padding: 8px 18px 7px; }
.nyito-kep .m1 { top: 4%; left: -4%; --r: -8deg; }
.nyito-kep .m2 { top: 40%; right: -5%; --r: 7deg; }
.nyito-kep .m3 { bottom: 6%; right: 6%; --r: -4deg; }

/* A többi szakasz ------------------------------------------------------------ */
.gyors { position: relative; z-index: 2; margin-top: -34px; }
.hirek { position: relative; padding-block: clamp(64px, 8vw, 104px) clamp(56px, 7vw, 90px); }
.programok { position: relative; background: var(--arany-50); }
.programok > .keret { position: relative; padding-block: clamp(40px, 5vw, 64px) clamp(56px, 7vw, 90px); }
.motto { position: relative; background: var(--kek); color: #fff; overflow: hidden; }
.motto > .keret { max-width: 920px; padding-block: clamp(40px, 5vw, 64px); }
.galeria { position: relative; padding-block: clamp(64px, 8vw, 100px) clamp(56px, 7vw, 90px); overflow: hidden; }
.het { position: relative; background: var(--zold-50); }
.het > .keret { padding-block: clamp(40px, 5vw, 64px) clamp(56px, 7vw, 90px); }
.beisk { padding-block: clamp(64px, 8vw, 100px) clamp(40px, 5vw, 64px); scroll-margin-top: calc(var(--fejlec-m) + 12px); }
.alap { padding-block: clamp(24px, 3vw, 40px) clamp(64px, 8vw, 100px); }

@media (max-width: 1100px) {
	/* egyhasábos nyitókép: a cím a teljes szélességen fut, a dísz rálógna */
	.nyito .dekor { display: none; }
	.nyito > .keret { grid-template-columns: 1fr; gap: 56px; }
	.nyito-kep { max-width: 560px; margin-inline: auto; width: 100%; }
}

@media (max-width: 760px) {
	.nyito > .keret { padding-block: 30px 60px; gap: 44px; }
	.nyito h1 { font-size: 40px; }
	.nyito-bevezeto { font-size: 17px; }
	.nyito-gombok { margin-top: 54px; }
	.nyito-gombok .gomb { flex: 1 1 100%; }
	.kezirat { font-size: 22px; }
	.kor-kep { left: -8px; bottom: -20px; width: 40%; }
	.nyito-kep .matrica { font-size: 14px; padding: 6px 13px 5px; }
	.nyito-kep .m1 { left: 0; }
	.nyito-kep .m2 { right: -2%; }

	.gyors { margin-top: -30px; }
	/* a csempesor a képernyő széléig görgethető (a keret belső margója marad,
	   hogy a konténer szélessége — és így a töréspont — ugyanaz legyen) */
	.gyors .gyors-racs { margin-inline: calc(-1 * var(--pad)); }
}

/* ==========================================================================
   KOMPONENSEK
   ========================================================================== */

/* Számadatok ---------------------------------------------------------------- */
.szamok { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; max-width: 520px; list-style: none; }
.szam { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.szam b {
	width: 66px; height: 66px; flex: none; border-radius: 50%; display: grid; place-items: center;
	font-family: var(--betu-cim); font-weight: 800; font-size: 25px; color: var(--on); background: var(--fill);
	box-shadow: 0 4px 0 rgba(21, 32, 74, .2); transform: rotate(var(--r, 0deg));
}
.szam span { font-weight: 800; font-size: 14.5px; line-height: 1.25; color: var(--tinta); }
/* widgetként: tetszőleges darabszám (--oszlop), balra vagy középre */
.szamok-keret .szamok { margin-top: 0; grid-template-columns: repeat(var(--oszlop, 3), minmax(0, 1fr)); max-width: calc(var(--oszlop, 3) * 174px); }
.psa-w--kozepre .szamok { margin-inline: auto; }
.psa-w--kozepre .szam { align-items: center; text-align: center; }

/* Gyorselérés csempék ------------------------------------------------------- */
.gyors-racs { display: grid; grid-template-columns: repeat(var(--oszlop, 6), 1fr); gap: 14px; list-style: none; }
.gy {
	display: flex; flex-direction: column; align-items: flex-start; gap: 10px; height: 100%; padding: 18px 16px 16px;
	background: #fff; border-radius: var(--r-m); box-shadow: var(--arnyek); text-decoration: none; color: var(--tinta);
	border-bottom: 5px solid var(--fill); transition: transform .18s ease, box-shadow .18s ease;
}
.gy:hover { color: var(--tinta); transform: translateY(-6px) rotate(-1.2deg); box-shadow: var(--arnyek-l); }
.gy-ikon { width: 48px; height: 48px; border-radius: 16px; background: var(--h); color: var(--c); display: grid; place-items: center; }
.gy-ikon svg { width: 25px; height: 25px; stroke-width: 2.1; }
.gy:hover .gy-ikon { animation: psa-billeg .55s ease-in-out; }
@keyframes psa-billeg { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(10deg); } }
.gy b { font-family: var(--betu-cim); font-weight: 800; font-size: 18px; line-height: 1.1; }
.gy small { font-size: 13.5px; font-weight: 600; color: var(--tinta-70); line-height: 1.3; margin-top: -5px; }

/* Hírrács — mozaik (vezető hír + két kicsi + a többi) ----------------------- */
.hir-racs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hir-racs .hir--kiemelt { grid-column: span 2; grid-row: span 2; }
.hir-racs .hir--kiemelt .hir-kep { aspect-ratio: auto; flex: 1 1 0; min-height: 300px; }
.hir-racs .hir--kiemelt .hir-test { flex: none; }
.hir-racs .hir--kiemelt .hir-cim { font-size: clamp(28px, 2.8vw, 36px); }
.hir-racs .hir--kiemelt p { font-size: 17px; }
.hir-racs .hir--kicsi .hir-kep { aspect-ratio: auto; flex: 1 1 0; min-height: 150px; }
.hir-racs .hir--kicsi .hir-test { flex: none; padding-bottom: 16px; }
.hir-racs .hir--kicsi p, .hir-racs .hir--kicsi .tovabb { display: none; }
.hir-racs .hir--kicsi .hir-cim { font-size: 21px; }
/* a kép ne a saját méretével feszítse a sort, csak kitöltse a helyet */
.hir-racs .hir--kiemelt .hir-kep img, .hir-racs .hir--kicsi .hir-kep img { position: absolute; inset: 0; }

/* Programkártyák ------------------------------------------------------------ */
.prog-racs { display: grid; grid-template-columns: repeat(var(--oszlop, 3), 1fr); gap: 22px; list-style: none; }

/* Mottó (a sáv tartalma; widgetként saját kék dobozban) --------------------- */
.motto-minta { /* ritka, szétszórt virágminta — a szöveg mögött kiritkítva */
	position: absolute; left: 0; right: 0; top: clamp(28px, 4vw, 60px); bottom: clamp(28px, 4vw, 60px); opacity: .13;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 180 140'%3E%3Cdefs%3E%3Cg id='f' fill='%23fff'%3E%3Ccircle cx='20' cy='11' r='7'/%3E%3Ccircle cx='28.6' cy='17.2' r='7'/%3E%3Ccircle cx='25.3' cy='27.3' r='7'/%3E%3Ccircle cx='14.7' cy='27.3' r='7'/%3E%3Ccircle cx='11.4' cy='17.2' r='7'/%3E%3C/g%3E%3C/defs%3E%3Cuse xlink:href='%23f' transform='translate(8 10)'/%3E%3Cuse xlink:href='%23f' transform='translate(112 70) scale(.6)'/%3E%3Cuse xlink:href='%23f' transform='translate(142 12) scale(.35)'/%3E%3Cuse xlink:href='%23f' transform='translate(58 98) scale(.45)'/%3E%3C/svg%3E");
	background-size: 180px 140px;
	-webkit-mask: radial-gradient(ellipse 34% 60% at 50% 50%, transparent 60%, #000 100%);
	        mask: radial-gradient(ellipse 34% 60% at 50% 50%, transparent 60%, #000 100%);
}
.motto-tartalom { position: relative; text-align: center; }
.motto .cimer { width: 92px; height: 92px; margin: 0 auto 22px; box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--arany), 0 14px 30px rgba(0, 0, 0, .25); }
.motto blockquote { margin: 0; font-family: var(--betu-cim); font-weight: 700; font-size: clamp(25px, 3.2vw, 38px); line-height: 1.25; }
.motto blockquote p::before, .motto blockquote p::after { color: var(--arany); font-size: 1.3em; line-height: 0; }
.motto blockquote p::before { content: "„"; }
.motto blockquote p::after { content: "”"; }
.motto figcaption { display: block; margin-top: 14px; font-style: normal; font-family: var(--betu-kezi); font-weight: 700; font-size: 26px; color: var(--arany); text-align: center; }
.motto-linkek { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; list-style: none; }
.motto-linkek a {
	display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px 8px; border-radius: 999px;
	border: 2.5px solid rgba(255, 255, 255, .55); color: #fff; text-decoration: none; font-weight: 800; font-size: 15px;
	transition: background .15s, color .15s, transform .15s;
}
.motto-linkek a:hover { background: #fff; color: var(--kek); border-color: #fff; transform: rotate(-2deg); }
/* widgetként: lekerekített kék doboz a hullámos szélek helyett */
.motto--doboz { border-radius: var(--r-xl); padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px); }
.motto--doboz .motto-minta { top: 0; bottom: 0; }

/* Polaroidok ---------------------------------------------------------------- */
.polaroidok { display: grid; grid-template-columns: repeat(var(--oszlop, 3), 1fr); gap: 38px 34px; padding: 10px 8px; list-style: none; }

/* Beiskolázás kártya --------------------------------------------------------- */
.beisk-kartya {
	position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--zold); color: #fff;
	padding: clamp(30px, 4.4vw, 58px); display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center;
}
.beisk-kartya::before { content: ""; position: absolute; inset: 0; opacity: .14; background-image: radial-gradient(#fff 2px, transparent 2.5px); background-size: 24px 24px; }
.beisk-kartya > * { position: relative; }
.beisk-kartya .cimke { color: var(--arany); }
.beisk-kartya .beisk-cim { font-size: clamp(36px, 4.4vw, 56px); line-height: 1; color: #fff; }
.beisk-szoveg { margin-top: 16px; font-size: 17.5px; color: rgba(255, 255, 255, .92); max-width: 44ch; }
.beisk-gombok { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 28px; }
.repulo { position: absolute; left: 37%; top: 7%; z-index: 2; width: 160px; height: 104px; color: #fff; opacity: .95; }
.beisk-lab { margin-top: 14px; font-size: 14.5px; color: rgba(255, 255, 255, .9); font-weight: 600; }
.beisk-lab a { color: #fff; font-weight: 800; white-space: nowrap; }

/* Alapítvány kártya ---------------------------------------------------------- */
.alap-kartya {
	display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center;
	background: #fff; border-radius: var(--r-l); padding: clamp(22px, 3vw, 34px); box-shadow: var(--arnyek);
	border: 3px dashed var(--piros-50);
}
.sziv { width: 84px; height: 84px; flex: none; animation: psa-dobog 1.8s ease-in-out infinite; }
@keyframes psa-dobog { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.12); } 28% { transform: scale(1); } 42% { transform: scale(1.08); } }
.alap-kartya .alap-cim { font-size: clamp(26px, 2.8vw, 34px); color: var(--sotetkek); }
.alap-szoveg { margin-top: 6px; color: var(--tinta-70); font-size: 16px; }
.alap-szoveg a { font-weight: 800; color: var(--piros); }

/* Komponensek — a saját dobozuk szélességére --------------------------------- */
@container (max-width: 1036px) {
	.gyors-racs { grid-template-columns: repeat(3, 1fr); }
	.hir-racs { grid-template-columns: repeat(2, 1fr); }
	.hir-racs .hir--kiemelt { grid-column: span 2; grid-row: auto; }
	.hir-racs .hir--kiemelt .hir-kep { aspect-ratio: 16 / 9; flex: none; min-height: 0; }
	.hir-racs .hir--kiemelt .hir-kep img { position: static; }
	.prog-racs { grid-template-columns: repeat(2, 1fr); }
	.polaroidok { grid-template-columns: repeat(2, 1fr); }
	.beisk-kartya { grid-template-columns: 1fr; }
}

@container (max-width: 700px) {
	.szamok { gap: 12px; margin-top: 34px; }
	.szam { align-items: center; text-align: center; gap: 6px; }
	.szam b { width: 58px; height: 58px; font-size: 22px; }
	.szam span { font-size: 12.5px; }
	.szamok-keret .szamok { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }

	/* csempék: vízszintesen görgethető sor */
	.gyors-racs {
		display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
		padding: 4px var(--pad) 14px; scrollbar-width: none;
	}
	.gyors-racs::-webkit-scrollbar { display: none; }
	.gyors-racs > li { flex: 0 0 142px; scroll-snap-align: start; }

	.hir-racs { grid-template-columns: 1fr; gap: 18px; }
	.hir-racs .hir--kiemelt { grid-column: auto; }
	.hir-racs .hir--kiemelt .hir-cim { font-size: 27px; }
	.hir-racs .hir--kiemelt p { font-size: 16px; }
	.hir-racs .hir:not(.hir--kiemelt) { flex-direction: row; align-items: center; gap: 4px; border-radius: var(--r-m); }
	.hir-racs .hir:not(.hir--kiemelt) .hir-kep { flex: 0 0 112px; aspect-ratio: 1; min-height: 0; border-radius: 14px; }
	.hir-racs .hir:not(.hir--kiemelt) .hir-kep img { position: static; }
	.hir-racs .hir:not(.hir--kiemelt) .hir-test { flex: 1 1 auto; min-width: 0; padding: 6px 8px 6px 12px; gap: 4px; }
	.hir-racs .hir:not(.hir--kiemelt) .hir-cim { font-size: 18px; }
	.hir-racs .hir:not(.hir--kiemelt) p, .hir-racs .hir:not(.hir--kiemelt) .tovabb, .hir-racs .hir:not(.hir--kiemelt) > .matrica { display: none; }
	.hir-racs .lejatszas { width: 40px; height: 40px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .55); }
	.hir-racs .lejatszas svg { width: 16px; height: 16px; }

	.prog-racs { grid-template-columns: 1fr; gap: 14px; }
	.prog { padding: 20px 20px 20px 88px; }
	.prog-ikon { position: absolute; left: 18px; top: 22px; width: 52px; height: 52px; margin: 0; border-radius: 16px; }
	.prog-ikon svg { width: 26px; height: 26px; }
	.prog-cim { font-size: 20px; padding-right: 52px; }
	.prog p { font-size: 14.5px; }
	.buborek { font-size: 18px; right: 14px; top: 18px; }

	.motto .cimer { width: 74px; height: 74px; }
	.polaroidok { gap: 26px 16px; padding: 6px 2px; }

	.beisk-kartya { border-radius: var(--r-l); gap: 30px; }
	.beisk-gombok .gomb { flex: 1 1 100%; }
	.repulo { left: auto; right: 12px; top: 14px; width: 84px; height: 56px; }

	.alap-kartya { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 16px; }
	.sziv { width: 64px; height: 64px; }
}

/* === TARTALÉK: konténerlekérdezés nélkül (generált, lásd lent) === */
/* A Safari 15 és a régebbi böngészők (iOS 15-ön ragadt iPhone 6s/7, iPad Air 2,
   iPad mini 4) nem ismerik a @container lekérdezést: nélküle a komponensek
   mobilon is asztali elrendezésben maradnának. Nekik ugyanezek a szabályok az
   ABLAK szélességéhez kötve (1036 px-es keret ≈ 1100 px-es ablak, 700 ≈ 760,
   560 ≈ 620). A fenti @container blokkok betűre egyező másolata: ha azokat
   módosítod, ezt is ugyanúgy frissíteni kell. */
@supports not (container-type: inline-size) {
	@media (max-width: 1100px) {
		.gyors-racs { grid-template-columns: repeat(3, 1fr); }
		.hir-racs { grid-template-columns: repeat(2, 1fr); }
		.hir-racs .hir--kiemelt { grid-column: span 2; grid-row: auto; }
		.hir-racs .hir--kiemelt .hir-kep { aspect-ratio: 16 / 9; flex: none; min-height: 0; }
		.hir-racs .hir--kiemelt .hir-kep img { position: static; }
		.prog-racs { grid-template-columns: repeat(2, 1fr); }
		.polaroidok { grid-template-columns: repeat(2, 1fr); }
		.beisk-kartya { grid-template-columns: 1fr; }
	}
	@media (max-width: 760px) {
		.szamok { gap: 12px; margin-top: 34px; }
		.szam { align-items: center; text-align: center; gap: 6px; }
		.szam b { width: 58px; height: 58px; font-size: 22px; }
		.szam span { font-size: 12.5px; }
		.szamok-keret .szamok { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }

		/* csempék: vízszintesen görgethető sor */
		.gyors-racs {
			display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
			padding: 4px var(--pad) 14px; scrollbar-width: none;
		}
		.gyors-racs::-webkit-scrollbar { display: none; }
		.gyors-racs > li { flex: 0 0 142px; scroll-snap-align: start; }

		.hir-racs { grid-template-columns: 1fr; gap: 18px; }
		.hir-racs .hir--kiemelt { grid-column: auto; }
		.hir-racs .hir--kiemelt .hir-cim { font-size: 27px; }
		.hir-racs .hir--kiemelt p { font-size: 16px; }
		.hir-racs .hir:not(.hir--kiemelt) { flex-direction: row; align-items: center; gap: 4px; border-radius: var(--r-m); }
		.hir-racs .hir:not(.hir--kiemelt) .hir-kep { flex: 0 0 112px; aspect-ratio: 1; min-height: 0; border-radius: 14px; }
		.hir-racs .hir:not(.hir--kiemelt) .hir-kep img { position: static; }
		.hir-racs .hir:not(.hir--kiemelt) .hir-test { flex: 1 1 auto; min-width: 0; padding: 6px 8px 6px 12px; gap: 4px; }
		.hir-racs .hir:not(.hir--kiemelt) .hir-cim { font-size: 18px; }
		.hir-racs .hir:not(.hir--kiemelt) p, .hir-racs .hir:not(.hir--kiemelt) .tovabb, .hir-racs .hir:not(.hir--kiemelt) > .matrica { display: none; }
		.hir-racs .lejatszas { width: 40px; height: 40px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .55); }
		.hir-racs .lejatszas svg { width: 16px; height: 16px; }

		.prog-racs { grid-template-columns: 1fr; gap: 14px; }
		.prog { padding: 20px 20px 20px 88px; }
		.prog-ikon { position: absolute; left: 18px; top: 22px; width: 52px; height: 52px; margin: 0; border-radius: 16px; }
		.prog-ikon svg { width: 26px; height: 26px; }
		.prog-cim { font-size: 20px; padding-right: 52px; }
		.prog p { font-size: 14.5px; }
		.buborek { font-size: 18px; right: 14px; top: 18px; }

		.motto .cimer { width: 74px; height: 74px; }
		.polaroidok { gap: 26px 16px; padding: 6px 2px; }

		.beisk-kartya { border-radius: var(--r-l); gap: 30px; }
		.beisk-gombok .gomb { flex: 1 1 100%; }
		.repulo { left: auto; right: 12px; top: 14px; width: 84px; height: 56px; }

		.alap-kartya { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 16px; }
		.sziv { width: 64px; height: 64px; }
	}

	/* Ugyanezek a DOBOZ valódi szélességéhez kötve: a psa-kt-* osztályt a
	   kontener.js teszi a konténerekre (keskeny Elementor-hasáb is). A :where()
	   miatt a fajlagosság ugyanaz, mint a @container szabályoké, a sorrend pedig
	   azonos — így a végeredmény is. :where() nélküli böngésző (Safari 13) ezt a
	   részt kihagyja, neki a fenti ablakszélességes változat marad. */
	/* @container (max-width: 1036px) */
		:where(.psa-kt-1036) .gyors-racs { grid-template-columns: repeat(3, 1fr); }
		:where(.psa-kt-1036) .hir-racs { grid-template-columns: repeat(2, 1fr); }
		:where(.psa-kt-1036) .hir-racs .hir--kiemelt { grid-column: span 2; grid-row: auto; }
		:where(.psa-kt-1036) .hir-racs .hir--kiemelt .hir-kep { aspect-ratio: 16 / 9; flex: none; min-height: 0; }
		:where(.psa-kt-1036) .hir-racs .hir--kiemelt .hir-kep img { position: static; }
		:where(.psa-kt-1036) .prog-racs { grid-template-columns: repeat(2, 1fr); }
		:where(.psa-kt-1036) .polaroidok { grid-template-columns: repeat(2, 1fr); }
		:where(.psa-kt-1036) .beisk-kartya { grid-template-columns: 1fr; }
	/* @container (max-width: 700px) */
		:where(.psa-kt-700) .szamok { gap: 12px; margin-top: 34px; }
		:where(.psa-kt-700) .szam { align-items: center; text-align: center; gap: 6px; }
		:where(.psa-kt-700) .szam b { width: 58px; height: 58px; font-size: 22px; }
		:where(.psa-kt-700) .szam span { font-size: 12.5px; }
		:where(.psa-kt-700) .szamok-keret .szamok { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }

		/* csempék: vízszintesen görgethető sor */
		:where(.psa-kt-700) .gyors-racs {
			display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
			padding: 4px var(--pad) 14px; scrollbar-width: none;
		}
		:where(.psa-kt-700) .gyors-racs::-webkit-scrollbar { display: none; }
		:where(.psa-kt-700) .gyors-racs > li { flex: 0 0 142px; scroll-snap-align: start; }

		:where(.psa-kt-700) .hir-racs { grid-template-columns: 1fr; gap: 18px; }
		:where(.psa-kt-700) .hir-racs .hir--kiemelt { grid-column: auto; }
		:where(.psa-kt-700) .hir-racs .hir--kiemelt .hir-cim { font-size: 27px; }
		:where(.psa-kt-700) .hir-racs .hir--kiemelt p { font-size: 16px; }
		:where(.psa-kt-700) .hir-racs .hir:not(.hir--kiemelt) { flex-direction: row; align-items: center; gap: 4px; border-radius: var(--r-m); }
		:where(.psa-kt-700) .hir-racs .hir:not(.hir--kiemelt) .hir-kep { flex: 0 0 112px; aspect-ratio: 1; min-height: 0; border-radius: 14px; }
		:where(.psa-kt-700) .hir-racs .hir:not(.hir--kiemelt) .hir-kep img { position: static; }
		:where(.psa-kt-700) .hir-racs .hir:not(.hir--kiemelt) .hir-test { flex: 1 1 auto; min-width: 0; padding: 6px 8px 6px 12px; gap: 4px; }
		:where(.psa-kt-700) .hir-racs .hir:not(.hir--kiemelt) .hir-cim { font-size: 18px; }
		:where(.psa-kt-700) .hir-racs .hir:not(.hir--kiemelt) p, :where(.psa-kt-700) .hir-racs .hir:not(.hir--kiemelt) .tovabb, :where(.psa-kt-700) .hir-racs .hir:not(.hir--kiemelt) > .matrica { display: none; }
		:where(.psa-kt-700) .hir-racs .lejatszas { width: 40px; height: 40px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .55); }
		:where(.psa-kt-700) .hir-racs .lejatszas svg { width: 16px; height: 16px; }

		:where(.psa-kt-700) .prog-racs { grid-template-columns: 1fr; gap: 14px; }
		:where(.psa-kt-700) .prog { padding: 20px 20px 20px 88px; }
		:where(.psa-kt-700) .prog-ikon { position: absolute; left: 18px; top: 22px; width: 52px; height: 52px; margin: 0; border-radius: 16px; }
		:where(.psa-kt-700) .prog-ikon svg { width: 26px; height: 26px; }
		:where(.psa-kt-700) .prog-cim { font-size: 20px; padding-right: 52px; }
		:where(.psa-kt-700) .prog p { font-size: 14.5px; }
		:where(.psa-kt-700) .buborek { font-size: 18px; right: 14px; top: 18px; }

		:where(.psa-kt-700) .motto .cimer { width: 74px; height: 74px; }
		:where(.psa-kt-700) .polaroidok { gap: 26px 16px; padding: 6px 2px; }

		:where(.psa-kt-700) .beisk-kartya { border-radius: var(--r-l); gap: 30px; }
		:where(.psa-kt-700) .beisk-gombok .gomb { flex: 1 1 100%; }
		:where(.psa-kt-700) .repulo { left: auto; right: 12px; top: 14px; width: 84px; height: 56px; }

		:where(.psa-kt-700) .alap-kartya { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 16px; }
		:where(.psa-kt-700) .sziv { width: 64px; height: 64px; }
}