/**
 * Barron Compare — before/after slider styles (v1.0.0)
 *
 * Theme-agnostic. Override the accent via --bc-compare-accent.
 */
.bc-compare {
    --bc-compare-accent: var(--bc-accent, #ffffff);
    --bc-compare-ink: var(--bc-accent-ink, #1a1a1a);
    width: 100%;
    margin: 0;
}

.bc-compare-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    line-height: 0;
}

/* The frame has a fixed aspect ratio so the slider always has height,
   regardless of the supplied images' dimensions. container-type lets
   the before image size to the frame width with cqw units. */
.bc-compare-frame {
    aspect-ratio: 3 / 2;
    container-type: inline-size;
}

.bc-compare-img {
    display: block;
    object-fit: cover;
    pointer-events: none;
}

/* The "after" image is the full-bleed base layer that fills the frame. */
.bc-compare-after {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* The "before" image sits in a clip that the handle resizes. */
.bc-compare-clip {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    overflow: hidden;
    z-index: 2;
    will-change: width;
}

/* The before image is pinned to the FRAME width (100cqw) and height so
   it does not squash as the clip narrows. */
.bc-compare-clip .bc-compare-before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100cqw;
    max-width: none;
    height: 100%;
}

.bc-compare-handle {
    position: absolute;
    top: 0;
    z-index: 4;
    width: 3px;
    height: 100%;
    margin-left: -1.5px;
    background: var(--bc-compare-accent);
    cursor: ew-resize;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.bc-compare-handle:focus-visible {
    outline: 2px solid var(--bc-compare-accent);
    outline-offset: 3px;
}

.bc-compare-grip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bc-compare-accent);
    color: var(--bc-compare-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease;
}

.bc-compare-handle.is-dragging .bc-compare-grip {
    transform: translate(-50%, -50%) scale(1.12);
}

.bc-compare-label {
    position: absolute;
    bottom: 1rem;
    z-index: 3;
    padding: 0.4rem 0.85rem;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(15, 20, 15, 0.72);
    color: #fff;
    backdrop-filter: blur(3px);
}

.bc-compare-label-before { left: 1rem; }
.bc-compare-label-after  { right: 1rem; }

.bc-compare-notice {
    padding: 1rem;
    background: #fff4d6;
    border: 1px solid #e0b654;
    font-size: 0.9rem;
}

/* JS-off fallback: the clip otherwise hides half the before image.
   Stack both images so neither is cropped. */
.no-js .bc-compare-clip {
    position: static;
    width: 100% !important;
}
.no-js .bc-compare-handle {
    display: none;
}