/* Hero Slideshow Styles - Front Page Only */
.hero-slideshow {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.hero-slideshow .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.hero-slideshow .slide.active {
  opacity: 1;
}

/* Background images for each slide - Responsive and WebP optimized */
.hero-slideshow .slide-1 {
  background-image: url('../images/slideshow/hero1-large.webp');
}

.hero-slideshow .slide-2 {
  background-image: url('../images/slideshow/hero2-large.webp');
}

.hero-slideshow .slide-3 {
  background-image: url('../images/slideshow/hero3-large.webp');
}

/* Fallback for browsers that don't support WebP */
.no-webp .hero-slideshow .slide-1 {
  background-image: url('../images/slideshow/hero1-large.jpg');
}

.no-webp .hero-slideshow .slide-2 {
  background-image: url('../images/slideshow/hero2-large.jpg');
}

.no-webp .hero-slideshow .slide-3 {
  background-image: url('../images/slideshow/hero3-large.jpg');
}

/* Responsive images for different screen sizes */
@media (max-width: 992px) {
  .hero-slideshow .slide-1 {
    background-image: url('../images/slideshow/hero1-medium.webp');
  }
  
  .hero-slideshow .slide-2 {
    background-image: url('../images/slideshow/hero2-medium.webp');
  }
  
  .hero-slideshow .slide-3 {
    background-image: url('../images/slideshow/hero3-medium.webp');
  }
  
  .no-webp .hero-slideshow .slide-1 {
    background-image: url('../images/slideshow/hero1-medium.jpg');
  }
  
  .no-webp .hero-slideshow .slide-2 {
    background-image: url('../images/slideshow/hero2-medium.jpg');
  }
  
  .no-webp .hero-slideshow .slide-3 {
    background-image: url('../images/slideshow/hero3-medium.jpg');
  }
}

@media (max-width: 576px) {
  .hero-slideshow .slide-1 {
    background-image: url('../images/slideshow/hero1-small.webp');
  }
  
  .hero-slideshow .slide-2 {
    background-image: url('../images/slideshow/hero2-small.webp');
  }
  
  .hero-slideshow .slide-3 {
    background-image: url('../images/slideshow/hero3-small.webp');
  }
  
  .no-webp .hero-slideshow .slide-1 {
    background-image: url('../images/slideshow/hero1-small.jpg');
  }
  
  .no-webp .hero-slideshow .slide-2 {
    background-image: url('../images/slideshow/hero2-small.jpg');
  }
  
  .no-webp .hero-slideshow .slide-3 {
    background-image: url('../images/slideshow/hero3-small.jpg');
  }
}

/* Animation keyframes for automatic cycling */
.hero-slideshow .slide-1 {
  animation: slide1 30s infinite;
}

.hero-slideshow .slide-2 {
  animation: slide2 30s infinite;
}

.hero-slideshow .slide-3 {
  animation: slide3 30s infinite;
}

@keyframes slide1 {
  0%, 33.33% { opacity: 1; }
  36.66%, 96.66% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes slide2 {
  0%, 30% { opacity: 0; }
  33.33%, 66.66% { opacity: 1; }
  70%, 100% { opacity: 0; }
}

@keyframes slide3 {
  0%, 63.33% { opacity: 0; }
  66.66%, 96.66% { opacity: 1; }
  100% { opacity: 0; }
}

/* Responsive Design */
@media (max-width: 1200px) {
  .hero-slideshow {
    height: 350px;
  }
}

@media (max-width: 992px) {
  .hero-slideshow {
    height: 300px;
  }
}

@media (max-width: 768px) {
  .hero-slideshow {
    height: 250px;
    margin-bottom: 2rem;
  }
}

@media (max-width: 576px) {
  .hero-slideshow {
    height: 200px;
  }
}

/* Ensure slideshow works well with Bootstrap grid */
.hero .hero-image .hero-slideshow {
  max-width: 100%;
}

/* Loading state - show first image immediately */
.hero-slideshow .slide-1 {
  opacity: 1;
}

/* Accessibility - respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hero-slideshow .slide {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}