.lg-before-after-grid {
    display: grid;
    /* Grid columns and gap are handled by inline styles from Elementor controls */
    width: 100%;
}

.lg-before-after-item {
    position: relative;
    width: 100%;
    /* Height is handled by inline styles */
    overflow: hidden;
    cursor: col-resize;
    /* Indicates interactivity */
    isolation: isolate;
    /* Create new stacking context */
    user-select: none;
    -webkit-user-select: none;
    --drag-pos: 50%;
    /* Default position */
}

/* Common Image Styles */
.lg-ba-after,
.lg-ba-before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
    /* Let events pass to the container */
}

/* After Layer (Bottom) */
.lg-ba-after {
    z-index: 1;
}

/* Before Layer (Top - Masked) */
.lg-ba-before {
    z-index: 2;
    /* 
      Clip path to show only the left part.
      We use calc() to ensure valid percentage values.
    */
    clip-path: polygon(0 0, var(--drag-pos) 0, var(--drag-pos) 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, var(--drag-pos) 0, var(--drag-pos) 100%, 0 100%);
    transition: clip-path 0.1s linear, -webkit-clip-path 0.1s linear;
    /* Smooth follow, but fast enough for drag */
}

/* Labels */
.lg-ba-label {
    position: absolute;
    top: 20px;
    padding: 0.5rem 1rem;
    font-weight: 600;
    border-radius: 4px;
    pointer-events: none;
    backdrop-filter: blur(4px);
}

.lg-ba-label-before {
    left: 20px;
}

.lg-ba-label-after {
    right: 20px;
}

/* Handle / Divider Line */
.lg-ba-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--drag-pos);
    width: 3px;
    background-color: #fff;
    z-index: 10;
    transform: translateX(-50%);
    /* Center on the split line */
    pointer-events: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transition: left 0.1s linear;
}

/* Handle Circle/Icon */
.lg-ba-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid #fff;
    border-radius: 50%;
    background-color: transparent;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    /* Arrows */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18-6-6 6-6"/><path d="m15 6 6 6-6 6"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
}

/* Mobile / Touch Adjustments */
@media (hover: none) and (pointer: coarse) {
    .lg-before-after-item {
        /* On mobile, we might want to disable the hover-follow behavior and rely on touch drag, 
           or just keep it. The JS will handle the difference. 
           But usually hover effects sticking is annoying. */
    }
}