/*
 * Nelalu Slider
 * Bazuje na dotychczasowym wyglądzie użytkownika, ale używa jednego zestawu slajdów
 * oraz osobnych obrazów desktop/mobile w każdym slajdzie.
 */
.kws-slider.slider {
	position: relative;
	overflow: hidden;
	width: 100%;
	z-index: 98;
}

.kws-slider .slider-inner {
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
	padding-bottom: var(--kws-desktop-ratio, 36.458333%);
}

.kws-slider .slides {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.kws-slider .slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1s ease-in-out;
	will-change: opacity;
	pointer-events: none;
	z-index: 1;
	cursor: pointer;
}

.kws-slider .slide.active {
	opacity: 1;
	pointer-events: auto;
	z-index: 2;
}

.kws-slider .slide picture,
.kws-slider .slide img,
.kws-slider .slide video {
	display: block;
	width: 100%;
	height: 100%;
}

.kws-slider .slide img,
.kws-slider .slide video {
	object-fit: cover;
}

.kws-slider .kws-slide-video {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.kws-slider .kws-video-fallback {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.kws-slider .slide-content {
	z-index: 3;
}

.kws-slider .slider-prev,
.kws-slider .slider-next {
	position: absolute;
	top: 50%;
	padding: 16px;
	color: var(--kws-arrow, #000000);
	font-size: 15px;
	background-color: var(--kws-arrow-bg, rgba(255,255,255,0.50));
	border: none;
	cursor: pointer;
	transform: translateY(-50%);
	z-index: 4;
	transition: all 250ms ease-in-out;
}

.kws-slider .slider-prev:hover,
.kws-slider .slider-next:hover {
	background-color: var(--kws-arrow-hover-bg, rgba(255,255,255,0.75));
}

.kws-slider .slider-prev { left: 10px; }
.kws-slider .slider-next { right: 10px; }

.kws-slider .slider-dots {
	text-align: center;
	position: absolute;
	bottom: 15px;
	width: 100%;
	z-index: 4;
	pointer-events: none;
}

.kws-slider .slider-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	padding: 0;
	background-color: var(--kws-dot, #fff);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	pointer-events: auto;
}

.kws-slider .slider-dot.active {
	background-color: var(--kws-dot-active, #7690c9);
}

.kws-slider .slide-content {
	position: absolute;
	opacity: 0;
	transition: opacity 1s ease-in-out;
	will-change: opacity;
	color: #000;
	z-index: 3;
	padding: clamp(20px, 3vw, 40px);
	isolation: isolate;
}

.kws-slider .slide-content::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--kws-mask-color, #ffffff);
	opacity: var(--kws-mask-opacity, .65);
	border-radius: var(--kws-mask-radius, 15px);
	z-index: -1;
	pointer-events: none;
}

.kws-slider .slide.active .slide-content {
	opacity: 1;
	transition-delay: .5s;
}

.kws-slider .slide-content .read-more-button {
	display: inline-block;
	opacity: 0;
	transition: opacity 1s ease-in-out, background-color 250ms ease-in-out, color 250ms ease-in-out;
	background-color: var(--kws-button-bg, #7690c9);
	color: var(--kws-button-color, #fff);
	text-decoration: none;
	margin-top: 10px;
	font-size: inherit;
	padding: 10px 20px;
}

.kws-slider .slide.active .slide-content .read-more-button {
	opacity: 1;
	transition-delay: 1s, 0s, 0s;
}

.kws-slider .slide-content .read-more-button:hover {
	background-color: var(--kws-button-hover-bg, #fff);
	color: var(--kws-button-hover-color, #7690c9);
}

@media (min-width: 769px) {
	.kws-slider .slide-content {
		top: 50%;
		left: 15%;
		width: 50%;
		transform: translateY(-50%);
		text-align: left;
	}

	.kws-slider.kws-content-left .slide-content { left: 15%; right: auto; }
	.kws-slider.kws-content-center .slide-content { left: 50%; right: auto; transform: translate(-50%, -50%); }
	.kws-slider.kws-content-right .slide-content { left: auto; right: 15%; }

	.kws-slider .slide-content h2.slogan {
		font-weight: 400;
		color: var(--kws-slogan-color, #000000);
		font-size: clamp(var(--kws-title-desktop-min, 24px), 3vw, var(--kws-title-desktop-max, 65px));
		margin: 0 0 clamp(15px, 2vw, 25px);
		line-height: 1.1em;
	}

	.kws-slider .slide-content p.slogan {
		font-weight: 300;
		color: var(--kws-description-color, #000000);
		font-size: clamp(var(--kws-desc-min, 16px), 1.5vw, var(--kws-desc-max, 28px));
		margin: 0 0 clamp(10px, 1.5vw, 15px);
		line-height: 1.4em;
	}

	.kws-slider .slide-content .read-more-button {
		font-size: clamp(12px, 1.5vw, 18px);
		padding: clamp(12px, 1.5vw, 15px);
		margin-top: clamp(10px, 1.5vw, 15px);
	}
}

@media (max-width: 768px) {
	.kws-slider .slider-inner {
		padding-bottom: var(--kws-mobile-ratio, 100%);
	}

	.kws-slider .slide-content {
		bottom: 40px;
		left: 50%;
		width: min(72%, 520px);
		transform: translateX(-50%);
		text-align: center;
	}

	.kws-slider .slide-content h2.slogan {
		font-weight: 500;
		color: var(--kws-slogan-color, #000000);
		font-size: clamp(var(--kws-title-mobile-min, 10px), 5vw, var(--kws-title-mobile-max, 20px));
		margin: 0 0 clamp(10px, 3vw, 20px);
		line-height: 1.05em;
	}

	/* Opcjonalne ukrywanie opisu na mobile, sterowane osobno dla każdego slajdu. */
	.kws-slider .slide-content .slider-description.kws-hide-mobile {
		display: none;
	}

	.kws-slider .slide-content .read-more-button {
		font-size: clamp(12px, 4vw, 14px);
		padding: clamp(10px, 2vw, 14px) clamp(20px, 5vw, 30px);
		margin-top: clamp(10px, 3vw, 20px);
	}
}