/* Before/after slider (assets/compare.js). The "after" picture covers the left part, up to --pos. */
.cmp {
  --pos: 50%;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #e9e9e7;
  cursor: ew-resize;
  touch-action: pan-y;           /* vertical scrolling still works on phones; sideways drags move the slider */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.cmp img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cmp-before { position: relative; }
.cmp-after { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.cmp-label {
  position: absolute; top: 12px; padding: 4px 10px; border-radius: 999px;
  background: rgba(20, 22, 24, .62); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3;
  pointer-events: none; transition: opacity .15s;
}
.cmp-label-after { left: 12px; }
.cmp-label-before { right: 12px; }
/* A label steps aside when the handle covers it. */
.cmp[data-near="left"] .cmp-label-after, .cmp[data-near="right"] .cmp-label-before { opacity: 0; }

.cmp-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 44px; margin-left: -22px;
  display: flex; align-items: center; justify-content: center; outline: none;
}
.cmp-handle::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px;
  background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 0 12px rgba(0, 0, 0, .25);
}
.cmp-knob {
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #2b2f33; box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cmp-knob svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cmp.is-dragging .cmp-knob { transform: scale(1.1); box-shadow: 0 4px 18px rgba(0, 0, 0, .38); }
/* Keyboard focus shows as a ring on the knob, not a box around the whole handle strip. */
.cmp .cmp-handle:focus, .cmp .cmp-handle:focus-visible { outline: none; }
.cmp-handle:focus-visible .cmp-knob { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--cmp-focus, #1e5a4b); }
@media (prefers-reduced-motion: reduce) { .cmp-knob, .cmp-label { transition: none; } }