/* ====================================================================
   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) todos os slides compartilham a mesma janela responsiva.
   A proporção 12:5 acompanha os banners horizontais e impede saltos de layout
   quando uma imagem ou um vídeo tem dimensões diferentes. */
#heroCarousel.full-width .carousel-inner,
#heroCarousel.full-width .carousel-item {
  height: clamp(190px, 41.667vw, 520px);
}

#heroCarousel.full-width .carousel-slide-link {
  width: 100%;
  height: 100%;
}

#heroCarousel.full-width .carousel-item img,
#heroCarousel.full-width .carousel-item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 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-slide-link {
  display: block;
  color: inherit;
  cursor: pointer;
}

.carousel-slide-link:focus-visible {
  outline: 3px solid #ffd700;
  outline-offset: -3px;
}