/* ==========================================================================
   Component: before/after image comparison slider (.vt-slider)
   Markup is produced by the `img_slider(...)` macro in main.py, but can also
   be written by hand. Behaviour lives in docs/js/slider.js.
   ========================================================================== */
.vt-slider {
  --vt-blue: #0d73b2;
  position: relative;
  display: block;                 /* block so margins collapse like an image */
  width: fit-content;             /* but still shrink-wrap the before image */
  max-width: 100%;
  margin: .5rem 0 1.5rem;
  border-radius: 10px;
  overflow: hidden;
  user-select: none;
  touch-action: none;
  line-height: 0;                 /* removes inline gap under the image */
  border: 1px solid rgba(0, 0, 0, .1);
}

/* the "before" image flows normally and sets the box to the real aspect ratio */
.vt-slider__before {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 420px;
  pointer-events: none;
}

/* the "after" image is overlaid and revealed by the clip */
.vt-slider__after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  clip-path: inset(0 0 0 50%);
}

.vt-slider__label {
  position: absolute;
  top: .5rem;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: .72rem;
  line-height: normal;
  padding: .15rem .5rem;
  border-radius: 4px;
  pointer-events: none;
}
.vt-slider__label--a { left: .5rem; }
.vt-slider__label--b { right: .5rem; }

/* purely decorative: clicks pass through to the range input beneath */
.vt-slider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background: var(--vt-blue);
  pointer-events: none;
}

/* the knob: white circle with a crisp double-chevron and soft depth */
.vt-slider__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--vt-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 8l-4 4 4 4'/%3E%3Cpath d='M16 8l4 4-4 4'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .05);
  transition: transform .13s ease, box-shadow .13s ease;
}

.vt-slider__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

/* grow the knob on hover / drag / keyboard focus for tactile feedback */
.vt-slider:hover .vt-slider__handle::after,
.vt-slider__range:focus-visible + .vt-slider__handle::after {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .32), 0 0 0 1px rgba(0, 0, 0, .05);
}
.vt-slider__range:active + .vt-slider__handle::after {
  transform: translate(-50%, -50%) scale(.96);
}
.vt-slider__range:focus-visible + .vt-slider__handle::after {
  outline: 3px solid rgba(13, 115, 178, .55);
  outline-offset: 2px;
}