/**
 * Slideshow / Glide carousel styles
 * Prevents FOUC (Flash of Unstyled Content) before JS initialization
 */

/* Hide all slides before initialization */
.glide:not(.glide--initialized) .glide__slides {
  opacity: 0;
  visibility: hidden;
}

/* Hide navigation arrows before initialization */
.glide:not(.glide--initialized) .glide__arrows {
  display: none;
}

/* Loading overlay */
.glide__loading {
  z-index: 20;
  transition: opacity 0.3s ease-out;
}

/* Loading spinner */
.glide__loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #00693e; /* Dartmouth green */
  border-radius: 50%;
  animation: glide-spinner 0.8s linear infinite;
}

/* Spinner animation */
@keyframes glide-spinner {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Add a min-height to prevent layout shift and show loading spinner */
.glide {
  min-height: 400px;
  position: relative;
}

/* Smooth fade-in when Glide initializes */
.glide.glide--initialized .glide__slides {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease-in-out;
}

/* Hide loading when initialized */
.glide.glide--initialized .glide__loading {
  opacity: 0;
  pointer-events: none;
}

/* Ensure slides are properly positioned */
.glide__slides > li {
  list-style: none;
}

/* Single image (no slideshow) - no loading state needed */
.glide:not(.glide) {
  min-height: auto;
}

/* Slider arrows */
.glide__arrow {
  background-color: rgba(255, 255, 255, 0.12);
}

/* Pagination bullets */
.glide__bullet--active {
  background-color: #639d48; /* green */
}

.glide__bullets {
  padding: 0.5rem 0;
}