/* Image Optimization and Loading Styles */

/* Lazy loading placeholder */
img.lazy {
  opacity: 0;
  transition: opacity 0.3s;
}

img.lazy.loaded {
  opacity: 1;
}

/* Image loading animation */
.image-loading {
  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;
  }
}

/* Image hover effects */
.cottage-image img,
.gallery-item img,
.attraction-card img {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.cottage-card:hover .cottage-image img,
.gallery-item:hover img,
.attraction-card:hover img {
  transform: scale(1.05);
}

/* Image error state */
img[src*="placeholder"] {
  background-color: #f3f4f6;
  border: 2px dashed #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-size: 0.875rem;
}

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Hero image optimization */
.hero-slide img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

/* Gallery image grid optimization */
.gallery-item img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

/* Cottage image optimization */
.cottage-image img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  border-radius: 8px 8px 0 0;
}

/* About section image */
.about-image img,
.story-image img,
.facility-image img,
.experience-image img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

/* Team member images */
.member-image img {
  object-fit: cover;
  object-position: center top;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* Food menu images */
.intro-image img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

/* Wayanad attraction images */
.attraction-image img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  border-radius: 8px 8px 0 0;
}

/* Image quality for different screen sizes */
@media (max-width: 768px) {
  .hero-slide img {
    object-position: center center;
  }

  .cottage-image {
    height: 200px;
  }

  .gallery-item {
    height: 200px;
  }
}

@media (min-width: 1200px) {
  .hero-slide img {
    object-position: center bottom;
  }
}

/* Print styles for images */
@media print {
  img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
  }
}