/* Image Restoration and Enhancement CSS */

/* Enhanced Image Styling with Blur Effects */
img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

img:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 16px 48px rgba(220, 38, 38, 0.3),
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Logo specific styling */
#header img {
    border-radius: 0;
    box-shadow: none;
    transition: all 0.3s ease;
}

#header img:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 10px rgba(220, 38, 38, 0.5));
}

/* Background images restoration */
#banner {
    background-image: 
        url('../../images/light-bl.svg'), 
        url('../../images/light-br.svg'), 
        url('../../images/overlay.png'), 
        url('../../images/ScreenShot_Human_1.png') !important;
    background-position: bottom left, bottom right, top left, top center !important;
    background-repeat: no-repeat, no-repeat, repeat, no-repeat !important;
    background-size: 25em, 25em, auto, cover !important;
}

#cta {
    background-image: 
        url('../../images/light-tl.svg'), 
        url('../../images/light-tr.svg'), 
        url('../../images/overlay.png'), 
        url('../../images/banner.jpg') !important;
    background-position: top left, top right, top left, bottom center !important;
    background-repeat: no-repeat, no-repeat, repeat, no-repeat !important;
    background-size: 25em, 25em, auto, cover !important;
}

#main {
    background-image: 
        url('../../images/dark-tl.svg'), 
        url('../../images/dark-tr.svg'), 
        url('../../images/dark-bl.svg'), 
        url('../../images/dark-br.svg') !important;
    background-position: top left, top right, bottom left, bottom right !important;
    background-repeat: no-repeat !important;
    background-size: 25em !important;
}

/* Image overlay effects */
/* Disable legacy overlay that washed out images */
.image:before {
    content: none !important;
}

/* Enhanced Mobile Responsiveness */
@media (max-width: 1200px) {
    img {
        border-radius: 10px;
        box-shadow: 
            0 6px 24px rgba(0, 0, 0, 0.15),
            0 2px 6px rgba(0, 0, 0, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }
    
    img:hover {
        transform: translateY(-3px) scale(1.01);
        box-shadow: 
            0 12px 36px rgba(220, 38, 38, 0.25),
            0 3px 12px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}

@media (max-width: 768px) {
    #banner {
        background-size: 15em, 15em, auto, cover !important;
    }
    
    #cta {
        background-size: 15em, 15em, auto, cover !important;
    }
    
    #main {
        background-size: 15em !important;
    }
    
    img {
        border-radius: 8px;
        box-shadow: 
            0 4px 16px rgba(0, 0, 0, 0.12),
            0 1px 4px rgba(0, 0, 0, 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 0.02);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
    
    img:hover {
        transform: translateY(-2px) scale(1.01);
        box-shadow: 
            0 8px 24px rgba(220, 38, 38, 0.2),
            0 2px 8px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
}

@media (max-width: 480px) {
    #banner {
        background-size: 10em, 10em, auto, cover !important;
    }
    
    #cta {
        background-size: 10em, 10em, auto, cover !important;
    }
    
    #main {
        background-size: 10em !important;
    }
    
    img {
        border-radius: 6px;
        box-shadow: 
            0 3px 12px rgba(0, 0, 0, 0.1),
            0 1px 3px rgba(0, 0, 0, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.01);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    
    img:hover {
        transform: translateY(-1px) scale(1.005);
        box-shadow: 
            0 6px 18px rgba(220, 38, 38, 0.15),
            0 2px 6px rgba(0, 0, 0, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
}

/* Image loading states */
/* Ensure lazy images are visible without JS hooks */
img[loading="lazy"] {
    opacity: 1 !important;
}

/* Fallback for missing images */
img:not([src]),
img[src=""],
img[src*="undefined"] {
    background: linear-gradient(135deg, #1a1a1a 0%, #404040 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc2626;
    font-size: 14px;
    min-height: 100px;
}

img:not([src])::after,
img[src=""]::after,
img[src*="undefined"]::after {
    content: "Image Loading...";
}

/* Image optimization for different screen densities */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Ensure images don't break layout */
img {
    vertical-align: middle;
    border-style: none;
}

/* Image containers */
.image {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Featured images */
.image.featured {
    margin: 0 0 2em 0;
}

.image.featured img {
    display: block;
    width: 100%;
}

/* Image fit variations */
.image.fit img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}