/* ==========================================================================
   ON VOUGA — contact.css
   ========================================================================== */

.contact-section{ padding: 76px 0; background: var(--white); }
.contact-grid{ display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: start; }

.contact-cards{ display: flex; flex-direction: column; gap: 16px; }
.contact-card{
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--grey-100); border-radius: var(--radius-md); padding: 20px;
  transition: transform .18s ease, box-shadow .18s ease;
}
a.contact-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-card); }
.contact-icon{
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--tint) 15%, white); color: var(--tint);
}
.contact-card h3{ font-size: 14.5px; margin-bottom: 3px; }
.contact-card p{ font-size: 13.5px; color: var(--ink-soft); }

.contact-form{
  background: var(--grey-100);
  border-radius: var(--radius-lg);
  padding: 36px;
}
.contact-form h2{ font-size: 21px; margin-bottom: 22px; }
.contact-form label{
  display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 16px;
}
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form input, .contact-form select, .contact-form textarea{
  width: 100%; margin-top: 8px;
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--grey-300);
  font-family: inherit; font-size: 14px; color: var(--ink); background: var(--white);
  font-weight: 400;
}
.contact-form textarea{ resize: vertical; min-height: 100px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
  outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(111,217,60,.18);
}
.contact-form input.is-invalid, .contact-form textarea.is-invalid{ border-color: var(--pink-500); }
.field-error{ display: block; color: var(--pink-500); font-size: 12px; font-weight: 500; margin-top: 5px; min-height: 15px; }
.form-success{ color: var(--green-600); font-size: 13.5px; font-weight: 600; margin-top: 12px; text-align: center; }
@media (max-width: 560px){ .form-row{ grid-template-columns: 1fr; } }
@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }

.map-band{ padding: 0 0 0; }
.map-placeholder{
  height: 260px;
  background:
    linear-gradient(120deg, rgba(111,217,60,.12), rgba(47,111,237,.12)),
    repeating-linear-gradient(45deg, var(--grey-200) 0 2px, transparent 2px 22px);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft); font-weight: 600; font-size: 15px;
}