.khek-program-slider {
	position: relative;
	box-sizing: border-box;
	background-color: var(--wp--preset--color--green);
	color: var(--wp--preset--color--cream);
}



.khek-program-slider__inner {
	padding: 80px 0 100px;
}

/* Bal oldali behuzas sajat, negy-lepcsos szabaly szerint (a
   .khek-program-slider sajat, altalanos gyoker-paddingja nullazva -
   lasd themes/khek/style.css). 2000px felett nincs kulon padding (a
   khek-band-inner 1600px-es max-szelessege onmagaban is tobb, mint
   ennyi kozepre-igazito teret ad), lejjebb 200px, majd a tobbi blokkal
   megegyezo tovabbi ket lepcso (1024px: 100px, 550px: 30px). */
@media (max-width: 2000px) {
	.khek-program-slider__inner {
		padding-left: 200px;
	}
}

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

@media (max-width: 550px) {
	.khek-program-slider__inner {
		padding-left: 30px;
	}

	/* A fejlec 550px alatti (oszlopos) elrendezeset lasd lejjebb, a
	   ".khek-program-slider__header" alap szabalya UTAN - ide nem kerulhet,
	   mert az alap szabaly ebben a fajlban KESOBB all, es azonos
	   specificitas mellett az nyerne (az "align-items: center"-t nem tudnank
	   innen felulirni). */
}

/* Hatterszin-valaszto a szerkeszto oldalsavjaban (Beallitasok panel). */
.khek-program-slider__bg-control {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
}

.khek-program-slider__bg-control input[type="color"] {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid #ddd;
	border-radius: 4px;
	cursor: pointer;
}

.khek-program-slider__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 41px;
}

.khek-program-slider__heading {
	margin: 0;
	color: var(--wp--preset--color--cream);
	font-size: 36px;
}

.khek-program-slider__all-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	color: var(--wp--preset--color--cream);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	text-decoration: none;
}

/* A "display: block" a szerkeszto miatt kell: ott a nyil egy plusz <span>-be
   van csomagolva (React nem tud wrapper nelkul nyers SVG-t beszurni), es egy
   inline SVG a sorvonalon ulve ~9px-nyi alavagast (descender) is kerne - a
   link igy 41px magas lett volna a frontendi 32 helyett. A frontenden az SVG
   a link kozvetlen flex-eleme, ott ez nem valtoztat semmin. */
.khek-program-slider__all-link svg {
	display: block;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.khek-program-slider__all-link:hover {
	color: var(--wp--preset--color--orange);
}

/* Csak a szerkesztoben letezo, link-szerkeszto gomb. A "Minden program" sor
   FOLE kerul (a sav 80px-es felso paddingjaba), nem melle: flex-elemkent
   ~42px-et venne el a sortol, es a link a frontenditol elteroen helyezkedne
   el. A viszonyitasi alap a ".khek-program-slider__all-link" sajat
   "position: relative"-je (lasd index.js). */
.khek-program-slider__link-btn {
	position: absolute;
	right: 0;
	bottom: 100%;
	z-index: 2;
	flex-shrink: 0;
	color: var(--wp--preset--color--cream);
}

/* A szerkesztoben a kartyasort (viewport/track/nav) a ServerSideRender adja,
   de a sav es a tartalmi doboz mar korulotte van (lasd index.js) - a
   ServerSideRender sajat, semmilyen stilust nem hordozo <div>-jei igy
   feleslegesen egy plusz blokk-szintet vinnenek az elrendezesbe.
   A "display: contents" ezeket kiveszi a doboz-fabol: a gyerekeik ugy
   viselkednek, mintha kozvetlenul a "__inner" gyerekei lennenek - vagyis
   pontosan ugy, ahogy a frontenden. */
.khek-program-slider__ssr,
.khek-program-slider__ssr > * {
	display: contents;
}

.khek-program-slider__all-link:hover span {
	text-decoration: underline;
}

/* 550px alatt a fejlec ket sorba kerul: felul a cimsor (balra), alatta a
   "Minden program" link (jobbra). Oszlop-iranyban a fo tengely fuggoleges,
   tehat a vizszintes igazitast az align-* adja: a fejlec "align-items:
   flex-start"-ja rakja a cimsort balra, a link sajat "align-self: flex-end"-je
   pedig jobbra. (A "justify-content: space-between" itt mar nem szamit:
   fuggolegesen nincs szabad hely, a magassagot a tartalom adja.)
   FONTOS, hogy ez a blokk a ".khek-program-slider__header" alap szabalya UTAN
   all: a fajl elejen levo tobbi media query-vel egyutt (lasd ott a
   megjegyzest) az "align-items: center"-t nem tudnank felulirni, mert azonos
   specificitas mellett a kesobb allo szabaly nyer.
   Mellekhataskent megszunik a vizszintes tulcsordulas is: a link eddig
   "flex-shrink: 0"-val, a cimsor mellett, ~189px szelesen alt, ami keskeny
   telefonon (390px es lejjebb) kitolta az oldalt a viewportbol. */
@media (max-width: 550px) {
	.khek-program-slider__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.khek-program-slider__all-link {
		align-self: flex-end;
	}
}

.khek-program-slider__viewport {
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
}

.khek-program-slider__viewport::-webkit-scrollbar {
	display: none;
}

.khek-program-slider__viewport.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.khek-program-slider__track {
	display: flex;
	align-items: stretch;
	gap: 25px;
	width: fit-content;
	padding-right: 128px;
}

.khek-program-slider__slide {
	box-sizing: border-box;
	flex: 0 0 340px;
	display: flex;
	flex-direction: column;
	scroll-snap-align: start;
}

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

.khek-program-slider__thumb {
	display: block;
}

/*
 * A kartya kiskepe FIX 16/9-es aranyu, a feltoltott kep sajat aranyatol
 * fuggetlenul ("object-fit: cover" vagja meretre) - igy a lapozo/lista
 * kartyai egyforma magasak, es a cim mindegyiken ugyanabban a magassagban
 * kezdodik. A feltoltott kepek aranya nagyon szoro (allo plakat es fekvo
 * fotó egyarant elofordul), ezert erre nem lehet rabizni az elrendezest.
 *
 * A vagas FELULRE igazitva tortenik ("object-position: top"), nem kozepre.
 * A programkepek tobbsege allo plakat, azokon a cim, a datum es a fo abra
 * felul van - kozepre vagva (ez a bongeszo alapertelmezese) eppen az
 * veszne el, ami alapjan a latogato felismeri a programot.
 *
 * A korabbi ertek 2/1 volt: a 16/9 (1.78) KEVESEBBET vag le, tehat a
 * kepekbol tobb latszik (340px szeles kartyan 170px helyett 191px magas).
 *
 * A "height: auto" azert kell az aspect-ratio MELLE, mert enelkul az
 * <img> sajat "height" attributuma (amit a WP ir ki) prezentacios
 * ertekkent felulirna az aranyt - ugyanaz a csapda, mint a
 * khek/location-cards kepeinél (lasd class-location-cards-block.php).
 */
.khek-program-slider__thumb img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: top;
	display: block;
	border-radius: 6px;
}

.khek-program-slider__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px !important;
	margin: 25px 0 0;
	border-radius: 2px;
}

.khek-program-slider__tag {
	font-size: 12px;
	font-weight: 600;
	padding: 8px;
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--green);
	border-radius: 2px;
	line-height: 1;
	white-space: nowrap;
	margin-bottom: 15px;
}

.khek-program-slider__title {
	margin: 25px 0 8px;
	font-size: 26px;
	line-height: 34px;
	font-weight: 700;
	border-bottom: none;
	padding: 0;
	color: var(--wp--preset--color--cream) !important;
}

.khek-program-slider__title a {
	color: inherit;
	text-decoration: none;
}

.khek-program-slider__title a:hover {
	color: var(--wp--preset--color--orange);
	text-decoration: underline;
}

.khek-program-slider__dates {
	margin: 8px 0 0;
	font-size: 15px !important;
	color: var(--wp--preset--color--cream);
}

.khek-program-slider__excerpt {
	margin: 20px 0 25px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--wp--preset--color--cream);
}

.khek-program-slider__more {
	box-sizing: border-box;
	display: inline-block;
	align-self: flex-start;
	margin-top: auto;
	padding: 0.5rem 1.25rem;	
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--cream);
	border-radius: 4px;
	color: var(--wp--preset--color--cream);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.khek-program-slider__more:hover {
	background-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--green);
}

/* Ures allapot, ha a szures (pl. helyszin/cimke szerinti szukites) mellett
   egyetlen program sem talalhato - a lapozo kartyai/nyilai helyett kozponti
   uzenet + gomb, a zold hatteren, ugyanolyan magassaggal korulbelul, mint
   amikor tenylegesen vannak kartyak. */
.khek-program-slider__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 30px;
	padding: 120px 20px 160px;
	text-align: center;
}

.khek-program-slider__empty-text {
	margin: 0;
	color: var(--wp--preset--color--cream);
	font-size: 22px;
	font-weight: 700;
}

.khek-program-slider__empty-link {
	box-sizing: border-box;
	display: inline-block;
	padding: 0.5rem 1.25rem;
	border: 2px solid transparent;
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--cream);
	border-radius: 4px;
	color: var(--wp--preset--color--cream);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.khek-program-slider__empty-link:hover {
	background-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--green);
}

.khek-program-slider__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--80);
}

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

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

.khek-program-slider__dot.is-active {
	background: var(--wp--preset--color--cream);
}