/* Gevelwerken Limburg V34.2 — isolated, forced before/after interaction layer.
   This file intentionally changes only [data-compare] and [data-scan-compare]. */
[data-compare],
[data-scan-compare]{
  --compare-position:50%;
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  pointer-events:auto!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  cursor:ew-resize!important;
  contain:paint;
}

/* Full-surface transparent hit layer. It sits above old overlays and routes all
   mouse/touch interaction to compare-v34-2.js without changing the visuals. */
[data-compare] > .compare-v342-hitarea,
[data-scan-compare] > .compare-v342-hitarea{
  position:absolute!important;
  inset:0!important;
  z-index:2147483000!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  opacity:1!important;
  pointer-events:auto!important;
  touch-action:pan-y pinch-zoom!important;
  cursor:ew-resize!important;
}

[data-compare] .compare-before,
[data-compare] .compare-after,
[data-compare] .compare-before > img,
[data-compare] .compare-after > img,
[data-scan-compare] > img,
[data-scan-compare] .scan-clean,
[data-scan-compare] .scan-clean > img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  max-width:none!important;
  min-height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
}

/* The after/clean image remains exactly aligned with the before image.
   Only its visible window changes, so it cannot stretch or slide separately. */
[data-compare] .compare-after,
[data-scan-compare] .scan-clean{
  z-index:2!important;
  overflow:hidden!important;
  clip-path:inset(0 0 0 var(--compare-position))!important;
  -webkit-clip-path:inset(0 0 0 var(--compare-position))!important;
  will-change:clip-path;
  pointer-events:none!important;
}

[data-compare] .compare-before,
[data-scan-compare] > img:not(.scan-clean){
  z-index:1!important;
  pointer-events:none!important;
}

[data-compare] .compare-line,
[data-scan-compare] .scan-divider{
  left:var(--compare-position)!important;
  z-index:20!important;
  transform:translateX(-1px)!important;
  will-change:left;
  pointer-events:none!important;
}

[data-compare] .compare-handle,
[data-compare] .compare-label,
[data-scan-compare] .scan-label{
  pointer-events:none!important;
}

/* The real range stays in the tab order for keyboard users. Pointer input is
   deliberately handled by the dedicated hit layer above. */
[data-compare] input[type="range"],
[data-scan-compare] input[type="range"]{
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  opacity:0!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  background:transparent!important;
  pointer-events:none!important;
}

[data-compare].is-pointer-comparing > .compare-v342-hitarea,
[data-scan-compare].is-pointer-comparing > .compare-v342-hitarea{
  cursor:grabbing!important;
}

[data-compare].is-keyboard-focus,
[data-scan-compare].is-keyboard-focus{
  outline:3px solid rgba(237,85,37,.72)!important;
  outline-offset:3px!important;
}

/* Existing decorative hero layers may remain visible but cannot steal drag. */
.hero-v22-result-card,
.hero-v22-badge{
  pointer-events:none!important;
}

@media (prefers-reduced-motion:reduce){
  [data-compare] .compare-after,
  [data-scan-compare] .scan-clean,
  [data-compare] .compare-line,
  [data-scan-compare] .scan-divider{
    will-change:auto;
  }
}