/**
 * Before-After Image Comparison Slider
 * Modern, responsive styling with proper containment and spacing
 * 
 * Best Practices Applied:
 * - Flow-root context for proper vertical margin collapse
 * - Overflow containment to prevent layout shift
 * - Responsive spacing using CSS custom properties
 * - Optimized mobile-first approach
 * - Smooth transitions for accessibility
 */

:root {
    --ba-spacing-vertical: 3rem;
    --ba-spacing-vertical-mobile: 2rem;
    --ba-spacing-bottom: 3rem;
    --ba-spacing-bottom-mobile: 2rem;
}

/* Full-bleed wrapper: breaks container width on desktop, proper spacing */
.ba-full-bleed-wrapper {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* Flow-root creates new block formatting context - prevents margin collapse issues */
    display: flow-root;
    /* Prevent overflow scrollbar on x-axis */
    overflow-x: hidden;
    /* Bottom spacing to prevent next section overlap */
    margin-bottom: var(--ba-spacing-bottom);
    /* Smooth transitions for responsive spacing */
    transition: margin-bottom 0.3s ease-out;
}

/* Mobile optimization: reduce bottom spacing on smaller screens */
@media (max-width: 768px) {
    :root {
        --ba-spacing-bottom: var(--ba-spacing-bottom-mobile);
    }

    .ba-full-bleed-wrapper {
        margin-bottom: var(--ba-spacing-bottom-mobile);
    }
}

/* Intro section: clear visual hierarchy */
.ba-intro {
    background: #f3f3f3;
    padding: var(--ba-spacing-vertical) 1.5rem;
    transition: padding 0.3s ease-out;
}

@media (max-width: 768px) {
    .ba-intro {
        padding: var(--ba-spacing-vertical-mobile) 1rem;
    }
}

/* Slider shell: proper positioning context */
.ba-slider-shell {
    position: relative;
    --ba-pos: 50%;
    display: block;
    /* Ensure height is calculated properly */
    min-height: auto;
}

/* Full-bleed slider container */
.ba-full-bleed-wrapper img-comparison-slider {
    width: 100%;
    --divider-width: 2px;
    --divider-color: rgba(255, 255, 255, 0.95);
    --default-handle-color: #ffffff;
    --default-handle-width: 56px;
    --default-handle-opacity: 1;
    --default-handle-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    --divider-shadow: 0 0 22px rgba(0, 0, 0, 0.35);
}

/* Image pane: proper aspect ratio and responsiveness */
.ba-pane {
    position: relative;
    overflow: hidden;
}

.ba-pane img {
    width: 100%;
    min-height: 320px;
    max-height: 640px;
    object-fit: cover;
    display: block;
}

/* Label layer: clip path for smooth before/after effect */
.ba-label-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.ba-label-layer--before {
    clip-path: polygon(0 0, var(--ba-pos) 0, var(--ba-pos) 100%, 0 100%);
}

.ba-label-layer--after {
    clip-path: polygon(var(--ba-pos) 0, 100% 0, 100% 100%, var(--ba-pos) 100%);
}

/* Label styling: glass morphism effect for modern look */
.ba-label {
    position: absolute;
    top: 22px;
    padding: 12px 18px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: rgba(10, 10, 10, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(3px);
    border-radius: 4px;
    /* Smooth transitions for interaction */
    transition: all 0.3s ease-out;
}

.ba-label--before {
    left: 22px;
}

.ba-label--after {
    right: 22px;
    background: rgba(227, 97, 89, 0.32);
    border-color: rgba(255, 255, 255, 0.26);
}

/* Mobile optimizations: adjust label sizing and positioning */
@media (max-width: 768px) {
    .ba-label {
        font-size: 14px;
        padding: 10px 14px;
        top: 16px;
    }

    .ba-label--before {
        left: 16px;
    }

    .ba-label--after {
        right: 16px;
    }
}

@media (max-width: 480px) {
    .ba-label {
        font-size: 12px;
        padding: 8px 12px;
        top: 12px;
        letter-spacing: 0.08em;
    }

    .ba-label--before {
        left: 12px;
    }

    .ba-label--after {
        right: 12px;
    }
}

/* Accessibility: focus states for keyboard navigation */
.ba-full-bleed-wrapper img-comparison-slider:focus {
    outline: 3px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* Reduce motion for users with vestibular disorders */
@media (prefers-reduced-motion: reduce) {
    .ba-full-bleed-wrapper,
    .ba-intro,
    .ba-label,
    .ba-pane img {
        transition: none !important;
        animation: none !important;
    }
}

/* Dark mode support for future implementation */
@media (prefers-color-scheme: dark) {
    .ba-intro {
        background: #2a2a2a;
    }

    .ba-label {
        color: rgba(255, 255, 255, 0.95);
        background: rgba(30, 30, 30, 0.4);
        border-color: rgba(255, 255, 255, 0.32);
    }
}