/* YouTube-style Blurred Background for Slider Images */

/* Apply blur effect to the background using ::after */
.gallery-slider .project-widget::after {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    filter: blur(30px) brightness(0.7);
    z-index: 0;
}

/* Main centered image layer - sharp and contained */
.gallery-slider .project-widget .project-widget-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Keep overlay positioning exactly as before */
.gallery-slider .project-widget .project-overlay {
    z-index: 2;
}

/* Mobile: Adjust blur for horizontal/portrait images */
@media (max-width: 768px) {
    .gallery-slider .project-widget::after {
        /* Slightly less blur on mobile for performance */
        filter: blur(25px) brightness(0.7);
    }
    
    /* Ensure image layer works on mobile too */
    .gallery-slider .project-widget .project-widget-image {
        background-size: contain;
    }
}