/* ============================================================
   Contact - page-specific layout.
   Section-by-section translation of the approved Claude Design
   prototype (project/Contact.dc.html), reusing css/components.css
   (.tick-list, .field/.field__row/.field-reveal) and the shared shell
   rules in css/page.css / css/vault.css (.hero, .hero--sub, .section,
   .cta, .cta--tight) wherever the visual is identical to an existing
   page. Only what's new to this page lives here.

   The DC source exposes nextLayout ('Split with stats' | 'Timeline' |
   'Big number', defaults to 'Timeline') as a design-tool control.
   Implements that default as real markup - same approach as every
   other *Layout prop on this site (How It Works' stepsLayout, About's
   storyLayout/statsLayout). */

/* ---- Contact form section --------------------------------------- */
.contact-layout { width: 100%; max-width: var(--container-lg); display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-20); align-items: start; }
.contact-layout__intro { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.contact-layout__form {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 48px;
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  /* .navbar is position:sticky (page.css) at up to 84px tall unscrolled
     (68px once .is-scrolled). Without this, the scrollIntoView() call
     in main.js's contact-form success handler would land this card's
     top edge flush with the viewport top - directly under the sticky
     header, hiding "Thank you for your message." behind it. */
  scroll-margin-top: 100px;
}
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.form-actions { display: flex; flex-direction: column; gap: 16px; }
.form-actions p { margin: 0; font-family: var(--font-ui); font-size: 14px; line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }
.form-error { margin: 32px 0 0; padding: 12px 16px; border-radius: var(--radius-md); background: var(--status-danger-surface); color: var(--status-danger); font-family: var(--font-ui); font-size: 14px; line-height: 1.5; }
.form-error[hidden] { display: none; }

/* ---- What happens next: timeline ---------------------------------- */
.next-timeline { display: flex; gap: 32px; width: 100%; }
.next-timeline__step { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.next-timeline__row { display: flex; align-items: center; }
.next-timeline__dot { width: 12px; height: 12px; border-radius: 999px; flex-shrink: 0; background: var(--color-pickled-bluewood); }
.next-timeline__line { flex: 1; height: 1px; background: rgba(12, 8, 1, 0.18); }
.next-timeline__line--none { background: transparent; }
.next-timeline__body { display: flex; flex-direction: column; gap: 6px; padding-right: 24px; }
.next-timeline__when { font-family: var(--font-ui); font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--color-pickled-bluewood); }
.next-timeline__body h3 { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; color: var(--text-primary); }
.next-timeline__body p { margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }

/* ---- Contact details grid ------------------------------------------ */
.contact-detail-grid { width: 100%; max-width: var(--container-lg); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
/* Header-to-content spacing convention (see page.css) - .section's own
   gap (80px) is too much between the intro text and the first card, same
   32px target as everywhere else on the site. -48px here since the base
   being pulled from is 80px (the ≤960px override below uses -32px
   against that tier's smaller 64px base - same 32px result either way). */
.contact-detail-grid { margin-top: -48px; }
.contact-detail { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: var(--border-width) solid var(--border-default); }
.contact-detail__label {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-pickled-bluewood);
}
.contact-detail__value {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-decoration: none;
}
.contact-detail__desc { margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 960px) {
  /* Stacked single column: .contact-layout's gap becomes the space
     between the intro text/tick-list and the form card, not just
     between grid tracks. var(--space-16) (64px) read as a large gap
     above the form - same 32px header-to-content target used
     throughout the site (see page.css). */
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
  .next-timeline { flex-direction: column; gap: 24px; }
  .contact-detail-grid { grid-template-columns: 1fr; }
  /* Tablet+mobile spacing convention (see page.css's own ≤960px block):
     .section's gap is 64px here (no inline override on this section),
     too much between the intro text and the first card, same as Home's
     card-grid sections. */
  .contact-detail-grid { margin-top: -32px; }
}
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .contact-layout__form { padding: 32px 24px; }
}