/* ============================================================ BEFORE / AFTER SLIDER
   Two images and a draggable divider. Ours: no dependencies, no build step.
   This is a base, not a widget with settings -- it does one thing, and anything else you
   want from it you add right here, in plain CSS.

   Markup (compare.js finds the block by [data-compare] and adds the handle):

     <div class="compare" data-compare>
       <img class="compare__img" src="before.jpg" alt="...">
       <img class="compare__img" src="after.jpg"  alt="...">
     </div>

   Without JS the second image simply sits on top and the block reads as a normal cover.

   Two variables are here because they are worth setting per instance from the markup:
     --compare-ratio   (default 3/2)     <div class="compare" style="--compare-ratio:1">
     --compare-radius  (default 16px)
   Everything else is a normal rule below -- edit it, there is no option layer in the way. */

.compare{
  --compare-ratio:3/2;
  --compare-radius:16px;
  --compare-pos:50%;               /* compare.js writes this; it is the only moving part */

  position:relative;isolation:isolate;
  width:100%;aspect-ratio:var(--compare-ratio);
  border-radius:var(--compare-radius);overflow:hidden;
  background:var(--placeholder,#f2f2f2);
  user-select:none;-webkit-user-select:none;
  touch-action:pan-y;              /* sideways drags are ours, the page keeps its vertical scroll */
}

/* ---- the two layers ---- */
.compare__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;pointer-events:none;-webkit-user-drag:none;
}
/* The reveal. compare.js wraps the top layer in this; it spans the whole block, so the cut lands
   exactly where the divider is even when the images sit inset in a padded box. */
.compare__clip{position:absolute;inset:0;clip-path:inset(0 0 0 var(--compare-pos))}

/* A keyboard step glides. A drag has to track the finger, and the intro writes its own frame every
   frame -- a transition on top of either of those fights them and shows up as stutter. */
.compare:not(.is-dragging):not(.is-playing) .compare__clip{transition:clip-path .18s ease}
.compare:not(.is-dragging):not(.is-playing) .compare__handle{transition:left .18s ease}
@media (prefers-reduced-motion:reduce){
  .compare:not(.is-dragging):not(.is-playing) .compare__clip,
  .compare:not(.is-dragging):not(.is-playing) .compare__handle{transition:none}
}

/* ---- the handle: a zero-width column standing on the divider, knob centred on it ---- */
.compare__handle{
  position:absolute;left:var(--compare-pos);top:0;z-index:2;
  width:0;height:100%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;                                /* the chevrons: they sit on the dark knob */
  cursor:col-resize;
}
.compare__handle::before{                    /* the divider line */
  content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;
  background:var(--ink,#26251d);
}
.compare__handle::after{                     /* invisible grab strip: the knob alone is a small target for a finger */
  content:"";position:absolute;top:0;bottom:0;left:-22px;width:44px;
}

.compare__knob{
  position:relative;                         /* paints over the divider */
  display:grid;place-items:center;
  flex:none;                                 /* the handle is 0 wide: without this the knob shrinks to nothing */
  width:48px;height:48px;
  border-radius:50%;
  background:var(--ink,#26251d);             /* a solid dark disc: it has to read over any screenshot */
}

/* No focus ring, by design decision. The outline:none stays and is doing work: without it the
   site-wide :focus-visible rule in case.css would draw a hairline down the zero-width handle. */
.compare__handle:focus-visible{outline:none}

@media (max-width:820px){
  .compare__knob{width:40px;height:40px}
}