/* 📐 RESPONSIVE HERO IMAGES - OPTIMAL DISPLAY STANDARDS
   Updated CSS for perfect hero image display across all devices */

/* =================================================================
   🎯 HERO IMAGE BASE STYLES - OPTIMAL OBJECT POSITIONING
   ================================================================= */

.slide-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.3s ease;
}

/* =================================================================
   🖥️ DESKTOP OPTIMIZATIONS (≥1024px)
   Target: 1920x1080 images, perfect 16:9 display
   ================================================================= */

@media screen and (min-width: 1024px) {
  .slide-bg {
    object-position: center center;
  }
  
  /* Healthcare slide - focus on professional setting */
  .slide[data-index="0"] .slide-bg {
    object-position: 60% center; /* Shift focus right for text overlay space */
  }
  
  /* Financial slide - center business charts/data */
  .slide[data-index="1"] .slide-bg {
    object-position: center center;
  }
  
  /* Strategic slide - team discussion focus - optimized for maximum resolution */
  .slide[data-index="2"] .slide-bg {
    object-position: 50% 45%; /* Center horizontally, slightly upper for better composition */
    object-fit: cover; /* Ensure full coverage */
    /* Enhanced quality for strategic slide */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    /* Ensure maximum sharpness */
    transform: translateZ(0); /* Force hardware acceleration */
  }
}

/* =================================================================
   📱 TABLET OPTIMIZATIONS (768px - 1023px)
   Transition zone - balance mobile/desktop approaches
   ================================================================= */

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .slide-bg {
    object-position: center 40%; /* Slightly upper focus */
  }
  
  .slide[data-index="0"] .slide-bg {
    object-position: 55% 40%;
  }
  
  .slide[data-index="1"] .slide-bg {
    object-position: center 35%;
  }
  
  .slide[data-index="2"] .slide-bg {
    object-position: center center; /* Strategic discussion benefits from center */
  }
}

/* =================================================================
   📱 MOBILE OPTIMIZATIONS (≤767px)
   Target: 1080x1080 square images, 1:1 perfect display
   ================================================================= */

@media screen and (max-width: 767px) {
  .slide-bg {
    object-position: center center;
    object-fit: cover; /* Ensure full square coverage */
  }
  
  /* All slides use center positioning on mobile for 1:1 images */
  .slide[data-index="0"] .slide-bg,
  .slide[data-index="1"] .slide-bg,
  .slide[data-index="2"] .slide-bg {
    object-position: center center;
  }
}

/* =================================================================
   🎨 IMAGE QUALITY ENHANCEMENTS
   Performance & visual improvements
   ================================================================= */

/* Smooth loading animation - only for active slides */
.slide[aria-hidden="false"] .slide-bg {
  opacity: 1;
  animation: fadeInImage 0.6s ease-in-out forwards;
}

.slide[aria-hidden="true"] .slide-bg {
  opacity: 0;
  animation: none; /* No animation for hidden slides */
}

@keyframes fadeInImage {
  to {
    opacity: 1;
  }
}

/* Image sharpness for high-DPI displays */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
  .slide-bg {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* =================================================================
   🔍 HOVER EFFECTS (Desktop only)
   Subtle zoom for interactive feedback
   ================================================================= */

@media screen and (min-width: 1024px) {
  .slide:hover .slide-bg {
    transform: scale(1.02);
  }
}

/* =================================================================
   ⚡ PERFORMANCE OPTIMIZATIONS
   Ensure smooth rendering and fast loading
   ================================================================= */

.slide-bg {
  /* GPU acceleration for smooth transitions */
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
  
  /* Optimize rendering */
  image-rendering: auto;
  image-rendering: high-quality;
}

/* =================================================================
   📊 ASPECT RATIO FALLBACKS
   Ensure consistent ratios across browsers
   ================================================================= */

.slide {
  aspect-ratio: 16 / 9; /* Modern browsers */
}

/* Fallback for older browsers */
@supports not (aspect-ratio: 16 / 9) {
  .slide {
    position: relative;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 ratio */
  }
  
  .slide-bg {
    position: absolute;
    top: 0;
    left: 0;
  }
}

/* =================================================================
   🎯 LOADING STATES & ACCESSIBILITY
   Better UX for image loading
   ================================================================= */

.slide-bg[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.slide-bg[loading="lazy"].loaded {
  opacity: 1;
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .slide-bg {
    animation: none;
    transition: none;
    transform: none !important;
  }
}

/* =================================================================
   💡 DEBUGGING HELPERS (Remove in production)
   Visual indicators for development
   ================================================================= */

/* 
.slide-bg {
  border: 2px solid rgba(255, 0, 0, 0.5);
  box-sizing: border-box;
}

.slide[data-index="0"] .slide-bg { border-color: rgba(0, 255, 0, 0.5); }
.slide[data-index="1"] .slide-bg { border-color: rgba(0, 0, 255, 0.5); }
.slide[data-index="2"] .slide-bg { border-color: rgba(255, 255, 0, 0.5); }
*/