/* MORRB — contact page
 *
 * Loaded after site.css and additive to it. The demo form normally lives in the
 * modal; this page is the same form as a page, for anyone without JavaScript
 * (or arriving by direct link). Values are the modal's own, reused rather than
 * re-picked:
 *
 *   form gap        1rem   (.modal_form)
 *   name row        1fr 1fr, 1rem gap (.modal_form_row)
 *   card padding    2.5rem (.bento_card_content-wrapper)
 *   layout gap      2.5rem (.bento_component / .bento_grid)
 *
 * The modal's classes are not reused directly: they are named for the dialog,
 * and this form is not in one.
 */

.contact_layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.contact_form { display: grid; gap: 1rem; }
.contact_form_row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* honeypot: off-screen for people, in the DOM for bots (same as .modal_hp) */
.contact_hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.contact_status { font-size: .875rem; line-height: 1.4; opacity: .70; /* morrb-a11y */ min-height: 1.2rem; }
.contact_status[data-state="success"],
.contact_status[data-state="error"] { opacity: 1; font-weight: 500; }

.contact_details { display: flex; flex-flow: column; gap: 1.5rem; }
.contact_details a { color: var(--morrb--teal); text-decoration: none; }
.contact_details a:hover { text-decoration: underline; }

.contact_detail_label { opacity: .70; } /* morrb-a11y */

@media screen and (max-width: 991px) {
  .contact_layout { grid-template-columns: 1fr; }
}

@media screen and (max-width: 767px) {
  .contact_form_row { grid-template-columns: 1fr; }
  /* site.css floors every stacked .bento_card at 25rem for the marketing
     cards; the contact cards are sized by their content. */
  .contact_layout .bento_card { min-height: 0; }
}