@charset "utf-8";

/* ===== CAROSELLO BASE ===== */
#sicutCarousel,
#sipadCarousel {
  max-height: 600px;
  overflow: hidden;
  position: relative;
}

#sicutCarousel .carousel-item img,
#sipadCarousel .carousel-item img {
  height: 600px;          /* desktop */
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ===== CAPTION (TESTO SOPRA IMMAGINE) ===== */
#sicutCarousel .carousel-caption,
#sipadCarousel .carousel-caption {
  position: absolute;
  bottom: 20%;            /* posizione standard desktop */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10;
  width: auto;
  max-width: 95%;
  padding: 0;
  margin: 0;
}

/* ===== BOX OVERLAY (desktop/tablet) ===== */
#sicutCarousel .overlay-box,
#sipadCarousel .overlay-box {
  background: rgba(0, 0, 0, 0.55);
  padding: 20px 30px;
  border-radius: 10px;
  display: inline-block;
  text-align: center;
}

/* ===== TITOLI E TESTI ===== */
#sicutCarousel .overlay-box h2,
#sipadCarousel .overlay-box h2 {
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 10px;
}

#sicutCarousel .overlay-box p,
#sipadCarousel .overlay-box p {
  color: #fff;
  font-size: 1rem;
  margin: 6px 0;
}

#sicutCarousel .overlay-box .data,
#sipadCarousel .overlay-box .data {
  font-weight: 600;
  color: #ffc107; /* giallo */
}

/* ===== BOTTONI ===== */
#sicutCarousel .overlay-box .btn,
#sipadCarousel .overlay-box .btn {
  border-radius: 6px;
  font-weight: 600;
  padding: 10px 18px;
  margin: 6px;
  min-width: 160px;
}

/* ===== CONTROLLI ===== */
#sicutCarousel .carousel-control-prev-icon,
#sicutCarousel .carousel-control-next-icon,
#sipadCarousel .carousel-control-prev-icon,
#sipadCarousel .carousel-control-next-icon {
  filter: invert(1); /* frecce bianche */
}


.btn-sicut {
  background-color: #0d6efd;   /* blu Bootstrap */
  color: #fff;
  font-weight: 600;
  border-radius: 6px;
  padding: 10px 18px;
  margin: 6px;
  min-width: 160px;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.btn-sicut:hover {
  background-color: #0b5ed7;   /* blu più scuro */
  color: #fff;
}

.btn-blue-1 {
  background-color: #0d6efd; /* blu Bootstrap */
  color: #fff;
}
.btn-blue-1:hover {
  background-color: #0b5ed7;
}

.btn-blue-2 {
  background-color: #0a58ca; /* blu medio */
  color: #fff;
}
.btn-blue-2:hover {
  background-color: #084298;
}

.btn-blue-3 {
  background-color: #1d3557; /* blu scuro/grigio-blu */
  color: #fff;
}
.btn-blue-3:hover {
  background-color: #0b2039;
}

.btn-blue-4 {
  background-color: #003366; /* blu istituzionale */
  color: #fff;
}
.btn-blue-4:hover {
  background-color: #001f40;
}

/* Stile comune */
.btn-blue-1, .btn-blue-2, .btn-blue-3, .btn-blue-4 {
  font-weight: 600;
  border-radius: 6px;
  padding: 10px 18px;
  margin: 6px;
  min-width: 160px;
  display: inline-block;
  tr




/* ===== RESPONSIVE ===== */

/* Tablet */
@media (max-width: 991px) {
  #sicutCarousel .carousel-item img,
  #sipadCarousel .carousel-item img {
    height: 500px;
  }
  #sicutCarousel .overlay-box h2,
  #sipadCarousel .overlay-box h2 {
    font-size: 1.5rem;
  }
}

/* Mobile */
@media (max-width: 575px) {
  #sicutCarousel .carousel-item img,
  #sipadCarousel .carousel-item img {
    height: 520px;  /* altezza sufficiente */
  }

  /* caption centrata e più bassa */
  #sicutCarousel .carousel-caption,
  #sipadCarousel .carousel-caption {
    bottom: 12%;            /* prima era 35%, ora più giù */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 90%;
  }

  /* overlay box */
  #sicutCarousel .overlay-box,
  #sipadCarousel .overlay-box {
    background: rgba(0,0,0,0.75);
    padding: 20px 15px;
    border-radius: 10px;
    width: 100%;
  }

  #sicutCarousel .overlay-box h2,
  #sipadCarousel .overlay-box h2 {
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0,0,0,.6);
  }

  #sicutCarousel .overlay-box p,
  #sipadCarousel .overlay-box p {
    font-size: 0.95rem;
  }

  /* bottoni sotto uno l’altro */
  #sicutCarousel .overlay-box .btn,
  #sipadCarousel .overlay-box .btn {
    display: block;
    width: 100%;
    margin: 6px 0;
    padding: 12px;
  }
}