/* Estilos para a página Home */
@import url('../colors.css');

/* Estilo do banner de busca */
.search-banner {
  background: linear-gradient(rgba(245, 246, 252, 0.95), rgba(245, 246, 252, 0.95)),
    url('/assets/images/home-banner-bg.jpg');
  background-size: cover;
  background-position: center center;
  border-radius: 0 0 10px 10px;
}

/* Ícone de estrela dos destaques */
.star-icon {
  color: var(--yellow-color);
}

/* Solução para manter o arredondamento no carrossel desktop */
#highlightedCarouselDesktop .carousel-inner {
  border-radius: 0.75rem !important;
  border: 1px solid var(--gray-stroke-color);
}

#highlightedCarouselDesktop .carousel-control-prev,
#highlightedCarouselDesktop .carousel-control-next {
  width: 5%;
  opacity: 0.8;
  z-index: 15;
}

#highlightedCarouselDesktop .carousel-control-prev-icon,
#highlightedCarouselDesktop .carousel-control-next-icon {
  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.3));
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 1rem;
}

#highlightedCarouselDesktop .carousel-indicators {
  z-index: 15;
  margin-bottom: 0;
  bottom: -30px;
}

#highlightedCarouselDesktop .carousel-indicators button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
}

/* Garantir layout horizontal dos cards de destaque desktop (40% imagem / 60% conteúdo) */
#highlightedCarouselDesktop .highlight-card {
  height: 340px !important; /* Altura aumentada para todos os cards */
}

#highlightedCarouselDesktop .highlight-card .row {
  height: 100%;
}

#highlightedCarouselDesktop .highlight-card-image-col {
  flex: 0 0 40% !important;
  max-width: 40% !important;
}

#highlightedCarouselDesktop .highlight-card-content-col {
  flex: 0 0 60% !important;
  max-width: 60% !important;
}

/* Garantir que as colunas do carrossel desktop tenham altura consistente */
#highlightedCarouselDesktop .carousel-item .row > div {
  display: flex;
  align-items: stretch;
}

#highlightedCarouselDesktop .carousel-item .row > div > a {
  width: 100%;
}

/* Estilos para o carrossel mobile */
#highlightedCarouselMobile .carousel-inner {
  border-radius: 0.75rem !important;
  border: 1px solid var(--gray-stroke-color);
  height: 620px;
}

#highlightedCarouselMobile .carousel-control-prev,
#highlightedCarouselMobile .carousel-control-next {
  width: 5%;
  opacity: 0.8;
  z-index: 15;
}

#highlightedCarouselMobile .carousel-control-prev-icon,
#highlightedCarouselMobile .carousel-control-next-icon {
  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.3));
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 1rem;
}

#highlightedCarouselMobile .carousel-indicators {
  z-index: 15;
  margin-bottom: 0;
  bottom: -30px;
}

#highlightedCarouselMobile .carousel-indicators button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
}

#highlightedCarouselMobile .carousel-item {
  height: 420px;
}

/* Garantir que o card mobile mantenha altura consistente */
#highlightedCarouselMobile .highlight-card-mobile {
  height: 420px !important;
}

#highlightedCarouselMobile .carousel-item .row > div {
  display: flex;
  align-items: stretch;
  height: 460px;
}

#highlightedCarouselMobile .carousel-item .row > div > a {
  width: 100%;
  height: 100%;
}

/* Ajustes responsivos para ambos os carrosséis */
@media (max-width: 768px) {
  #highlightedCarouselDesktop .highlight-card {
    height: 300px !important;
  }

  #highlightedCarouselMobile .highlight-card-mobile {
    height: 420px !important;
  }

  #highlightedCarouselMobile .carousel-inner {
    height: 420px;
  }

  #highlightedCarouselMobile .carousel-item {
    height: 420px;
  }

  #highlightedCarouselMobile .carousel-item .row > div {
    height: 420px;
  }
}

@media (max-width: 576px) {
  #highlightedCarouselDesktop .highlight-card {
    height: 260px !important;
  }

  #highlightedCarouselMobile .highlight-card-mobile {
    height: 420px !important;
  }

  #highlightedCarouselMobile .carousel-inner {
    height: 420px;
  }

  #highlightedCarouselMobile .carousel-item {
    height: 420px;
  }

  #highlightedCarouselMobile .carousel-item .row > div {
    height: 420px;
  }
}

@media (max-width: 480px) {
  #highlightedCarouselDesktop .highlight-card {
    height: 220px !important;
  }

  #highlightedCarouselMobile .highlight-card-mobile {
    height: 420px !important;
  }

  #highlightedCarouselMobile .carousel-inner {
    height: 420px;
  }

  #highlightedCarouselMobile .carousel-item {
    height: 420px;
  }

  #highlightedCarouselMobile .carousel-item .row > div {
    height: 420px;
  }
}

/* Estilização de cards e elementos na home */
.home-section {
  padding: 3rem 0;
}

.home-section-title {
  position: relative;
  margin-bottom: 2rem;
  font-weight: 600;
}

.home-section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 60px;
  height: 3px;
  background-color: var(--bs-success);
}

/* Ajustes responsivos */
@media (max-width: 767px) {
  .search-banner {
    padding: 2rem 0;
  }
}