/* Comparison slider (before/after reveal).
 *
 * Pairs with the <comparison-slider> custom element in
 * assets/js/comparison-slider.js. Kept in its own file (and namespaced under
 * .comparison) so it can move into brio as a component with minimal edits;
 * see the JS header for the port notes.
 *
 * Markup contract:
 *
 *   <comparison-slider class="comparison" style="--comparison-ratio: 3/2">
 *     <img class="comparison__img" src="before.jpg" alt="Before: ...">
 *     <div class="comparison__after">
 *       <img class="comparison__img" src="after.jpg" alt="After: ...">
 *     </div>
 *     <input class="comparison__range" type="range" min="0" max="100" value="50"
 *            aria-label="Reveal before and after: ...">
 *     <span class="comparison__divider" aria-hidden="true"></span>
 *     <span class="comparison__caption">Optional caption</span>
 *   </comparison-slider>
 *
 * The native range is the control; the element mirrors its value to --pos.
 * The "after" layer is clipped to --pos and the divider sits at --pos.
 *
 * Knobs:
 *   --comparison-ratio  frame aspect ratio (default 4 / 3)
 *   --pos               reveal position, set by the element (default 50%)
 *
 * Divider and caption use fixed dark/light literals (mode-invariant, same
 * rationale as .ba-pair__label) since they sit over photos in either theme.
 */
.comparison {
  position: relative;
  display: block;
  aspect-ratio: var(--comparison-ratio, 4 / 3);
  overflow: hidden;
  border-radius: var(--radius-lg);
  isolation: isolate;
  --pos: 50%;
  touch-action: none;   /* let the range own horizontal drags on touch */
}

.comparison__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* After layer sits above the before image, clipped from the right to --pos. */
.comparison__after {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

/* Vertical divider centered on --pos, with a round grab handle. */
.comparison__divider {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--pos);
  inline-size: 2px;
  margin-inline-start: -1px;
  background: oklch(97% 0.004 70);
  box-shadow: 0 0 0 1px oklch(20% 0.01 60 / 0.35);
  z-index: 2;
  pointer-events: none;   /* the range underneath handles dragging */
}

/* ::before = white circle handle; ::after = arrow glyph painted on top. */
.comparison__divider::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: oklch(97% 0.004 70);
  box-shadow: 0 1px 4px oklch(20% 0.01 60 / 0.45);
}

.comparison__divider::after {
  content: "\2194";   /* left-right arrow */
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  color: oklch(35% 0.02 60);
  font-size: 1rem;
  line-height: 1;
}

/* The range is a transparent full-bleed overlay; its thumb is the hit target
   aligned to the divider. The visual divider above does the rendering. */
.comparison__range {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: ew-resize;
  z-index: 3;
}

.comparison__range:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.comparison__range::-webkit-slider-runnable-track { background: transparent; }
.comparison__range::-moz-range-track { background: transparent; }

.comparison__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 2.5rem;
  block-size: 100%;
  background: transparent;
  cursor: ew-resize;
}
.comparison__range::-moz-range-thumb {
  inline-size: 2.5rem;
  block-size: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: ew-resize;
}

/* Caption chip, reusing the .ba-pair__label treatment. */
.comparison__caption {
  position: absolute;
  inset-block-end: var(--space-xs);
  inset-inline-start: var(--space-xs);
  z-index: 2;
  background: oklch(22% 0.008 55 / 0.72);
  color: oklch(96% 0.004 70);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.2em 0.6em;
  border-radius: var(--radius-sm);
  pointer-events: none;
}