/**
 * KW Before/After — Vorher/Nachher-Bildvergleich Widget (#43)
 * 3 Modi: Slider (clip-path), Fade (opacity), Flip (transform + backface-visibility)
 * GPU-only Properties, Dark Mode, Container Queries, Responsive, Reduced Motion.
 *
 * Abhängigkeiten: kw-lobby-frontend (Tokens)
 */

/* @property Schutz: verhindert dass Elementor-SLIDER-Bugs "px" an Prozentwerte hängen */
/* inherits: true — Kinder (.kw-ba__handle, .kw-ba__figure--after) müssen den Wert erben */
@property --kwl-ba-split {
	syntax: '<percentage>';
	inherits: true;
	initial-value: 50%;
}

/* ==========================================================================
   1. Custom Properties
   ========================================================================== */

.kw-ba {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;

	/* Slider */
	--kwl-ba-split: 50%;

	/* Fade */
	--kwl-ba-opacity: 0;

	/* Bild */
	--kwl-ba-img-radius: var(--kwl-radius-md, 8px);

	/* Handle (Slider-Modus) */
	--kwl-ba-handle-color: var(--kwl-accent, #BD9B5C);
	--kwl-ba-handle-width: 3px;
	--kwl-ba-handle-size: 44px;

	/* Badges */
	--kwl-ba-badge-bg: var(--kwl-primary, #00315d);
	--kwl-ba-badge-color: var(--kwl-btn-text, #ffffff);
	--kwl-ba-badge-radius: var(--kwl-radius-sm, 4px);

	/* Animationszeiten */
	--kwl-ba-flip-duration: 500ms;

	/* Handle-Schatten (Light: color-mix, Dark: override mit rgba) */
	--kwl-ba-handle-shadow: 0 2px 6px color-mix(in srgb, var(--kwl-text, #1a202c) 20%, transparent);

	/* Overlay-Hintergrund */
	--kwl-ba-overlay-bg: rgb(0 0 0 / 0.55);

	/* Interne Tokens */
	--kwl-ba-easing: var(--kwl-ease-default);
	--kwl-ba-focus-color: var(--kwl-focus, #7B6835);
}

/* ==========================================================================
   2. Ausrichtung (via prefix_class auf Elementor-Wrapper)
   ========================================================================== */

/* Ausrichtung wirkt nur wenn max-width per Elementor-Slider gesetzt ist.
   Ohne max-width ist das Widget 100% breit → Margins sind wirkungslos. */
.kw-ba-align-left .kw-ba { margin-right: auto; }
.kw-ba-align-center .kw-ba { margin-inline: auto; }
.kw-ba-align-right .kw-ba { margin-left: auto; }

/* ==========================================================================
   3. Shadow (via prefix_class auf Elementor-Wrapper → Descendant-Selektor)
   ========================================================================== */

.kw-ba--shadow-sm .kw-ba__container { box-shadow: var(--kwl-shadow-sm); }
.kw-ba--shadow-md .kw-ba__container { box-shadow: var(--kwl-shadow-md); }
.kw-ba--shadow-lg .kw-ba__container { box-shadow: var(--kwl-shadow-lg); }
.kw-ba--shadow-none .kw-ba__container { box-shadow: none; }

/* ==========================================================================
   4. Aspect Ratios (via data-Attribut, kein Inline-Style)
   ========================================================================== */

/* Attribut liegt AUF .kw-ba__container — combined selector, kein Descendant */
.kw-ba__container[data-kwl-ba-ratio="16/9"] { aspect-ratio: 16 / 9; }
.kw-ba__container[data-kwl-ba-ratio="4/3"]  { aspect-ratio: 4 / 3; }
.kw-ba__container[data-kwl-ba-ratio="3/2"]  { aspect-ratio: 3 / 2; }
.kw-ba__container[data-kwl-ba-ratio="1/1"]  { aspect-ratio: 1 / 1; }

/* ==========================================================================
   5. Container-Layout
   ========================================================================== */

.kw-ba__container {
	position: relative;
	overflow: hidden;
	border-radius: var(--kwl-ba-img-radius);
	user-select: none;
	container-type: inline-size;
	container-name: ba-inner;
	max-height: var(--kwl-ba-max-height, 500px);
}

/* ==========================================================================
   6. Figuren (Vorher/Nachher-Layer)
   ========================================================================== */

.kw-ba__figure {
	margin: 0;
	padding: 0;
}

/* Vorher-Bild: Basis-Layer (relativ, definiert Größe) */
/* z-index: 1 erzeugt Stacking Context — verhindert dass Kinder (Badges, Untertitel)
   über die Nachher-Figur hinaus malen (z.B. im Fade-Modus bei opacity < 1) */
.kw-ba__figure--before {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
}

/* Nachher-Bild: darüber (absolut, geclippt/gefadet/geflippt) */
/* z-index: 2 — immer über der Vorher-Figur (DOM-Reihenfolge allein reicht nicht
   bei Stacking Contexts durch opacity < 1) */
.kw-ba__figure--after {
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* Bilder: Spezifität (0,3,1) gegen Elementor V4 Img-Resets */
/* pointer-events: none — Slider-Drag geht durch Bilder durch */
/* Vorher-Bild: height auto — bestimmt Container-Höhe bei auto-Ratio */
.kw-ba .kw-ba__container .kw-ba__figure--before img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	object-fit: cover;
	pointer-events: none;
}

/* Nachher-Bild: füllt absolut positionierten Layer */
.kw-ba .kw-ba__container .kw-ba__figure--after img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	pointer-events: none;
}

/* Ohne Seitenverhältnis (auto): 4:3 Fallback mit max-height Sicherheitsnetz.
   Identisches Pattern wie mit explizitem Ratio — beide Figuren absolut, object-fit: cover. */
.kw-ba__container:not([data-kwl-ba-ratio]) {
	aspect-ratio: 4 / 3;
}

.kw-ba__container:not([data-kwl-ba-ratio]) .kw-ba__figure--before {
	position: absolute;
	inset: 0;
}

.kw-ba .kw-ba__container:not([data-kwl-ba-ratio]) .kw-ba__figure--before img {
	height: 100%;
}

/* Mit explizitem Seitenverhältnis: before-Figur auch absolut, Bild füllt Container */
.kw-ba__container[data-kwl-ba-ratio] .kw-ba__figure--before {
	position: absolute;
	inset: 0;
}

.kw-ba .kw-ba__container[data-kwl-ba-ratio] .kw-ba__figure--before img {
	height: 100%;
}

/* ==========================================================================
   7. Modus: Slider (clip-path)
   Vorher-Bild links (Basis), Nachher-Bild rechts (geclippt).
   --kwl-ba-split: 50% = After beginnt bei 50% von links.
   0% = alles Nachher, 100% = alles Vorher.
   ========================================================================== */

/* Vorher-Bild: nur links vom Split sichtbar (damit Untertitel+Badges nicht durchscheinen) */
[data-kwl-ba-mode="slider"] .kw-ba__figure--before {
	clip-path: inset(0 calc(100% - var(--kwl-ba-split)) 0 0);
}

/* Nachher-Bild: nur rechts vom Split sichtbar */
[data-kwl-ba-mode="slider"] .kw-ba__figure--after {
	clip-path: inset(0 0 0 var(--kwl-ba-split));
}

/* Slider-Cursor auf Container (Range-Input handelt Interaktion) */
[data-kwl-ba-mode="slider"] .kw-ba__container {
	cursor: col-resize;
}

/* ==========================================================================
   8. Modus: Fade (opacity)
   ========================================================================== */

[data-kwl-ba-mode="fade"] .kw-ba__figure--after {
	opacity: var(--kwl-ba-opacity);
}

/* ==========================================================================
   9. Modus: Flip (3D-Transform + backface-visibility)
   ========================================================================== */

[data-kwl-ba-mode="flip"] .kw-ba__container {
	perspective: 1000px;
	cursor: pointer;
}

[data-kwl-ba-mode="flip"] .kw-ba__figure {
	backface-visibility: hidden;
	transition: transform var(--kwl-ba-flip-duration) var(--kwl-ba-easing);
}

/* Nachher-Bild startet umgeklappt (Rückseite) */
[data-kwl-ba-mode="flip"] .kw-ba__figure--after {
	transform: rotateY(180deg);
}

/* Flipped-Zustand: Vorher wegdrehen, Nachher zeigen */
[data-kwl-ba-mode="flip"].kw-ba--flipped .kw-ba__figure--before {
	transform: rotateY(-180deg);
}

[data-kwl-ba-mode="flip"].kw-ba--flipped .kw-ba__figure--after {
	transform: rotateY(0deg);
}

/* ==========================================================================
   10. Handle (Slider-Modus)
   Vertikale Linie (volle Höhe) + kreisförmiger Griff in der Mitte.
   BFSG: min. 44px Touch-Target, :focus-visible 3px Ring.
   ========================================================================== */

/* Handle: rein visuelles <div>, folgt dem Range-Input per --kwl-ba-split */
.kw-ba__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--kwl-ba-split);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--kwl-ba-handle-width);
	padding: 0;
	border: none;
	background: var(--kwl-ba-handle-color);
	transform: translateX(-50%);
	box-shadow: var(--kwl-ba-handle-shadow);
	pointer-events: none;
}

/* Kreisförmiger Griff in der Mitte */
.kw-ba__handle-grip {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--kwl-ba-handle-size);
	height: var(--kwl-ba-handle-size);
	border-radius: var(--kwl-radius-full, 9999px);
	background: var(--kwl-ba-handle-color);
	box-shadow: var(--kwl-ba-handle-shadow);
	pointer-events: none;
}

/* Doppelpfeil-Symbol im Griff */
.kw-ba__handle-grip::before {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	border-left: 2px solid var(--kwl-btn-text, #ffffff);
	border-right: 2px solid var(--kwl-btn-text, #ffffff);
}

/* Focus-Relay: Range fokussiert → Handle zeigt den Ring (BFSG) */
[data-kwl-ba-mode="slider"] .kw-ba__range:focus-visible ~ .kw-ba__handle {
	outline: 3px solid var(--kwl-ba-focus-color);
	outline-offset: 2px;
}

/* Nicht-Slider-Modi: Handle verstecken */
[data-kwl-ba-mode="fade"] .kw-ba__handle,
[data-kwl-ba-mode="flip"] .kw-ba__handle {
	display: none;
}

/* ==========================================================================
   11. Badges (Vorher/Nachher-Labels)
   ========================================================================== */

.kw-ba__badge {
	position: absolute;
	z-index: 2;
	padding: var(--kwl-space-xs, 0.25rem) var(--kwl-space-sm, 0.75rem);
	background: var(--kwl-ba-badge-bg);
	color: var(--kwl-ba-badge-color);
	border-radius: var(--kwl-ba-badge-radius);
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-caption, 0.8125rem);
	font-weight: var(--kwl-fw-semibold);
	letter-spacing: var(--kwl-ls-wide);
	line-height: var(--kwl-lh-none, 1);
	pointer-events: none;
	text-transform: uppercase;
}

/* Vorher-Badge: links oben */
.kw-ba__badge--before {
	top: 12px;
	left: 12px;
}

/* Nachher-Badge: rechts oben */
.kw-ba__badge--after {
	top: 12px;
	right: 12px;
}

/* Badges liegen jetzt IN den Figuren:
   - Slider: clip-path auf beiden Figuren clippt automatisch die Badges
   - Fade: opacity auf After-Figur blendet automatisch das After-Badge mit
   - Flip: transform auf Figuren klappt automatisch die Badges mit */

/* ==========================================================================
   12. Range-Input (Slider + Fade)
   ========================================================================== */

/* Basis: gemeinsame Styles */
.kw-ba__range {
	position: absolute;
	margin: 0;
	accent-color: var(--kwl-ba-handle-color);
}

/* Slider: unsichtbarer Range über gesamte Bildfläche
   Browser übernimmt Touch, Drag, Keyboard komplett.
   z-index: 4 — über dem Handle (z-index: 3), damit Interaktionen ankommen */
[data-kwl-ba-mode="slider"] .kw-ba__range {
	inset: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
	padding: 0;
	opacity: 0;
	cursor: col-resize;
	touch-action: pan-y;
	appearance: none;
}

/* Slider-Range: Focus-Ring nicht auf dem unsichtbaren Input zeigen
   (Focus-Relay auf .kw-ba__handle via Sibling-Selektor in Sektion 10) */
[data-kwl-ba-mode="slider"] .kw-ba__range:focus-visible {
	outline: none;
}

/* Fade: sichtbarer Regler am unteren Rand */
[data-kwl-ba-mode="fade"] .kw-ba__range {
	bottom: 16px;
	left: 16px;
	right: 16px;
	z-index: 3;
	width: calc(100% - 32px);
	height: 44px;
	cursor: pointer;
}

.kw-ba__range:focus-visible {
	outline: 3px solid var(--kwl-ba-focus-color);
	outline-offset: 2px;
}

/* Flip: Range nicht benötigt */
[data-kwl-ba-mode="flip"] .kw-ba__range {
	display: none;
}

/* ==========================================================================
   13. Flip-Button (unsichtbar, gesamte Fläche)
   ========================================================================== */

.kw-ba__flip-btn {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
}

.kw-ba__flip-btn:focus-visible {
	outline: 3px solid var(--kwl-ba-focus-color);
	outline-offset: 2px;
}

/* V4 Reset: Flip-Button transparent halten — ALLE States (Gotcha: V4 Hover pink) */
.kw-ba .kw-ba__container .kw-ba__flip-btn,
.kw-ba .kw-ba__container .kw-ba__flip-btn:hover,
.kw-ba .kw-ba__container .kw-ba__flip-btn:active,
.kw-ba .kw-ba__container .kw-ba__flip-btn:focus {
	background: transparent;
	border: none;
	color: transparent;
	box-shadow: none;
}

/* Nicht-Flip-Modi: Flip-Button verstecken */
[data-kwl-ba-mode="slider"] .kw-ba__flip-btn,
[data-kwl-ba-mode="fade"] .kw-ba__flip-btn {
	display: none;
}

/* ==========================================================================
   14. Überschrift
   ========================================================================== */

.kw-ba__heading {
	margin: 0 0 var(--kwl-space-md, 1rem);
}

/* ==========================================================================
   15. Untertitel (Figcaption)
   ========================================================================== */

.kw-ba__subtitle {
	color: var(--kwl-text-muted, #718096);
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-small, 0.875rem);
	line-height: var(--kwl-lh-relaxed, 1.4);
	margin: 0;
	padding: var(--kwl-space-xs, 0.25rem) 0 0;
}

/* Slider/Fade/Flip: Untertitel als Overlay unten */
[data-kwl-ba-mode="slider"] .kw-ba__subtitle,
[data-kwl-ba-mode="fade"] .kw-ba__subtitle,
[data-kwl-ba-mode="flip"] .kw-ba__subtitle {
	position: absolute;
	bottom: 12px;
	z-index: 2;
	padding: var(--kwl-space-xs, 0.25rem) 10px;
	background: var(--kwl-ba-overlay-bg);
	color: #ffffff;
	border-radius: var(--kwl-radius-sm, 4px);
	font-size: var(--kwl-fsize-caption, 0.75rem);
	font-weight: var(--kwl-fw-medium, 500);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(8px);
}

/* Vorher-Untertitel: links unten */
[data-kwl-ba-mode="slider"] .kw-ba__figure--before .kw-ba__subtitle,
[data-kwl-ba-mode="fade"] .kw-ba__figure--before .kw-ba__subtitle,
[data-kwl-ba-mode="flip"] .kw-ba__figure--before .kw-ba__subtitle {
	left: 12px;
}

/* Nachher-Untertitel: rechts unten */
[data-kwl-ba-mode="slider"] .kw-ba__figure--after .kw-ba__subtitle,
[data-kwl-ba-mode="fade"] .kw-ba__figure--after .kw-ba__subtitle {
	right: 12px;
}

/* Flip Nachher-Untertitel: auch links (gleiche Seite wie Vorher nach Flip) */
[data-kwl-ba-mode="flip"] .kw-ba__figure--after .kw-ba__subtitle {
	left: 12px;
}

/* ==========================================================================
   16. Container Queries (kompakte Darstellung auf kleinen Containern)
   ========================================================================== */

@container ba-inner (max-width: 400px) {
	/* Kompaktere Badges */
	.kw-ba__badge {
		padding: 3px 8px;
		font-size: var(--kwl-fsize-caption, 0.75rem);
	}

	/* Untertitel-Overlays kleiner */
	.kw-ba__subtitle {
		font-size: var(--kwl-fsize-caption, 0.75rem);
	}

	/* Fade-Range-Regler schmaler (Slider nutzt inset:0, nicht betroffen) */
	[data-kwl-ba-mode="fade"] .kw-ba__range {
		left: 8px;
		right: 8px;
		width: calc(100% - 16px);
	}
}

/* ==========================================================================
   17. Responsive — Mobile-First
   ========================================================================== */

/* Touch-Geräte: größerer Handle für bessere Bedienbarkeit */
@media (pointer: coarse) {
	.kw-ba {
		--kwl-ba-handle-size: 52px;
	}
}

/* Schmale Viewports: Untertitel unter das Bild statt Overlay */
@media (max-width: 360px) {
	[data-kwl-ba-mode="slider"] .kw-ba__subtitle,
	[data-kwl-ba-mode="fade"] .kw-ba__subtitle,
	[data-kwl-ba-mode="flip"] .kw-ba__subtitle {
		position: static;
		background: none;
		color: var(--kwl-text-muted, #718096);
		padding: var(--kwl-space-xs, 0.25rem) 0;
		backdrop-filter: none;
		border-radius: 0;
	}
}

/* ==========================================================================
   18. prefers-reduced-motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	/* Flip: sofortiger Wechsel, perspective bleibt (backface-visibility braucht 3D-Kontext) */
	[data-kwl-ba-mode="flip"] .kw-ba__figure {
		transition-duration: 0ms;
	}

	/* Handle: kein Schatten-Übergang */
	.kw-ba__handle {
		transition: none;
	}
}

/* ==========================================================================
   19. Dark Mode
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	.kw-ba {
		/* Handle-Schatten: rgba statt color-mix (bessere Kontrolle auf dunklem Hintergrund) */
		--kwl-ba-handle-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);

		/* Overlay deutlich dunkler für Lesbarkeit auf dunklen Bildern */
		--kwl-ba-overlay-bg: rgb(0 0 0 / 0.85);

		/* Focus anpassen */
		--kwl-ba-focus-color: var(--kwl-focus, #c9a84c);
	}
}