/* Before/After comparison slider (works with before-after.js).
   Complements the theme's twentytwenty.css (handle + divider bars). */

.ba-compare {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  cursor: ew-resize;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y; /* vertical page scroll still works on touch */
  line-height: 0;
}

.ba-compare img {
  width: 100%;
  display: block;
  pointer-events: none;
}

.ba-compare .ba-compare__before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  clip-path: inset(0 50% 0 0);
  -webkit-clip-path: inset(0 50% 0 0);
}

/* Labels — match the badges used elsewhere on the site */
.ba-compare .ba-compare__label {
  position: absolute;
  top: 15px;
  z-index: 4;
  color: #fff;
  padding: 6px 18px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.ba-compare .ba-compare__label--before {
  left: 15px;
  background: #f95e11;
}

.ba-compare .ba-compare__label--after {
  right: 15px;
  background: #4caf50;
}

/* Fix the theme's twentytwenty.css broken CSS vars (--Suntop-*) */
.ba-compare .twentytwenty-handle {
  background-color: #ffffff;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
}

.ba-compare .twentytwenty-left-arrow {
  border-right-color: #f95e11;
}

.ba-compare .twentytwenty-right-arrow {
  border-left-color: #f95e11;
}

/* Smaller labels/handle inside project list cards */
.highlight-one__single-img .ba-compare .ba-compare__label {
  font-size: 11px;
  padding: 3px 10px;
  top: 10px;
}

.highlight-one__single-img .ba-compare .ba-compare__label--before {
  left: 10px;
}

.highlight-one__single-img .ba-compare .ba-compare__label--after {
  right: 10px;
}