/* Before/After Compare */
@media (min-width:0rem){
  #compare-101{
    padding: var(--sectionPadding);
    background: var(--backgroundColor, #F6F7F9);
  }
  body.dark-mode #compare-101{ background:#121212; }

/* Core compare styles (fixed clipping) */
.ba-wrapper{
  position:relative;
  width:100%;
  max-width:64rem;
  aspect-ratio:16/9;
  border-radius:1rem;
  overflow:hidden;
  margin-inline:auto;
  background:#e9edf2;
  box-shadow:0 10px 30px rgba(0,0,0,.07);
  --pos: 50; /* percent, 0..100 */
}

.ba-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  user-select:none;
  pointer-events:none;
}

/* After underneath (full) */
.ba-after .ba-img{ z-index:0; }

/* Before on top, clipped to --pos% width */
.ba-before{
  z-index:1;
  clip-path: polygon(0 0, calc(var(--pos)*1%) 0, calc(var(--pos)*1%) 100%, 0 100%);
}

/* Divider & handle tied to --pos */
.ba-divider{
  position:absolute; top:0; bottom:0;
  left: calc(var(--pos)*1%);
  width:2px; background: rgba(255,255,255,.95);
  box-shadow:0 0 0 1px rgba(0,0,0,.15);
  transform: translateX(-1px);
  pointer-events:none;
  z-index:2;
}
.ba-handle{
  position:absolute; top:50%;
  left: calc(var(--pos)*1%);
  transform: translate(-50%,-50%);
  width:40px; height:40px; border-radius:50%;
  background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.18);
  display:grid; place-items:center; z-index:3;
}
.ba-handle::before{ content:"↔"; font-size:18px; color:#333; }

/* Full-surface range for mouse/touch/keyboard */
.ba-range{
  position:absolute; inset:0;
  appearance:none; background:transparent;
  cursor: ew-resize; z-index:4;
}
.ba-range:focus{ outline:none; }
.ba-range::-webkit-slider-thumb{ appearance:none; width:1px; height:1px; }
.ba-range::-moz-range-thumb{ width:1px; height:1px; border:0; background:transparent; }
.ba-range::-webkit-slider-runnable-track,
.ba-range::-moz-range-track{ background:transparent; }

/* Tags */
.ba-tag{
  position:absolute; top:.75rem;
  font:600 .85rem/1 'Poppins',system-ui,sans-serif;
  color:#fff; padding:.35rem .6rem; border-radius:.5rem;
  backdrop-filter: blur(4px);
  background: rgba(0,0,0,.35);
  user-select:none; pointer-events:none; z-index:3;
}
.ba-tag-before{ left:.75rem; }
.ba-tag-after{ right:.75rem; }

}

@media (min-width:64rem){
  .ba-wrapper{ border-radius: 1.25rem; }
}
/* Compare section layout fixes */
@media (min-width:0rem){
  #compare-101 .cs-container{
    width:100%;
    max-width:80rem;
    margin:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap: clamp(2rem, 5vw, 3rem);
  }
  #compare-101 .cs-content{
    width:100%;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.5rem;
  }
}

/* Re-override at desktop in case a global rule flips .cs-content to row */
@media (min-width:48rem){
  #compare-101 .cs-content{
    text-align:center;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
}

/* Ensure tags stay inside the slider edges */
.ba-tag-before{ left:.75rem; right:auto; }
.ba-tag-after{ right:.75rem; left:auto; }