/**
 * LocalCN Trip - Image Treatment & Ratio Utilities
 * Unified image styling for brand consistency across all pages.
 *
 * Ratio Standards:
 * - Card images: 16:9 (primary), 4:3 (alternative)
 * - Hero images: 21:9 (desktop), 16:9 (tablet), 4:3 (mobile)
 * - Thumbnails: 1:1 or 4:3
 */

/* ===== Object-fit Utility Classes ===== */

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.img-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ===== Ratio Utility Classes (for containers) ===== */

.img-21x9 {
  aspect-ratio: 21 / 9;
  overflow: hidden;
}

.img-16x9 {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.img-4x3 {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.img-1x1 {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Backward-compatible aliases */
.aspect-21-9 {
  aspect-ratio: 21 / 9;
  overflow: hidden;
}

.aspect-16-9 {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.aspect-4-3 {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.aspect-1-1 {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* ===== Images inside ratio containers ===== */

.img-21x9 img,
.img-16x9 img,
.img-4x3 img,
.img-1x1 img,
.aspect-21-9 img,
.aspect-16-9 img,
.aspect-4-3 img,
.aspect-1-1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== Base Image Container ===== */

.img-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

/* ===== Unified Travel Image Style ===== */

.img-travel {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  filter: brightness(0.92) saturate(1.1);
}

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

/* ===== Destination Image (Standard) ===== */

.img-destination {
  filter: brightness(0.90) saturate(1.15) contrast(1.05);
  transition: filter 0.4s ease, transform 0.6s ease;
}

.img-destination:hover {
  filter: brightness(0.95) saturate(1.2) contrast(1.05);
  transform: scale(1.04);
}

/* ===== Tech Overlay Style ===== */

.img-tech-overlay {
  position: relative;
  overflow: hidden;
}

.img-tech-overlay img {
  filter: brightness(0.75) saturate(0.9);
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, filter 0.4s ease;
}

.img-tech-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 15, 0.1) 0%,
    rgba(10, 10, 15, 0.0) 40%,
    rgba(10, 10, 15, 0.6) 100%
  );
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.img-tech-overlay:hover img {
  transform: scale(1.06);
  filter: brightness(0.85) saturate(1.0);
}

.img-tech-overlay:hover::after {
  opacity: 0.7;
}

/* ===== Hero Image (Full-bleed background style) ===== */

.img-hero {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6) saturate(1.1);
}

/* ===== Hero Image (Standalone, with 16:9 ratio) ===== */

.hero-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  filter: brightness(0.85) saturate(1.1);
}

@media (max-width: 768px) {
  .hero-image {
    aspect-ratio: 4 / 3;
  }
}

/* ===== Card Thumbnail (16:9 brand standard) ===== */

.card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  filter: brightness(0.92) saturate(1.1);
  transition: filter 0.4s ease, transform 0.5s ease;
}

.card:hover .card__image {
  filter: brightness(1.0) saturate(1.15);
  transform: scale(1.03);
}

/* ===== Destination Page Image (16:9) ===== */

.destination-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  filter: brightness(0.90) saturate(1.15) contrast(1.05);
  transition: filter 0.4s ease, transform 0.6s ease;
}

.destination-image:hover {
  filter: brightness(0.95) saturate(1.2) contrast(1.05);
  transform: scale(1.02);
}

/* ===== Content Image Filters ===== */

/* Food images - warm tone enhancement */
.img-food {
  filter: brightness(0.95) saturate(1.25) sepia(0.1);
}

/* Nature images */
.img-nature {
  filter: brightness(0.90) saturate(1.2) hue-rotate(-5deg);
}

/* City/Architecture images */
.img-city {
  filter: brightness(0.88) saturate(1.0) contrast(1.08);
}

/* ===== Image Lazy Load Placeholder ===== */

.img-placeholder {
  background: linear-gradient(
    135deg,
    rgba(26, 26, 46, 0.8) 0%,
    rgba(22, 33, 62, 0.8) 50%,
    rgba(15, 52, 96, 0.8) 100%
  );
  position: relative;
  overflow: hidden;
}

.img-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%
  );
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ===== Image Caption ===== */

.img-caption {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
  text-align: center;
  font-style: italic;
}