/* CONTACT PAGE (separate file: only /contact loads it).
   The map under this page is the common "Find Us" section from the layout. Field basics (.field, .hp, .form-success) are in site.css. */

.contact { display: grid; background: #fff; }

/* ---------- Left: details ---------- */
.contact-info { padding: 1.75rem 1.25rem; }
.contact-info-inner { max-width: 560px; }
.contact h2 { margin: 0 0 .75rem; font: 400 clamp(1.75rem, 6vw, 3rem)/1.15 var(--font-head); }
.contact-list { display: grid; gap: .9rem; margin: 0 0 1.25rem; }
.contact-list li { display: flex; align-items: flex-start; gap: .85rem; line-height: 1.5; }
.contact-list svg { flex: none; margin-top: 1px; fill: none; stroke: var(--gold-dark); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.contact-list address { font-style: normal; }
.contact-list a { color: var(--ink); font-weight: 500; text-decoration: none; }
.contact-list a:hover { color: var(--green); text-decoration: underline; }
.contact-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
.contact-faq { margin: 0; color: var(--muted); }
.contact-faq a { color: var(--green); font-weight: 500; }

/* ---------- Right: form ---------- */
.contact-form-wrap { position: relative; padding: 1.5rem 1rem 2rem; background: var(--cream); }
.contact-bg { display: none; }
.contact-card { position: relative; z-index: 2; max-width: 560px; margin: 0 auto; padding: 1.25rem; background: #fff; box-shadow: 0 10px 28px rgba(29, 33, 28, .12); }
.contact-card h2 { margin-bottom: 1rem; }

.contact-form { display: grid; gap: .75rem; }
.contact-form .field input, .contact-form .field select, .contact-form .field textarea {
  width: 100%; padding: 0 .75rem; font: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid #d9d2c3; border-radius: 0;
}
.contact-form .field input, .contact-form .field select { height: 46px; }
.contact-form .field textarea { display: block; min-height: 120px; padding: .6rem .75rem; resize: vertical; }
.contact-form .field select:focus, .contact-form .field textarea:focus { border-color: var(--green); outline: 0; box-shadow: 0 0 0 2px rgba(77, 94, 71, .25); }
.contact-submit { width: 100%; margin-top: .25rem; }

.form-error { margin: 0 0 .75rem; padding: .5rem .75rem; background: #fbeceb; color: var(--error); border-left: 3px solid var(--error); font-size: .9375rem; }
.form-error a { color: inherit; font-weight: 500; }

@media (min-width: 560px) {
  .contact-form { grid-template-columns: 1fr 1fr; }
  .contact-form .field-wide, .contact-submit { grid-column: 1 / -1; }
}

/* ---------- Desktop: details left, form card on a photo right ---------- */
@media (min-width: 992px) {
  .contact { grid-template-columns: 1fr 1fr; }
  .contact-info { align-self: center; padding: 3rem 2.5rem 3rem max(2rem, calc((100vw - 1320px) / 2 + 2rem)); }
  .contact-form-wrap { display: grid; align-items: center; padding: 3rem 2rem; background: var(--green-night); }
  .contact-bg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .contact-form-wrap::after { content: ""; position: absolute; inset: 0; background: rgba(14, 20, 14, .35); }
  .contact-card { padding: 2rem; }
}