/* ============================================
   CONTATTI — Responsive
   ============================================ */
.contact-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--space-4xl); }
.contact-info h2 { margin-bottom: var(--space-lg); }
.contact-info > p { margin-bottom: var(--space-2xl); }
.contact-details { display: flex; flex-direction: column; gap: var(--space-xl); margin-bottom: var(--space-2xl); }
.contact-detail { display: flex; align-items: flex-start; gap: var(--space-lg); }
.contact-detail__icon { flex-shrink: 0; width: 48px; height: 48px; background: var(--gold-muted); color: var(--gold); display: flex; align-items: center; justify-content: center; }
.contact-detail__icon svg { width: 20px; height: 20px; }
.contact-detail h4 { font-size: var(--fs-base); font-family: var(--font-body); font-weight: var(--fw-medium); margin-bottom: var(--space-xs); }
.contact-detail p, .contact-detail a { font-size: var(--fs-sm); color: var(--gray-500); font-weight: var(--fw-light); }
.contact-detail a:hover { color: var(--gold); }
.contact-social { display: flex; gap: 12px; }
.contact-social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--gray-200); color: var(--gray-500); transition: all var(--dur-fast); }
.contact-social a:hover { border-color: var(--gold); color: var(--gold); }
.contact-social a svg { width: 16px; height: 16px; }
.contact-form-card { background: var(--color-white); padding: var(--space-2xl); box-shadow: var(--shadow-lg); border: 1px solid var(--gray-200); }
.contact-form-card h3 { font-size: var(--fs-xl); margin-bottom: var(--space-xs); }
.contact-form-card > p { font-size: var(--fs-sm); color: var(--gray-500); margin-bottom: var(--space-xl); }
.contact-map { margin-top: var(--space-section); overflow: hidden; height: 400px; }
.contact-map iframe { width: 100%; height: 100%; border: 0; }

@media (max-width: 1024px) {
  .contact-layout { grid-template-columns: 1fr; gap: var(--space-2xl); }
}

@media (max-width: 768px) {
  .contact-form-card { padding: 20px; }
  .contact-detail__icon { width: 40px; height: 40px; }
  .contact-detail__icon svg { width: 18px; height: 18px; }
  .contact-map { height: 280px; margin-top: 40px; }
}

@media (max-width: 480px) {
  .contact-social a { width: 36px; height: 36px; }
}