/* Three-image comparison frame: one image per rendering, two draggable handles.
   Behaviour lives in assets/js/sprites-process-v2.js ([data-compare-three]).
   The three images must share one pixel size and one framing. */
.compare-three-frame {
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}

.compare-three-frame .compare-three-base,
.compare-three-frame .compare-three-layer,
.compare-three-frame .compare-three-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.compare-three-frame .compare-three-base {
  z-index: 0;
}

.compare-three-frame .compare-three-layer {
  overflow: hidden;
}

.compare-three-frame .compare-three-middle {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--compare-right)) 0 0);
}

.compare-three-frame .compare-three-left {
  z-index: 3;
  clip-path: inset(0 calc(100% - var(--compare-left)) 0 0);
}

.compare-three-line {
  position: absolute;
  z-index: 7;
  top: 0;
  bottom: 0;
  width: 1px;
  translate: -50% 0;
  background: var(--gold-bright);
  pointer-events: none;
}

.compare-three-line-left {
  left: var(--compare-left);
}

.compare-three-line-right {
  left: var(--compare-right);
}

.compare-three-line span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  translate: -50% -50%;
  border: 1px solid var(--gold-bright);
  border-radius: 50%;
  color: #1a120a;
  background: var(--gold-bright);
  box-shadow: 0 5px 28px rgba(0,0,0,.4);
  font-size: 1rem;
}

.compare-three-label-left {
  left: 1.25rem;
}

.compare-three-label-middle {
  left: 50%;
  translate: -50% 0;
}

.compare-three-label-right {
  right: 1.25rem;
  color: var(--gold-bright);
}

.compare-three-range {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

.compare-three-range-left {
  left: var(--compare-left);
}

.compare-three-range-right {
  left: var(--compare-right);
}

.compare-three-frame:has(.compare-three-range-left:focus-visible) .compare-three-line-left span,
.compare-three-frame:has(.compare-three-range-right:focus-visible) .compare-three-line-right span {
  outline: 2px solid var(--parchment);
  outline-offset: 4px;
}

@media (max-width: 720px) {
  .compare-three-frame .compare-label {
    bottom: .6rem;
    padding: .35rem .45rem;
    font-size: .5rem;
    letter-spacing: .08em;
  }

  .compare-three-label-left {
    left: .6rem;
  }

  .compare-three-label-right {
    right: .6rem;
  }

  .compare-three-line span {
    width: 36px;
    height: 36px;
  }
}