/* Responsive Images Fix - Mobile Optimization */

/* Base responsive image styles */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Hero image responsive fixes */
.hero-image-wrapper img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 15px;
}

/* Card images responsive */
.card-image img,
.feature-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
}

/* About section images */
.about-img-main img,
.about-img-secondary img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
}

/* Plant care images */
.plant-img img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 10px;
}

/* Quiz image responsive */
.quiz-image-wrapper img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
  border-radius: 15px;
}

/* Mobile breakpoints */
@media (max-width: 768px) {
  .hero-image-wrapper img {
    height: 250px;
    object-fit: cover;
  }
  
  .card-image img,
  .feature-card img {
    height: 180px;
  }
  
  .plant-img img {
    height: 200px;
  }
}

@media (max-width: 480px) {
  .hero-image-wrapper img {
    height: 200px;
  }
  
  .card-image img,
  .feature-card img {
    height: 150px;
  }
  
  .plant-img img {
    height: 160px;
  }
}

/* Lazy loading placeholder */
img[loading="lazy"] {
  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; }
}