/* Image optimization styles */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

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

/* WebP picture element styling */
picture {
  display: block;
  line-height: 0;
}

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

/* Responsive images */
.img-responsive {
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Image loading states */
.img-loading {
  background: #f5f5f5;
  background-image: linear-gradient(90deg, #f5f5f5 25%, #e0e0e0 50%, #f5f5f5 75%);
  background-size: 200px 100%;
  animation: img-loading 2s infinite;
}

@keyframes img-loading {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

/* High DPI display optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .img-responsive {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}