/* ==========================================================================
   CrysMed — Contact page
   Extends version2's tokens + main.css. Reuses .page-header / .page-searchzone
   / .info-cta / .support-band from main.css.
   ========================================================================== */

.page-searchzone--notrow .hero__trustrow { margin-bottom: 0; }

/* ---- Contact form + info sidebar ---- */
.contact-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--sp-6);
  align-items: start;
}

.contact-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.contact-form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); }
.contact-form .btn { align-self: flex-start; }

.contact-info-col { display: flex; flex-direction: column; gap: var(--sp-3); }
.info-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.info-card b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-900); margin-bottom: var(--sp-1); }
.info-card p { font-size: var(--fs-xs); color: var(--ink-700); line-height: var(--lh-relaxed); }
.info-card__phone { display: inline-block; margin-top: var(--sp-1); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--brand-700); }

@media (max-width: 980px) { .contact-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .contact-form__row { grid-template-columns: minmax(0, 1fr); } }

/* ---- "Advertise with CrysMed" wide info-cta (text + list + button) ---- */
.info-cta--wide { align-items: center; gap: var(--sp-6); }
.info-cta__list { flex: 1; min-width: 220px; }
.info-cta__list li {
  font-size: var(--fs-xs);
  color: var(--ink-700);
  padding-left: 1.1em;
  position: relative;
  margin-bottom: 4px;
}
.info-cta__list li::before { content: "·"; position: absolute; left: 0; color: var(--ink-300); font-weight: var(--fw-bold); }

@media (max-width: 900px) { .info-cta--wide { align-items: flex-start; } }