/* Light Hero Slider v5 */
.chs-slider {
	--chs-speed: 600ms;
	--chs-ease: cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	width: 100%;
	min-height: 70vh;
	overflow: hidden;
	isolation: isolate;
	touch-action: pan-y;
}

/* Slajdy nakładają się w jednej komórce siatki (zamiast position:absolute),
   więc wysokość slidera rośnie razem z treścią - na telefonie długi opis
   nie zostanie ucięty. */
.chs-slider__track {
	position: relative;
	display: grid;
	width: 100%;
	min-height: inherit;
}

.chs-slide {
	position: relative;
	grid-area: 1 / 1;
	display: flex;
	min-width: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	z-index: 1;
	transition: opacity var(--chs-speed) ease-in-out, visibility 0s linear var(--chs-speed);
}

.chs-slide--active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
	transition: opacity var(--chs-speed) ease-in-out, visibility 0s;
}

/* Slajd wychodzący zostaje pod spodem w pełni widoczny (crossfade bez "dziury"). */
.chs-slide--leaving {
	opacity: 1;
	visibility: visible;
	z-index: 1;
	transition: none;
}

/* Efekt "slide" - pozycje ustawia JS (kierunek zależy od nawigacji wstecz/naprzód) */
.chs-slider[data-effect="slide"] .chs-slide {
	opacity: 1;
	transition: transform var(--chs-speed) var(--chs-ease), visibility 0s linear var(--chs-speed);
}

.chs-slider[data-effect="slide"] .chs-slide--active,
.chs-slider[data-effect="slide"] .chs-slide--leaving {
	visibility: visible;
	transition: transform var(--chs-speed) var(--chs-ease), visibility 0s;
}

.chs-slider .chs-slide.chs-no-transition {
	transition: none;
}

/* Zdjęcie tła (<img> z srcset zamiast background-image: mniejsze pliki na telefonach).
   Prefiks .chs-slider - musi wygrać z ".elementor img { height: auto }" Elementora. */
.chs-slide__media {
	display: contents;
}

.chs-slider .chs-slide__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}

.chs-slider .chs-slide__bg.chs-fit-contain {
	object-fit: contain;
}

/* Ken Burns */
.chs-slider[data-ken-burns="yes"] .chs-slide--active .chs-slide__bg,
.chs-slider[data-ken-burns="yes"] .chs-slide--leaving .chs-slide__bg {
	animation: chsKenBurns var(--chs-kb, 8s) ease-out both;
}

@keyframes chsKenBurns {
	from { transform: scale(1); }
	to { transform: scale(1.12); }
}

/* Dopasowanie wysokości do zdjęcia. --chs-ratio z PHP (brak skoku układu
   przed JS), potem JS ustawia min-height w px dla aktywnego slajdu. */
.chs-slider[data-height-mode="auto"] {
	min-height: 0;
	aspect-ratio: var(--chs-ratio, 16 / 9);
	transition: min-height var(--chs-speed) ease-in-out;
}

/* W tym trybie wysokość wyznacza TYLKO aktywny slajd (jego zdjęcie, a gdy treść
   jest wyższa - treść). Nieaktywne slajdy są wyjęte z przepływu i dopasowują się
   do obszaru, więc wysoka treść ukrytego slajdu nie powiększa slidera
   (np. panoramiczny slajd nie dostaje pustych pasów u góry i u dołu). */
.chs-slider[data-height-mode="auto"] .chs-slide:not(.chs-slide--active) {
	position: absolute;
	inset: 0;
}

.chs-slide__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.55); /* WCAG AA dla białego tekstu na dowolnym zdjęciu */
	z-index: 1;
	pointer-events: none;
}

/* Układ slajdu: obszar zawartości (.chs-slide__inner) = treść (.chs-slide__body)
   + opcjonalne zdjęcie obok tekstu (.chs-slide__image). Kierunek (zdjęcie z prawej /
   lewej / nad / pod tekstem) ustawia Elementor osobno dla każdego urządzenia. */
.chs-slide__inner {
	--chs-img-basis: var(--chs-img-w, 50%);
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	flex: 1 1 auto;
	width: 100%;
	justify-content: center;
	gap: max(var(--chs-gap, 0px), 0px);
	min-width: 0;
	margin-inline: auto;
}

.chs-slide__body {
	position: relative;
	z-index: 1; /* tekst nad grafiką przy ujemnym odstępie */
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

/* Grafika nad/pod tekstem: blok tekstu nie rośnie, więc tekst i grafika trzymają się
   razem (odstęp = gap), a wolne miejsce rozkłada justify-content obszaru (domyślnie środek). */
.chs-slide--has-image .chs-slide__body {
	flex: var(--chs-body-flex, 1 1 0);
}

.chs-slide__image {
	position: relative;
	z-index: 0;
	margin: var(--chs-img-margin, 0);
	box-sizing: border-box;
	display: flex;
	flex: 0 0 var(--chs-img-basis);
	align-items: flex-end;
	justify-content: center;
	min-width: 0;
	max-width: 100%;
}

.chs-slider .chs-slide__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 0;
	border: 0;
	object-fit: contain;
}

/* Blok treści = kolumna flex: wyrównanie (align-items) przesuwa też logo i przycisk,
   odstęp między elementami = gap, kolejność = order (osobno per urządzenie). */
.chs-slide__content {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	max-width: 800px;
	width: 100%;
	padding: 20px;
	text-align: center;
	overflow-wrap: break-word;
}

.chs-slide__content > * {
	margin: 0;
}

/* Pozycjonowanie bloku treści (desktop; tablet/telefon - selektory Elementora) */
.chs-slider[data-content-position="top-left"] .chs-slide__body { align-items: flex-start; justify-content: flex-start; }
.chs-slider[data-content-position="top-center"] .chs-slide__body { align-items: flex-start; justify-content: center; }
.chs-slider[data-content-position="top-right"] .chs-slide__body { align-items: flex-start; justify-content: flex-end; }
.chs-slider[data-content-position="center-left"] .chs-slide__body { align-items: center; justify-content: flex-start; }
.chs-slider[data-content-position="center-center"] .chs-slide__body { align-items: center; justify-content: center; }
.chs-slider[data-content-position="center-right"] .chs-slide__body { align-items: center; justify-content: flex-end; }
.chs-slider[data-content-position="bottom-left"] .chs-slide__body { align-items: flex-end; justify-content: flex-start; }
.chs-slider[data-content-position="bottom-center"] .chs-slide__body { align-items: flex-end; justify-content: center; }
.chs-slider[data-content-position="bottom-right"] .chs-slide__body { align-items: flex-end; justify-content: flex-end; }

.chs-slider .chs-slide__logo {
	display: block;
	width: 150px;
	max-width: 100%;
	height: auto;
	order: 1;
}

/* Domyślna typografia (gdy użytkownik nie ustawi własnej): rozmiar płynnie
   zależny od szerokości ekranu, np. tytuł ~25px (375px) / ~36px (768px) / 52px (1370px+).
   Długie wyrazy: najpierw JS zmniejsza tekst (fitText), w ostateczności dzielenie/łamanie. */
.chs-slide__title,
.chs-slide__description {
	overflow-wrap: break-word;
	hyphens: auto;
}

.chs-slide__title {
	align-self: stretch;
	order: 2;
	margin: 0;
	color: #ffffff;
	font-size: clamp(1.375rem, 0.9rem + 2.8vw, 3.25rem);
	line-height: 1.2;
	text-wrap: balance;
}

.chs-slide__description {
	align-self: stretch;
	order: 3;
	margin: 0;
	color: #f1f1f1;
	font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1.25rem);
	line-height: 1.55;
	text-wrap: pretty;
}

/* Pomiar szerokości najdłuższego wyrazu (fitText w JS) - bez łamania */
.chs-slider .chs-measure,
.chs-slider .chs-measure * {
	overflow-wrap: normal !important;
	word-break: normal !important;
	hyphens: manual !important;
	text-align: left !important;
}

.chs-slide__description p {
	margin: 0;
}

.chs-slide__button {
	display: block;
	order: 4;
	padding: 0.75rem 2rem;
	border-radius: 4px;
	background-color: #ffffff;
	color: #111111;
	text-decoration: none;
	font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
	font-weight: 600;
	line-height: 1.3;
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.chs-slide__button:hover,
.chs-slide__button:focus-visible {
	transform: translateY(-2px);
	background-color: #e6e6e6;
	color: #111111;
}

/* Animacje wejściowe - własne keyframes (bez Animate.css). Element z animacją
   jest ukryty, dopóki nie dostanie klasy chs-animated. "Brak" animacji =
   brak atrybutu data-cs-animation = element zawsze widoczny. */
.chs-slide [data-cs-animation]:not(.chs-animated) {
	opacity: 0;
}

.chs-slide .chs-animated {
	animation-duration: 0.9s;
	animation-fill-mode: backwards;
	animation-timing-function: ease-out;
}

.chs-slide .chs-animated[data-cs-animation="fadeIn"] { animation-name: chsFadeIn; }
.chs-slide .chs-animated[data-cs-animation="fadeInUp"] { animation-name: chsFadeInUp; }
.chs-slide .chs-animated[data-cs-animation="fadeInDown"] { animation-name: chsFadeInDown; }
.chs-slide .chs-animated[data-cs-animation="fadeInLeft"] { animation-name: chsFadeInLeft; }
.chs-slide .chs-animated[data-cs-animation="fadeInRight"] { animation-name: chsFadeInRight; }
.chs-slide .chs-animated[data-cs-animation="zoomIn"] { animation-name: chsZoomIn; }
.chs-slide .chs-animated[data-cs-animation="bounceIn"] { animation-name: chsBounceIn; animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }

@keyframes chsFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes chsFadeInUp { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: none; } }
@keyframes chsFadeInDown { from { opacity: 0; transform: translate3d(0, -40px, 0); } to { opacity: 1; transform: none; } }
@keyframes chsFadeInLeft { from { opacity: 0; transform: translate3d(-40px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes chsFadeInRight { from { opacity: 0; transform: translate3d(40px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes chsZoomIn { from { opacity: 0; transform: scale3d(0.6, 0.6, 0.6); } 50% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes chsBounceIn {
	0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
	20% { transform: scale3d(1.1, 1.1, 1.1); }
	40% { transform: scale3d(0.9, 0.9, 0.9); }
	60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
	80% { transform: scale3d(0.97, 0.97, 0.97); }
	to { opacity: 1; transform: none; }
}

/* Strzałki nawigacyjne */
.chs-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.25);
	color: #ffffff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.chs-slider__arrow svg {
	display: block;
	width: 1em;
	height: 1em;
}

.chs-slider__arrow:hover {
	background-color: rgba(255, 255, 255, 0.45);
}

/* Fokus (WCAG 2.4.7 / 2.4.11): podwójna obwódka biała + ciemna - widoczna
   na każdym zdjęciu, niezależnie od kolorów ustawionych w Elementorze. */
.chs-slider .chs-slider__arrow:focus-visible,
.chs-slider .chs-slider__dot:focus-visible,
.chs-slider .chs-slider__toggle:focus-visible,
.chs-slider .chs-slide__button:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 0;
	box-shadow: 0 0 0 6px #111111;
}

/* Kontrast elementów nawigacji (WCAG 1.4.11, min. 3:1) na jasnych zdjęciach */
.chs-slider__arrow svg {
	filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.85));
}

.chs-slider__dot {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

/* Przycisk pauzy (WCAG 2.2.2). Domyślnie białe na 60% czerni: kontrast >= 4.5:1
   na każdym tle, także białym. */
.chs-slider__toggle {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.6);
	color: #ffffff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.chs-slider__toggle svg {
	display: block;
}

.chs-slider__toggle .chs-icon-play,
.chs-slider.chs-is-paused .chs-slider__toggle .chs-icon-pause {
	display: none;
}

.chs-slider.chs-is-paused .chs-slider__toggle .chs-icon-play {
	display: block;
}

.chs-slider.chs-is-paused .chs-slide__bg {
	animation-play-state: paused;
}

.chs-slider__arrow--prev {
	left: 20px;
}

.chs-slider__arrow--next {
	right: 20px;
}

/* Strzałki - położenie pionowe (Stylizacja -> Nawigacja - strzałki) */
.chs-slider[data-arrows-position="top"] .chs-slider__arrow {
	top: 24px;
	bottom: auto;
	transform: none;
}

.chs-slider[data-arrows-position="bottom"] .chs-slider__arrow {
	top: auto;
	bottom: 24px;
	transform: none;
}

/* Strzałki - kształt */
.chs-slider[data-arrows-shape="square"] .chs-slider__arrow {
	border-radius: 4px;
}

.chs-slider[data-arrows-shape="none"] .chs-slider__arrow {
	background-color: transparent !important;
}

/* Kropki */
.chs-slider__dots {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: 0.9rem;
}

.chs-slider__dot {
	position: relative;
	width: 10px;
	height: 10px;
	padding: 0;
	border: 2px solid #ffffff;
	border-radius: 50%;
	background-color: transparent;
	cursor: pointer;
	transition: background-color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

/* Większe pole dotyku (min. ~24px) bez zmiany wyglądu kropki */
.chs-slider__dot::after {
	content: "";
	position: absolute;
	inset: -8px;
}

.chs-slider__dot--active {
	background-color: #ffffff;
}

/* Kropki - kształt */
.chs-slider[data-dots-shape="square"] .chs-slider__dot {
	border-radius: 2px;
}

/* Tablety i telefony w pionie */
@media (max-width: 767px) {
	.chs-slider {
		min-height: 60vh;
		min-height: 60svh;
	}

	.chs-slider[data-height-mode="auto"] {
		min-height: 0;
		aspect-ratio: var(--chs-ratio-m, var(--chs-ratio, 16 / 9));
	}


	.chs-slide__content {
		gap: 1rem;
	}

	.chs-slider__arrow {
		width: 36px;
		height: 36px;
		font-size: 16px;
	}

	.chs-slider__arrow--prev {
		left: 10px;
	}

	.chs-slider__arrow--next {
		right: 10px;
	}

	.chs-slider .chs-slide__logo {
		max-width: 60%;
	}
}

/* Małe telefony w pionie */
@media (max-width: 380px) {
	.chs-slide__button {
		padding: 0.6rem 1.5rem;
	}
}

/* Telefony w poziomie (niska wysokość viewportu) */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
	.chs-slider {
		min-height: 100vh;
		min-height: 100svh;
	}

	.chs-slider[data-height-mode="auto"] {
		min-height: 0;
	}

	.chs-slide__content {
		padding: 1rem 3.5rem;
	}

	.chs-slide__content {
		gap: 0.6rem;
	}

	.chs-slide__title {
		font-size: clamp(1.25rem, 4vw, 1.75rem);
	}

	.chs-slide__description {
		font-size: clamp(0.85rem, 2vw, 1rem);
		line-height: 1.45;
	}

	.chs-slide__button {
		padding: 0.5rem 1.5rem;
	}

	.chs-slider .chs-slide__logo {
		max-width: 30%;
	}

	.chs-slider__arrow {
		width: 30px;
		height: 30px;
		font-size: 14px;
	}

	.chs-slider__dots {
		bottom: 8px;
	}
}

/* Ograniczony ruch (ustawienie systemu) - bez animacji i przesuwania */
@media (prefers-reduced-motion: reduce) {
	.chs-slider,
	.chs-slider .chs-slide,
	.chs-slide__button {
		transition-duration: 1ms !important;
		transition-delay: 0s !important;
	}

	.chs-slide [data-cs-animation],
	.chs-slide .chs-slide__bg {
		opacity: 1 !important;
		animation: none !important;
	}
}