/* ==========================================
   SekolahCMS — Lazy Load + Skeleton Loading
   ==========================================
   Tambahkan stylesheet ini ke halaman publik (index, berita, galeri, dll)
   untuk skeleton placeholder + smooth fade-in saat gambar di-lazy-load.

   Cara pakai di HTML:
   
   <div class="lazy-img-wrapper">
     <img src="foto.jpg" 
          alt="Foto kegiatan" 
          loading="lazy"
          class="lazy-img"
          onload="this.classList.add('loaded')">
   </div>
   ========================================== */

/* Wrapper dengan skeleton background */
.lazy-img-wrapper {
  position: relative;
  overflow: hidden;
  background: #e2e8f0;  /* Fallback untuk browser tanpa animation support */
  
  /* Shimmer animation */
  background: linear-gradient(
    90deg,
    #e2e8f0 0%,
    #f0f4f8 50%,
    #e2e8f0 100%
  );
  background-size: 200% 100%;
  animation: lazy-shimmer 1.5s ease-in-out infinite;
}

/* Animasi shimmer (gerakan kiri ke kanan) */
@keyframes lazy-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Image inside wrapper — opacity 0 awalnya, fade-in saat loaded */
.lazy-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* Saat gambar loaded, fade-in */
.lazy-img.loaded {
  opacity: 1;
}

/* Hentikan shimmer saat gambar sudah load */
.lazy-img-wrapper:has(.lazy-img.loaded) {
  animation: none;
  background: transparent;
}

/* Fallback untuk browser yang belum support :has() (older browsers) */
.lazy-img-wrapper.is-loaded {
  animation: none;
  background: transparent;
}

/* Aspect ratio helpers — mencegah layout shift */
.lazy-img-wrapper.ratio-1-1   { aspect-ratio: 1 / 1; }
.lazy-img-wrapper.ratio-4-3   { aspect-ratio: 4 / 3; }
.lazy-img-wrapper.ratio-16-9  { aspect-ratio: 16 / 9; }
.lazy-img-wrapper.ratio-3-4   { aspect-ratio: 3 / 4; }
.lazy-img-wrapper.ratio-2-1   { aspect-ratio: 2 / 1; }

/* Hover effect untuk gambar yang clickable */
.lazy-img-wrapper.clickable {
  cursor: pointer;
  transition: transform 0.25s ease;
}
.lazy-img-wrapper.clickable:hover .lazy-img.loaded {
  transform: scale(1.05);
}

/* Reduce motion untuk user yang prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lazy-img-wrapper {
    animation: none;
  }
  .lazy-img {
    transition: none;
  }
}