/* ---------------------------------------------------------------------------
   Hero carousel — fixed height, no layout shift

   The width/height attributes on the images already give modern browsers
   enough to reserve space. This is the belt-and-braces layer: it pins the
   height of the carousel box itself, so nothing moves even before a single
   byte of image has arrived, and even if a browser ignores width/height on
   <source> inside <picture>.

   Add to your existing custom stylesheet, or save as assets/css/carousel.css
   and pipe it through Hugo Pipes.
   --------------------------------------------------------------------------- */

/* Mobile art is 1200x1200 (square). */
.hero-carousel .carousel-inner {
  aspect-ratio: 1 / 1;
}

/* Desktop art is 1200x628, matching the d-lg-block breakpoint at 992px. */
@media (min-width: 992px) {
  .hero-carousel .carousel-inner {
    aspect-ratio: 1200 / 628;
  }
}

/* Let the slide, link and <picture> fill the reserved box.
   Deliberately not setting `display` on .carousel-item — Bootstrap toggles
   that between none and block to switch slides, and overriding it breaks
   the transition. */
.hero-carousel .carousel-item {
  height: 100%;
}

.hero-carousel .carousel-item > a,
.hero-carousel picture {
  display: block;
  height: 100%;
}

/* object-fit is a safety net. The image aspect ratio already matches the box
   at both breakpoints, so nothing should actually be cropped — but if a banner
   ever ships at the wrong dimensions, this keeps it filling the frame instead
   of resizing the page. */
.hero-carousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Optional: the indicators and arrows sit on light banner artwork in a few
   slides. A soft shadow keeps them legible without a dark overlay. */
.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel .carousel-item {
    transition: none;
  }
}