/* =========================================================
   v5-home-polish.css
   Loaded LAST on the home pages (de/en/pt) so it wins the cascade.
   1) Hero buttons + meta line: equal fixed widths, flush left/right,
      text centred -> identical alignment in every language.
   2) Contact area: coloured brand icons + soft gradient background.
   ========================================================= */

/* ---------- 1. HERO ACTIONS (3 equal columns -> flush) ---------- */
.hero .hero-actions{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:.8rem!important;
  align-items:stretch!important;
  width:100%!important;
  max-width:680px!important;
  margin-top:1.5rem!important;
  margin-bottom:1.1rem!important;
}
.hero .hero-actions .button{
  width:100%!important;
  margin:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;   /* centre shorter labels */
  text-align:center!important;
  white-space:nowrap!important;
  padding:.92rem .8rem!important;
  min-height:52px!important;
  box-sizing:border-box!important;
  font-size:1rem!important;
}

/* ---------- HERO META (aligned under the 3 buttons) ---------- */
.hero .hero-meta{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:.8rem!important;
  width:100%!important;
  max-width:680px!important;
  margin-top:1rem!important;
}
.hero .hero-meta span{
  width:100%!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;   /* centre shorter labels */
  text-align:center!important;
  white-space:normal!important;       /* allow wrap so text never overflows the pill */
  overflow-wrap:anywhere!important;
  box-sizing:border-box!important;
  padding:.46rem .55rem!important;
  font-size:.74rem!important;          /* slightly smaller so the longest label fits */
  line-height:1.2!important;
  border:1px solid rgba(203,213,225,.4)!important;
  border-radius:999px!important;
  background:rgba(15,23,42,.18)!important;
  color:#e0f2fe!important;
  font-weight:700!important;
}

/* On narrow screens stack to a single column (still flush, full width) */
@media(max-width:760px){
  .hero .hero-actions,
  .hero .hero-meta{
    grid-template-columns:1fr!important;
    max-width:100%!important;
  }
  .hero .hero-meta span{white-space:normal!important;}
}

/* ---------- 2. CONTACT AREA ---------- */
/* Soft gradient background on the contact card (like the old site) */
.contact-card.compact-contact{
  background:linear-gradient(135deg,#eef4ff 0%,#f7faff 42%,#ffffff 100%)!important;
  border:1px solid #d7e3f5!important;
  box-shadow:0 18px 40px rgba(37,99,235,.10)!important;
}

/* Real platform favicons rendered as <img>; hide the old ::before text/SVG tricks */
.compact-contact .social-row a.social-icon::before{content:none!important;}
.compact-contact .social-row a.social-icon svg{display:none!important;}
.compact-contact .social-row a.social-icon{
  width:54px!important;height:54px!important;min-width:54px!important;
  padding:0!important;border-radius:999px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  background:#ffffff!important;border:1px solid #dbe5f2!important;
  color:inherit!important;
  overflow:hidden!important;
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.compact-contact .social-row a.social-icon .brand-img{
  display:block!important;
  width:26px!important;height:26px!important;
  object-fit:contain!important;
}
.compact-contact .social-row a.social-icon:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(15,23,42,.15);
  background:#ffffff!important;
  border-color:#c4d4ec!important;
}

/* allow the social row to wrap (5 icons) */
.compact-contact .social-row{display:flex!important;flex-wrap:wrap!important;gap:.7rem!important;}
@media(max-width:720px){
  .compact-contact .social-row a.social-icon{width:54px!important;min-width:54px!important;}
}