.khek-photo-slider {
	position: relative;
	overflow: hidden;
	height: 800px;
}

/* 1024px alatt a fix 800px magassag mar tul nyujtott, keskeny savot adna -
   itt a 700x550-es Figma-aranyra valtunk. A "height:auto" kell, mert
   explicit "height" mellett az aspect-ratio onmagaban nem ervenyesulne
   (a mar definialt magassag nyerne). */
@media (max-width: 1024px) {
	.khek-photo-slider {
		height: auto;
		aspect-ratio: 700 / 550;
	}
}

.khek-photo-slider__track {
	display: flex;
	height: 100%;
	transition: transform 0.5s ease;
}

.khek-photo-slider__slide {
	flex: 0 0 100%;
	height: 100%;
}

.khek-photo-slider__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.khek-photo-slider__nav {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 80px !important;
	bottom: var(--wp--preset--spacing--30);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
}

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

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

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

/* SZERKESZTO: a lapozo maga ugyanugy nez ki, mint a frontenden (lasd
   index.js) - a kepkezelo (feltoltes, sorrend, torles) egy fel-atlatszo
   savban, a lapozo TETEJERE ultetve jelenik meg. Azert abszolut, hogy a kep
   vegleges (800px-es, ill. 1024px alatt 700/550 aranyu) meretebol semmit ne
   vegyen el: korabban a kiskep-racs a tartalom folyamaban allt, es a lapozo
   helyen egy nagy ures folt maradt. Es azert FELUL, mert a lapozo pontsora
   (".khek-photo-slider__nav") a lenti savban van - ott a ket elem takarna
   egymast. */
.khek-photo-slider__editor-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 2;
	padding: 12px;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(2px);
}

.khek-photo-slider__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--wp--preset--spacing--20);
	/* Sok kepnel se nojon a sav a lapozo fele reszenel magasabbra. */
	max-height: 216px;
	overflow-y: auto;
}

.khek-photo-slider__grid-item {
	position: relative;
	flex: 0 0 160px;
	cursor: grab;
	/* A pointer capture-alapu hurcolashoz (lasd index.js) ne az erintos
	   gorgetes vigye el a pointer-t, hanem a sajat kezelonk. */
	touch-action: none;
}

.khek-photo-slider__grid-item.is-dragging {
	opacity: 0.4;
	cursor: grabbing;
}

.khek-photo-slider__grid-item.is-drop-target {
	outline: 2px solid var(--wp--preset--color--orange, #f98f3c);
	outline-offset: 2px;
}

.khek-photo-slider__grid-item img {
	display: block;
	width: 100%;
	height: 100px;
	object-fit: cover;
	border-radius: 4px;
}

.khek-photo-slider__remove-btn {
	position: absolute;
	top: 4px;
	right: 4px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	min-width: 24px;
	height: 24px;
	padding: 0;
}

/* Feltoltesi hibauzenetek (fajlonkent) a szerkesztoben. */
.khek-photo-slider__upload-errors {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	color: #cc1818;
	font-size: 13px;
}