/* ==========================================================================
   contact-page.css — contact form (left) + ways-to-reach-us aside (right)
   Reuses form-field.css for every control. Submit swaps the form for an
   inline success panel (no modal). Markup:
     <div class="container contact">
       <form class="contact__form">… .field-row … .form-actions …</form>
       <div class="contact__success" hidden>…</div>
       <aside class="contact__aside">…</aside>
     </div>
   ========================================================================== */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: var(--space-56);
  align-items: start;
}

/* ── Form ─────────────────────────────────────────────────────────────── */
.contact__form { min-width: 0; }
/* Inline "(optional)" / "(City / State)" hint inside a field label —
   lighter than the label, renders inline (unlike the block .field-help). */
.field-hint { font-weight: var(--fw-regular); color: var(--muted); }
.contact__consent {
  margin: var(--space-20) 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: var(--lh-body);
}
.contact__consent a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; }
.contact__form .form-actions { margin-top: var(--space-24); }

/* ── Inline success state ─────────────────────────────────────────────── */
.contact__success {
  min-width: 0;
  padding: var(--space-40) var(--space-32);
  background: var(--success-soft);
  border: 1px solid rgba(var(--success-rgb), .35);
  border-radius: var(--radius-lg);
  text-align: center;
}
.contact__success-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-18);
  border-radius: var(--pill);
  background: var(--success);
  color: white;
}
.contact__success-icon svg.lucide,
.contact__success-icon [data-lucide] { width: 28px; height: 28px; }
.contact__success h2 {
  margin: 0 0 var(--space-8);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--ink);
}
.contact__success p {
  margin: 0 auto var(--space-24);
  max-width: 46ch;
  color: var(--ink-3);
  line-height: var(--lh-body);
}
.contact__success p strong { color: var(--ink-2); font-weight: var(--fw-semibold); }

/* ── Aside: ways to reach us ──────────────────────────────────────────── */
.contact__aside {
  position: sticky;
  top: var(--space-100);
  display: grid;
  gap: var(--space-16);
  padding: var(--space-28);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.contact__aside-title {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--muted);
}
.contact-method {
  display: flex;
  gap: var(--space-14);
  align-items: flex-start;
}
.contact-method__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--brand-ink);
}
.contact-method__icon svg.lucide,
.contact-method__icon [data-lucide] { width: 18px; height: 18px; }
.contact-method__label {
  display: block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--muted);
  margin-bottom: var(--space-2);
}
.contact-method__value {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  line-height: var(--lh-card);
}
.contact-method a.contact-method__value { color: var(--brand-ink); }
.contact-method a.contact-method__value:hover { color: var(--brand); }

.contact__socials {
  display: flex;
  gap: var(--space-10);
  padding-top: var(--space-4);
}
.contact__socials a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--pill);
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink-2);
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.contact__socials a:hover {
  color: var(--brand-ink);
  border-color: var(--brand);
  transform: translateY(-2px);
}
.contact__socials svg { width: 18px; height: 18px; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .contact { grid-template-columns: 1fr; gap: var(--space-32); }
  .contact__aside { position: static; }
}
@media (max-width: 720px) {
  /* The shared .form-actions row flips to column-reverse on mobile. Its base
     rule `.form-actions > .btn { flex: 1 1 0 }` is sized for a horizontal pair;
     in a column it collapses the button's height (flex-basis 0 + .btn's
     overflow:hidden zeroes the min-size). For this single full-width submit,
     reset the flex so the button keeps its 56px height. Width stays 100%. */
  .contact__form .form-actions > .btn { flex: 0 0 auto; }
}