/* ====================================================================
   carousel.css – Coletivo Macumba
===================================================================== */

/* 1) full-width “estoura” o container sem scroll lateral */
#heroCarousel.full-width {
  width: 100vw;
  position: relative;
  left: 50%;  margin-left: -50vw;
  right: 50%; margin-right: -50vw;
  overflow: hidden;
  margin-top: 0; /* anula .mb-5 se aplicado */
}

/* 2) fade effect do Bootstrap – empilha e faz fade suave */
#heroCarousel.carousel-fade .carousel-item {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity .6s ease-in-out;
}

#heroCarousel.carousel-fade .carousel-item.active {
  position: relative;
  opacity: 1;
}

/* 3) imagem ocupa 100% da largura e ajusta a altura proporcionalmente */
#heroCarousel.full-width .carousel-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* 4) indicadores (bolinhas) */
.carousel-indicators [data-bs-target] {
  width: 12px;
  height: 12px;
  margin: 0 6px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.7);
}
.carousel-indicators .active {
  background-color: #ffd700;
}

/* 5) controles laterais (setas) */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: drop-shadow(0 0 4px #000);
}

/* 6) evita scroll horizontal */
body {
  overflow-x: hidden;
}

.carousel-item video {
  width: 100%;
  height: clamp(260px, 45vw, 520px);
  object-fit: cover;
}

#heroCarousel .carousel-item img {
  height: clamp(260px, 45vw, 520px);
  object-fit: cover;
}