/* Lazy Loading CSS */

/* Base style for lazy-loaded images */
.lazy-image {
  opacity: 0.1;
  transition: opacity 0.3s ease-in-out;
  background-color: #f8f9fa;
  min-height: 100px;
}

/* Class added when the image is loaded */
.lazy-image.loaded {
  opacity: 1;
  background-color: transparent;
}

/* Fix for card layouts with lazy images */
.card-img-top.lazy-image {
  object-fit: cover;
  width: 100%;
  height: 176px !important; /* Make sure all images have consistent height */
}

/* Specific fix for property cards */
.listing-item .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.listing-item .card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.listing-item .card-img-top {
  height: 176px;
  object-fit: cover;
}

/* Placeholder styling */
.placeholder-bg {
  background-color: #f0f0f0;
  background-image: linear-gradient(90deg, #f0f0f0 0px, #f8f8f8 40px, #f0f0f0 80px);
  background-size: 200% 100%;
  animation: placeholderShimmer 1.5s infinite;
}

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

/* Optimizations for specific network connections */
html.network-slow-2g .high-res-bg, 
html.network-2g .high-res-bg,
html.save-data .high-res-bg {
  background-image: var(--low-res-bg) !important;
}

/* Special handling for users with data saver enabled */
html.save-data .non-essential-image {
  display: none !important;
}

/* Mobile-specific lazy-loading rules */
@media (max-width: 767.98px) {
  /* Smaller, lower-quality placeholders on mobile */
  .lazy-image {
    background-size: cover;
    background-position: center;
  }
  
  /* Different transition on mobile to avoid jank */
  .lazy-image.loaded {
    transition: opacity 0.15s ease-in-out;
  }
  
  /* Special handling for items below the fold on mobile */
  .below-fold .lazy-image {
    min-height: 100px;
  }
}

/* Network-aware styles for different connection types */
@media (prefers-reduced-data: reduce) {
  /* System-level data saving mode */
  .lazy-image[data-high-res] {
    display: none;
  }
  
  /* Load fewer animations */
  .animate {
    animation: none !important;
    transition: none !important;
  }
}