/* ==========================================================================
   MIND OVER MUSCLE: Contact page (v2)
   Page-specific components: contact-card list, "what happens next" card,
   two-column contact grid, form field-row. Reuses styles.css.
   ========================================================================== */

/* ---------- two-column layout: cards / form ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: start;
  gap: clamp(28px, 4vw, 48px);
}
.contact-info { display: grid; gap: clamp(20px, 2.4vw, 28px); min-width: 0; }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ---------- contact cards ---------- */
.contact-cards { display: grid; gap: 10px; }
.contact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
a.contact-card:hover { border-color: var(--line-strong); background: var(--surface-2); }
a.contact-card:hover .icon-tile { background: var(--accent); color: var(--on-accent); }
a.contact-card:hover .contact-card__arrow { color: var(--text); transform: translateX(2px); }
.contact-card .icon-tile { flex: none; width: 46px; height: 46px; transition: background-color var(--t) var(--ease), color var(--t) var(--ease); }
.contact-card .icon-tile .i { width: 20px; height: 20px; }
.contact-card__body { display: grid; gap: 3px; min-width: 0; flex: 1; }
.contact-card__body .label { color: var(--faint); }
.contact-card__value { font-family: var(--f-head); font-weight: 700; font-size: 15.3px; line-height: 1.4; color: var(--text); overflow-wrap: break-word; }
.contact-card--static { cursor: default; }
.contact-card__arrow { flex: none; width: 18px; height: 18px; color: var(--faint); transition: color var(--t) var(--ease), transform var(--t) var(--ease); }

/* ---------- "what happens next" card ---------- */
.next-card {
  padding: clamp(20px, 2.4vw, 26px);
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid;
  gap: 16px;
}
.next-steps { display: grid; gap: 13px; }
.next-steps li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.7px; line-height: 1.55; color: var(--text-2); }
.next-steps__n {
  display: grid;
  place-items: center;
  flex: none;
  width: 25px;
  height: 25px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  color: var(--text);
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 12px;
}

/* ---------- form panel ---------- */
.contact-panel {
  padding: clamp(28px, 3.4vw, 44px);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  min-width: 0;
}
.contact-panel form { display: grid; gap: 22px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
}
.form-ok {
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}