/* ============================================================
   Quetzal — Before / After
   The reveal uses clip-path rather than a width-constrained
   wrapper. Both panes are always full size, so the top image
   is never squashed as the divider moves — which is the flaw
   in most CSS-only comparison sliders.
   ============================================================ */

.qba {
  --qba-pos: 50%;
  --qba-handle: #C9A66B;
  --qba-handle-icon: #1A1508;
  --qba-knob: 44px;
  --qba-line: 2px;
  --qba-label-offset: 18px;

  position: relative;
  display: block;
  overflow: hidden;
  line-height: 0;
  isolation: isolate;
  touch-action: none;          /* we handle the gesture ourselves */
  -webkit-user-select: none;
  user-select: none;
}

.qba__pane {
  line-height: 0;
}

.qba__pane img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* the "after" pane sits exactly on top and is clipped */
.qba__pane--after {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.qba__pane--after img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---- forced ratios: both panes crop to fill --------------- */
.qba--ratio-16-9  { aspect-ratio: 16 / 9; }
.qba--ratio-16-10 { aspect-ratio: 16 / 10; }
.qba--ratio-4-3   { aspect-ratio: 4 / 3; }
.qba--ratio-3-2   { aspect-ratio: 3 / 2; }
.qba--ratio-1-1   { aspect-ratio: 1 / 1; }

.qba[class*="qba--ratio-"] .qba__pane {
  position: absolute;
  inset: 0;
}

.qba[class*="qba--ratio-"] .qba__pane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- the clip ---------------------------------------------- */
.qba--horizontal .qba__pane--after {
  clip-path: inset(0 calc(100% - var(--qba-pos)) 0 0);
}

.qba--vertical .qba__pane--after {
  clip-path: inset(0 0 calc(100% - var(--qba-pos)) 0);
}

/* ============================================================
   HANDLE
   ============================================================ */

.qba__handle {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: grab;
}

.qba__handle:active,
.qba.is-dragging .qba__handle {
  cursor: grabbing;
}

.qba--horizontal .qba__handle {
  top: 0;
  bottom: 0;
  left: var(--qba-pos);
  width: 0;
}

.qba--vertical .qba__handle {
  left: 0;
  right: 0;
  top: var(--qba-pos);
  height: 0;
}

.qba__line {
  position: absolute;
  background: var(--qba-handle);
  pointer-events: none;
}

.qba--horizontal .qba__line {
  top: 0;
  bottom: 0;
  left: calc(var(--qba-line) / -2);
  width: var(--qba-line);
}

.qba--vertical .qba__line {
  left: 0;
  right: 0;
  top: calc(var(--qba-line) / -2);
  height: var(--qba-line);
}

.qba__knob {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--qba-knob);
  height: var(--qba-knob);
  border-radius: 999px;
  background: var(--qba-handle);
  color: var(--qba-handle-icon);
  transition: transform 0.18s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.qba__knob svg {
  width: 55%;
  height: 55%;
  display: block;
}

.qba--vertical .qba__knob svg {
  transform: rotate(90deg);
}

.qba__handle:hover .qba__knob,
.qba.is-dragging .qba__knob {
  transform: scale(1.08);
}

.qba__handle:focus-visible {
  outline: none;
}

.qba__handle:focus-visible .qba__knob {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ============================================================
   LABELS
   ============================================================ */

.qba__label {
  position: absolute;
  z-index: 3;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #F6F5F1;
  background-color: rgba(11, 11, 12, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

/* before = the underneath image, so its label sits opposite
   the direction the after pane grows from */
.qba--horizontal .qba__label--before { top: var(--qba-label-offset); right: var(--qba-label-offset); }
.qba--horizontal .qba__label--after  { top: var(--qba-label-offset); left: var(--qba-label-offset); }
.qba--vertical   .qba__label--before { bottom: var(--qba-label-offset); left: var(--qba-label-offset); }
.qba--vertical   .qba__label--after  { top: var(--qba-label-offset); left: var(--qba-label-offset); }

.qba.is-dragging[data-fade-labels="1"] .qba__label {
  opacity: 0;
}

/* ============================================================
   EDITOR + MOTION
   ============================================================ */

/* Elementor's editor overlay must not swallow the drag */
.elementor-editor-active .qba__handle {
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .qba__knob,
  .qba__label {
    transition: none;
  }
}