/* Hero Carousel Styles */
.hero-carousel {
  width: 100%;
  position: relative;
  background-color: var(--primary-color, #353b56);
  overflow: hidden;
}

.hero-carousel .carousel-inner {
  width: 100%;
}

.hero-carousel .carousel-item {
  /* Aspect ratio da imagem: 2770x600 = 4.617:1 */
  aspect-ratio: 2770 / 600;
  max-height: 70vh;
  background-color: var(--primary-color, #353b56);
  display: none; /* Garante que o padrão do bootstrap seja respeitado inicialmente */
  align-items: center;
  justify-content: center;
}

.hero-carousel .carousel-item.active,
.hero-carousel .carousel-item-next,
.hero-carousel .carousel-item-prev {
  display: flex;
}

.hero-carousel-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Data-align support */
.hero-carousel .carousel-item[data-align="left"] .hero-carousel-img {
  object-fit: cover;
  object-position: left center;
}

.hero-carousel .carousel-item[data-align="right"] .hero-carousel-img {
  object-fit: cover;
  object-position: right center;
}

.hero-carousel .carousel-item[data-align="center"] .hero-carousel-img {
  object-fit: cover;
  object-position: center center;
}

.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
  width: 8%;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.hero-carousel .carousel-control-prev:hover,
.hero-carousel .carousel-control-next:hover {
  opacity: 1;
}

.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon {
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 10px;
  background-size: 50%;
}

/* Progress Bar Styles */
.hero-carousel-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.3);
  z-index: 10;
}

.hero-carousel-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary-color, #353b56), #00baff);
  transition: width 0.1s linear;
}

.hero-carousel-progress-bar.animate {
  animation: progressFill 5s linear forwards;
}

.hero-carousel-progress-bar.paused {
  animation-play-state: paused;
}

@keyframes progressFill {
  from { width: 0%; }
  to { width: 100%; }
}

@media (max-width: 768px) {
  .hero-carousel .carousel-item {
    max-height: 50vh;
  }
}