/* ── Image carousel variant ──────────────────────────────────────
   Add class="c-img" to your Bootstrap .carousel element.
   The parent section must have overflow:hidden.
   Load carousel-base.css first.
──────────────────────────────────────────────────────────────── */

:root {
  --carousel-active-image-opacity: 1;
  --carousel-transition-image-opacity: 0;
}

/* Carousel fills its flex container (respects parent padding).
   flex: 1 makes it fill available space; min-height: 0 allows
   it to shrink below content size. */

.c-img {
  flex: 1;
  min-height: 0;
  width: 100%;
}

/* Inner fills the carousel */

.c-img .carousel-inner {
  height: 100%;
}

/* Override Bootstrap's float-based stacking with absolute positioning.
   inset:0 fills carousel-inner reliably without needing height:100% on
   a floated element. */

.c-img .carousel-item {
  position: absolute;
  inset: 0;
  float: none;
  margin-right: 0;
}

/* Image letterboxed to fill the slide without cropping */

.c-img .carousel-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: var(--carousel-active-image-opacity);
  transition: opacity var(--carousel-fade-duration) var(--carousel-transition-easing);
}

/* Fade image out during slide transition so backdrop shows */

.c-img .carousel-item-next:not(.carousel-item-start) img, .c-img .carousel-item-prev:not(.carousel-item-end) img, .c-img .active.carousel-item-start img, .c-img .active.carousel-item-end img {
  opacity: var(--carousel-transition-image-opacity);
}

/* ── Dots-below variant ──────────────────────────────────────────
   Add class="c-dots-below" to the .c-img element.
   Indicators sit below the image area; images shrink to make room.
──────────────────────────────────────────────────────────────── */

.c-img.c-dots-below {
  display: flex;
  flex-direction: column;
}

.c-img.c-dots-below .carousel-inner {
  flex: 1;
  min-height: 0;
  height: auto;
}

.c-img.c-dots-below .carousel-indicators {
  position: static;
  order: 2;
  margin: var(--carousel-indicators-margin) 0;
}

/* Constrain arrow controls to the image area, not the dots row */

.c-img.c-dots-below .carousel-control-prev, .c-img.c-dots-below .carousel-control-next {
  bottom: calc(var(--carousel-indicator-size) + var(--carousel-indicators-margin) * 2);
}