/* 87TV_HOME_HERO_UNIFORM_CLEAN_V1 */
/* live e serie: stessa griglia, stessa posizione, bottone fermo */

.hero-content{
  top: 16% !important;
  bottom: auto !important;
  left: 5.5% !important;
  width: min(88%, 980px) !important;
  max-width: 980px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding-top: 28px !important;
  box-sizing: border-box !important;
}

.hero-content .badge-tag,
.hero-content .hero-title,
.hero-content .hero-desc,
.hero-content .btn-main{
  position: relative !important;
  margin: 0 !important;
  align-self: flex-start !important;
}

/* etichetta */
.hero-content .badge-tag{
  transform: translate(28px, 0) !important;
  margin-bottom: 10px !important;
  min-height: 28px !important;
}

/* titolo */
.hero-content .hero-title{
  transform: translateX(24px) !important;
  margin-top: 0 !important;
  min-height: 1.9em !important;
  max-width: 900px !important;
  text-wrap: balance !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* sottotitolo */
.hero-content .hero-desc{
  transform: translateX(24px) !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  min-height: 2.5em !important;
  max-width: 66ch !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
}

/* bottone */
.hero-content .btn-main,
.hero-content .btn-main:hover,
.hero-content .btn-main:focus,
.hero-content .btn-main:active,
.hero-content .btn-main:focus-visible{
  transform: translate(24px, 55px) !important;
  margin-top: 14px !important;
  min-height: 50px !important;
}

/* hover: cambia aspetto, non posizione */
.hero-content .btn-main{
  transition:
    background-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    filter .18s ease !important;
}

.hero-content .btn-main:hover,
.hero-content .btn-main:focus,
.hero-content .btn-main:active,
.hero-content .btn-main:focus-visible{
  filter: brightness(1.05) !important;
}

/* tablet */
@media (max-width: 980px){
  .hero-content{
    left: 4.5% !important;
    width: min(90%, 760px) !important;
    padding-top: 24px !important;
  }

  .hero-content .badge-tag{
    transform: translateX(18px) !important;
  }

  .hero-content .hero-title{
    transform: translateX(12px) !important;
    min-height: 2.15em !important;
    max-width: 760px !important;
  }

  .hero-content .hero-desc{
    transform: translateX(12px) !important;
    min-height: 2.5em !important;
    max-width: 58ch !important;
  }

  .hero-content .btn-main,
  .hero-content .btn-main:hover,
  .hero-content .btn-main:focus,
  .hero-content .btn-main:active,
  .hero-content .btn-main:focus-visible{
    transform: translate(12px, 47px) !important;
  }
}

/* mobile */
@media (max-width: 640px){
  .hero-content{
    top: auto !important;
    bottom: 10% !important;
    left: 4% !important;
    right: 4% !important;
    width: auto !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto auto !important;
    align-items: end !important;
    column-gap: 14px !important;
    row-gap: 8px !important;
    padding-top: 0 !important;
  }

  .hero-content .badge-tag{
    transform: none !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin-bottom: 0 !important;
  }

  .hero-content .hero-title{
    transform: none !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    min-height: auto !important;
    max-width: 100% !important;
  }

  .hero-content .hero-desc{
    transform: none !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    min-height: auto !important;
    margin-top: 0 !important;
    max-width: 100% !important;
  }

  .hero-content .btn-main,
  .hero-content .btn-main:hover,
  .hero-content .btn-main:focus,
  .hero-content .btn-main:active,
  .hero-content .btn-main:focus-visible{
    transform: none !important;
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: end !important;
    justify-self: end !important;
    margin-top: 0 !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    border-radius: 9px !important;
    gap: 7px !important;
  }
}

/* Nasconde i dots centrali della hero senza toccare i bottoni */
.hc-dots{
  display:none !important;
}