/*==============================================
  IMAGE OPTIMIZATION & QUALITY ENHANCEMENT
  High-quality image loading for Hotel Nehrus
  March 2026
  ================================================*/

/*==============================================
  HIGH QUALITY IMAGE LOADING
  ================================================*/

/* Optimize background images for quality */
.ihg-hero,
.slider-slide,
.ihg-card-img {
    background-size: cover;
    background-position: center;
    image-rendering: auto;
}

/* High quality image rendering */
img {
    image-rendering: auto;
    image-rendering: smooth;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/*==============================================
  HERO SECTION IMAGE QUALITY
  ================================================*/

.ihg-hero {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/* High quality image filtering */
.ihg-hero::before {
    background: rgba(0, 0, 0, 0.2); /* Fallback to simple overlay */
}

/*==============================================
  LAZY LOADING WITH QUALITY & SHIMMER
  ================================================*/

/* Enhanced Shimmer for all lazy images */
img[loading="lazy"]:not(.loaded) {
    background: #f6f7f8;
    background: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-size: 800px 104px;
    animation: placeholderShimmer 2s linear infinite forwards;
    position: relative;
}

@keyframes placeholderShimmer {
    0% { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}

img[loading="lazy"] {
    opacity: 0.6; /* Start with higher visibility */
    transition: opacity 0.4s ease-out;
}

img[loading="lazy"].loaded {
    opacity: 1 !important;
}

/* Loading state for images that are still in the viewport but not fully decoded */
img {
    content-visibility: auto;
}

/*==============================================
  RESPONSIVE IMAGE QUALITY
  ================================================*/

/* Desktop - Full quality */
@media (min-width: 1200px) {
    .ihg-hero {
        background-size: cover;
    }
    
    img {
        max-width: 100%;
        height: auto;
    }
}

/* Tablet - Optimized quality */
@media (min-width: 768px) and (max-width: 1199px) {
    .ihg-hero {
        background-size: cover;
    }
    
    .ihg-card-img {
        background-size: cover;
    }
}

/* Mobile - Optimized for quality on smaller screens */
@media (max-width: 767.98px) {
    .slider-slide {
        background-attachment: scroll;
        background-size: cover;
        background-position: center;
    }
    
    .ihg-card-img {
        background-attachment: scroll;
        background-size: cover;
    }
    
    img:not(.footer-logo):not(.hn-logo) {
        width: 100%;
        height: auto;
        display: block;
    }
}

/*==============================================
  PICTURE ELEMENT QUALITY (WebP WITH FALLBACK)
  ================================================*/

picture {
    display: contents;
}

picture img {
    width: 100%;
    height: auto;
}

/*==============================================
  FILTER & COLOR OPTIMIZATION
  ================================================*/

/* Enhance image contrast slightly for better visibility */
.image-enhanced {
    filter: contrast(1.05) brightness(1.02);
}

/* Slight saturation boost for hotel images */
.hotel-image {
    filter: saturate(1.1) contrast(1.05);
}

/* High quality video background */
video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/*==============================================
  IMAGE GALLERY QUALITY
  ================================================*/

.gallery-img,
.room-image,
.attraction-image {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

/*==============================================
  SRCSET & PICTURE ELEMENTS
  ================================================*/

/* Support for responsive images */
img[srcset] {
    width: 100%;
    height: auto;
}

/* Picture element styling */
picture {
    display: block;
    overflow: hidden;
    border-radius: inherit;
}

/*==============================================
  IMAGE CONTAINER QUALITY
  ================================================*/

.image-container {
    background: #f0f0f0;
    display: block;
    overflow: hidden;
    position: relative;
}

.image-wrapper {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 2s infinite;
}

.image-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*==============================================
  PRINT OPTIMIZATION
  ================================================*/

@media print {
    img {
        max-width: 100%;
        height: auto;
    }
    
    .ihg-hero,
    .slider-slide {
        background-image: none !important;
    }
}

/*==============================================
  HIGH DPI / RETINA DISPLAY SUPPORT
  ================================================*/

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Higher quality rendering for retina displays */
    .ihg-hero,
    .slider-slide,
    .ihg-card-img {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/*==============================================
  AVIF & WEBP FORMAT SUPPORT
  ================================================*/

/* Modern format images (AVIF) */
@supports (background-image: url('test.avif')) {
    .avif-support {
        background-image: url('image.avif');
    }
}

/* WebP format support */
@supports (background-image: url('test.webp')) {
    .webp-support {
        background-image: url('image.webp');
    }
}