/*
 * mc-slider.css — slider galerii `core/gallery` z klasa `mc-slider` (kadence-child, M4 E9).
 * Ladowany tylko na froncie i tylko na stronach z `mc-slider` w tresci (inc/feature-slider.php),
 * razem z assets/js/mc-slider.js. W edytorze galeria zostaje zwykla kolumna obrazow (do edycji).
 *
 * Geometria jak flexslider Bridge na PROD /features/ (Playwright 2026-10-31):
 * kadr = szerokosc kolumny (535 px przy 1440, 300 px przy 390), kropki 50 px pod obrazem
 * (pas 26 px, kropka 9 px, srodki co 18 px, aktywna #303030, pozostale #cfcfcf),
 * strzalki 42 x 42 px 15 px od krawedzi, szary szewron #8a8a8a, 60 px do nastepnej sekcji
 * (statyczny kadr M3c mial w zamian margin-bottom 136 = 50 + 26 + 60).
 */

/* Specyficznosc ponad `body .entry-content .mc-rhythm :where(.wp-block-column, …) > *` (minthcm-core.css,
   margin-block 0) — bez tego 60 px pod sliderem znikalo. */
.entry-content .mc-slider__frame {
	position: relative;
}

body .entry-content .mc-rhythm .wp-block-column > .mc-slider__frame,
body .entry-content .mc-rhythm .wp-block-column > .wp-block-gallery.mc-slider {
	margin: 0 0 60px;
}

/* Galeria w ramce slidera (JS, >= 2 obrazy): margines ma ramka. Galeria z 1 obrazem albo bez JS
   (bez ramki) zostaje z 60 px wyzej. */
body .entry-content .mc-rhythm .wp-block-column > .mc-slider__frame > .wp-block-gallery.mc-slider {
	margin: 0;
}

/* Przewijanie: scroll-snap, jeden kadr na szerokosc. :not(#individual-image) = specyficznosc
   regul core gallery (block-library), ktore inaczej wygrywaja szerokoscia i flex-wrap. */
.entry-content .wp-block-gallery.has-nested-images.mc-slider {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 0;
	margin: 0;
	padding: 0;
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
}

/* Pasek przewijania ukryty tylko, gdy JS dal strzalki i kropki (klasa mc-slider--js) — bez JS
   pasek zostaje, zeby mysza mogla dojsc do slajdu 2+. */
.entry-content .wp-block-gallery.has-nested-images.mc-slider.mc-slider--js {
	scrollbar-width: none;
}

.entry-content .wp-block-gallery.has-nested-images.mc-slider.mc-slider--js::-webkit-scrollbar {
	display: none;
}

.entry-content .wp-block-gallery.has-nested-images.mc-slider figure.wp-block-image:not(#individual-image) {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	margin: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.entry-content .wp-block-gallery.has-nested-images.mc-slider figure.wp-block-image:not(#individual-image) img {
	display: block;
	width: 100%;
	height: auto;
}

@media (prefers-reduced-motion: no-preference) {
	.entry-content .wp-block-gallery.has-nested-images.mc-slider {
		scroll-behavior: smooth;
	}
}

/* Strzalki: na srodku obrazu (ramka = obraz + 50 + 26 kropek). */
.entry-content .mc-slider__frame > .mc-slider__prev,
.entry-content .mc-slider__frame > .mc-slider__next {
	position: absolute;
	top: calc((100% - 76px) / 2 - 21px);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 32px;
	background: transparent;
	color: #8a8a8a;
	box-shadow: none;
	cursor: pointer;
}

.entry-content .mc-slider__frame > .mc-slider__prev {
	left: 15px;
}

.entry-content .mc-slider__frame > .mc-slider__next {
	right: 15px;
}

.entry-content .mc-slider__frame > .mc-slider__prev:hover,
.entry-content .mc-slider__frame > .mc-slider__next:hover,
.entry-content .mc-slider__frame > .mc-slider__prev:focus-visible,
.entry-content .mc-slider__frame > .mc-slider__next:focus-visible {
	color: #303030;
	background: rgba(255, 255, 255, 0.6);
}

.entry-content .mc-slider__frame button:focus-visible {
	outline: 2px solid #009976;
	outline-offset: 2px;
}

/* Kropki: pas 26 px, 50 px pod obrazem. Przycisk 18 x 26 px (cel klikniecia), kropka 9 px u gory. */
.entry-content .mc-slider__dots {
	display: flex;
	justify-content: center;
	height: 26px;
	margin: 50px 0 0;
}

.entry-content .mc-slider__dots > .mc-slider__dot {
	position: relative;
	width: 18px;
	height: 26px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
}

.entry-content .mc-slider__dots > .mc-slider__dot::before {
	content: "";
	position: absolute;
	top: 0;
	left: 4.5px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #cfcfcf;
}

.entry-content .mc-slider__dots > .mc-slider__dot[aria-current="true"]::before,
.entry-content .mc-slider__dots > .mc-slider__dot:hover::before {
	background: #303030;
}

/* Link slajdu do powiekszenia (linkTo: media, obraz 1024x640 jak href PROD). */
.entry-content .wp-block-gallery.has-nested-images.mc-slider figure.wp-block-image:not(#individual-image) > a {
	display: block;
	width: 100%;
	cursor: zoom-in;
}

/* Powiekszenie (E9 r3): natywny <dialog> z mc-slider.js, obraz najwyzej 1024 px i 90 % okna. */
dialog.mc-lightbox {
	box-sizing: border-box;
	max-width: min(1024px, 92vw);
	max-height: 92vh;
	margin: auto;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

dialog.mc-lightbox::backdrop {
	background: rgba(0, 0, 0, 0.85);
}

dialog.mc-lightbox .mc-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 88vh;
	width: auto;
	height: auto;
}

dialog.mc-lightbox .mc-lightbox__close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #fff;
	font: 400 34px/40px Barlow, sans-serif;
	cursor: pointer;
}

dialog.mc-lightbox .mc-lightbox__close:focus-visible {
	outline: 2px solid #63c29a;
	outline-offset: 2px;
}