/* Image Optimization for LineDiet Qatar */

/* WebP Support with Fallbacks */
.hero-image {
  background-image: url('./images/Amazing Healthy Food - Salads Qatar.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 400px;
  object-fit: cover;
  aspect-ratio: 16/9;
}

/* Fallback for browsers that don't support WebP */
.no-webp .hero-image {
  background-image: url('./images/Amazing Healthy Food - Salads Qatar.jpg');
}

/* Package Images Optimization */
.package-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 12px;
  loading: lazy;
  decoding: async;
  aspect-ratio: 4/3;
}

/* Menu Images */
.menu-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  loading: lazy;
  decoding: async;
  aspect-ratio: 3/2;
}

/* Logo Optimization */
.logo {
  width: auto;
  height: 60px;
  object-fit: contain;
  loading: eager;
  decoding: sync;
}

/* Testimonial Images */
.testimonial-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  loading: lazy;
  decoding: async;
  aspect-ratio: 1/1;
}

/* Image Compression and Performance */
img {
  max-width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Progressive JPEG Enhancement */
img[src$=".jpg"], img[src$=".jpeg"] {
  image-rendering: auto;
}

/* WebP Enhancement */
img[src$=".webp"] {
  image-rendering: auto;
  will-change: auto;
}

/* Lazy Loading Enhancement */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

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

/* Image Error Handling */
img {
  background-color: #f8f9fa;
  background-image: linear-gradient(45deg, #e9ecef 25%, transparent 25%), 
                    linear-gradient(-45deg, #e9ecef 25%, transparent 25%), 
                    linear-gradient(45deg, transparent 75%, #e9ecef 75%), 
                    linear-gradient(-45deg, transparent 75%, #e9ecef 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* High DPI Display Optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero-image {
    background-image: url('./images/Amazing Healthy Food - Salads Qatar.webp');
  }
  
  .no-webp .hero-image {
    background-image: url('./images/Amazing Healthy Food - Salads Qatar.jpg');
  }
}

/* Print Optimization */
@media print {
  img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
  }
  
  .hero-image {
    background: none !important;
    height: auto !important;
  }
}

/* Accessibility Enhancements for Images */
img:not([alt]) {
  outline: 2px solid #dc3545;
  outline-offset: 2px;
}

img[alt=""] {
  /* Decorative images - no outline needed */
}

/* Focus States for Interactive Images */
img:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Mobile Image Optimization */
@media (max-width: 768px) {
  .hero-image {
    height: 300px;
  }
  
  .package-image {
    height: 200px;
  }
  
  .menu-image {
    height: 150px;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  img[loading="lazy"] {
    transition: none;
  }
}