/* ==========================================================================
   Blok — Contact: introductie, persoonskaart, contactgegevens en formulier
   Vlakken per band: op wit een grijs-lichte formulierkaart; op grijs/roze
   een witte kaart met schaduw (en witte icooncirkels).
   ========================================================================== */
.b-contact-blok {
  --b-contact-kaart: var(--grijs-licht);
  --b-contact-kaart-schaduw: none;
  --b-contact-persoon: var(--wit);
  --b-contact-icoon-vlak: var(--grijs-licht);
}
.b-contact-blok.band--grijs,
.b-contact-blok.band--roze {
  --b-contact-kaart: var(--wit);
  --b-contact-kaart-schaduw: var(--shadow-card);
  --b-contact-icoon-vlak: var(--wit);
}

.b-contact-blok__grid {
  display: grid;
  gap: clamp(2.75rem, 2rem + 2.5vw, 3.75rem);
}
@media (min-width: 1024px) {
  .b-contact-blok__grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: var(--gap-lg);
    align-items: start;
  }
}

/* --- Introductie ------------------------------------------------------ */
.b-contact-blok__titel { max-width: 12em; }
.b-contact-blok__tekst { margin-top: 1.4rem; max-width: 44ch; }

/* --- Persoonskaart: portret + naam, belofte als voetregel ------------- */
.b-contact-blok__persoon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 clamp(1rem, .8rem + .8vw, 1.4rem);
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  padding: clamp(1.1rem, .9rem + .8vw, 1.5rem) clamp(1.1rem, .9rem + .8vw, 1.6rem) 0;
  border: 1px solid var(--lijn);
  border-radius: var(--r-lg);
  background: var(--b-contact-persoon);
}
.b-contact-blok__portret {
  width: clamp(88px, 80px + 1.5vw, 104px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--grijs);
}
.b-contact-blok__portret picture { display: block; width: 100%; height: 100%; }
.b-contact-blok__portret img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}

.b-contact-blok__wie { min-width: 0; line-height: 1.4; }
/* Teamlid zonder foto: naam over de volle breedte */
.b-contact-blok__wie:first-child { grid-column: 1 / -1; }
.b-contact-blok__naam { font-size: var(--fs-h4); font-weight: var(--fw-bold); }
.b-contact-blok__functie { margin-top: .15rem; font-size: var(--fs-small); color: var(--tekst-zacht); }

.b-contact-blok__belofte {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: .65rem;
  margin-top: clamp(1rem, .85rem + .5vw, 1.25rem);
  padding-block: .95rem 1.05rem;
  border-top: 1px solid var(--lijn);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1.45;
}
.b-contact-blok__belofte::before {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--roze);
  transform: translateY(-.1em);
}

/* --- Directe contactgegevens ------------------------------------------ */
.b-contact-blok__gegevens {
  display: grid;
  margin-top: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
}
/* Zonder persoonskaart: iets meer lucht onder de introductie */
.b-contact-blok__kop + .b-contact-blok__gegevens { margin-top: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); }
.b-contact-blok__regel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem;
  align-items: center;
  padding-block: .9rem;
}
.b-contact-blok__regel + .b-contact-blok__regel { border-top: 1px solid var(--lijn); }

.b-contact-blok__icoon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--b-contact-icoon-vlak);
  color: var(--blauw);
}
.b-contact-blok__icoon .icoon { width: 1.15rem; height: 1.15rem; }

.b-contact-blok__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
  line-height: 1.3;
  color: var(--tekst-zacht);
}
/* Marge > focusring (6px) min de interlinie van het label: de ring valt
   niet over "Bel ons" / "Mail ons". */
.b-contact-blok__waarde {
  justify-self: start;
  max-width: 100%;
  margin-top: .3rem;
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--navy);
  overflow-wrap: anywhere;
}
a.b-contact-blok__waarde {
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 64, .3);
  text-underline-offset: .22em;
  transition: text-decoration-color var(--dur) var(--ease);
}
a.b-contact-blok__waarde:hover { text-decoration-color: currentColor; }
.b-contact-blok__plaats { white-space: nowrap; }

/* --- Formulierkaart ----------------------------------------------------
   De rij-afstand geldt voor alles wat de plugin in de kaart zet: kop,
   melding (fout) en formulier. */
.b-contact-blok__kaart {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3.25rem);
  border-radius: var(--r-lg);
  background: var(--b-contact-kaart);
  box-shadow: var(--b-contact-kaart-schaduw);
}
@media (min-width: 640px) {
  .b-contact-blok__kaart { border-radius: var(--r-xl); }
}
.b-contact-blok__kaartkop {
  padding-bottom: clamp(1.25rem, 1rem + .8vw, 1.6rem);
  border-bottom: 1px solid var(--lijn);
}
.b-contact-blok__kaarttekst { margin-top: .35rem; color: var(--tekst-zacht); }
.b-contact-blok__terugval { color: var(--tekst-zacht); }
/* Na verzenden toont de plugin alleen een bevestiging: kop is dan overbodig */
.b-contact-blok__kaart:has(> .melding[role="status"]) .b-contact-blok__kaartkop { display: none; }

/* Verwijzing naar het formulier (tweede contactblok op een pagina) */
.b-contact-blok__kaart--verwijzing { align-self: start; }

/* --- Tablet: persoonskaart en gegevens naast elkaar -------------------- */
@media (min-width: 720px) and (max-width: 1023.98px) {
  .b-contact-blok__intro--vol {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--gap);
  }
  .b-contact-blok__intro--vol > .b-contact-blok__kop { grid-column: 1 / -1; }
  .b-contact-blok__intro--vol .b-contact-blok__persoon { align-self: start; }
  .b-contact-blok__intro--vol .b-contact-blok__gegevens { margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); }
  .b-contact-blok__intro--vol .b-contact-blok__regel:first-child { padding-top: 0; }
}

/* Als het blok de pagina opent (contactpagina zonder hero, klantwens 22 okt 2026):
   de kop is de h1, op de grootte van een paginatitel. */
.b-contact-blok--pagina .b-contact-blok__titel { font-size: var(--fs-h1); line-height: 1.1; }