/* ===== Prevent layout shift (fixed heights) ===== */
.carousel,
.carousel-inner,
.carousel-item {
  height: 300px;
  position: relative;
}

@media (min-width: 768px) {
  .carousel,
  .carousel-inner,
  .carousel-item {
    height: 600px;
  }
}

@media (min-width: 1200px) {
  .carousel,
  .carousel-inner,
  .carousel-item {
    height: 800px;
  }
}

/* ===== Image behavior ===== */
.carousel picture,
.carousel img {
  width: 100%;
  height: 100%;
}

.carousel img {
  object-fit: contain;
}

/* ===== Spinner overlay ===== */
.carousel-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.05);
  z-index: 2;
}

/* ===== Optional: smoother fade-in ===== */
.carousel img {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.carousel img.loaded {
  opacity: 1;
}