.khek-services {
	background-color: var(--wp--preset--color--cream);
	/* margin: 0 !important; */
}

.khek-services__inner {
	padding: 80px 0 100px 200px;
}

/* A ".khek-band-inner" (temaban, style.css) 1600px-es max-width-je es
   ehhez tartozo auto-margoi (a 2000px feletti kozeprevetellel egyutt)
   masutt (pl. Helyszinek) tartalmi oszlopkent hasznalt, itt viszont a
   __inner ugyanezt a class-t is hordozza (khek-band-inner), pedig a
   savnak (ahogy a __row/__viewport lapozoja is) a bongeszo tenyleges
   jobb szeleig kell futnia. 1600px felett ezert korabban jobb oldalon
   ures resz maradt, 2000px felett pedig (a kozeprevetelo margo-auto
   miatt) a bal oldali behuzas is elcsuszott. Ket osztaly (0,2,0)
   kell a temabeli egy-osztalyos (0,1,0) szabaly biztos felulirasahoz,
   fuggetlenul a betoltesi sorrendtol. */
.khek-services__inner.khek-band-inner {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

@media (max-width: 2000px) {
	.khek-services__inner {
		padding-left: 200px;
	}
}

/* 2000px felett a bal oldali behuzasnak a Programok savval (lasd
   program-slider/style.css, ugyanaz a megjegyzes) megegyezoen tovabb
   kellene nonie a kepernyovel egyutt - a Programok ezt onnan kapja, hogy
   a ".khek-band-inner" 1600px-es max-szelessege korulotte kozeprevetel
   folytan pont ekkora (fele-fele) auto-margot ad. Nalunk viszont (feljebb)
   a max-width mar none, a margok 0-k, hogy a JOBB oldal a bongeszo
   tenyleges szeleig fusson (ne a Programok modjara 1600px-nel megalljon,
   kozeperevetelen) - emiatt a bal oldalt kulon, kepletileg kell
   ugyanerre az ertekre huznunk: (viewport-1600px)/2 = 50vw - 800px,
   ami pontosan annyi, amennyit a Programok margo-auto-ja adna. */
@media (min-width: 2000px) {
	.khek-services__inner {
		padding-left: calc(50vw - 800px);
	}
}

@media (max-width: 1024px) {
	.khek-services__inner {
		padding-left: 100px;
	}
}

.khek-services__heading {
	margin: 0 0 41px;
	color: var(--wp--preset--color--green);
	font-size: 36px;
}

/* Az overflow-x:auto miatt a specifikacio szerint az overflow-y is "auto"-ra
   valt (ket tengelyen nem lehet az egyik visible, a masik nem) - enelkul a
   padding/negativ margo nelkul a kartyak hoverre valo fuggoleges "kinovese"
   (lasd service-card/style.css :hover transform:scale-je) a viewport szelenel
   levagodna. A plusz fuggoleges hely a __row-on levo azonos merteku negativ
   margoval kompenzalodik, hogy a szekcio teljes magassaga ne valtozzon. */
.khek-services__viewport {
	overflow-x: auto;
	padding: 20px 0 20px 10px;
	margin-left: -10px;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
}

.khek-services__viewport::-webkit-scrollbar {
	display: none;
}

.khek-services__viewport.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	user-select: none;
}

.khek-services__row {
	display: flex;
	gap: 25px;
	width: fit-content;
	padding-right: 128px;
	margin-left: -10px;
	padding-left: 10px;
}

.khek-services__row a,
.khek-services__row img {
	-webkit-user-drag: none;
	user-select: none;
}

/* Lapozo pottyok: szamukat a view.js szamolja ki futasidoben, a tenyleges
   kilogo tartalom (viewport-nyi "oldalak") alapjan - ha minden kartya
   latszik egyszerre, csak 1 pottyot renderel. */
.khek-services__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--80);
}

.khek-services__dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.khek-services__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--green);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.khek-services__dot.is-active {
	background: var(--wp--preset--color--green);
}

/* 1024px alatt a Figma mobil terv (grafika/Landing -
   mobile1) szerint a kartyak nem vizszintesen gorgetheto lapozokent (mint
   desktopon), hanem "mozaik" racskent jelennek meg (1024-641px: harom
   oszlop, 640-550px: ket oszlop, 550px alatt egy oszlop - lasd a ket
   szukebb toresopontot lejjebb) - igy a
   __viewport-nak/__row-nak mar nincs szuksege a lapozashoz hasznalt
   vizszintes tulcsordulasra/negativ margokra, a __nav (pottyok) pedig
   feleslegesse (elrejtendo) valik. A jobb oldali padding is 0-rol a bal
   oldalival egyezo 30px-re valt, hogy a racs szimmetrikusan legyen behuzva
   (a lapozonal a 0 jobb padding szandekos volt, hogy az utolso kartya a
   kepernyo szeleig gorgetheto legyen). A szabalynak a MEGFELELO alap
   szabalyok UTAN kell allnia a fajlban - kulonben (azonos specificitas
   mellett) a kesobb allo, feltetel nelkuli alap szabalyok (__viewport,
   __row, __nav feljebb) irnak felul minket minden meretnel, nem forditva. */
@media (max-width: 1024px) {
	.khek-services__inner {
		padding-left: 30px;
		padding-right: 30px;
	}

	.khek-services__viewport {
		overflow-x: visible;
		padding: 0;
		margin-left: 0;
		cursor: default;
	}

	.khek-services__row {
		display: grid;
		/* "1fr" onmagaban nem engedne az oszlopot a tartalom (pl. a hosszabb,
		   egy szoban allo cimek, mint "Tárlatvezetés") sajat max-content
		   szelessege ala zsugorodni - emiatt csordult volna ki a kartya a
		   racsbol keskeny kijelzon torestordeles helyett. A minmax(0, 1fr)
		   engedi a tenyleges zsugorodast/tordelest. */
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
		/* Egy sorban minden kartya EGYFORMA magas legyen. Az alapertelmezett
		   "align-items: normal" ezt nem adja meg: a CSS Align szerint a
		   "normal" a racs-elemeknel ugyan "stretch"-kent viselkedik, DE az
		   aranyt hordozo (aspect-ratio-s) elemeknel "start"-kent - eppen
		   azert, hogy megorizze az aranyt. A kartya pedig 1024px alatt
		   "aspect-ratio: 1/1"-es (lasd service-card/style.css), ezert a
		   rovidebb (egysoros cimu) kartyak a negyzetes magassagukon
		   maradtak, mig a ketsoros cimuek magasabbra nottek.
		   Az EXPLICIT "stretch" felulirja ezt: a kartya magassaga a sor
		   magassaga lesz (vagyis a legmagasabb kartyae), az aspect-ratio
		   pedig ilyenkor mar nem szamit. A negyzetes forma igy is megmarad
		   mindaddig, amig egyik kartya tartalma sem magasabb nala. */
		align-items: stretch;
		width: auto;
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
	}

	.khek-services__nav {
		display: none;
	}
}

/* 640px alatt a harom oszlop mar tul szuk (a negyzetes kartyakon a hosszabb,
   egy szoban allo cimek, pl. "Tárlatvezetés", tobb sorba tordelodnenek) -
   itt ket oszlopra valtunk. A fenti (1024px-es) blokk UTAN kell allnia,
   hogy a szukebb toresopont felulirja a szelesebbet (azonos specificitas,
   kesobbi szabaly nyer). */
@media (max-width: 640px) {
	.khek-services__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 550px alatt (a tema sajat "kis mobil" toresopontja, lasd themes/khek/style.css
   --wp--style--root--padding-*-jet, ami 549px-nel valt) a ket oszlopos mozaik
   mar tul szuk oszlopokat adna - itt egy hasabra (teljes szelessegu
   kartyakra) valtunk. A fenti (640px-es) blokk UTAN kell allnia, hogy a
   szukebb toresopont felulirja a szelesebbet. */
@media (max-width: 549px) {
	.khek-services__row {
		grid-template-columns: 1fr;
	}
}