/* Contact and enquiry page. Route: /contact/ — 网站规划.md §6.10. */

.contact-layout { display: grid; gap: 3rem; }

@media (min-width: 1000px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 4.5rem;
    align-items: start;
  }
}

.contact-form h2 { font-size: var(--fs-h3); }

.contact-form__form { margin-top: 2rem; }

.form-notice--context {
  border-color: var(--brass);
  color: var(--ink);
}

.contact-channels {
  padding: 2rem;
  border: 1px solid var(--stone);
  border-radius: var(--radius-sm);
  background: var(--white);
}

@media (min-width: 1000px) {
  .contact-channels { position: sticky; top: calc(var(--header-h) + 2rem); }
}

.contact-channels__title { font-size: var(--fs-h3); margin-bottom: 1.5rem; }

.contact-list { display: grid; gap: 1.5rem; }
.contact-list p { margin: 0; font-size: var(--fs-small); }
.contact-list .fact__label { margin-bottom: 0.3rem; }
.contact-list > li + li { padding-top: 1.5rem; border-top: 1px solid var(--stone); }

.contact-channels__response {
  margin: 2rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--stone);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 600;
}

.contact-channels .note { font-size: var(--fs-label); }

/*
 * Anti-robot check (Cloudflare Turnstile). The widget keeps its own size; the
 * block reserves that height so the submit button does not jump once the script
 * has run.
 */
.form-captcha {
  margin-top: 2rem;
  min-height: 65px;
}

.contact-tips { max-width: var(--read); columns: 1; }
.contact-next { margin-top: 2.5rem; justify-content: flex-start; }

@media (min-width: 700px) {
  .contact-tips { columns: 2; column-gap: 3rem; }
  .contact-tips > li { break-inside: avoid; }
}