/* Contact */
.contact-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--s3);
  align-items:start;
}
@media (max-width: 900px){ .contact-grid{grid-template-columns:1fr} }
.notice{
  padding: var(--s3);
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: var(--line2);
  color: var(--muted);
}
.notice b{color: var(--text)}
/* ============================
   Contact CTA (isolata da .btn)
   ============================ */

.contact-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* base button/link */
.cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-height: 44px; /* accessibilità: target touch */
  padding: 12px 16px;
  border-radius: 14px;

  font: inherit;
  font-weight: 700;           /* no bold aggressivo */
  letter-spacing: -0.01em;
  text-decoration: none;

  border: 1px solid rgba(11,18,32,.12);
  background: rgba(255,255,255,.92);
  color: rgba(11,18,32,.92);

  box-shadow: 0 12px 26px rgba(11,18,32,.10);
  cursor: pointer;

  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, filter .12s ease;
  -webkit-tap-highlight-color: transparent;
}

.cta-btn .material-symbols-outlined{
  font-size: 18px;
}

/* Primary */
.cta-btn--primary{
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  border-color: rgba(52,146,214,.30);
  color: #fff;
  box-shadow: 0 14px 34px rgba(28,92,158,.22);
}

/* IMPORTANT: non deve MAI diventare bianco in hover */
.cta-btn--primary:hover,
.cta-btn--primary:focus-visible{
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color: #fff;
  border-color: rgba(52,146,214,.38);
  box-shadow: 0 18px 44px rgba(28,92,158,.26);
  transform: translateY(-1px);
  filter: saturate(1.03);
}

.cta-btn--primary:active{
  transform: translateY(0);
  box-shadow: 0 12px 28px rgba(28,92,158,.20);
}

/* Secondary (ghost) coerente e “pulita” */
.cta-btn--ghost{
  background: rgba(11,18,32,.02);
  border-color: rgba(11,18,32,.10);
  color: rgba(11,18,32,.88);
  box-shadow: none;
}

.cta-btn--ghost:hover,
.cta-btn--ghost:focus-visible{
  background: rgba(52,146,214,.08);
  border-color: rgba(52,146,214,.22);
  box-shadow: 0 10px 22px rgba(11,18,32,.08);
  transform: translateY(-1px);
}

.cta-btn--ghost:active{
  transform: translateY(0);
}

/* focus accessibile */
.cta-btn:focus-visible{
  outline: 3px solid rgba(74,169,255,.75);
  outline-offset: 3px;
}

/* Mobile-first: impila e full-width */
@media (max-width: 520px){
  .contact-actions{
    flex-direction: column;
  }
  .cta-btn{
    width: 100%;
  }
}
/* ============================
   Contatti: form full width
   ============================ */

/* Se la tua .contact-grid era una grid a 2 colonne, la riportiamo a 1 */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
  align-items: start;
}

/* facoltativo: rendi il container più largo SOLO in questa pagina */
@media (min-width: 900px){
  .contact-grid.container,
  .container.contact-grid{
    width: min(var(--container), calc(100% - 2*var(--s3)));
  }
}

/* Se avevi regole che fissavano larghezze/colonne, sovrascrivi */
@media (min-width: 900px){
  .contact-grid{
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 900px){
  .contact-grid > .card .card__inner{
    padding: clamp(18px, 2vw, 28px);
  }
}