/**
 * M16 Slider - style frontu.
 * Model: layout proporcjonalny w jednostkach cqw (container queries), breakpointy w CSS.
 * Zgodnosc: WCAG 2.2 AA (focus, reduced-motion, kontrast sterowania).
 *
 * @package M16_Slider
 */

/* ---------- Reset lokalny (izolacja od stylow motywu) ---------- */
.m16-slider,
.m16-slider * {
	box-sizing: border-box;
}

/* Neutralizacja typowych stylow motywu na elementach semantycznych. */
.m16-slider__track {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.m16-slider h2,
.m16-slider h3 {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	text-transform: none;
}

.m16-slider button {
	outline: none;
	box-shadow: none;
}

.m16-slider {
	position: relative;
	width: 100%;
	margin: 0;
	overflow: hidden;
	background: #000;
	/* Brak zaznaczania tekstu i podswietlenia podczas przeciagania slajdow. */
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	/* Domyslny akcent - nadpisywany przez warstwy. */
	--m16-accent: #d17d40;
	--m16-duration: 600ms;
}

/* Obrazy: bez "ghost" przy przeciaganiu (drag image). */
.m16-slide__media,
.m16-layer img {
	-webkit-user-drag: none;
	user-select: none;
}

/* ---------- Viewport / track / slajdy (fade) ---------- */
.m16-slider__viewport {
	position: relative;
	width: 100%;
	height: 100%;
	/* Pozwala na pionowy scroll strony, a poziomy gest (swipe) trafia do JS. */
	touch-action: pan-y;
}

.m16-slider__track {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

.m16-slider--fullscreen,
.m16-slider--fullscreen .m16-slider__viewport,
.m16-slider--fullscreen .m16-slider__track {
	height: 85svh;
	min-height: 480px;
}

/* Mobile: nizszy slider (mniej pustej przestrzeni pod trescia). */
@media (max-width: 778px) {
	.m16-slider--fullscreen,
	.m16-slider--fullscreen .m16-slider__viewport,
	.m16-slider--fullscreen .m16-slider__track {
		height: 72svh;
		min-height: 540px;
	}
}

.m16-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--m16-duration) ease, visibility 0s linear var(--m16-duration);
	/* Kontekst dla cqw + breakpointow. */
	container: m16slide / inline-size;
}

.m16-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--m16-duration) ease;
	z-index: 1;
}

/* Pierwszy slajd bez fade na starcie (LCP). */
.m16-slider:not(.is-ready) .m16-slide:first-child {
	opacity: 1;
	visibility: visible;
}

/* ---------- Tlo ---------- */
.m16-slide__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* Ciemny overlay - poprawia czytelnosc tekstu na jasnych zdjeciach. */
.m16-slide__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.28);
	pointer-events: none;
}

/*
 * !important: motywy (np. Betheme) maja czesto reguly typu
 * `img { height: auto !important; max-width: 100% !important }`, ktore zbijaja
 * obraz tla do paska u gory. Wymuszamy pelne pokrycie kadru.
 */
.m16-slide__media {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center center;
	display: block;
}

/* ---------- Siatka warstw ---------- */
.m16-slide__grid {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* ---------- Warstwa ---------- */
.m16-layer {
	position: absolute;
	margin: 0;
	padding: 0;
	left: var(--m16-halign, 0%);
	top: var(--m16-valign, 50%);
	transform: translate(
		calc(var(--m16-tx, 0%) + var(--m16-x, 0cqw)),
		calc(var(--m16-ty, -50%) + var(--m16-y, 0cqw))
	);
	font-size: var(--m16-fs, 2cqw);
	line-height: var(--m16-lh, 1.2);
	color: var(--m16-color, #fff);
	font-weight: var(--m16-weight, 400);
	text-align: var(--m16-talign, left);
	font-family: var(--m16-font, inherit);
	letter-spacing: var(--m16-ls, normal);
	text-transform: var(--m16-tt, none);
	background: var(--m16-bg, transparent);
	max-width: 92cqw;
}

/* Domyslnie: pozycje/typografia z desktopa. */
.m16-layer {
	--m16-x: var(--m16-x-d);
	--m16-y: var(--m16-y-d);
	--m16-fs: var(--m16-fs-d);
	--m16-lh: var(--m16-lh-d);
}

/*
 * Przelaczanie breakpointow przez @media (nie @container) - @media jest znane od
 * razu przy parsowaniu CSS, wiec poprawne pozycje sa od pierwszej klatki (bez
 * "rozsypania" i przeskoku przy ladowaniu). Jednostki cqw nadal licza sie wzgledem
 * kontenera (.m16-slide ma container-type: inline-size). Slider jest pelnoekranowy,
 * wiec szerokosc viewportu = szerokosc slajdu.
 */
@media (max-width: 1240px) {
	.m16-layer {
		--m16-x: var(--m16-x-n);
		--m16-y: var(--m16-y-n);
		--m16-fs: var(--m16-fs-n);
		--m16-lh: var(--m16-lh-n);
	}
}

@media (max-width: 1024px) {
	.m16-layer {
		--m16-x: var(--m16-x-t);
		--m16-y: var(--m16-y-t);
		--m16-fs: var(--m16-fs-t);
		--m16-lh: var(--m16-lh-t);
	}
}

@media (max-width: 778px) {
	.m16-layer {
		--m16-x: var(--m16-x-m);
		--m16-y: var(--m16-y-m);
		--m16-fs: var(--m16-fs-m);
		--m16-lh: var(--m16-lh-m);
	}
}

/*
 * Ukrywanie warstw na breakpointach przez @media (nie @container).
 * @media jest znane od razu przy parsowaniu CSS - eliminuje jednoklatkowy
 * blysk "podwojnego napisu" przy odswiezaniu (container queries wyliczaja sie
 * dopiero po layoutcie). Slider jest pelnoekranowy, wiec szerokosc viewportu
 * = szerokosc slajdu i progi pokrywaja sie z pozycjonowaniem (cqw).
 */
@media (min-width: 1241px) {
	.m16-hide-desktop { display: none !important; }
}
@media (max-width: 1240px) and (min-width: 1025px) {
	.m16-hide-notebook { display: none !important; }
}
@media (max-width: 1024px) and (min-width: 779px) {
	.m16-hide-tablet { display: none !important; }
}
@media (max-width: 778px) {
	.m16-hide-mobile { display: none !important; }
}

/*
 * Tekst i naglowki: od tabletu wzwyz nie lamiemy wewnatrz linii - layout jest
 * proporcjonalny (cqw), wiec linie z <br> zawsze mieszcza sie tak jak w SR.
 * Na mobile (waskie) pozwalamy na naturalne zawijanie (zgodnie z oryginalem).
 */
@media (min-width: 779px) {
	.m16-layer--text,
	.m16-layer--heading {
		white-space: nowrap;
		max-width: none;
	}
}

/* Warstwy-obrazy / linki / przyciski - reset wygladu. */
.m16-layer img {
	display: block;
	width: 100%;
	height: auto;
}
.m16-layer--image {
	width: var(--m16-fs, auto); /* obraz skaluje sie przez font-size jako proxy szerokosci */
}
.m16-layer a {
	color: inherit;
	text-decoration: none;
}
/*
 * Ikona: okragle kolo z ciemnym tlem i biala strzalka (styl z fello.pl).
 * Gdy jest przyciskiem (scroll): <button>; dekoracyjna: <div aria-hidden>.
 */
.m16-layer--icon {
	border: 0;
	background: transparent;
	color: #fff;
	cursor: default;
	font: inherit;
	font-style: normal;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

/* Kolo - ciemne tlo, biala strzalka, subtelna obwodka */
.m16-layer--icon i,
.m16-layer--icon [class*="fa-"] {
	font-style: normal; /* <i> jest domyslnie italic - glif strzalki nie moze byc pochylony */
	line-height: 1;
}

.m16-layer--icon > span[aria-hidden] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.45);
	background: rgba(20, 15, 10, 0.52);
	color: #fff;
	font-size: 14px;
	flex-shrink: 0;
	transition: color 0.2s ease;
}

/* Gdy ikona jest przyciskiem (scroll) - reset stylow <button> z motywu */
button.m16-layer--icon {
	cursor: pointer;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	min-height: 0;
	color: #fff;
	font: inherit;
}

/* Ikona jako link (prawa strzalka -> wpis na blogu). */
a.m16-layer--icon {
	cursor: pointer;
}

/* Hover: tylko zmiana koloru na akcent (bez zmian tla/obwodki). Button i link. */
.m16-layer--icon:hover > span[aria-hidden] {
	color: var(--m16-accent);
}

/*
 * Tekst CTA obok ikony (osobna warstwa, wyrownana poziomo).
 * !important: motywy (Betheme) nadaja <button> wlasne tlo/padding/obwodke -
 * wtyczka musi wygladac tak samo niezaleznie od motywu.
 */
.m16-layer--button {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--m16-color, #fff);
	cursor: pointer;
	font: inherit;
	font-size: var(--m16-fs, 1.1cqw);
	font-weight: var(--m16-weight, 400);
	letter-spacing: 0.03em;
	display: inline-flex;
	align-items: center;
	padding: 0 !important;
	text-shadow: none;
	min-height: 0;
	border-radius: 0 !important;
}

.m16-layer--button:hover,
.m16-layer--button:focus {
	background: transparent !important;
}

.m16-layer--button a,
.m16-layer--button {
	white-space: nowrap;
	text-decoration: none;
}

/* Hover na elementach interaktywnych warstw: tylko kolor akcentu. */
.m16-layer--button,
.m16-layer a,
.m16-layer--icon i {
	transition: color 0.2s ease;
}
.m16-layer--button:hover,
.m16-layer--button:focus-visible,
.m16-layer a:hover,
.m16-layer a:focus-visible {
	color: var(--m16-accent);
}

/* ---------- Animacja wejscia warstw ---------- */
.m16-slide.is-active .m16-layer {
	animation: m16-layer-in 600ms ease both;
	animation-delay: var(--m16-in-delay, 0ms);
}

@keyframes m16-layer-in {
	from { opacity: 0; transform: translate(calc(var(--m16-tx, 0%) + var(--m16-x, 0cqw)), calc(var(--m16-ty, -50%) + var(--m16-y, 0cqw) + 20px)); }
	to   { opacity: 1; }
}

/* ---------- Sterowanie ---------- */
.m16-slider__controls {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 10;
}

/* !important w resetach: odpornosc na style <button> z motywu (Betheme itp.). */
.m16-slider__btn {
	pointer-events: auto;
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(0, 0, 0, 0.45) !important;
	box-shadow: none !important;
	padding: 0 !important;
	color: #fff;
	cursor: pointer;
	transition: color 0.2s ease;
}

.m16-slider__btn:hover {
	color: var(--m16-accent);
}

.m16-slider__btn--prev { left: 16px; top: 50%; transform: translateY(-50%); }
.m16-slider__btn--next { right: 16px; top: 50%; transform: translateY(-50%); }

.m16-slider__btn--play {
	position: absolute;
	right: 16px;
	bottom: 16px;
	width: 40px;
	height: 40px;
	z-index: 11;
}

.m16-slider__btn--play .m16-icon-play { display: none; }
.m16-slider.is-paused .m16-slider__btn--play .m16-icon-pause { display: none; }
.m16-slider.is-paused .m16-slider__btn--play .m16-icon-play { display: block; }

/* ---------- Bullety ---------- */
.m16-slider__nav {
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 11;
}

/* !important w resetach: kropki to <button>, motyw nie moze ich zniszczyc. */
.m16-slider__dot {
	width: 12px !important;
	height: 12px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 2px solid rgba(255, 255, 255, 0.8) !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.m16-slider__dot.is-active {
	background: #fff !important;
	transform: scale(1.2);
}

/* Hover kropki: kolor akcentu (tlo + obwodka). */
.m16-slider__dot:hover {
	background: var(--m16-accent) !important;
	border-color: var(--m16-accent) !important;
}

/* ---------- Dostepnosc: focus ---------- */
.m16-slider__btn:focus-visible,
.m16-slider__dot:focus-visible,
.m16-layer a:focus-visible,
.m16-layer--button:focus-visible,
.m16-layer--icon:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* Tekst tylko dla czytnikow ekranu. */
.m16-slider .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Reduced motion (WCAG 2.3.3 / 2.2.2) ---------- */
@media (prefers-reduced-motion: reduce) {
	.m16-slide,
	.m16-slide.is-active .m16-layer,
	.m16-slider__btn,
	.m16-slider__dot {
		transition: none !important;
		animation: none !important;
	}
	.m16-slide__media[autoplay] {
		/* wideo i tak muted; preferencja respektowana przez JS (pauza). */
	}
}