/* ============================================================
   Before After Slider — slider.css
   ============================================================ */

/* Elementor widget wrapper skal ikke kollapse */
.elementor-widget-before_after_slider,
.elementor-widget-before_after_slider .elementor-widget-container {
    width: 100%;
    display: block;
}

.bas-wrapper {
    --bas-height:       500px;
    --bas-radius:       12px;
    --bas-handle-color: #ffffff;
    --bas-handle-size:  48px;
    --bas-label-bg:     rgba(0,0,0,0.45);
    --bas-label-color:  #ffffff;
    --bas-label-fs:     14px;
    --bas-overlay:      rgba(0,0,0,0.15);
    --bas-line-color:   #ffffff;
    --bas-line-width:   2px;

    position:       relative;
    width:          100%;
    /* Brug height direkte — sat via Elementor selectors eller inline */
    height:         var(--bas-height);
    /* Sikrer at wrapperen aldrig kollapser til 0 */
    min-height:     150px;
    overflow:       hidden;
    border-radius:  var(--bas-radius);
    user-select:    none;
    cursor:         col-resize;
    touch-action:   none;
    /* Block sikrer at flex-forældre ikke squasher den */
    display:        block;
    /* Forhindrer at Elementor flex-container squasher højden */
    flex-shrink:    0;
    align-self:     stretch;
    box-sizing:     border-box;
}

/* ── Images ─────────────────────────────────────────────── */
.bas-before,
.bas-after {
    position: absolute;
    top:      0;
    left:     0;
    width:    100%;
    height:   100%;
    overflow: hidden;
    /* inset: 0 virker ikke i alle browsers med clip-path — brug explicit */
}

.bas-before img,
.bas-after  img {
    position:       absolute;
    top:            0;
    left:           0;
    width:          100%;
    height:         100%;
    object-fit:     cover;
    object-position: center center;
    display:        block;
    pointer-events: none;
    /* Forhindrer at img-elementet selv bestemmer højden */
    max-width:      none;
}

/* "Before" er klippet til venstre side */
.bas-before {
    clip-path: inset(0 50% 0 0);
    z-index:   1;
}

/* Overlay tint på "before" siden */
.bas-before::after {
    content:        '';
    position:       absolute;
    top:            0;
    left:           0;
    width:          100%;
    height:         100%;
    background:     var(--bas-overlay);
    pointer-events: none;
}

/* ── Labels ──────────────────────────────────────────────── */
.bas-label {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    padding:         6px 14px;
    border-radius:   6px;
    background:      var(--bas-label-bg);
    color:           var(--bas-label-color);
    font-size:       var(--bas-label-fs);
    font-family:     inherit;
    font-weight:     600;
    letter-spacing:  0.04em;
    pointer-events:  none;
    white-space:     nowrap;
    z-index:         5;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition:      opacity 0.25s ease;
}

.bas-label-before { left:  20px; z-index: 2; }
.bas-label-after  { right: 20px; z-index: 4; }

/* ── Skillelinje ─────────────────────────────────────────── */
.bas-divider {
    position:       absolute;
    top:            0;
    left:           50%;
    width:          var(--bas-line-width);
    height:         100%;
    background:     var(--bas-line-color);
    transform:      translateX(-50%);
    z-index:        10;
    pointer-events: none;
}

/* ── Handle ──────────────────────────────────────────────── */
.bas-handle {
    position:        absolute;
    top:             50%;
    left:            50%;
    transform:       translate(-50%, -50%);
    width:           var(--bas-handle-size);
    height:          var(--bas-handle-size);
    border-radius:   50%;
    background:      var(--bas-handle-color);
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 2px 16px rgba(0,0,0,0.28), 0 0 0 2px rgba(0,0,0,0.08);
    cursor:          col-resize;
    pointer-events:  all;
    transition:      box-shadow 0.2s ease, transform 0.15s ease;
}

.bas-handle svg {
    width:       55%;
    height:      55%;
    color:       #333;
    flex-shrink: 0;
}

.bas-wrapper:hover .bas-handle,
.bas-wrapper.bas-dragging .bas-handle {
    box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 0 3px rgba(255,255,255,0.5);
    transform:  translate(-50%, -50%) scale(1.08);
}

/* ── Lodret orientation ──────────────────────────────────── */
.bas-vertical {
    cursor: row-resize;
}

.bas-vertical .bas-before {
    clip-path: inset(0 0 50% 0);
}

.bas-vertical .bas-divider {
    top:       50%;
    left:      0;
    width:     100%;
    height:    var(--bas-line-width);
    transform: translateY(-50%);
}

.bas-vertical .bas-handle {
    cursor: row-resize;
}

.bas-vertical .bas-handle svg {
    transform: rotate(90deg);
}

.bas-vertical .bas-label-before {
    top:       20px;
    left:      50%;
    transform: translateX(-50%);
}

.bas-vertical .bas-label-after {
    bottom:    20px;
    top:       auto;
    right:     auto;
    left:      50%;
    transform: translateX(-50%);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .bas-wrapper {
        /* Tablet: brug Elementor's responsive height-setting,
           eller skaler ned relativt til viewport */
        height: var(--bas-height);
    }
}

@media (max-width: 767px) {
    .bas-wrapper {
        /* Mobil: max 70vw højde, dog aldrig under 200px */
        height: clamp(200px, 70vw, 450px) !important;
    }
    .bas-label {
        font-size: 12px;
        padding:   4px 10px;
    }
}