/* ========================================
   ADECOAL WEAR - OTIMIZAÇÃO DE IMAGENS
   Lazy Loading, Responsive Images, Performance
======================================== */

/* ========================================
   LAZY LOADING RESPONSIVO
======================================== */
img[data-src] {
  opacity: 0;
  transition: opacity 0.3s ease;
  filter: blur(5px);
}

img[data-src].loaded {
  opacity: 1;
  filter: blur(0);
}

/* Placeholder para imagens carregando */
img.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; }
}

/* ========================================
   IMAGENS RESPONSIVAS
======================================== */
.responsive-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Aspect ratios responsivos */
.aspect-ratio-16-9 {
  aspect-ratio: 16 / 9;
}

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

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

.aspect-ratio-3-2 {
  aspect-ratio: 3 / 2;
}

/* Container para imagens com aspect ratio */
.img-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

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

/* ========================================
   OTIMIZAÇÕES ESPECÍFICAS POR SEÇÃO
======================================== */

/* Hero Images */
.hero-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Categoria Images */
.categoria-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  backface-visibility: hidden;
}

/* Logo responsivo */
header .logo img {
  height: clamp(50px, 8vw, 90px);
  width: auto;
  max-width: 200px;
  object-fit: contain;
  object-position: center;
}

/* ========================================
   WEBP SUPPORT
======================================== */
.webp .hero-swiper .swiper-slide img,
.webp .categoria-tile img {
  /* Fallback para navegadores que não suportam WebP */
}

/* ========================================
   RETINA DISPLAYS
======================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero-swiper .swiper-slide img,
  .categoria-tile img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* ========================================
   IMAGENS DE FALLBACK
======================================== */
img[src*="fallback"] {
  background: var(--primary-beige);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

img[src*="fallback"]::before {
  content: "Imagem não disponível";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
======================================== */
.hero-swiper .swiper-slide:not(.swiper-slide-active) img {
  transform: scale(1);
  transition: none;
}

.hero-swiper .swiper-slide-active img {
  transform: scale(1.02);
  transition: transform 7s ease-in-out;
}

/* Preload de imagens críticas */
.preload-img {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ========================================
   RESPONSIVE IMAGE SIZES
======================================== */
@media (max-width: 480px) {
  .categoria-tile {
    height: 200px;
  }
  
  .hero-swiper {
    height: 60vh;
  }
  
  header .logo img {
    height: 50px;
  }
}

@media (max-width: 768px) {
  .categoria-tile {
    height: clamp(250px, 50vw, 300px);
  }
  
  .hero-swiper {
    height: 70vh;
  }
}

@media (min-width: 1024px) {
  .categoria-tile {
    height: 360px;
  }
  
  .hero-swiper {
    height: 100vh;
  }
}

/* ========================================
   ACCESSIBILITY
======================================== */
img {
  max-width: 100%;
  height: auto;
}

img:not([alt]) {
  border: 2px dashed #ff0000;
}

/* ========================================
   PRINT STYLES
======================================== */
@media print {
  .hero-swiper,
  .categoria-tile,
  .whatsapp-float {
    display: none !important;
  }
  
  img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
  }
}

/* ========================================
   DARK MODE IMAGES (DESABILITADO)
======================================== */
/*
@media (prefers-color-scheme: dark) {
  img[src*="fallback"] {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
  }
  
  .img-container {
    border: 1px solid var(--border-color);
  }
}
*/