/* ============================================================================
   MrMurse - Contact page styles
   Page-specific layout only; all values reference Phase 0 tokens. Composes the
   card, icon-chip, form controls, faq, and cta-block components.

   DEVELOPER NOTE: the message form is front-end only. Form connection will be
   added before launch. No backend is wired yet.
   ========================================================================== */

/* ---------------------------------------------------------------- HERO ----- */
.ct-hero {
  background:
    radial-gradient(1000px 460px at 82% -10%, var(--c-teal-tint-10), transparent 60%),
    var(--bg-page);
  padding-top: var(--space-9);
}
.ct-hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: var(--space-8); align-items: center;
}
.ct-hero__title { font-size: var(--fs-h1); font-weight: var(--fw-extra); margin-top: var(--space-5); }
.ct-hero__sub { font-size: var(--fs-body-lg); color: var(--text-body); margin-top: var(--space-5); max-width: 520px; }
.ct-hero__cta { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }

/* Contact card */
.ct-card {
  background: var(--surface); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--space-6); max-width: 420px; margin-inline: auto;
}
.ct-card .icon-chip { margin-bottom: var(--space-4); }
.ct-card__label {
  font-size: var(--fs-caption); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted);
}
.ct-card__email {
  display: inline-block; font-size: var(--fs-body-lg); font-weight: var(--fw-bold);
  color: var(--accent-strong); margin-top: var(--space-2); word-break: break-word;
}
.ct-card__email:hover { text-decoration: underline; }
.ct-card__note { font-size: var(--fs-body-sm); color: var(--text-muted); margin-top: var(--space-3); }
.ct-card__best {
  margin-top: var(--space-5); padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border);
}
.ct-card__best-label {
  font-size: var(--fs-caption); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted);
}
.ct-card__best ul { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.ct-card__best li {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-body-sm); color: var(--text-body);
}
.ct-card__best .icon { color: var(--accent); flex-shrink: 0; }

@media (max-width: 920px) {
  .ct-hero__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .ct-hero__sub { max-width: none; }
  .ct-card { margin-inline: 0; }
}

/* ------------------------------------------------------- CONTACT OPTIONS --- */
.ct-option { display: flex; flex-direction: column; }
.ct-option .icon-chip { margin-bottom: var(--space-4); }
.ct-option__title { font-size: var(--fs-h4); margin-bottom: var(--space-2); }
.ct-option__link {
  display: inline-block; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold);
  color: var(--accent-strong); word-break: break-word;
}
.ct-option__link:hover { text-decoration: underline; }
.ct-option__text { font-size: var(--fs-body-sm); color: var(--text-body); margin-top: var(--space-2); }
.ct-option__socials { display: flex; gap: var(--space-2); margin-bottom: var(--space-1); }
.ct-option__socials a {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-strong); transition: background var(--dur-base), border-color var(--dur-base);
}
.ct-option__socials a:hover { background: var(--c-teal-tint-08); border-color: var(--c-teal-tint-18); }

/* ---------------------------------------------------------------- FORM ----- */
.ct-form { padding: var(--space-7) var(--space-6); margin-top: var(--space-6); }
.ct-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.ct-form__row .field { margin-bottom: var(--space-5); }
.ct-form__note { margin-top: var(--space-4); text-align: center; }
.ct-form__note a { color: var(--accent-strong); font-weight: var(--fw-semibold); }
.ct-form__note a:hover { text-decoration: underline; }
@media (max-width: 560px) { .ct-form__row { grid-template-columns: 1fr; gap: 0; } }

/* ---------------------------------------------------------------- FAQ ------ */
.ct-faq { max-width: 820px; }