.home-hero-carousel {
  height: calc(100vh - var(--store-header-total-height));
  height: calc(100svh - var(--store-header-total-height));
  font-family: Roboto, sans-serif;
  overflow: hidden;
  padding: 0;
  position: relative;
}

@supports (height: 100dvh) {
  .home-hero-carousel {
    height: calc(100dvh - var(--store-header-total-height));
  }
}

.home-hero-carousel > .container-fluid,
.home-hero-carousel .carousel,
.home-hero-carousel .carousel-track {
  height: 100%;
}

.home-hero-carousel .carousel-track {
  display: flex;
  height: 100% !important;
  min-height: 100%;
}

.home-hero-carousel .carousel {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  touch-action: pan-y;
}

.home-hero-carousel .carousel.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.home-hero-carousel .carousel::-webkit-scrollbar {
  display: none;
}

.home-hero-carousel .carousel-slide {
  flex: 0 0 100%;
  height: 100%;
  min-height: 100%;
  position: relative;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  width: 100%;
}

.home-hero-carousel .hero-slide-content {
  align-items: center;
  display: flex;
  height: 100%;
  position: relative;
}

.home-hero-carousel .overlay-content {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(3, 12, 22, 0.78) 0%, rgba(3, 12, 22, 0.58) 38%, rgba(3, 12, 22, 0.18) 64%, rgba(3, 12, 22, 0.02) 100%),
    linear-gradient(180deg, rgba(3, 12, 22, 0.12) 0%, rgba(3, 12, 22, 0.34) 100%);
  bottom: 0;
  display: flex;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
}

.home-hero-carousel .slide-background {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.home-hero-carousel .slide-background img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.home-hero-carousel .content-wrapper {
  color: var(--contrast-color, #fff);
  max-width: min(70vw, 900px);
  overflow: hidden;
  padding-right: clamp(0.25rem, 1.2vw, 1rem);
  position: relative;
}

.home-hero-carousel .home-hero-title {
  display: grid;
  gap: clamp(0.35rem, 1vw, 0.65rem);
  margin-bottom: clamp(0.9rem, 2vw, 1.6rem) !important;
  max-width: min(70vw, 900px);
  overflow: hidden;
  padding: 0 !important;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.62);
  text-wrap: balance;
}

.home-hero-carousel .home-hero-title-primary,
.home-hero-carousel .home-hero-title-secondary {
  display: block !important;
  font-family: Roboto, sans-serif;
  font-style: normal;
  letter-spacing: normal;
  margin: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  padding: 0 !important;
  text-transform: none;
  white-space: normal !important;
  word-break: break-word !important;
}

.home-hero-carousel .home-hero-title-primary {
  color: #ffffff;
  font-size: clamp(2rem, 4.1vw, 4rem) !important;
  font-weight: 700 !important;
}

.home-hero-carousel .home-hero-title-secondary {
  color: #63b7ff;
  font-size: clamp(1.55rem, 2.55vw, 2.65rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.home-hero-carousel .primary-cta {
  background-color: var(--accent-color, #0d6efd);
  border-radius: 50px;
  color: var(--contrast-color, #fff);
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  padding: 1rem 2.5rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.home-hero-carousel .primary-cta:hover {
  background-color: color-mix(in srgb, var(--accent-color, #0d6efd) 90%, black 5%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  color: var(--contrast-color, #fff);
  transform: translateY(-2px);
}

.home-hero-carousel .navigation-controls {
  display: flex;
  justify-content: space-between;
  left: 0;
  padding: 0 2rem;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.home-hero-carousel .nav-arrow {
  align-items: center;
  appearance: none;
  background-color: var(--surface-color, #fff);
  border: 1px solid color-mix(in srgb, var(--default-color, #212529), transparent 80%);
  border-radius: 50%;
  color: var(--default-color, #212529);
  cursor: pointer;
  display: flex;
  font-size: 1.25rem;
  height: 50px;
  justify-content: center;
  padding: 0;
  pointer-events: all;
  transition: all 0.3s ease;
  width: 50px;
}

.home-hero-carousel .nav-arrow:hover {
  background-color: var(--accent-color, #0d6efd);
  border-color: var(--accent-color, #0d6efd);
  color: var(--contrast-color, #fff);
  transform: scale(1.1);
}

.home-hero-carousel .nav-arrow:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent-color, #0d6efd), white 35%);
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .home-hero-carousel .home-hero-title {
    margin-bottom: 3rem;
  }

  .home-hero-carousel .primary-cta {
    font-size: 1.125rem;
    padding: 1.25rem 3rem;
  }
}

@media (min-width: 992px) {
  .home-hero-carousel .content-wrapper {
    margin-left: 80px;
  }
}

@media (min-width: 1200px) {
  .home-hero-carousel .nav-arrow {
    font-size: 1.5rem;
    height: 60px;
    width: 60px;
  }
}

@media (max-width: 991.98px) {
  .home-hero-carousel .navigation-controls {
    display: none;
  }
}

@media (max-width: 768px) {
  .home-hero-carousel .content-wrapper {
    margin-inline: auto;
    max-width: min(70vw, 900px);
    padding: 0 1rem;
    text-align: left;
  }

  .home-hero-carousel .home-hero-title {
    font-size: clamp(1.1rem, 6.2vw, 1.9rem) !important;
    max-width: min(70vw, 900px);
  }
}

@media (max-width: 576px) {
  .home-hero-carousel {
    height: calc(100vh - var(--store-header-total-height));
    height: calc(100svh - var(--store-header-total-height));
  }

  @supports (height: 100dvh) {
    .home-hero-carousel {
      height: calc(100dvh - var(--store-header-total-height));
    }
  }

  .home-hero-carousel .overlay-content {
    padding-block: clamp(1rem, 5vh, 2.5rem);
  }

  .home-hero-carousel .home-hero-title-primary {
    font-size: clamp(1.65rem, 9vw, 2rem) !important;
  }

  .home-hero-carousel .primary-cta {
    font-size: 0.9rem;
    padding: 0.875rem 2rem;
  }
}


/*
  I crawlbot per eseguire gli screenshot di una pagina non eseguono uno scroll.
  Piuttosto forzano l'altezza dello schermo a 99999..px per prendere il massimo possibile
  Se la hero section ha come altezza il massimo possibile dello schermo, per questi sistemi lo screenshot del crawler da problemi.
  Si imposta quindi un'altezza massima (valorizzata ad un numero maggiore di ogni possibile altezza fattibile) in modo
  da non rompere lo screenshot dei crawler.
  Per maggiori informazioni vedi: https://support.google.com/webmasters/thread/244021226/wondering-if-the-rendered-screenshot-from-view-tested-page-is-linked-to-me-not-getting-craweled?hl=en
*/
.home-hero-carousel{
  max-height: 1500px;
}