/* Image Loading & Error Handling */

/* Loading skeleton 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 container with aspect ratio */
.image-container {
  position: relative;
  overflow: hidden;
  background: #f5f5f5;
}

.image-container::before {
  content: '';
  display: block;
  padding-top: 56.25%; /* 16:9 aspect ratio */
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

/* Loading state */
.image-container.loading img {
  opacity: 0;
}

.image-container.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

/* Error state */
.image-container.error::after {
  content: '🖼️ Image unavailable';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  color: #666;
  font-size: 14px;
  text-align: center;
  border: 2px dashed #ddd;
}

/* Loaded state */
.image-container.loaded img {
  opacity: 1;
}

/* Responsive aspect ratios */
.aspect-square::before { padding-top: 100%; }
.aspect-4-3::before { padding-top: 75%; }
.aspect-3-2::before { padding-top: 66.67%; }
.aspect-16-9::before { padding-top: 56.25%; }

/* Hero image specific */
.hero-image-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #f5f5f5;
}

.hero-image-wrapper::before {
  content: '';
  display: block;
  padding-top: 60%;
}

.hero-image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card images */
.card-image {
  position: relative;
  overflow: hidden;
  background: #f5f5f5;
}

.card-image::before {
  content: '';
  display: block;
  padding-top: 60%;
}

.card-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.card-image:hover img {
  transform: scale(1.05);
}