/* Modern Image Optimization CSS */

/* Responsive images */
.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Lazy loading placeholder */
.img-lazy {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.img-lazy.loaded {
  opacity: 1;
}

/* Image aspect ratio containers */
.aspect-ratio-16-9 {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 ratio */
}

.aspect-ratio-4-3 {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%; /* 4:3 ratio */
}

.aspect-ratio-1-1 {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%; /* 1:1 ratio */
}

.aspect-ratio-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Loading skeleton */
.img-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

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

/* Image optimization utilities */
.img-crisp {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.img-smooth {
  image-rendering: auto;
}

/* Modern image formats support detection */
.webp .img-fallback { display: none; }
.no-webp .img-webp { display: none; }

/* Print optimization */
@media print {
  .img-no-print { display: none !important; }
}