/**
 * MS Mosaic Slider – style.
 *
 * Rząd o stałej wysokości (--ms-mosaic-row), w nim slajdy o własnej skali
 * i pozycji w pionie. Szerokość slajdu wynika z proporcji obrazka.
 *
 * Wysokość rzędu i odstęp można nadpisać w motywie:
 *   .ms-mosaic { --ms-mosaic-row: clamp(260px, 36vw, 520px); --ms-mosaic-gap: 24px; }
 */

.ms-mosaic {
	--ms-mosaic-row: clamp(220px, 32vw, 460px);
	--ms-mosaic-gap: 20px;
	position: relative;
	overflow: hidden; /* ucina ostatni slajd na prawej krawędzi kontenera */
	touch-action: pan-y; /* pion przewija stronę, poziom obsługuje slider */
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}

.ms-mosaic.ms-mosaic-dragging {
	cursor: grabbing;
}

.ms-mosaic:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Rząd: przed startem JS sam kontener, po starcie taśma – ten sam układ, nic nie skacze */
.ms-mosaic:not(.ms-mosaic-ready),
.ms-mosaic .ms-mosaic-track {
	display: flex !important;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--ms-mosaic-gap);
	height: var(--ms-mosaic-row);
}

.ms-mosaic .ms-mosaic-track {
	width: max-content;
	will-change: transform;
}

/* Slajd – szerokość z obrazka; marginesy zerowane wprost
   (flow-layout WP dokleja margin-block-start od 2. dziecka). */
.ms-mosaic:not(.ms-mosaic-ready) > *,
.ms-mosaic .ms-mosaic-slide {
	flex-shrink: 0;
	width: auto;
	height: auto;
	margin: calc(var(--ms-mosaic-row) * var(--ms-mosaic-y, 0)) 0 0 0 !important;
}

.ms-mosaic:not(.ms-mosaic-ready) > * img,
.ms-mosaic .ms-mosaic-slide img {
	display: block;
	height: calc(var(--ms-mosaic-row) * var(--ms-mosaic-h, 1)) !important;
	width: auto !important;
	max-width: none !important;
	margin: 0;
	pointer-events: none; /* przeciąganie łapie kontener, nie obrazek */
}

/* ------------------------------------------------------------
   Klasy na bloku obrazka (Zaawansowane → Dodatkowe klasy CSS).
   Arkusz zna wartości co 5 (układ od pierwszej klatki); każdą
   inną liczbę, np. ms-mosaic-y-33, ustawia JS.
   ------------------------------------------------------------ */

/* Wysokość slajdu jako % wysokości rzędu (domyślnie 100%) */
.ms-mosaic .ms-mosaic-h-30 { --ms-mosaic-h: 0.3; }
.ms-mosaic .ms-mosaic-h-35 { --ms-mosaic-h: 0.35; }
.ms-mosaic .ms-mosaic-h-40 { --ms-mosaic-h: 0.4; }
.ms-mosaic .ms-mosaic-h-45 { --ms-mosaic-h: 0.45; }
.ms-mosaic .ms-mosaic-h-50 { --ms-mosaic-h: 0.5; }
.ms-mosaic .ms-mosaic-h-55 { --ms-mosaic-h: 0.55; }
.ms-mosaic .ms-mosaic-h-60 { --ms-mosaic-h: 0.6; }
.ms-mosaic .ms-mosaic-h-65 { --ms-mosaic-h: 0.65; }
.ms-mosaic .ms-mosaic-h-70 { --ms-mosaic-h: 0.7; }
.ms-mosaic .ms-mosaic-h-75 { --ms-mosaic-h: 0.75; }
.ms-mosaic .ms-mosaic-h-80 { --ms-mosaic-h: 0.8; }
.ms-mosaic .ms-mosaic-h-85 { --ms-mosaic-h: 0.85; }
.ms-mosaic .ms-mosaic-h-90 { --ms-mosaic-h: 0.9; }
.ms-mosaic .ms-mosaic-h-95 { --ms-mosaic-h: 0.95; }

/* Odsunięcie od góry jako % wysokości rzędu */
.ms-mosaic .ms-mosaic-y-5 { --ms-mosaic-y: 0.05; }
.ms-mosaic .ms-mosaic-y-10 { --ms-mosaic-y: 0.1; }
.ms-mosaic .ms-mosaic-y-15 { --ms-mosaic-y: 0.15; }
.ms-mosaic .ms-mosaic-y-20 { --ms-mosaic-y: 0.2; }
.ms-mosaic .ms-mosaic-y-25 { --ms-mosaic-y: 0.25; }
.ms-mosaic .ms-mosaic-y-30 { --ms-mosaic-y: 0.3; }
.ms-mosaic .ms-mosaic-y-35 { --ms-mosaic-y: 0.35; }
.ms-mosaic .ms-mosaic-y-40 { --ms-mosaic-y: 0.4; }
.ms-mosaic .ms-mosaic-y-45 { --ms-mosaic-y: 0.45; }
.ms-mosaic .ms-mosaic-y-50 { --ms-mosaic-y: 0.5; }
.ms-mosaic .ms-mosaic-y-55 { --ms-mosaic-y: 0.55; }
.ms-mosaic .ms-mosaic-y-60 { --ms-mosaic-y: 0.6; }
.ms-mosaic .ms-mosaic-y-65 { --ms-mosaic-y: 0.65; }
.ms-mosaic .ms-mosaic-y-70 { --ms-mosaic-y: 0.7; }

/* Wyrównanie w pionie (domyślnie do góry) */
.ms-mosaic .ms-mosaic-middle { align-self: center; }
.ms-mosaic .ms-mosaic-bottom { align-self: flex-end; }