/* SP_HERO_VIDEO_V2 */

.sp-hero-video{
  position:relative;
  grid-column:1 / -1;

  width:100%;
  margin-top:10px;

  overflow:hidden;

  border:1px solid rgba(255,255,255,.24);
  border-radius:18px;

  background:#07122e;

  box-shadow:
    0 15px 34px rgba(0,0,0,.20);
}

.sp-hero-video .video-js{
  width:100%;
  overflow:hidden;

  border-radius:17px;

  background:#050914;
}

.sp-hero-video .vjs-poster img{
  object-fit:cover;
}

.sp-hero-video .vjs-big-play-button{
  top:50%;
  left:50%;

  width:70px;
  height:50px;

  margin:-25px 0 0 -35px;

  border:1px solid rgba(255,255,255,.88);
  border-radius:13px;

  background:rgba(13,27,76,.92);

  line-height:48px;
}

.sp-hero-video-caption{
  position:absolute;
  left:12px;
  bottom:10px;
  z-index:2;

  display:flex;
  align-items:center;
  gap:7px;

  padding:6px 10px;

  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;

  background:rgba(8,20,51,.76);

  color:#fff;

  font-size:.76rem;
  font-weight:600;

  pointer-events:none;
}

.sp-hero-video-caption i{
  color:#e7c367;
}


/*
 * Sul mobile la vecchia home nascondeva tutta la colonna visual.
 * Ora la riattiviamo ma manteniamo solo il video.
 */
@media(max-width:575.98px){

  body.page-home .hero .col-lg-5{
    display:block !important;
  }

  body.page-home .hero .sp-hero-photo,
  body.page-home .hero .sp-hero-gallery-btn{
    display:none !important;
  }

  body.page-home .hero .sp-hero-visuals{
    display:block !important;
  }

  body.page-home .hero .sp-hero-video{
    display:block;
    margin-top:0;

    border-radius:15px;
  }

  body.page-home .hero .sp-hero-video .video-js{
    border-radius:14px;
  }

  body.page-home .hero .sp-hero-video-caption{
    left:9px;
    bottom:8px;

    padding:5px 8px;

    font-size:.7rem;
  }

}

/* SP_HOME_MOBILE_FLOW_V4: keep the hero in normal document flow. */
body.page-home > #mainNav,
body.page-home > .hero {
  flex-shrink: 0;
}

@media (max-width: 991.98px) {

  body.page-home > .hero {
    display: block;
    height: auto;
    min-height: 0;
    max-height: none;
    padding-block: 1.5rem;
  }

  body.page-home .hero .sp-hero-video .video-js:not(.vjs-fullscreen) {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    padding-top: 0;
  }

  body.page-home .hero .sp-hero-video .vjs-tech,
  body.page-home .hero .sp-hero-video .vjs-poster img {
    object-fit: contain;
  }

  body.page-home .hero .sp-hero-video .vjs-poster {
    background-size: contain;
  }

  /* The caption must never cover the playback controls. */
  body.page-home .hero .sp-hero-video-caption {
    position: static;
    width: fit-content;
    max-width: calc(100% - 1rem);
    margin: .5rem;
  }
}

@media (max-width: 575.98px) {
  body.page-home .hero h1 {
    font-size: clamp(1.65rem, 7vw, 2rem);
    line-height: 1.18;
    overflow-wrap: break-word;
  }

  body.page-home .hero .hero-card > .kicker {
    align-items: flex-start;
  }

  body.page-home .hero .hero-card > .kicker span {
    min-width: 0;
  }
}