/**
 * Sales Template Specific Styles
 * Custom styling for the sales template variant of the proto opener block
 */

/* Desktop overlay: Remove background, blur, shadow, outline and make text white (≥992px) */
@media (min-width: 992px) {
    /* Set z-index hierarchy: image (1) -> overlay (2) -> content (3) */
    .po_opener-slider.po_sales .po_media-placeholder {
        z-index: 1;
        position: relative;
    }
    
    /* Add 20% black overlay between image and text for better readability */
    .po_opener-slider.po_sales .po_media-placeholder::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.2);
        pointer-events: none;
        z-index: 2;
    }
    
    /* Ensure content wrapper is above the overlay but maintain absolute positioning */
    .po_opener-slider.po_sales .po_content-wrapper {
        z-index: 3 !important;
    }
    
    /* Remove all background styling from content area */
    .po_opener-slider.po_sales .po_slide-content {
        background-color: transparent !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        outline: none !important;
        border: none !important;
    }
    
    /* Make all text white on desktop overlay - more specific selectors */
    .po_opener-slider.po_sales .po_slide-content,
    .po_opener-slider.po_sales .po_slide-content *,
    .po_opener-slider.po_sales .po_slide-content .overline,
    .po_opener-slider.po_sales .po_slide-content .h1,
    .po_opener-slider.po_sales .po_slide-content h1,
    .po_opener-slider.po_sales .po_slide-content span,
    .po_opener-slider.po_sales .po_slide-content span.h1,
    .po_opener-slider.po_sales .po_slide-content span.text-dark,
    .po_opener-slider.po_sales .po_slide-content div,
    .po_opener-slider.po_sales .po_slide-content p,
    .po_opener-slider.po_sales .po_slide-content li,
    .po_opener-slider.po_sales .po_slide-content .text-muted,
    .po_opener-slider.po_sales .po_slide-content .text-dark {
        color: #fff !important;
    }
}