/**
 * LayerSlider Surface Display Fix
 * Fixes container height and overflow issues on Microsoft Surface devices
 * Issue: Banner cut off, images floating outside container
 * Affected: Surface laptops with high DPI (150-200% scaling)
 */

/* Fix container height calculation on high DPI displays */
.ls-container {
    height: auto !important;
    min-height: 500px !important;
    overflow: visible !important;
}

/* Fix wrapper height to contain all elements */
.ls-wrapper {
    height: auto !important;
    min-height: 500px !important;
    overflow: visible !important;
}

/* Ensure slides are properly contained */
.ls-slide {
    height: auto !important;
    min-height: 500px !important;
    overflow: visible !important;
}

/* Fix layer positioning for high DPI */
.ls-layer {
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

/* Disable GPU acceleration for Surface devices (prevents rendering glitches) */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .ls-container,
    .ls-wrapper,
    .ls-slide,
    .ls-layer {
        transform: none !important;
        -webkit-transform: none !important;
    }
}

/* Fix for high DPI (150%+ scaling) */
@media screen and (min-resolution: 144dpi), screen and (min-resolution: 1.5dppx) {
    .ls-container {
        transform: translateZ(0) scale(1) !important;
    }
    
    .ls-wrapper {
        will-change: auto !important;
    }
}

/* Ensure "SELL FOR FREE" banner is fully visible */
.ls-slide[data-ls*="slidein"] {
    width: 100% !important;
    height: auto !important;
}

/* Fix floating images issue */
.ls-layer img {
    position: relative !important;
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Prevent overflow clipping on parent container */
#layerslider_1, 
#layerslider_2,
.layerslider-container {
    overflow: visible !important;
    height: auto !important;
    min-height: 500px !important;
}

/* Fix z-index stacking for proper layering */
.ls-slide > * {
    z-index: auto !important;
}

/* Force software rendering on Surface devices */
.ls-container,
.ls-wrapper {
    -webkit-perspective: none !important;
    perspective: none !important;
}