/* =========================================================================
   Contact page — "Candy Row" — page-specific rules only.
   Shared vocabulary (bands, wrap, split, headings, cards, icon-circles,
   polaroids, pills, buttons) lives in /assets/css/styles.css. This file
   styles what's genuinely unique to /contact/.
   ========================================================================= */

/* ---------- Intro ---------- */

.contact-intro-col { max-width: 640px; }
.contact-h1 { margin: 16px 0 0; }
.contact-lede { margin: 18px 0 0; }

/* ---------- Two-column layout ---------- */

.contact-columns { margin-top: 44px; gap: 40px; align-items: start; }

/* ---------- Left: cards ---------- */

.contact-cards { display: flex; flex-direction: column; gap: 16px; }

.contact-card {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 26px 28px; text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
a.contact-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-row); }

.contact-card h2 { margin: 0 0 4px; }
.contact-card .body { margin: 0; }
.contact-card .hint { margin: 0; color: var(--body-muted); } /* --body-faint is 4.2:1 on the card */

.contact-card-loud .hint { color: var(--lilac-muted); }
/* .contact-card's color:inherit would otherwise undo .card-grape's cream. */
.contact-card-loud { color: var(--cream); }
.contact-card-email { margin: 0 0 6px; font-size: 17px; overflow-wrap: anywhere; }
.contact-card > div { min-width: 0; }

.contact-card-quick { align-items: center; }

.contact-ics-btn { margin-top: 12px; }

/* ---------- Right: map ---------- */

.contact-map-frame { height: 430px; }
.contact-map-frame .contact-map {
  flex: 1; min-height: 0; width: 100%; height: 100%;
  border-radius: 2px; overflow: hidden; display: block;
}
.contact-directions-btn { width: 100%; margin-top: 26px; }

/* ---------- Facebook band ---------- */

.contact-facebook-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.contact-facebook-inner .h-sub { margin: 0 0 4px; }
.contact-facebook-inner .body { margin: 0; color: var(--ink); } /* muted grey is 3:1 on pink */

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 900px) {
  .contact-map-frame { height: 340px; }
}

@media (max-width: 700px) {
  .contact-card { padding: 20px; }
  .contact-map-frame { height: 280px; }
  .contact-facebook-inner { align-items: flex-start; }
}