@charset "utf-8";
/* CSS Document */
/* ======================================================
  slider-fullwidth-01.css
  Estilo específico para o slider principal da homepage
  - Largura total (full width)
  - Altura ajustada com vh (viewport height)
  - Legenda centralizada com responsividade
====================================================== */

/* Contêiner geral do slider */
#sliderFullwidth {
  position: relative;
  margin-bottom: 3rem; /* Espaço abaixo do slider antes da próxima secção */
}

/* Slide: imagem de fundo com altura relativa ao ecrã */
#sliderFullwidth .carousel-item img {
  height: 50vh;              /* Ocupa parte da altura do ecrã */
  min-height: 380px;         /* Garante presença mínima em ecrãs pequenos */
  max-height: 750px;         /* Evita exageros em ecrãs muito grandes */
  object-fit: cover;         /* Cobre todo o espaço sem distorcer a imagem */
  width: 100%;               /* Largura total */
}

/* Legenda sobreposta (texto + botão) */
#sliderFullwidth .carousel-caption {
  bottom: 10%;                             /* Posição da legenda na imagem */
  left: 0;                                 /* Força início no lado esquerdo */
  right: 0;                                /* Força fim no lado direito */
  width: 100%;                             /* Ocupa toda a largura */
  padding-left: 15px;                      /* Respiro lateral */
  padding-right: 15px;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.7); /* Sombra para boa legibilidade */
}

/* Título principal do slide */
#sliderFullwidth .carousel-caption h1 {
  font-size: 2.5rem;
  font-weight: bold;
  margin: 0 auto;
  max-width: 800px;
}

/* Texto adicional */
#sliderFullwidth .carousel-caption p {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  margin: 0 auto;
  max-width: 800px;
}

/* Botão de chamada à ação */
#sliderFullwidth .btn-primary {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 0.4rem;
  margin-top: 20px;
}

/* ------------------------------------------------------
  RESPONSIVE: Ajustes para ecrãs abaixo de 768px
------------------------------------------------------ */
@media (max-width: 768px) {
  #sliderFullwidth .carousel-caption h1 {
    font-size: 1.8rem;
  }

  #sliderFullwidth .carousel-caption p {
    font-size: 1rem;
  }

  #sliderFullwidth .btn-primary {
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
  }
}

/* Ajustes adicionais para mobile (abaixo de 768px) */
@media (max-width: 767.98px) {
  .carousel-caption {
    bottom: 1.5rem;
    padding: 0 1rem; /* Margem lateral para facilitar leitura */
  }

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

  .carousel-caption p {
    font-size: 1rem;
    margin-bottom: 0.8rem;
  }

  .carousel-caption .btn {
    font-size: 0.95rem;
    padding: 0.4rem 1rem;
  }
}

/* ======================================================
  TRANSIÇÃO ENTRE SLIDES (carousel-fade)
====================================================== */
.carousel-fade .carousel-item {
  transition: opacity 2s ease-in-out;
  opacity: 0;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.carousel-fade .carousel-item.active {
  opacity: 1;
  z-index: 1;
  position: relative;
}