/**
 * Lazy Loading Styles
 * Prevents layout shift and provides loading states
 */

/* Lazy Load Images */
img.lazyload,
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

img.lazyloaded {
  opacity: 1;
}

/* Prevent layout shift with aspect ratio */
.responsive-image {
  position: relative;
  width: 100%;
  margin: 1.5rem 0;
}

.responsive-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.responsive-image figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #666;
  text-align: center;
  font-style: italic;
}

/* Lazy Background Images */
.lazy-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.3s ease-in-out;
}

.lazy-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
  z-index: 1;
}

.lazy-bg-loaded::before {
  opacity: 0;
}

/* Lazy Iframes (YouTube embeds) */
.lazy-iframe {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

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

.iframe-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  margin: 1.5rem 0;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
}

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

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

/* Blur-up technique for progressive image loading */
.blur-up {
  filter: blur(10px);
  transition: filter 0.3s ease-in-out;
}

.blur-up.lazyloaded {
  filter: blur(0);
}

/* Image error state */
img.error {
  background: #f5f5f5;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

img.error::after {
  content: '🖼️ Image not available';
  color: #999;
  font-size: 0.875rem;
}

/* Responsive Images */
@media (max-width: 768px) {
  .responsive-image {
    margin: 1rem 0;
  }

  .responsive-image figcaption {
    font-size: 0.75rem;
  }
}

/* Print styles - load all images */
@media print {
  img.lazyload {
    opacity: 1;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  img.lazyload,
  img.lazyloaded,
  .lazy-bg,
  .lazy-iframe {
    transition: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .lazy-placeholder {
    background: #ccc;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .responsive-image figcaption {
    color: #aaa;
  }

  .lazy-bg::before {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
  }

  img.error {
    background: #2a2a2a;
    border-color: #444;
  }

  img.error::after {
    color: #777;
  }
}