/* Feedback Richard (okt 2026): beeld en opmaak per pagina, deel 2 (bedankpagina's, tandvlees, bleken, klachtenregeling, nieuws, werken bij). */

/* ===== Handgeschreven regel als tweede regel bij een foto (bedankpagina's, klachtenregeling) =====
   Huisstijl: de handletter is nooit de enige kop, maar een accent. Zoals in het brandbook staat de
   regel licht verspringend ten opzichte van het beeld: rechts ingesprongen en half over de onderrand
   van de foto, op een wit lipje zodat de rode letter altijd leesbaar blijft (contrast). */
.b2-quote{position:relative;z-index:1;width:fit-content;max-width:calc(100% - 24px);margin:-26px clamp(16px,7%,56px) 0 auto;padding:10px 18px 0;background:var(--white);border-radius:14px 14px 0 0}
.b2-quote>.hand{display:block;margin:0;font-size:clamp(28px,2.5vw,36px);text-wrap:balance}
@media (max-width:640px){
  .b2-quote{margin-top:-22px;margin-right:12px;padding:8px 14px 0}
}

/* ===== C4. Klachtenregeling: "Door open communicatie ..." speelser geplaatst =====
   Twee regels die verspringen (brandbook p11–p14): de eerste regel staat op een wit lipje half over
   de onderrand van de wachtkamerfoto, de tweede regel springt verder in. Blijft binnen de kolom. */
.b2-quote-open{position:relative;z-index:1;margin:-30px 0 0 clamp(16px,7%,56px);padding:0;max-width:calc(100% - clamp(16px,7%,56px))}
.b2-quote-open>.hand{display:block;margin:0}
.b2-quote-open>.hand>span{display:block;width:fit-content;max-width:100%}
.b2-quote-open>.hand>span:first-child{background:var(--white);padding:8px 16px 2px;border-radius:14px 14px 0 0}
.b2-quote-open>.hand>span+span{margin-left:clamp(40px,16%,120px)}
@media (max-width:640px){
  .b2-quote-open{margin:-24px 0 0 10px;max-width:calc(100% - 10px)}
  .b2-quote-open>.hand>span:first-child{padding:6px 12px 2px}
  .b2-quote-open>.hand>span+span{margin-left:36px}
}

/* ===== C1. Bedankpagina's: foto + handgeschreven regel in de paginakop =====
   Zelfde gedrag als .phero-grid>.phero-media in layout.css (op desktop even hoog als de tekst ernaast),
   maar dan voor een figuur met de foto en de handgeschreven regel eronder. */
.b2-kopfoto{margin:0;min-width:0}
.b2-kopfoto>.phero-media{border-radius:var(--r)}
.phero:has(.phero-grid>.b2-kopfoto){padding-bottom:72px!important}
.phero-grid:has(>.b2-kopfoto){align-items:center}
@media (min-width:901px){
  .phero-grid:has(>.b2-kopfoto){align-items:stretch}
  .b2-kopfoto{display:flex;flex-direction:column}
  .b2-kopfoto>.phero-media{flex:1 1 auto;aspect-ratio:auto;min-height:360px}
  .b2-kopfoto>.phero-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
}
@media (max-width:900px){
  .phero:has(.phero-grid>.b2-kopfoto){padding-bottom:40px!important}
}

/* ===== C5. Nieuwsberichten: hoofdfoto in de kop naast de titel =====
   Op een 16:9-scherm opende een bericht met alleen tekst; de foto stond pas onder de vouw.
   Nu dezelfde opbouw als andere pagina's met een paginakop: tekst links, foto rechts (mobiel eronder). */
.b2-artkop .h1{font-size:clamp(32px,3.6vw,50px)}
/* Logo + slogan op de onderrand van de foto (.foto-merk in aanvullingen.css), iets kleiner dan elders. */
.b2-artkop .b2-merk{--bm:clamp(15px,1.3vw,19px)}

/* ===== C6. Werken bij, "Waarom werken bij van Eck?": strakke fotorij =====
   Was: drie foto's in drie formaten op verschillende hoogtes. Nu drie even grote staande foto's
   op één lijn (zoals de berichtentegels in het brandbook). Mobiel: twee naast elkaar, de derde vervalt. */
.b2-sfeer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.b2-sfeer>.r{aspect-ratio:4/5}
.b2-sfeer>.r>img{object-fit:cover}
.b2-sfeer>.r:nth-child(1)>img{object-position:35% 50%}
.b2-sfeer>.r:nth-child(2)>img{object-position:60% 50%}
.b2-sfeer>.r:nth-child(3)>img{object-position:50% 50%}
@media (max-width:900px){.b2-sfeer{gap:14px}}
@media (max-width:640px){
  .b2-sfeer{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .b2-sfeer>.r:nth-child(3){display:none}
}