/*
 * page-contact.css: styling voor patterns/page-contact.php
 * Sessie 26 (2026-05-27). HERSTEL: bij de contact-refactor naar pure pattern
 * (sessie 25) werd _preview/preview-contact.html verwijderd, maar de inline
 * .cnt*-CSS die daarin zat is nooit naar een enqueued CSS-file verhuisd,
 * waardoor /contact/ + /en/contact/ ongestyled rendeerden (form/grid/map).
 * Teruggehaald uit git (9a76946^:_preview/preview-contact.html) en hier vast-
 * gelegd. Hero/CTA/eyebrow/btn komen uit preview-shared.css.
 *
 * Brandbook v3.3 Continuum. Tokens via assets/css/tokens.css.
 * Wordt alleen geladen op de contact-page (zie functions.php conditional enqueue).
 */

/* .page-hero--contact (schone foto-hero) is verplaatst naar preview-shared.css,
   zodat dezelfde hero-opmaak ook op de homepage (home-contact-cta) werkt. Die
   pagina laadt page-contact.css niet. */

.cnt { padding: var(--space-2xl) var(--space-2xl) var(--space-3xl); background: var(--color-bg-base); }
.cnt__inner {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: var(--space-4xl); row-gap: var(--space-lg); align-items: start;
}
.cnt__head { grid-column: 1 / -1; margin-bottom: 0; max-width: 720px; }
.cnt__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(34px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.02em; margin: var(--space-md) 0; }
.cnt__title em { font-style: italic; color: var(--color-accent); }
.cnt__form {
  display: grid; gap: var(--space-md);
  background: var(--color-bg-subtle);
  padding: var(--space-xl);
  border-top: 2px solid var(--color-accent);
}
.cnt__field { display: grid; gap: 6px; }
.cnt__field label { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); }
.cnt__field input,
.cnt__field textarea,
.cnt__field select {
  font-family: var(--font-body); font-size: var(--text-base);
  padding: 12px 14px;
  background: var(--color-bg-base);
  border: 1px solid var(--color-rule);
  color: var(--color-text-primary);
  border-radius: 0;
  transition: border-color var(--duration-base) var(--ease-standard);
}
.cnt__field input:focus,
.cnt__field textarea:focus,
.cnt__field select:focus {
  outline: 2px solid var(--color-accent); outline-offset: 0;
  border-color: var(--color-accent);
}
.cnt__field textarea { min-height: 140px; resize: vertical; }
.cnt__form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); }

/* De velden binnen het grijze vlak houden. Een gridkolom krimpt standaard niet onder de
   breedte van zijn inhoud, en het keuzeveld is van zichzelf zo breed als zijn langste
   optietekst. Daardoor werd het hele raster breder dan het formulier en staken de velden
   rechts buiten de achtergrond, het duidelijkst bij Organisatie en Telefoon. Zelfde
   oplossing als bij het sollicitatieformulier (page-vacatures.css, 13 september 2026). */
.cnt__form, .cnt__form-row, .cnt__field, .cnt__form-row > * { min-width: 0; }
.cnt__field input,
.cnt__field textarea,
.cnt__field select { width: 100%; max-width: 100%; box-sizing: border-box; }
.cnt__legal { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; }
.cnt__legal a { color: var(--color-accent); text-decoration: none; border-bottom: 1px solid currentColor; }

.cnt__side { display: grid; gap: var(--space-lg); }
.cnt-card {
  background: var(--color-bg-base);
  border: 1px solid var(--color-rule);
  padding: var(--space-lg);
}
.cnt-card h3 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-accent); margin: 0 0 var(--space-md); }
.cnt-card dl { margin: 0; display: grid; gap: var(--space-sm); }
.cnt-card dl > div { display: grid; grid-template-columns: 100px 1fr; gap: var(--space-sm); }
.cnt-card dt { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); }
.cnt-card dd { margin: 0; font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-primary); }
.cnt-card dd a { text-decoration: none; border-bottom: 1px solid var(--color-accent); padding-bottom: 1px; }

.cnt-map {
  aspect-ratio: 4 / 3;
  background: var(--color-petrol-900);
  position: relative; overflow: hidden;
  display: block;
  text-decoration: none;
  transition: transform var(--duration-base, 200ms) var(--ease-standard, ease-out);
}
.cnt-map:hover, .cnt-map:focus-visible {
  transform: scale(1.005);
  outline: none;
}
.cnt-map:focus-visible { box-shadow: 0 0 0 3px var(--color-accent); }
.cnt-map__embed {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
  filter: invert(0.92) hue-rotate(195deg) brightness(0.88) contrast(0.85) saturate(0.75);
  pointer-events: none;
}
.cnt-map__overlay {
  position: absolute; left: var(--space-lg); bottom: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: rgba(10, 32, 38, 0.88);
  backdrop-filter: blur(6px);
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-display);
  font-weight: var(--weight-bold); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: #fff;
  transition: background var(--duration-base, 200ms) var(--ease-standard, ease-out);
}
.cnt-map:hover .cnt-map__overlay { background: rgba(10, 32, 38, 0.96); }
.cnt-map__cta {
  display: block;
  margin-top: var(--space-sm);
  color: var(--color-accent);
  letter-spacing: 0.18em;
}

@media (max-width: 1024px) {
  .cnt__inner { grid-template-columns: 1fr; }
  .cnt__form-row { grid-template-columns: 1fr; }
}