/* Image Optimization - Rule 40
   Responsive images with modern formats and lazy loading
*/

/* Hero images with background optimization */
.hero-slide {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Ensure images have proper aspect ratio (prevents layout shift) */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Picture element for WebP fallback support */
picture {
  display: block;
}

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

/* Lazy-loaded images loading state */
img[loading="lazy"] {
  background-color: #f0f0f0;
  background-image: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Once image loads, remove placeholder effect */
img[loading="lazy"]:not([data-loading]) {
  animation: none;
  background: none;
}

/* Responsive image containers */
.image-frame {
  width: 100%;
  overflow: visible; /* premium layered frame in styles.css draws outside the box */
  border-radius: 10px;
}

.image-frame img {
  width: 100%;
  height: auto;
  display: block;
}

/* Media cards with images */
.media-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Ensure all images in content have proper sizing */
article img,
section img,
.section img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* SVG icon optimization */
svg {
  width: 100%;
  height: 100%;
}

/* Logo images */
.brand img,
.logo img,
.footer-logo img {
  width: auto;
  height: auto;
  max-width: 100%;
}

/* Favicon optimization */
link[rel="icon"] {
  display: none; /* Browser handles this automatically */
}

/* Preloaded hero images */
link[rel="preload"][as="image"] {
  /* Handled by browser */
}

/* Mobile-first responsive images */
@media (max-width: 768px) {
  .hero-slide {
    height: auto;
    min-height: 300px;
  }

  img[srcset] {
    width: 100%;
    height: auto;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero-slide {
    min-height: 400px;
  }
}

@media (min-width: 1025px) {
  .hero-slide {
    min-height: 600px;
  }
}