/**
 * Fischer Vergleichsregler — frontend styles.
 *
 * Ported from before-after.html's "Version 3" slider (.ba3-slider and
 * friends, see styles/before-after.css in the design-export-code-
 * impeccable project) with class names namespaced to .ffh-ba-* so this
 * plugin never collides with a theme's own CSS. Sizing is deliberately
 * relative throughout — width:100% + aspect-ratio, no fixed pixel
 * dimensions anywhere — so the widget fills whatever Elementor
 * container it's placed inside, matching the "Merkmal 2" media box on
 * technik.html (which is exactly where --ffh-ba-ratio's default of
 * 4/3 comes from) without needing that container's exact width known
 * up front.
 *
 * Every declaration below is !important. Themes and Elementor's own
 * base styles both commonly ship a global `img { max-width:100%;
 * height:auto; }` reset — a plain-tag selector, but its specificity
 * TIES with a compound selector like `.ffh-ba-reveal img`, which means
 * the winner comes down to CSS source order rather than intent, and it
 * unconditionally BEATS a single-class selector like `.ffh-ba-base`
 * (lower specificity). In practice that let the theme's `height:auto`
 * win on one image layer but not the other, which is exactly what
 * caused the two layered images to render at different heights instead
 * of perfectly overlaid. !important sidesteps the whole specificity
 * fight instead of trying to out-rank every theme this ships on.
 *
 * All widget-editable values arrive as CSS custom properties set
 * inline on .ffh-ba-wrap by the PHP render() method (aspect ratio,
 * accent/handle/label colors, image-fit) or as ordinary Elementor
 * {{WRAPPER}} selectors for border-radius/box-shadow/typography (also
 * !important there — see class-ffh-ba-slider-widget.php's
 * register_controls()).
 */

/**
 * height:100% here (and on .ffh-ba below, and on Elementor's OWN
 * generated wrapper elements further below) is what makes the widget
 * actually fill a container taller than its aspect-ratio alone would
 * produce — e.g. a flex column with align-items:stretch, which only
 * stretches the CROSS axis (width) in column direction, never the
 * main axis (height). height:100% only takes effect when an ancestor
 * actually has a definite height to resolve against; when nothing
 * upstream does, it resolves to auto and aspect-ratio drives the size
 * instead, so this doesn't break the "just works standalone with no
 * fixed-height container" case. */
.ffh-ba-wrap {
  --ffh-ba-ratio: 4 / 3;
  --ffh-ba-accent: #FF6800;
  --ffh-ba-handle-bg: #FFFFFF;
  --ffh-ba-label-bg: rgba(255, 255, 255, 0.92);
  --ffh-ba-label-color: #1A1A1A;
  --ffh-ba-fit: contain;
  --ffh-ba-pos: 50%;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/**
 * Elementor's own generated wrapper divs around this widget
 * (.elementor-widget-container, .elementor-widget-ffh-ba-slider) never
 * get a height by default — confirmed on the live page: both compute
 * to height:0px even inside a 571px-tall flex column, because nothing
 * tells THEM to stretch either. Reaching into those two classes
 * specifically (scoped to only when they're wrapping THIS widget, via
 * the auto-generated .elementor-widget-ffh-ba-slider class) is the
 * only way to close that gap — my own CSS can't fix ancestors it
 * doesn't generate any other way. */
.elementor-widget-ffh-ba-slider,
.elementor-widget-ffh-ba-slider > .elementor-widget-container {
  height: 100% !important;
}

.ffh-ba-placeholder {
  padding: 40px 20px !important;
  text-align: center !important;
  border: 2px dashed #ccc !important;
  border-radius: 12px !important;
  color: #666 !important;
  font-family: sans-serif !important;
}

.ffh-ba {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: var(--ffh-ba-ratio) !important;
  border-radius: 28px !important; /* overridden by Elementor's border_radius control, also !important there */
  overflow: hidden !important;
  background: #FAF7F2 !important;
  cursor: grab !important;
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

.ffh-ba.-dragging { cursor: grabbing !important; }

.ffh-ba:focus {
  outline: none !important;
}
.ffh-ba:focus-visible {
  box-shadow: 0 0 0 4px var(--ffh-ba-accent) !important;
}

/**
 * Base = the "underneath" layer, always fully painted, never clipped
 * — the closed/assembled image, per request. Reveal = the layer
 * clipped by the drag position — the open/Innenleben image, visible
 * only on the LEFT portion of the slider (clip-path direction below
 * is flipped accordingly so "Geöffnet" stays on the left / "Geschlossen"
 * stays on the right regardless of which layer physically holds which
 * image — see class-ffh-ba-slider-widget.php's render() for the image
 * assignment itself).
 */
.ffh-ba-base,
.ffh-ba-reveal img {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: var(--ffh-ba-fit) !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  -webkit-user-drag: none !important;
}

.ffh-ba-reveal {
  position: absolute !important;
  inset: 0 !important;
  /* Visible region is var(--ffh-ba-pos) → 100% (the RIGHT portion) —
     clips away everything from the LEFT edge inward by pos. Base
     (closed image) shows through on the left where reveal is clipped
     away; reveal (open image) is visible on the right. Matches
     "Geschlossen links, Geöffnet rechts" per request — labels/DOM
     order in class-ffh-ba-slider-widget.php's render() are what keep
     each badge tied to (and clipped/covered along with) its own
     image layer, see the .ffh-ba-label rule below. */
  clip-path: inset( 0 0 0 var( --ffh-ba-pos ) ) !important;
}

.ffh-ba-handle-line {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: var(--ffh-ba-pos) !important;
  width: 3px !important;
  background: var(--ffh-ba-handle-bg) !important;
  box-shadow: 0 0 0 1px rgba(26, 26, 26, 0.1), 0 0 20px rgba(0, 0, 0, 0.18) !important;
  transform: translateX(-1.5px) !important;
  pointer-events: none !important;
}

/* Position owned entirely by JS via `left: var(--ffh-ba-pos)` +
   translate(-50%,-50%) below — deliberately not animated with a CSS
   `transition` on `left` (layout-triggering, janky at 60fps); instead
   the JS eases the underlying --ffh-ba-pos value itself on release/
   keyboard/autoplay moves (see ba-slider.js's `animateTo`), same
   "physical" feel the original GSAP version had without requiring
   GSAP as a dependency. */
.ffh-ba-handle {
  position: absolute !important;
  top: 50% !important;
  left: var(--ffh-ba-pos) !important;
  transform: translate(-50%, -50%) !important;
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  background: var(--ffh-ba-handle-bg) !important;
  box-shadow: 0 14px 32px rgba(26, 26, 26, 0.26), 0 0 0 6px rgba(255, 255, 255, 0.55) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  color: var(--ffh-ba-accent) !important;
  pointer-events: none !important;
  margin: 0 !important;
}

/**
 * Both badges are clipped by their own dedicated clip-path now, not by
 * "hope something opaque paints over it". -after ("Geöffnet") is
 * nested directly inside .ffh-ba-reveal, so reveal's own clip-path
 * clips it along with the image. -before ("Geschlossen") gets its own
 * wrapper (.ffh-ba-mask-before, below) with the COMPLEMENTARY
 * clip-path — this replaces an earlier version that just relied on
 * DOM stacking order (painting it underneath reveal, assuming reveal's
 * own image content would visually cover it). That broke in practice:
 * object-fit:contain can letterbox the image with transparent gaps —
 * especially near the top, exactly where the badges sit — so reveal
 * had nothing opaque there to cover it with, even while reveal's own
 * clip-path region nominally included that spot. A real clip-path on
 * an ancestor doesn't have that problem; it hides the badge outright
 * regardless of what the image underneath does or doesn't paint.
 */
.ffh-ba-mask-before {
  position: absolute !important;
  inset: 0 !important;
  /* Complement of .ffh-ba-reveal's clip-path: visible from 0 → pos
     (the LEFT portion, where base/closed dominates) instead of
     pos → 100%. */
  clip-path: inset( 0 calc( 100% - var( --ffh-ba-pos ) ) 0 0 ) !important;
  pointer-events: none !important;
}

.ffh-ba-label {
  position: absolute !important;
  top: 16px !important;
  padding: 9px 16px !important;
  border-radius: 999px !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  background: var(--ffh-ba-label-bg) !important;
  color: var(--ffh-ba-label-color) !important;
  pointer-events: none !important;
  margin: 0 !important;
}
.ffh-ba-label.-before { left: 16px !important; right: auto !important; }
.ffh-ba-label.-after { right: 16px !important; left: auto !important; }

.ffh-ba-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 16px !important;
  margin-top: 24px !important;
}

.ffh-ba-btn {
  min-height: 56px !important;
  padding: 15px 30px !important;
  border-radius: 999px !important;
  border: 2px solid #EEE7DE !important;
  background: #fff !important;
  color: #1A1A1A !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s !important;
}
.ffh-ba-btn:hover { box-shadow: 0 8px 24px rgba(26, 26, 26, 0.10) !important; transform: translateY(-2px) !important; }
.ffh-ba-btn:active { transform: translateY(0) scale(0.98) !important; }
.ffh-ba-btn:focus { outline: none !important; }
.ffh-ba-btn:focus-visible { outline: 3px solid var(--ffh-ba-accent) !important; outline-offset: 3px !important; }
.ffh-ba-btn.-active { background: var(--ffh-ba-accent) !important; border-color: var(--ffh-ba-accent) !important; color: #1A1A1A !important; }

@media (max-width: 640px) {
  .ffh-ba { cursor: default !important; }
  .ffh-ba-handle { width: 60px !important; height: 60px !important; }
  .ffh-ba-label { font-size: 12.5px !important; padding: 7px 13px !important; top: 10px !important; }
  .ffh-ba-btn { flex: 1 1 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ffh-ba-handle,
  .ffh-ba-handle-line,
  .ffh-ba-reveal {
    transition: none !important;
  }
}