/* ============================================================
   Lezolep Slider — slider.css v1.0.0
   ============================================================ */

/* ── Logo marquee ──────────────────────────────────────────── */

.lls-marquee {
	overflow: hidden;
	width: 100%;
}

.lls-track {
	display: flex;
	width: max-content;
	align-items: center;
	gap: var(--lls-gap, 64px);
	animation: lls-scroll var(--lls-speed, 32s) linear infinite;
	will-change: transform;
}

/* Pause animation when hovering the whole marquee container */
.lls-hover-pause:hover .lls-track {
	animation-play-state: paused;
}

/* Rozmery nastavuje <style> blok generovaný PHP podľa breakpointov.
   Tu len veci ktoré sú rovnaké na všetkých zariadeniach. */
.lls-logo {
	object-fit: contain;
	display: block;
	flex-shrink: 0;
	max-width: none;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Grayscale mode: dim + desaturate by default, full colour on individual logo hover */
.lls-grayscale .lls-logo {
	filter: grayscale(100%);
	opacity: 0.6;
}

.lls-grayscale .lls-logo:hover {
	filter: none;
	opacity: 1;
}

@keyframes lls-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ── Logo carousel (slider mode) ──────────────────────────── */

.lls-carousel {
	position: relative;
	width: 100%;
	user-select: none;
}

.lls-cs-viewport {
	overflow: hidden;
	width: 100%;
	/* výška nastavená PHP <style> blokom */
}

.lls-cs-track {
	display: flex;
	gap: var(--lls-cs-gap, 24px);
	height: 100%;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.lls-cs-slide {
	/* šírku nastavuje JS; výšku dedí cez flex stretch z track → viewport */
	flex-shrink: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.lls-cs-img {
	/* Vyplní celý slide a zachová pomer strán */
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	max-width: none;
}

/* Šípky pre carousel — vnútri containera */
.lls-carousel .lls-t-prev { left: 8px; }
.lls-carousel .lls-t-next { right: 8px; }

/* ── Coverflow efekt ───────────────────────────────────────── */

.lls-carousel[data-coverflow] .lls-cs-slide {
	will-change: transform, opacity;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
	            opacity   0.5s ease;
	transform-origin: center center;
}

.lls-carousel[data-coverflow] .lls-cs-slide.lls-cs-active {
	opacity: 1;
	transform: scale(1);
	z-index: 2;
	position: relative;
}

.lls-carousel[data-coverflow] .lls-cs-slide.lls-cs-adj.lls-cs-left {
	opacity: 0.45;
	transform: perspective(700px) rotateY(-42deg) scale(0.88);
}

.lls-carousel[data-coverflow] .lls-cs-slide.lls-cs-adj.lls-cs-right {
	opacity: 0.45;
	transform: perspective(700px) rotateY(42deg) scale(0.88);
}

.lls-carousel[data-coverflow] .lls-cs-slide.lls-cs-far.lls-cs-left {
	opacity: 0.1;
	transform: perspective(700px) rotateY(-60deg) scale(0.7);
}

.lls-carousel[data-coverflow] .lls-cs-slide.lls-cs-far.lls-cs-right {
	opacity: 0.1;
	transform: perspective(700px) rotateY(60deg) scale(0.7);
}

/* Plynulé vyblednutie na krajoch cez CSS mask */
.lls-carousel[data-coverflow] .lls-cs-viewport {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 18%,
		black 82%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 18%,
		black 82%,
		transparent 100%
	);
}

/* ── Testimonials ──────────────────────────────────────────── */

.lls-testimonials {
	position: relative;
	width: 100%;
	user-select: none;
}

.lls-t-viewport {
	overflow: hidden;
	position: relative;
}

.lls-t-track {
	position: relative;
	/* min-height is set dynamically by JS so the container follows active item */
	transition: min-height 0.4s ease;
}

/* All items: stacked at the same position, default = waiting off-screen right */
.lls-t-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	align-items: flex-start;
	gap: 24px;
	padding: 8px 4px 8px 4px;
	box-sizing: border-box;
	opacity: 0;
	transform: translateX(100%);
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
	            opacity   0.55s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}

/* Active item: centred, visible, sets document flow height */
.lls-t-item.lls-t-active {
	position: relative;   /* participates in flow → track gets its height */
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
}

/* Leaving item: slides out to the left */
.lls-t-item.lls-t-leaving {
	position: absolute;
	opacity: 0;
	transform: translateX(-100%);
}

.lls-t-img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.lls-t-quote {
	margin: 0;
	font-style: italic;
}

.lls-t-quote p {
	margin: 0 0 14px;
	line-height: 1.6;
}

.lls-t-quote footer {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.lls-t-quote footer strong {
	font-weight: 600;
}

.lls-t-quote footer span {
	font-size: 0.85em;
	opacity: 0.65;
}

/* Navigation arrows */
.lls-t-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: 2px solid currentColor;
	border-radius: 50%;
	width: 38px;
	height: 38px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	opacity: 0.45;
	transition: opacity 0.2s;
	padding: 0;
}

.lls-t-arrow:hover { opacity: 1; }
.lls-t-prev { left: -48px; }
.lls-t-next { right: -48px; }

/* Dots */
.lls-t-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
}

.lls-t-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.25;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: opacity 0.25s;
}

.lls-t-dot.lls-t-dot-active {
	opacity: 1;
}