/* Lazy loading image styles */
img.lazy-loading {
  filter: blur(5px);
  opacity: 0.6;
  transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

img.lazy-loaded {
  filter: blur(0);
  opacity: 1;
  animation: fadeIn 0.3s ease-in-out;
}

img.lazy-error {
  opacity: 0.5;
  background-color: #f3f4f6;
}

@keyframes fadeIn {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}

/* Aspect ratio placeholders to prevent layout shift */
.img-container-16-9 {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
}

.img-container-4-3 {
  position: relative;
  padding-bottom: 75%; /* 4:3 aspect ratio */
  overflow: hidden;
}

.img-container-1-1 {
  position: relative;
  padding-bottom: 100%; /* 1:1 aspect ratio (square) */
  overflow: hidden;
}

.img-container-16-9 img,
.img-container-4-3 img,
.img-container-1-1 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
