/* ============================================================================
   leylive — contact page: the whole form fits one desktop window (Maxim 11-11:
   "het form moet in 1 window verzonden kunnen worden, niet scrollen").
   Loaded after main/home/pages.css; only overrides, scoped to the contact page.
   Desktop (>900px): compact title row that shares the form/side-card columns,
   a wider form in two field columns, the dark card beside it at equal height.
   Mobile keeps the single-column flow from pages.css.
   ========================================================================== */

@media (min-width: 901px) {
  body[data-page="contact"] {
    --c-cols: minmax(0, 1.75fr) minmax(300px, 1fr);
    --c-gap: var(--s7);
  }

  /* title row: label + h1 left, intro sentence right (lines up with the dark card) */
  body[data-page="contact"] .page-hero {
    display: grid; grid-template-columns: var(--c-cols); column-gap: var(--c-gap);
    align-items: end; max-width: 1480px;
    padding: var(--s9) 6vw var(--s5);
  }
  body[data-page="contact"] .page-hero .label { grid-column: 1 / -1; margin-bottom: var(--s2); }
  body[data-page="contact"] .page-title { font-size: clamp(40px, 6vh, 64px); line-height: 1.06; }
  body[data-page="contact"] .page-sub { margin-top: 0; max-width: 44ch; text-wrap: balance; }

  body[data-page="contact"] .contact-wrap {
    grid-template-columns: var(--c-cols); gap: var(--c-gap);
    max-width: 1480px; padding-top: 0;
  }

  /* form card: tighter rhythm, fields two by two */
  body[data-page="contact"] .cform {
    padding: var(--s5) var(--s6); row-gap: var(--s4); align-content: start;
  }
  body[data-page="contact"] .ctopic legend { margin-bottom: var(--s2); }
  body[data-page="contact"] .cfield { gap: 6px; }
  body[data-page="contact"] .cfield input { min-height: 48px; padding: 12px 16px; }
  body[data-page="contact"] .cfield textarea { height: 72px; min-height: 72px; padding: 12px 16px; }
  body[data-page="contact"] .cform-actions { margin-top: 0; }
  body[data-page="contact"] .cform .cform-send { padding: 16px 28px; }

  /* dark card: ends at its own height, so the floating chat button (bottom right)
     sits over the page instead of covering the privacy note */
  body[data-page="contact"] .contact-side.dark-card { align-self: start; padding: var(--s6); }
  body[data-page="contact"] .contact-side .direct {
    flex-direction: row; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s6);
  }
}

/* taller desktop windows (1440×900 and up): a little more air, still one window */
@media (min-width: 901px) and (min-height: 860px) {
  body[data-page="contact"] .page-hero { padding-top: 112px; padding-bottom: var(--s6); }
  body[data-page="contact"] .page-hero .label { margin-bottom: var(--s3); }
  body[data-page="contact"] .cform { padding: var(--s6) var(--s7); row-gap: var(--s5); }
  body[data-page="contact"] .cfield { gap: 8px; }
  body[data-page="contact"] .cfield input { min-height: 52px; padding: 14px 16px; }
  body[data-page="contact"] .cfield textarea { height: 88px; min-height: 88px; padding: 14px 16px; }
  body[data-page="contact"] .contact-side.dark-card { padding: var(--s6) var(--s7); }
}

/* ----------------------------------------------------------------------------
   11-11 (site-wij-brief step 4): the contact page is the one personal place.
   The dark card is the person: a photo slot that looks finished without a photo
   (yellow tile, greeting, two chips), the name, one sentence in his own voice,
   then the direct ways to reach him. The three steps moved under the columns.
   11-12 (Maxim): the third chip "Beantwoordt zelf uw oproep" is gone.
   -------------------------------------------------------------------------- */
.c-person { display: flex; flex-direction: column; }
.c-photo {
  position: relative; overflow: hidden; margin: 0 0 var(--s5);
  aspect-ratio: 16 / 9; border-radius: var(--radius-card);
  background: #FFD91B; color: #101010;
}
.c-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-hello {
  position: absolute; left: var(--s4); bottom: var(--s3);
  font-size: clamp(48px, 5vw, 72px); font-weight: 300; line-height: 1; letter-spacing: -.03em;
}
.c-photo img ~ .c-hello { color: #F6F5F1; text-shadow: 0 1px 24px rgba(0,0,0,.45); }
.c-chip {
  position: absolute; padding: 6px 10px; border-radius: var(--radius-tag);
  font-size: 12px; font-weight: 400; line-height: 1.2; white-space: nowrap;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.c-chip--a { top: var(--s4); right: var(--s5); transform: rotate(-5deg); }
.c-chip--b { top: 44%; right: 34%; transform: rotate(4deg); }
.c-person:hover .c-chip--a { transform: rotate(3deg) translateY(-2px); }
.c-person:hover .c-chip--b { transform: rotate(-4deg) translateY(2px); }
.c-name { font-size: 22px; font-weight: 400; letter-spacing: -.01em; color: var(--dark-text); }
.c-role { font-size: 14px; font-weight: 300; color: var(--dark-muted); margin-top: var(--s1); }
/* 11-12 (Maxim): the quote under his name is gone; the buttons keep its old gap */
.c-person .direct { margin-top: var(--s5); margin-bottom: 0; }
.c-person .side-note { margin-top: var(--s5); }

.c-next { padding: 0 6vw var(--s9); max-width: 1480px; }
.c-next .label { display: block; margin-bottom: var(--s5); }
.c-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.c-steps li {
  display: grid; gap: var(--s4); align-content: start;
  padding: var(--s5); border: 1px solid var(--line); border-radius: var(--radius-card); background: #FDFCFA;
}
.c-n { justify-self: start; padding: 6px 10px; border-radius: var(--radius-tag); font-size: 12px; letter-spacing: 1px; line-height: 1.2; }
.c-steps p { font-size: 17px; font-weight: 300; line-height: 1.5; color: var(--ink); max-width: 30ch; }

@media (min-width: 901px) {
  body[data-page="contact"] .contact-wrap { padding-bottom: var(--s7); }
  body[data-page="contact"] .contact-side.c-person { align-self: stretch; padding: var(--s5); }
  body[data-page="contact"] .c-person .side-note { margin-top: auto; }
  /* the tile takes the height the form leaves, so both cards end on one line */
  body[data-page="contact"] .c-photo { aspect-ratio: auto; flex: 1 1 128px; min-height: 128px; }
}
@media (max-width: 900px) {
  .c-next { padding: 0 20px var(--s8); }
  .c-steps { grid-template-columns: 1fr; gap: var(--s3); }
  .c-steps li { grid-template-columns: auto 1fr; align-items: start; padding: var(--s4); }
  .contact-wrap { padding-bottom: var(--s7); }
}
@media (prefers-reduced-motion: reduce) { .c-chip { transition: none; } }

/* chat bubbles: wrapped by the browser, not by the typographer (see chat.js) */
.cmsg { text-wrap: pretty; }

/* small laptop windows (1280x720): the send button stays inside the window */
@media (min-width: 901px) and (max-height: 740px) {
  body[data-page="contact"] .page-hero { padding-top: 72px; }
}