/**
 * VideoSlider - Clean & Responsive CSS
 */

/* Container Principale */
#carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 2rem;
}

/* Assicura che il video e l'immagine siano responsivi e coprano l'area */
#carousel .carousel-item img,
#carousel .carousel-item video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  /* Rapporto 16:9 su Desktop */
  aspect-ratio: 16 / 9;
}

/* Overlay per la didascalia (Caption) */
#carousel .caption {
  position: absolute;
  bottom: 50px;
  left: 10%;
  right: 10%;
  z-index: 10;
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
}

#carousel .caption h2 {
  color: #fff;
  font-weight: bold;
}

/* --- NAVIGAZIONE DOTS (Indicatori) --- */

/* Centratura assoluta dei dots nel container */
#carousel .carousel-indicators {
  display: flex !important;
  justify-content: center;
  /* Centra i pallini tra di loro */
  position: absolute;
  bottom: 20px;
  /* Distanza dal fondo */
  left: 50%;
  transform: translateX(-50%);
  /* Sposta indietro della metà della sua larghezza */
  width: auto;
  /* Permette al contenitore di adattarsi al numero di pallini */
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 15;
}

/* Stile dei singoli pallini */
#carousel .carousel-indicators li {
  width: 12px !important;
  height: 12px !important;
  margin: 0 6px !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Stato attivo */
#carousel .carousel-indicators li.active {
  background-color: #ffffff !important;
  transform: scale(1.2);
}

/* Rimuovi eventuali frecce residue solo da questo slider */
#carousel .direction {
  display: none !important;
}

/* --- RIMOZIONE FRECCE --- */
.direction,
.carousel-control {
  display: none !important;
}

/* --- OTTIMIZZAZIONE MOBILE --- */
@media (max-width: 767px) {

  #carousel .carousel-item img,
  #carousel .carousel-item video {
    /* Rapporto più verticale per smartphone (4:5) */
    aspect-ratio: 4 / 5;
    min-height: 400px;
  }

  #carousel .caption {
    bottom: 40px;
  }

  #carousel .caption h2 {
    font-size: 1.5rem;
  }
}