/* Responsive Images Optimization */

/* Native lazy loading styles */
img[loading='lazy'] {
  transition: opacity 0.3s ease-in-out;
}

/* Picture element responsive behavior */
picture {
  display: block;
  width: 100%;
  height: auto;
}

picture img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* Hero image optimizations */
.hero-image picture img {
  border-radius: 20px;
  box-shadow: var(--shadow-heavy);
}

/* About image optimizations */
.about-image picture img {
  border-radius: 15px;
  box-shadow: var(--shadow-medium);
}

/* Brand logo optimizations */
.brand-logo picture img {
  width: auto;
  height: auto;
  max-width: 120px;
  max-height: 60px;
  object-fit: contain;
}

/* Progressive enhancement for modern formats */
@supports (image-set: url() type(image/avif)) {
  .hero-image::before,
  .about-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1));
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .hero-image:hover::before,
  .about-image:hover::before {
    opacity: 1;
  }
}

/* Fallback for older browsers */
@supports not (image-set: url() type(image/avif)) {
  .hero-image img,
  .about-image img {
    filter: brightness(1.05) contrast(1.02);
  }
}

/* Performance optimizations */
picture source,
picture img {
  content-visibility: auto;
  contain-intrinsic-size: 400px 400px;
}

/* Dark mode adjustments for images */
[data-theme="dark"] .hero-image picture img,
[data-theme="dark"] .about-image picture img {
  filter: brightness(0.95) contrast(1.1);
}

[data-theme="dark"] .brand-logo picture img {
  filter: brightness(1.1) contrast(0.9);
}

/* Responsive breakpoints for images */
@media (max-width: 480px) {
  .hero-image picture img {
    max-height: 300px;
    object-fit: cover;
  }
  
  .about-image picture img {
    max-height: 250px;
    object-fit: cover;
  }
}

@media (max-width: 768px) {
  .hero-image picture img {
    max-height: 400px;
  }
  
  .about-image picture img {
    max-height: 350px;
  }
}

@media (max-width: 1024px) {
  .hero-image picture img {
    max-height: 500px;
  }
  
  .about-image picture img {
    max-height: 450px;
  }
}

/* Native loading placeholder */
picture img[loading="lazy"] {
  background-color: #f0f0f0;
  transition: background-color 0.3s ease;
}

[data-theme="dark"] picture img[loading="lazy"] {
  background-color: #2a2a2a;
}

/* Preload hint styling */
.hero-image picture img[fetchpriority="high"] {
  transform: scale(1.01);
  transition: transform 0.3s ease;
}

.hero-image picture img[fetchpriority="high"]:hover {
  transform: scale(1.02);
}

/* Critical image optimization */
.hero-image picture img {
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Performance monitoring */
@media (prefers-reduced-data: reduce) {
  picture source[type="image/avif"],
  picture source[type="image/webp"] {
    display: none;
  }
}