/* =========================
   HERO: pulsante centrato + social sotto
   ========================= */
.hero-actions{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}

/* se il bottone ereditava larghezze strane, così resta "naturale" */
.hero-actions .btn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/* social */
.hero-social{
  display: flex;
  justify-content: center;
  gap: 18px;
}

.hero-social .custom-a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #111;
  transition: transform .2s ease, color .2s ease;
}

.hero-social .custom-a:hover{
  transform: scale(1.12);
  color: #b91c1c;
}

/* =========================
   EMBED: look "card"
   ========================= */
.autoscout-embed{
  width: 100%;
  min-height: 1200px;
  display: block;
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

/* ===== FIX MOBILE VENDITA AUTO (override style.css) ===== */
@media (max-width: 768px) {

  /* Riduci davvero il titolo: vince contro .custom-h1-4rem { 4rem !important } */
  .hero .custom-h1-4rem{
    font-size: 2.2rem !important;
    line-height: 1.05 !important;
    margin-bottom: 14px !important;
  }

  /* Sottotitolo: nel tuo style.css manca anche un ; dopo font-weight:450 */
  .hero .hero-subtitle{
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
    margin-bottom: 18px !important;
  }

  /* Hero meno “alto” su mobile */
  .hero .hero-content{
    padding: 60px 0 35px !important;
  }

  /* Se stai ancora usando hero-buttons come wrapper, forzo layout verticale */
  .hero .hero-buttons{
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  /* Social sotto: metti più respiro */
  .hero .hero-social{
    gap: 16px !important;
  }

  .hero .hero-social svg{
    width: 30px !important;
    height: 30px !important;
  }
}