.khek-service-card {
	box-sizing: border-box;
	flex: 0 0 440px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	padding: 30px 40px 74px;
	background-color: var(--wp--preset--color--green);
	color: var(--wp--preset--color--cream);
	border-radius: 6px;
	position: relative;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Hoverre az egesz kartya (tartalommal egyutt) egyben nagyobbra no, ~10px-el
   korben - a fix szelesseg (440px) alapjan szamitott arany (460/440) uniform
   scale-lel, hogy ne torzuljon. A transform nem befolyasolja a flex-elrendezest,
   a z-index pedig biztositja, hogy a nagyobb kartya a szomszedok fole keruljon. */
.khek-service-card:hover {
	transform: scale(1.0455);
	background-color: #1E7543;
	z-index: 1;
}

.khek-service-card__icon-wrap {
	position: relative;
	align-self: center;
	color: var(--wp--preset--color--orange);
}

.khek-service-card__icon-wrap svg {
	display: block;
	width: 96px;
	height: 96px;
}

/* Illusztracio-ikonok (a Figma-bol exportalt, reszletes rajzok - a
   Szolgaltatasok sav mind az ot kartyaja ilyet hasznal). A blokk ezekhez csak egy ures
   <span>-t ment el (lasd index.js ILLUSTRATION_ICONS), a rajzot innen, CSS
   mask-image-kent kapjak: igy a 35-70 KB-os path-adat a stiluslap melletti
   fajlban marad (nem kerul bele minden oldal HTML-jebe), a szint viszont -
   ellentetben egy <img>-gel - a "background-color: currentColor" adja,
   tehat oroklodik (a szerkeszto ikonvalasztojaban pl. zoldkent latszik).
   Ugyanaz a megoldas, mint a tema mobil menujenek chevronjanal.
   A doboz merete SZANDEKOSAN minden ikonnal ugyanaz (fix szelesseg +
   kozos "aspect-ratio"), pedig az ot rajz sajat aranya kulonbozo (400x241-tol
   a fekvo "Berelheto helyszinek"-nel a 400x428-as, ALLO "Tarlatvezetes"-ig).
   Ha rajzonkent allitanank az aranyt, a kartyak ikonjai kulonbozo magasak
   lennenek, es a vizszintes savban a cimek nem egy vonalban kezdodnenek.
   A "mask-size: contain" miatt ez nem torzit: minden rajz a sajat aranyat
   tartva, kozepre igazitva ul be a kozos dobozba. */
.khek-service-card__icon-wrap .khek-icon--illustration {
	display: block;
    width: 360px;
    aspect-ratio: 1000 / 756;
	color: var(--wp--preset--color--cream);
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.khek-icon--kutatoszolgalat {
	-webkit-mask-image: url(icons/khek_honlap_ikon_kutatoszolg.svg);
	mask-image: url(icons/khek_honlap_ikon_kutatoszolg.svg);
}

.khek-icon--berelheto-helyszinek {
	-webkit-mask-image: url(icons/khek_honlap_ikon_berelheto.svg);
	mask-image: url(icons/khek_honlap_ikon_berelheto.svg);
}

.khek-icon--muzeumpedagogia {
	-webkit-mask-image: url(icons/khek_honlap_ikon_muzped.svg);
	mask-image: url(icons/khek_honlap_ikon_muzped.svg);
}

.khek-icon--tarlatvezetes {
	-webkit-mask-image: url(icons/khek_honlap_ikon_tarlatvez.svg);
	mask-image: url(icons/khek_honlap_ikon_tarlatvez.svg);
}

.khek-icon--kolcsonozheto-kiallitasok {
	-webkit-mask-image: url(icons/khek_honlap_ikon_kolcsonozheto.svg);
	mask-image: url(icons/khek_honlap_ikon_kolcsonozheto.svg);
}

/* A szerkeszto ikonvalasztojaban (Popover, tehat a kartyan KIVUL renderelodik)
   a valaszthato ikonok 24px-esek - az illusztraciok itt a gomb sajat
   (zold) szinet veszik fel, igy a vilagos hatteren is jol lathatoak. */
.khek-service-card__icon-option .khek-icon--illustration {
	display: block;
	/* A "width: auto" azert kell, hogy a fenti (kartyara szant) 360px semmikepp
	   ne szivarogjon ide be - a Popover ugyan portalkent, a kartyan KIVUL
	   renderelodik, de ha egy jovobeli WP-verzio megis a helyen hagyna, a
	   valaszto racsa szetesne. */
	width: auto;
	height: 24px;
	/* Ugyanaz a kozos doboz-arany, mint a kartyan (lasd feljebb). */
	aspect-ratio: 1000 / 756;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Szerkesztoben az ikon egy gombba van csomagolva (ikonvalaszto) - a
   "display: block" azert kell, hogy a gomb doboza pontosan az ikon merete
   legyen: inline-block-kent a sorvonalon ulne, es a betuk alavagasanak
   (descender) helye ~9px-rel magasabbra nyomta volna a kartya tartalmat,
   mint a frontenden. */
.khek-service-card__icon-btn {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	line-height: 0;
}

.khek-service-card__icon-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 4px;
	padding: 8px;
}

.khek-service-card__icon-option {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	border: 1px solid transparent;
	border-radius: 4px;
	background: none;
	cursor: pointer;
	color: var(--wp--preset--color--green);
}

.khek-service-card__icon-option:hover,
.khek-service-card__icon-option.is-selected {
	border-color: var(--wp--preset--color--green);
	background-color: var(--wp--preset--color--cream);
}

/* A cimsor (h3) alapertelmezetten kap egy also szegelyt a temaban (theme.json
   elements.h3.border) - itt sem normal, sem hover allapotban nem kell. */
.khek-service-card__title {
	margin: 10px 0 0;
	flex-grow: 1;
	font-size: 26px;
	font-weight: 700;
	color: var(--wp--preset--color--cream);
	border-bottom: none;
}

/* A ".khek-service-card__title-link" a szerkesztobeli megfeleloje a frontendi
   <a>-nak (lasd index.js edit()): ugyanaz az elrendezes, csak nem link -
   igy a cim szelessege, tordelese es a nyil helye a ket nezetben azonos. */
.khek-service-card__title a,
.khek-service-card__title-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}

/* "Stretched link": a link ::after-je a legkozelebbi pozicionalt ostol
   (.khek-service-card, position:relative) veszi a merketet, igy a link
   kattinthato/hover terulete a teljes kartyara kiterjed, nem csak a
   cimsor szovegere - maga a markup (a linknek csak a cim korul kell
   maradnia a RichText/save miatt) nem valtozik. */
.khek-service-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Csak a szerkesztoben letezo, link-szerkeszto gomb. Szandekosan KIVUL van a
   tartalom folyamabol (abszolut, a kartya sarkaban): ha - mint korabban - a
   cimsorral egy flex-sorban allna, elvenne a cim szelessegebol, es a cim mas
   helyen tordelodne, mint a frontenden. A kartya "position: relative"
   (lasd feljebb), tehat ehhez igazodik. */
.khek-service-card__link-btn {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
	flex-shrink: 0;
	color: var(--wp--preset--color--cream);
}

.khek-service-card__desc {
	margin: 20px 0 0;
	font-size: 18px;
}

/* 1024px alatt (lasd services/style.css - itt valt a szulo __row lapozobol
   mozaik-racsca) a kartya a Figma mobil terv (grafika/Landing - mobile1)
   szerint negyzetes, kozepre rendezett ikon+cim csempe - leiras es nyil
   nelkul (a reszletek csak a desktop lapozon jelennek meg). Az
   "aspect-ratio:1/1" biztositja a negyzet alakot barmilyen (a racs-oszlop
   szelessege altal meghatarozott) tenyleges kartyaszelesseg mellett is,
   igy nincs szukseg fix pixelmeretre. */
@media (max-width: 1024px) {
	.khek-service-card {
		aspect-ratio: 1 / 1;
		/* A "width: 100%" NEM felesleges a racs-oszlop mellett: a sorban levo
		   kartyak egyforma magassagat a szulo "align-items: stretch"-e adja
		   (lasd services/style.css), ez viszont definitte teszi a MAGASSAGOT -
		   es ilyenkor az aspect-ratio a szelesseget szamolna belole vissza,
		   vagyis a kartya kilogna a sajat oszlopabol (pl. 264px-es oszlopban
		   295px szeles lett). Ha mindket tengely definit, az aspect-ratio mar
		   nem szol bele egyikbe sem; a negyzetes forma viszont megmarad
		   also hatarkent, mert a sor magassagat tovabbra is a kartya
		   arany-alapu (vagyis a szelessegevel egyezo) magassaga hatarozza
		   meg - kiveve, ha valamelyik kartya tartalma ennel magasabb. */
		width: 100%;
		padding: 24px 16px;
		/* A kartya sajat szelessegehez kotott (container query) meretezes
		   alapja: a benne levo ikon/cim "cqw" egysegben van megadva (lasd
		   lejjebb), igy a betumeret a hasabvaltasoknal (3 -> 2 -> 1 oszlop)
		   automatikusan kovet, kulon toresponti ertekek nelkul. Fontos, hogy
		   a "cqw" MINDIG a legkozelebbi OS-kontenerre vonatkozik, sosem az
		   elem sajatjara - ezert kell a container-type ide (a kartyara), az
		   ertekek pedig a gyerekeire. */
		container-type: inline-size;
		align-items: center;
		/* A tartalom (ikon + cim) a kartya TETEJEHEZ igazodik, nem fuggolegesen
		   kozepre. Igy az egy sorban levo, azonos magassagu kartyakon
		   (lasd services/style.css "align-items: stretch") az ikonok es a
		   cimek is egy vonalban kezdodnek akkor is, ha az egyik cim ket
		   sorba tordelodik - a maradek hely a kartya aljara kerul. */
		justify-content: flex-start;
		text-align: center;
		gap: 14px;
		/* Grid-elemkent alapertelmezetten "min-width:auto" - ez a nagyobb
		   (22px-es) cim-szoveg intrinsic szelessegenel fogva a kartyat (es
		   vele a racs-oszlopot) tulnyomta volna a sajat keretén, ahelyett
		   hogy tobb sorba tordelodott volna (lasd "Tárlatvezetés" egy
		   szoban). A min-width:0 engedi a zsugorodast/tordelest. */
		min-width: 0;
	}

	.khek-service-card__icon-wrap svg {
		width: 220px;
		height: 220px;
	}

	/* Az illusztracio-ikonokat - ahogy asztali nezetben is (lasd feljebb,
	   "width: 360px") - a SZELESSEGUK meretezi, a magassagot az
	   "aspect-ratio" szamolja. Fontos, hogy itt is a width-et allitsuk:
	   ha csak a magassagot irnank felul, az alap szabaly 360px-es
	   szelessege mobilon is ervenyben maradna, es az ikon (a keskeny
	   racs-kartyaknal tobbszor szelesebb doboz) szetfeszitene a csempet. */
	.khek-service-card__icon-wrap .khek-icon--illustration {
		width: 220px;
	}

	.khek-service-card__title {
		margin-top: 0;
		font-size: 22px;
		/* Az orokolt (desktop) "flex-grow:1" itt a felso igazitassal
		   (justify-content: flex-start a szulon) utkozne: a cim a maradek
		   fuggoleges helyet toltene ki, nem a sajat tartalmahoz igazodna,
		   vagyis az ikon+cim csoport szetesne a kartya aljaig. */
		flex-grow: 0;
		/* A szulo ".khek-service-card" "align-items:center"-je miatt (fentebb)
		   a cim alapertelmezetten NEM nyulik a rendelkezesre allo szelessegre,
		   hanem a sajat (tordeletlen) tartalmahoz igazodik ("fit-content") -
		   igy a break-word soha nem lepne mukodesbe, a cim egyszeruen
		   kilogna a kartyabol. A "stretch" + "width:100%" + "min-width:0"
		   visszaadja neki a teljes szelesseget, hogy legyen mihez tordelnie. */
		align-self: stretch;
		width: 100%;
		min-width: 0;
		/* Az egy szobol allo, hosszabb cimek (pl. "Tárlatvezetés") nagyon
		   szuk (pl. 320px-es) kijelzon mar nem fernek ki a racs-oszlop
		   sajat szelessegebe torestordeles nelkul - ekkor csordulnának ki
		   a kartyabol. A break-word engedi a sortorest a szo belsejeben is,
		   ha mashogy nem fer ki. */
		overflow-wrap: break-word;
	}

	/* A nyil-ikon (lasd lejjebb) elrejtese utan mar nincs ket egymas melle
	   rendezendo elem a linken belul - az orokolt "display:flex"
	   (desktop, ikon+szoveg egy sorban) itt csak felesleges bonyodalom:
	   a hosszu, egy szobol allo cimek (pl. "Tárlatvezetés") flex-item
	   kontextusban nem akartak tordelodni a break-word ellenere sem
	   (Chromium-sajatossag). Sima blokk-elrendezesben a szovegtordeles
	   megbizhatoan mukodik. */
	.khek-service-card__title a,
	.khek-service-card__title-link {
		display: block;
		min-width: 0;
	}

	.khek-service-card .khek-icon-wrap,
	.khek-service-card__desc {
		display: none;
	}

	/* A racs hasabvaltasainal (1024-641px: 3, 640-550px: 2, 550px alatt 1
	   oszlop - lasd services/style.css) a kartya szelessege ugrik, es vele
	   az IKON merete is kovesse. Toresponti fix ertekek helyett a kartya
	   SAJAT szelessegehez kotjuk (container query egyseg): az ikon annak
	   ~36%-a, igy minden koztes szelessegnel is folyamatosan skalazodik.
	   A clamp felso hatara szandekosan pont a fenti fix ertek (220px), tehat
	   a legszelesebb kartyakon (3 oszlop 1024px-en, ill. az egy hasabos mobil
	   nezet) valtozatlan a megjelenes, csak a keskenyebb kartyakon csokken;
	   az also hatar (80px) pedig a 320px-es kijelzon is aranyos marad.
	   A CIM (h3) szandekosan NEM skalazodik: a tema minden h3-a fix meretu
	   (lasd themes/khek/theme.json "calc(26px)"-es megjegyzeset a
	   themes/khek/style.css vegen), itt a racs-nezet fix 22px-e ervenyes.
	   Az @supports azert kell, hogy a "cqw"-t nem ismero bongeszokben a
	   fenti fix 220px maradjon ervenyben. */
	@supports (width: 1cqw) {
		.khek-service-card__icon-wrap svg {
			width: clamp(80px, 88cqw, 220px);
			height: clamp(80px, 88cqw, 220px);
		}

		.khek-service-card__icon-wrap .khek-icon--illustration {
			width: clamp(80px, 88cqw, 220px);
		}
	}
}

/* 1024-641px kozott (a HAROM oszlopos sav, lasd services/style.css) a cim
   betumerete a kartya szelessegevel ARANYOSAN csokkenjen, ne legyen fix 22px.
   A "cqw" a legkozelebbi OS-kontener (a kartya, lasd feljebb "container-type:
   inline-size") szelessegehez viszonyit, tehat pontosan a kartyat koveti, nem
   a viewportot.
   FIGYELEM a kalibralasnal: a "cqw" a kontener CONTENT BOX-ahoz mer, vagyis a
   2*16px-es vizszintes padding NELKUL. A sav felso vegen (1024px-es nezet) a
   kartya 310,7px szeles, a content box tehat 278,7px - innen jon a
   22 / 278,7 = 7,9%. (A kartya teljes szelessegevel szamolva 7,2% jott volna
   ki, ami meresnel csak 20px-es cimet adott.)
   Clamp() szandekosan nincs rajta: a sav ket vege maga korlatozza az erteket
   (1024px-nel 22px, 641px-nel ~11,9px), es barmilyen also hatar eppen az
   aranyossagot rontana el. 640px alatt (ket, majd egy oszlop) ismet a fix
   22px ervenyes, mert ott a kartya ujra szelesebb.
   Ez a szabaly a fenti "@media (max-width: 1024px)" blokk UTAN all, igy
   azonos specificitas (0,1,0) mellett is ez nyer. Ha a bongeszo nem ismeri a
   "cqw"-t, csak ez az egy deklaracio esik ki, es marad a fix 22px. */
@media (min-width: 641px) and (max-width: 1024px) {
	.khek-service-card__title {
		font-size: 7.9cqw;
	}
}

/* 640-550px kozott (KET oszlop) ugyanez az elv, sajat kalibralassal: a sav
   felso vegen (640px-es nezet) a kartya 282px szeles, a content box tehat
   250px - innen a 22 / 250 = 8,8%. A sav aljan (550px) ez ~18px-et ad. */
@media (min-width: 550px) and (max-width: 640px) {
	.khek-service-card__title {
		font-size: 8.8cqw;
	}
}

/* 549px alatt (EGY oszlop) a kartya majdnem teljes szelessegu, ezert itt a
   tiszta aranyossag elszallna: 549px-es nezetben a kartya 489px szeles
   (content box 457px), aminel a fenti 8,8% mar ~40px-es cimet adna - a
   desktop kartyan is csak 26px van. A "min(..., 22px)" ezert felso hatarkent
   megtartja a terv szerinti 22px-et, es a betumeret CSAK ott kezd csokkenni,
   ahol a kartya tenylegesen szuk lesz (kb. 342px-es nezettol lefele, pl.
   320px-en ~20px). Az arany (8,8%) szandekosan ugyanaz, mint a ket oszlopos
   savban, hogy a hasabvaltasnal ne ugorjon a "suruseg". */
@media (max-width: 549px) {
	.khek-service-card__title {
		font-size: min(8.8cqw, 22px);
	}
}

/* 549px alatt (EGY oszlop) a tartalom fuggolegesen KOZEPRE kerul a kartyan.
   Feljebb (2-3 oszlopos racs) szandekosan felso igazitas van, hogy az egy
   sorban levo, azonos magassagu kartyakon az ikonok es a cimek egy vonalban
   kezdodjenek - egy hasabnal viszont nincs mihez igazodni: ott minden kartya
   egyedul all a sajaban soraban, es a negyzetes kartya aljan maradna nagy
   ures folt. */
@media (max-width: 549px) {
	.khek-service-card {
		justify-content: center;
	}
}