/* ==========================================================================
   Hippe Zeeuw · laag 7 — informatiepagina's (contact + over ons)

   Alleen geladen op page-contact.php en page-over-ons.php (zie
   inc/hz-enqueue.php). Leunt op de tokens uit global.css en op .rte uit
   typography.css; hier staat uitsluitend de paginastructuur en het formulier.

   Net als legal.css: alles wat BINNEN de tekstkolom valt wordt met .rte
   ervoor geschreven, anders wint typography.css op specificiteit.
   ========================================================================== */

.hz-info{ padding-block:clamp(48px,6vw,88px) clamp(72px,9vw,120px); }

/* ------------------------------------------------------------------ kop */
.hz-info__head{
  max-width:60ch;
  margin-bottom:clamp(34px,4.4vw,62px);
}
.hz-info__head h1{
  font-size:clamp(2.4rem,5vw,4.2rem);
  margin:14px 0 0;
}
.hz-info__head .lead{ margin-top:18px; }

/* ==========================================================================
   Contact
   ========================================================================== */

.hz-contact__grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(30px,4.4vw,72px);
  align-items:start;
}

/* --------------------------------------------------------------- meldingen */
.hz-note{
  border:1px solid var(--line);
  background:var(--paper-2);
  padding:16px 18px;
  margin:0 0 26px;
  font-size:.9375rem;
  line-height:1.6;
}
.hz-note strong{ display:block; margin-bottom:3px; color:var(--ink); }
.hz-note--ok{
  background:var(--stone-lt);
  border-color:var(--stone);
}
.hz-note--err{
  background:rgba(158,59,42,.06);
  border-color:rgba(158,59,42,.34);
  color:var(--brick);
}

/* --------------------------------------------------------------- formulier */
.hz-form__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 18px;
}

.hz-field{ display:block; margin-bottom:20px; }
.hz-field > span{
  display:block;
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:9px;
}
.hz-field > span em{
  font-style:normal;
  color:var(--ink-3);
  font-weight:400;
  letter-spacing:.08em;
  text-transform:none;
}

.hz-field input,
.hz-field select,
.hz-field textarea{
  width:100%;
  font:inherit;
  font-size:.9375rem;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:0;
  padding:13px 15px;
  transition:border-color .22s var(--ease), background-color .22s var(--ease);
  -webkit-appearance:none;
  appearance:none;
}
.hz-field textarea{ resize:vertical; min-height:168px; }

/* eigen pijl op de <select>, want appearance:none haalt de systeempijl weg */
.hz-field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:42px;
  cursor:pointer;
}

.hz-field input:hover,
.hz-field select:hover,
.hz-field textarea:hover{ border-color:var(--stone); }

.hz-field input:focus,
.hz-field select:focus,
.hz-field textarea:focus{
  outline:none;
  border-color:var(--stone-dk);
  background:#fff;
}

.hz-field input::placeholder,
.hz-field textarea::placeholder{ color:var(--ink-3); }

/* veld dat de server heeft afgekeurd */
.hz-field--err input,
.hz-field--err textarea{ border-color:rgba(158,59,42,.5); }

/* honeypot — onzichtbaar voor mensen, zichtbaar voor bots */
.hz-hp{
  position:absolute !important;
  left:-9999px;
  top:auto;
  width:1px; height:1px;
  overflow:hidden;
}

.hz-form__foot{
  display:flex;
  align-items:center;
  gap:20px 24px;
  flex-wrap:wrap;
  margin-top:8px;
}
.hz-form__foot .btn{ flex:none; }
.hz-form__foot .btn[disabled]{ opacity:.55; cursor:progress; }

.hz-form__note{
  margin:0;
  font-size:.75rem;
  line-height:1.65;
  color:var(--ink-3);
  max-width:46ch;
}
.hz-form__note a{ text-decoration:underline; text-underline-offset:2px; }
.hz-form__note a:hover{ color:var(--stone-dk); }

/*
 * De reCAPTCHA-badge rechtsonder botst met de WhatsApp-knop. Verbergen mag
 * van Google zolang de verplichte vermelding zichtbaar blijft — die staat in
 * .hz-form__note onder het formulier. Niet weghalen zonder de badge terug te
 * zetten (voorwaarde van Google).
 */
.grecaptcha-badge{ visibility:hidden; }

/* -------------------------------------------------------------- gegevens */
.hz-contact__info{
  background:var(--paper-2);
  border:1px solid var(--line-2);
  padding:clamp(22px,2.6vw,32px);
  position:sticky;
  top:calc(var(--hdr-h) + 24px);
}
.hz-contact__info h2{
  font-family:var(--ff-sans);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin:0 0 4px;
  line-height:1.4;
}

.hz-info__item{
  padding-block:16px;
  border-top:1px solid var(--line);
}
.hz-info__item:first-of-type{ border-top:0; padding-top:10px; }

.hz-info__label{
  display:block;
  font-size:.6875rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:7px;
}
.hz-info__value{
  display:block;
  font-size:1rem;
  line-height:1.6;
  color:var(--ink);
}
a.hz-info__value{ transition:color .22s var(--ease); }
a.hz-info__value:hover{ color:var(--stone-dk); }

.hz-hours{ display:grid; gap:7px; margin-top:2px; }
.hz-hours div{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  font-size:.9375rem;
}
.hz-hours span:first-child{ color:var(--ink); }
.hz-hours span:last-child{ color:var(--ink-2); }

/* ==========================================================================
   Over ons
   ========================================================================== */

.hz-over__grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(30px,5vw,80px);
  align-items:start;
}

.hz-over__media{ position:sticky; top:calc(var(--hdr-h) + 24px); }
.hz-over__media img{
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  /* portretfoto (1564x2560): hoger uitsnijden, anders valt het hoofd weg */
  object-position:center 25%;
}

.hz-over__quote{
  font-family:var(--ff-display);
  font-size:clamp(1.35rem,2.4vw,1.9rem);
  line-height:1.4;
  color:var(--ink);
  margin:0 0 26px;
  max-width:34ch;
}

.hz-over__sign{
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
}
.hz-over__sign b{ font-size:1rem; }
.hz-over__sign span{
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
}

.hz-over__facts{
  display:grid;
  grid-template-columns:repeat(var(--facts-cols,3),minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border-block:1px solid var(--line);
  margin-top:30px;
}
.hz-over__facts > div{
  background:var(--paper);
  padding:18px 4px 18px 0;
}
.hz-over__facts b{
  display:block;
  font-family:var(--ff-display);
  font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1;
  margin-bottom:6px;
}
.hz-over__facts span{
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* -------------------------------------------------------------- galerij */
.hz-over__gallery{
  display:grid;
  grid-template-columns:repeat(var(--gal-cols,3),minmax(0,1fr));
  gap:clamp(10px,1.4vw,18px);
  margin-top:clamp(44px,5.4vw,80px);
}
.hz-over__gallery img{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
}

/* -------------------------------------------------------------- slotblok */
.hz-info__cta{
  margin-top:clamp(50px,6vw,88px);
  padding-top:clamp(30px,3.6vw,46px);
  border-top:1px solid var(--line);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
}
.hz-info__cta h2{
  font-family:var(--ff-display);
  font-size:clamp(1.5rem,2.8vw,2.1rem);
  margin:0;
  line-height:1.2;
}
.hz-info__cta p{
  max-width:46ch;
  font-size:.9375rem;
  color:var(--ink-2);
  margin:10px 0 0;
}
.hz-info__cta .btn{ flex:none; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:900px){
  .hz-contact__grid,
  .hz-over__grid{ grid-template-columns:minmax(0,1fr); }

  /* het gegevensblok hoort onder het formulier, niet ernaast vastgeplakt */
  .hz-contact__info,
  .hz-over__media{ position:static; }

  /* op mobiel geen liggende uitsnede van een staande foto — hoofd viel eruit */
  .hz-over__media img{ aspect-ratio:4/5; }

  .hz-over__gallery{ grid-template-columns:repeat(var(--gal-cols-mob,2),minmax(0,1fr)); }
}

@media (max-width:560px){
  .hz-form__row{ grid-template-columns:minmax(0,1fr); }
  .hz-form__foot .btn{ width:100%; }
  .hz-form__note{ max-width:none; }
  .hz-info__cta .btn{ width:100%; }
  .hz-over__facts{ grid-template-columns:repeat(var(--facts-cols-mob,2),minmax(0,1fr)); }
}