/* ==========================================================================
   FORGE Loop Slider
   Vše se řídí custom properties, které nastavuje shortcode.
   ========================================================================== */

.fls {
	--fls-side-scale: 0.88;
	--fls-side-opacity: 0.6;
	--fls-side-shift: 0px;
	--fls-speed: 600ms;
	--fls-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
	--fls-align: center;
	--fls-pad-y: 20px;
	--fls-clip-pad: 50px;
	--fls-max-width: none;

	--fls-dot-color: #cfd8dc;
	--fls-dot-active: #0f4c4c;
	--fls-dot-size: 10px;
	--fls-dot-active-w: 28px;
	--fls-dot-gap: 8px;
	--fls-dot-offset: 28px;

	--fls-arrow-color: #fff;
	--fls-arrow-bg: #0f4c4c;
	--fls-arrow-size: 44px;
	--fls-arrow-offset: 0px;

	position: relative;
	width: 100%;
	max-width: var(--fls-max-width);
	margin-inline: auto;
	padding-block: var(--fls-pad-y);
	outline: none;
}

.fls:focus-visible {
	outline: 2px solid var(--fls-dot-active);
	outline-offset: 4px;
	border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Viewport a track
   --------------------------------------------------------------------------
   Viewport ořezává vodorovně, jinak by se klony ze smyčky rozlezly přes celou
   stránku. Svislou rezervu dává padding tracku, aby se neuřízl stín aktivní
   karty – proto se neořezává přes negativní margin.
   -------------------------------------------------------------------------- */

.fls__viewport {
	overflow: hidden;
	width: 100%;
}

.fls__track {
	display: flex;
	align-items: var(--fls-align);
	padding-block: var(--fls-clip-pad);
	will-change: transform;
	backface-visibility: hidden;
}

/* Opt-out: karty smí volně přetékat z kontejneru ven. */
.fls--bleed .fls__viewport {
	overflow: visible;
}

.fls--bleed .fls__track {
	padding-block: 0;
}

.fls__slide {
	flex: 0 0 auto;
	box-sizing: border-box;
	opacity: var(--fls-side-opacity);
	transform: scale(var(--fls-side-scale));
	transform-origin: center center;
	transition:
		transform var(--fls-speed) var(--fls-easing),
		opacity var(--fls-speed) var(--fls-easing);
	z-index: 1;
}

/* Karta uvnitř slidu vždy vyplní jeho šířku. */
.fls__slide-inner {
	width: 100%;
	height: 100%;
}

.fls__slide-inner > * {
	width: 100%;
	max-width: none;
}

/* Sousedé se mohou přitáhnout pod aktivní kartu. */
.fls__slide.is-prev {
	transform: translateX(var(--fls-side-shift)) scale(var(--fls-side-scale));
	z-index: 2;
}

.fls__slide.is-next {
	transform: translateX(calc(var(--fls-side-shift) * -1)) scale(var(--fls-side-scale));
	z-index: 2;
}

.fls__slide.is-active {
	opacity: 1;
	transform: scale(1);
	z-index: 3;
}

.fls--shadow .fls__slide.is-active .fls__slide-inner {
	filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.14));
	transition: filter var(--fls-speed) var(--fls-easing);
}

/* Když je slidů méně než slidesPerView, slider se chová jako statický flex. */
.fls.is-static .fls__slide {
	opacity: 1;
	transform: none;
}

.fls.is-static .fls__dots,
.fls.is-static .fls__arrow {
	display: none;
}

/* Během tažení prstem nechceme přechody. */
.fls.is-dragging .fls__track,
.fls.is-dragging .fls__slide {
	transition: none !important;
}

.fls.is-draggable .fls__viewport {
	cursor: grab;
	touch-action: pan-y;
}

.fls.is-dragging .fls__viewport {
	cursor: grabbing;
}

/* Tažení nesmí spustit odkaz uvnitř karty. */
.fls.is-dragging a,
.fls.is-dragging button {
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Tečky
   -------------------------------------------------------------------------- */

.fls__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--fls-dot-gap);
	margin-top: var(--fls-dot-offset);
}

.fls__dot {
	appearance: none;
	border: 0;
	padding: 0;
	margin: 0;
	width: var(--fls-dot-size);
	height: var(--fls-dot-size);
	border-radius: 999px;
	background: var(--fls-dot-color);
	cursor: pointer;
	transition:
		width 260ms var(--fls-easing),
		background-color 260ms var(--fls-easing);
}

.fls__dot:hover {
	background: var(--fls-dot-active);
}

.fls__dot.is-active {
	width: var(--fls-dot-active-w);
	background: var(--fls-dot-active);
}

.fls__dot:focus-visible {
	outline: 2px solid var(--fls-dot-active);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Šipky
   -------------------------------------------------------------------------- */

.fls__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--fls-arrow-size);
	height: var(--fls-arrow-size);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: var(--fls-arrow-bg);
	color: var(--fls-arrow-color);
	cursor: pointer;
	z-index: 10;
	padding: 0;
	transition: opacity 200ms ease, transform 200ms ease;
}

.fls__arrow svg {
	width: 45%;
	height: 45%;
}

.fls__arrow--prev {
	left: var(--fls-arrow-offset);
}

.fls__arrow--next {
	right: var(--fls-arrow-offset);
}

.fls__arrow:hover {
	transform: translateY(-50%) scale(1.06);
}

.fls__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.fls__arrow:focus-visible {
	outline: 2px solid var(--fls-arrow-bg);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Přístupnost
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.fls__track,
	.fls__slide,
	.fls__dot,
	.fls__arrow {
		transition-duration: 1ms !important;
	}
}