/* ==========================================================================
   Feature Showcase Accordion (FSA)
   Mobile-first, accordion vlevo + obrázek vpravo (desktop).
   ========================================================================== */

.fsa-wrapper {
	--fsa-anim-duration: 450ms;
	--fsa-anim-easing: cubic-bezier(0.4, 0, 0.2, 1);
	--fsa-anim-offset: 40px;
	--fsa-gap: 32px;
	--fsa-accordion-width: 40%;

	display: flex;
	flex-direction: column;
	width: 100%;
	gap: var(--fsa-gap);
	box-sizing: border-box;
}

.fsa-wrapper *,
.fsa-wrapper *::before,
.fsa-wrapper *::after {
	box-sizing: border-box;
}

/* --- Accordion --- */

.fsa-accordion {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.fsa-item {
	display: block;
	padding: 12px 0;
	border-bottom: 1px solid #eaeaea;
}

.fsa-item:last-child {
	border-bottom: none;
}

/* --- Toggle button --- */

.fsa-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 8px 0;
	margin: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
	font: inherit;
	font-weight: 700;
	color: inherit;
	line-height: 1.4;
	transition: color 0.25s ease;
}

.fsa-toggle:hover,
.fsa-toggle:focus {
	background: transparent;
	outline: none;
}

.fsa-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: 2px;
}

.fsa-title-wrap {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
}

.fsa-title-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	transition: color 0.25s ease;
}

.fsa-title-icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.fsa-title-icon i {
	font-size: 18px;
	line-height: 1;
}

.fsa-title-text {
	transition: color 0.25s ease;
}

.fsa-icon-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.fsa-icon-arrow svg {
	fill: currentColor;
}

.fsa-item.is-active .fsa-icon-arrow {
	transform: rotate(90deg);
}

/* --- Obsah položky (popis + mobilní obrázek) --- */

.fsa-content {
	display: none;
	padding-left: 36px;
	margin-top: 12px;
}

.fsa-item.is-active .fsa-content {
	display: block;
	animation: fsa-fade-in 0.3s ease both;
}

@keyframes fsa-fade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.fsa-desc {
	margin: 0;
	line-height: 1.6;
}

.fsa-desc > *:first-child { margin-top: 0; }
.fsa-desc > *:last-child  { margin-bottom: 0; }

/* --- Mobilní obrázek (viditelný jen pod 768px) --- */

.fsa-mobile-img {
	display: block;
	width: 100%;
	margin-top: 16px;
}

.fsa-mobile-img img {
	width: 100%;
	height: auto;
	display: block;
}

/* --- Desktop image stage skrytý v mobilu --- */

.fsa-image-stage {
	display: none;
}

/* ==========================================================================
   Desktop ≥ 768px
   ========================================================================== */

@media (min-width: 768px) {
	.fsa-wrapper {
		flex-direction: row;
		align-items: flex-start;
	}

	.fsa-accordion {
		width: var(--fsa-accordion-width);
		flex-shrink: 0;
	}

	/* Mobilní obrázek schovat na desktopu (zobrazuje se image-stage) */
	.fsa-mobile-img {
		display: none;
	}

	.fsa-image-stage {
		display: block;
		flex: 1 1 0;
		min-width: 0;
		position: relative;
		aspect-ratio: 16 / 10;
		overflow: hidden;
		/* Sticky obrázek scrolluje s accordionem — odkomentovat pokud chceš:
		position: sticky;
		top: 80px;
		*/
	}

	.fsa-img-container {
		position: absolute;
		inset: 0;
		opacity: 0;
		pointer-events: none;
		will-change: opacity, transform;
		transition:
			opacity var(--fsa-anim-duration) var(--fsa-anim-easing),
			transform var(--fsa-anim-duration) var(--fsa-anim-easing);
	}

	.fsa-img-container.is-active {
		opacity: 1;
		pointer-events: auto;
		z-index: 2;
	}

	.fsa-img-container.is-leaving {
		z-index: 1;
	}

	.fsa-img {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: contain;
	}

	/* --- Animační varianty (řízené třídou na widgetu: .fsa-anim-XXX) ---
	   Widget má v PHP nastavený default = "slide" + prefix_class, takže
	   wrapper má vždy jednu z těchto tříd. Žádný fallback není potřeba. */

	/* Cross-fade + posun (výchozí) */
	.fsa-anim-slide .fsa-img-container {
		transform: translateX(var(--fsa-anim-offset));
	}
	.fsa-anim-slide .fsa-img-container.is-active {
		transform: translateX(0);
	}
	.fsa-anim-slide .fsa-img-container.is-leaving {
		transform: translateX(calc(var(--fsa-anim-offset) * -1));
		opacity: 0;
	}

	/* Čistý cross-fade */
	.fsa-anim-fade .fsa-img-container {
		transform: none;
	}
	.fsa-anim-fade .fsa-img-container.is-active {
		transform: none;
	}
	.fsa-anim-fade .fsa-img-container.is-leaving {
		opacity: 0;
		transform: none;
	}

	/* Scale + fade */
	.fsa-anim-scale .fsa-img-container {
		transform: scale(0.96);
	}
	.fsa-anim-scale .fsa-img-container.is-active {
		transform: scale(1);
	}
	.fsa-anim-scale .fsa-img-container.is-leaving {
		transform: scale(1.04);
		opacity: 0;
	}
}

/* ==========================================================================
   Respekt k systémovému nastavení sníženého pohybu
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.fsa-img-container,
	.fsa-icon-arrow,
	.fsa-title-text,
	.fsa-title-icon,
	.fsa-toggle,
	.fsa-item.is-active .fsa-content {
		transition: none !important;
		animation: none !important;
		transform: none !important;
	}
}