/* =========================================================
   CONTATTI.CSS — stili specifici della pagina Contatti
   (card contatto + form)
   Nota: le icone social hanno un proprio foglio dedicato,
   css/social.css (tecnologia esterna con override locale).
========================================================= */

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}
.contact-card{
  background:var(--carbon);
  border:1px solid var(--carbon-2);
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:border-color .2s ease, transform .2s ease;
}
.contact-card:hover{
  border-color:var(--race-red);
  transform:translateY(-3px);
}
.contact-card .c-icon{
  width:40px; height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(225,6,0,0.12);
  border-radius:50%;
  color:var(--race-red);
}
.contact-card .c-icon svg{ width:20px; height:20px; }
.contact-card h3{
  font-size:1.05rem;
  letter-spacing:0.02em;
}
.contact-card p{ color:var(--steel); font-size:0.92rem; }
.contact-card a.c-link{
  font-family:var(--font-mono);
  font-size:0.88rem;
  color:var(--white);
  border-bottom:1px solid var(--carbon-3);
  width:fit-content;
  padding-bottom:2px;
  transition:color .2s ease, border-color .2s ease;
}
.contact-card a.c-link:hover{ color:var(--race-red); border-color:var(--race-red); }

.contact-form{
  margin-top:64px;
  max-width:680px;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-bottom:18px;
}
.form-group{ display:flex; flex-direction:column; gap:8px; }
.form-group.full{ grid-column:1/-1; }
label{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--steel-dim);
}
input, textarea{
  background:var(--carbon);
  border:1px solid var(--carbon-2);
  color:var(--white);
  padding:12px 14px;
  font-family:var(--font-body);
  font-size:0.95rem;
  transition:border-color .2s ease;
}
input:focus, textarea:focus{
  border-color:var(--race-red);
  outline:none;
}
textarea{ resize:vertical; min-height:120px; }

.form-status{
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:0.85rem;
  color:var(--steel);
}
.form-status.success{ color:#3DDC84; }

@media (max-width:760px){
  .contact-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
}