/**
 * Lazy Loading CSS - Performance Optimizations
 * Provides smooth loading animations and placeholders
 */

/* === LAZY LOADING STATES === */

/* Default lazy loading state */
img[data-src],
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.4s ease;
    background-color: #f0f0f0;
    background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200px 100%;
    background-repeat: no-repeat;
    animation: shimmer 1.5s infinite;
}

/* Loading state with shimmer effect */
.lazy-loading {
    background-color: #f0f0f0 !important;
    background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
    background-size: 200px 100% !important;
    background-repeat: no-repeat !important;
    animation: shimmer 1.5s infinite !important;
}

/* Loaded state */
.lazy-loaded {
    opacity: 1 !important;
    background: transparent !important;
    animation: none !important;
}

/* Error state */
.lazy-error {
    opacity: 1 !important;
    background-color: #f0f0f0 !important;
    border: 2px dashed #ccc !important;
    animation: none !important;
    position: relative;
}

.lazy-error::after {
    content: "Image not available";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #666;
    font-size: 12px;
    text-align: center;
    pointer-events: none;
}

/* === SHIMMER ANIMATION === */
@keyframes shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

/* === IMAGE OPTIMIZATION === */

/* Ensure images don't cause layout shift */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Prevent broken image layout */
img:not([src]):not([srcset]) {
    visibility: hidden;
}

/* === RESPONSIVE IMAGE CONTAINERS === */

/* Property listing images */
.listing-unit-img-wrapper {
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
}

.listing-unit-img-wrapper img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease, opacity 0.4s ease;
}

/* Gallery images */
.gallery_image,
.gallery_main_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
}

/* Slider images */
.main-slider img,
.owl-carousel img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* === PLACEHOLDER IMPROVEMENTS === */

/* Better placeholder for property cards */
.places1 {
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    position: relative;
    overflow: hidden;
}

.places1::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkgMTJIMzlWMzZIOVYxMloiIHN0cm9rZT0iI0NDQ0NDQyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE1IDE4TDI0IDI3TDMzIDE4IiBzdHJva2U9IiNDQ0NDQ0MiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=') no-repeat center;
    opacity: 0.3;
    z-index: 1;
}

.places1 img.lazy-loaded + .places1::before {
    display: none;
}

/* === PERFORMANCE OPTIMIZATIONS === */

/* Reduce paint cost for large images */
.wpestate_header_image img,
.main-slider img {
    will-change: transform;
    transform: translateZ(0);
}

/* Optimize carousel images */
.owl-carousel .owl-item img {
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* === RESPONSIVE BREAKPOINTS === */

/* Tablet optimizations */
@media (max-width: 768px) {
    .listing-unit-img-wrapper img {
        height: 200px;
    }
    
    .main-slider img {
        height: 400px !important;
    }
}

/* Mobile optimizations */
@media (max-width: 480px) {
    .listing-unit-img-wrapper img {
        height: 180px;
    }
    
    .main-slider img {
        height: 300px !important;
    }
    
    /* Reduce shimmer animation on mobile for performance */
    .lazy-loading {
        animation-duration: 2s;
    }
}

/* === ACCESSIBILITY === */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .lazy-loading {
        background-color: #000 !important;
        background-image: linear-gradient(90deg, #000 25%, #333 50%, #000 75%) !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    img,
    .lazy-loading,
    .lazy-loaded {
        animation: none !important;
        transition: none !important;
    }
}

/* === PRINT STYLES === */
@media print {
    img {
        opacity: 1 !important;
        background: none !important;
        animation: none !important;
    }
}