/* ==========================================================================
   Meta Church VR: contact.html only. Loaded AFTER styles.css.
   Tokens only: no raw colours, no new font sizes.
   ========================================================================== */

/* ---------- Layout: "reach us" column + form ----------
   DOM order is lead, form, side. Phones read it top to bottom (the form sits right under the intro);
   from 62em the lead and the social list stack on the left and the form fills the right column. */
.contact-grid { display: grid; gap: var(--sp-7) var(--gap-grid); }
.contact-grid > * { min-width: 0; }
@media (min-width: 62em) {
  .contact-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "lead form" "side form";
    align-items: start;
  }
  .contact-lead { grid-area: lead; }
  .contact-form { grid-area: form; }
  .contact-side { grid-area: side; }
}

/* small sans heading above each block in the left column (the light-surface twin of .connect__h) */
.contact-h {
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- Direct lines: icon + label + value rows ---------- */
.reach { margin: var(--sp-4) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.reach__item {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--rule);
}
.reach__icon {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--sand);
  color: var(--maple-deep);
}
.reach__icon .icon { width: 1.35rem; height: 1.35rem; }
.reach__label {
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.reach__value { font-weight: 700; line-height: 1.3; color: var(--fg); }
.reach__value a {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: var(--tap);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .25em;
  text-decoration-color: var(--link-line);
  overflow-wrap: anywhere;
  transition: color var(--dur-1), text-decoration-color var(--dur-1);
}
.reach__value a:hover { color: var(--link); text-decoration-color: var(--link-hover-line); }
.reach__value a .icon { width: 1em; height: 1em; color: var(--accent-2); }
.contact-lead .actions { margin-top: var(--sp-5); }

/* ---------- Form card extras ---------- */
.contact-form__title { font-size: var(--fs-700); line-height: 1.08; }
.contact-form__head { display: grid; gap: var(--sp-3); padding-bottom: var(--sp-2); }
.contact-form__head p { color: var(--ink-soft); max-width: 38em; }
.contact-form__privacy { flex: 1 1 16rem; max-width: 34em; color: var(--ink-soft); }
.contact-form__privacy a { color: var(--link); font-weight: 600; text-underline-offset: .22em; }
.form .btn[disabled] { opacity: .6; cursor: progress; transform: none; }

/* ---------- "Your email app should have opened" panel (same card skin as .form) ---------- */
.sent {
  display: grid;
  gap: var(--sp-5);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
}
.sent__head { display: grid; gap: var(--sp-4); }
.sent__icon {
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: var(--evergreen);
  color: var(--gold-soft);
}
.sent__icon .icon { width: 1.6rem; height: 1.6rem; }
.sent__title { font-size: var(--fs-700); line-height: 1.08; }
.sent__title em { font-style: italic; font-weight: 300; }
.sent__title:focus { outline: none; }
.sent__title:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: var(--r-sm); }
.sent__text { color: var(--ink-soft); max-width: 38em; }
.sent__text strong { color: var(--ink); }
.sent .notice a { color: var(--link); font-weight: 600; text-underline-offset: .22em; overflow-wrap: anywhere; }
.sent .field textarea { min-height: 12rem; font-size: var(--fs-300); line-height: 1.55; background: var(--cream); }
.sent__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- Team band (evergreen): keep the wave and the thumbs-up in the crop ---------- */
.contact-team .split__media img { aspect-ratio: 3 / 2; }
.contact-team h2 em { color: var(--gold-soft); }