/* ── Features carousel variant ────────────────────────────
   Text-only carousel. Add class="c-text" to your .carousel
   element and load carousel-base.css first.
   Slides use plain Bootstrap typography (h1–h6, p) so they
   stay styleable from inside Bootstrap Studio.
────────────────────────────────────────────────────────── */

:root {
  --carousel-features-padding-x: 0rem;
  --carousel-features-padding-y: 2rem;
  --carousel-features-max-width: 600px;
  --carousel-features-side-gap: 0rem;
  --carousel-features-active-opacity: 1;
  --carousel-features-transition-opacity: 0;
  --carousel-features-align: center;
  --carousel-features-justify: center;
}

/* Per-instance text-alignment modifiers — drop one of these onto the
   .c-text element to control the slide content alignment. */

.c-text.c-left {
  --carousel-features-align: left;
  --carousel-features-justify: flex-start;
}

.c-text.c-center {
  --carousel-features-align: center;
  --carousel-features-justify: center;
}

.c-text.c-right {
  --carousel-features-align: right;
  --carousel-features-justify: flex-end;
}

.c-text .carousel-item {
  height: auto;
  min-height: inherit;
  padding-left: calc(var(--carousel-control-width) + var(--carousel-features-side-gap));
  padding-right: calc(var(--carousel-control-width) + var(--carousel-features-side-gap));
}

/* When controls are hidden on this instance, drop the side reservation. */

.c-text.c-no-arrows .carousel-item {
  padding-left: var(--carousel-features-side-gap);
  padding-right: var(--carousel-features-side-gap);
}

/* Center vertically; horizontal alignment driven by the modifier vars above. */

.c-text .carousel-item > * {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: var(--carousel-features-justify);
  text-align: var(--carousel-features-align);
  width: 100%;
  min-height: 100%;
  max-width: var(--carousel-features-max-width);
  margin-left: auto;
  margin-right: auto;
  padding: var(--carousel-features-padding-y) var(--carousel-features-padding-x);
  opacity: var(--carousel-features-active-opacity);
  transition: opacity var(--carousel-fade-duration) var(--carousel-transition-easing);
}

/* Pin prev/next controls to the carousel's own left/right edges
   so they align with the surrounding column instead of the inner
   text max-width box. */

.c-text .carousel-control-prev, .c-text .carousel-control-next {
  width: auto;
  padding: 0;
}

.c-text .carousel-control-prev {
  left: 0;
  right: auto;
}

.c-text .carousel-control-next {
  right: 0;
  left: auto;
}

/* Fade the text out while the slide is in motion so the backdrop shows */

.c-text .carousel-item-next:not(.carousel-item-start) > *, .c-text .carousel-item-prev:not(.carousel-item-end) > *, .c-text .active.carousel-item-start > *, .c-text .active.carousel-item-end > * {
  opacity: var(--carousel-features-transition-opacity);
}

/* Responsive padding overrides */

@media (min-width: 768px) {
  :root {
    --carousel-features-padding-x: 2.5rem;
    --carousel-features-padding-y: 1.5rem;
  }
}