/* ──────────────────────────────────────────────────────────────
   Contact + Work with us — Haus Vajbz. One sheet for
   templates/documentation/contact.html (dc-) and work_with_us.html (dw-).
   Loaded after hv/docs.css, which owns the hero, .doc-form/.doc-form__row,
   .doc-icon and .doc-msg; this sheet only lays the two pages out.
   Mobile first; ≥768 and ≥1100 add columns. Tokens only (tokens.css +
   hv/theme.css): radius 0, no shadows, no gradients, rules instead of
   boxes, → as the ornament. The old dot grid and amber orbs are gone — the
   red hero band and the ink panel carry the page instead. Band surfaces
   come from data-surface="red|ink" on the element.
   ────────────────────────────────────────────────────────────── */

/* ── Hero kicker: the FontAwesome glyph before the mono label ─── */
.dc-hero__kicker i, .dw-hero__kicker i { font-size: 0.9em; margin-right: 0.45em; }

/* ── Body: one column on phones ──────────────────────────────── */
.dc-body, .dw-body { padding-block: 1.6rem 3rem; display: grid; gap: 1.6rem; }

/* ── Success: ink block replaces the form (server-rendered or after AJAX) ── */
.dc-success, .dw-success {
  background: var(--bg); color: var(--text);
  padding: 1.6rem var(--gutter) 1.8rem;
  display: grid; gap: 0.9rem; justify-items: start;
}
.dc-success__title, .dw-success__title { font-size: clamp(1.9rem, 8vw, 3rem); margin-top: 0.3rem; }
.dc-success__lead, .dw-success__lead { margin: 0; max-width: 44ch; color: var(--text-dim); font-size: 0.97rem; line-height: 1.55; }
.dc-success__actions, .dw-success__actions { display: grid; gap: 0.6rem; width: 100%; margin-top: 0.4rem; }
.dc-success__actions .hv-btn i, .dw-success__actions .hv-btn i { font-size: 0.9em; }

/* ── Error: the red hv-form__msg block, icon | text ──────────── */
.dc-alert, .dw-alert { align-items: flex-start; gap: 0.7rem; }
.dc-alert.is-visible, .dw-alert.is-visible { display: flex; }
.dc-alert i, .dw-alert i { flex: none; margin-top: 0.15rem; }
.dc-alert p, .dw-alert p { margin: 0; }
.dc-alert strong, .dw-alert strong { color: inherit; overflow-wrap: anywhere; }

/* ── Form: 4px red top rule, labelled fields (primitives in theme.css) ── */
.dc-block, .dw-block { display: grid; gap: 1.6rem; align-items: start; }
.dc-form, .dw-form { border-top: 4px solid var(--red); padding-top: 1.2rem; }
.dw-form { gap: 1.6rem; }
.dc-req, .dw-req { color: var(--red); }

/* work-with-us: each group of fields under a red mono label on a strong rule */
.dw-section { display: grid; gap: 1rem; }
.dw-section__label { margin: 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--text); color: var(--red); }

/* submit: full width on phones, a right-aligned block from tablet */
.dc-submit, .dw-submit { display: flex; justify-content: flex-end; padding-top: 0.2rem; }
.dc-submit .hv-btn, .dw-submit .hv-btn { width: 100%; }

/* ── Contact panel: ink, icon | label / value (the about page's .ab-panel) ── */
.dc-panel { background: var(--bg); color: var(--text); padding: 0.4rem var(--gutter) 0.6rem; align-self: start; }
.dc-contact > li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 0.9rem; row-gap: 0.15rem; align-items: center;
  padding: 0.9rem 0; border-bottom: 1px solid var(--line);
}
.dc-contact > li:first-child { border-top: 0; }
.dc-contact > li:last-child { border-bottom: 0; }
.dc-contact .doc-icon { grid-row: 1 / span 2; }
.dc-contact__label { margin: 0; }
.dc-contact a {
  color: var(--text); text-decoration: none;
  font-family: var(--font-sub); font-weight: 600; font-size: 0.95rem; line-height: 1.3;
  overflow-wrap: anywhere;
  transition: color var(--dur) var(--ease);
}
.dc-contact a:hover, .dc-contact a:focus-visible { color: var(--red); outline: none; }

/* ── Tablet ──────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .dc-body, .dw-body { padding-block: 2.4rem 4rem; gap: 2rem; }
  .dc-block, .dw-block { gap: 2rem; }
  .dw-form { max-width: 72ch; }
  .dc-success, .dw-success { padding: 2rem 2.2rem 2.2rem; }
  .dc-success__actions, .dw-success__actions { display: flex; flex-wrap: wrap; }
  .dc-success__actions .hv-btn, .dw-success__actions .hv-btn { width: auto; }
  .dc-submit .hv-btn, .dw-submit .hv-btn { width: auto; min-width: 200px; }
  .dc-panel { padding: 0.5rem 1.5rem 0.7rem; }
}

/* ── Desktop: contact form | ink panel ───────────────────────── */
@media (min-width: 1100px) {
  .dc-block { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: calc(var(--gutter) * 1.5); }
  .dc-block > .dc-alert { grid-column: 1 / -1; }
  .dc-panel { position: sticky; top: 1rem; }
  .dc-success, .dw-success { max-width: 72ch; }
}