/* ================= Deelblok (Facebook en WhatsApp) ================= */
/* Op mobiel staat het logo bovenaan naast de titel. De lopende tekst en de
   knoppen vallen daaronder over de volle breedte, zodat het logo geen kolom
   wegneemt van de tekst. */
.bb-deel{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"logo kop" "tekst tekst" "knoppen knoppen";align-items:start;gap:14px 16px;padding:24px 20px;background:var(--bb-white);border:2.5px solid var(--bb-green-logo);border-radius:22px;box-shadow:0 4px 0 rgba(148,177,67,.35),var(--shadow-card)}
.bb-deel--mint{background:linear-gradient(180deg,var(--bb-white) 0%,#F7FBF3 55%,#E2F0E6 100%)}
/* Het logobestand heeft rondom een doorzichtige rand: links 18,8%, rechts 18,7%,
   boven 23,4% en onder 14,0%. Die knippen we weg met negatieve marges in een vak
   met overflow:hidden, zodat het beeldmerk zelf groter en dus leesbaarder wordt
   zonder het bestand aan te passen. De marges volgen de echte randen: symmetrisch
   snijden zou onderaan het woordmerk 'Buiten Buddies' aftikken. */
/* Het logo staat volledig in beeld, gecentreerd in zijn vak, met ruimte rondom.
   Het bestand is strak uitgesneden, dus bijsnijden met negatieve marges is niet
   meer nodig. */
.bb-deel__vak{grid-area:logo;width:72px;height:72px;flex:none;align-self:start;display:grid;place-items:center}
.bb-deel__logo{display:block;width:100%;height:100%;object-fit:contain;padding:6px;box-sizing:border-box}
.bb-deel__tekst{grid-area:tekst;min-width:0}
.bb-deel__kop{grid-area:kop;align-self:center;margin:0;font-size:var(--fs-h3);color:var(--bb-green-forest);text-wrap:pretty}
.bb-deel__tekst p{margin:0;color:var(--fg-2);font-size:var(--fs-body);max-width:52ch;text-wrap:pretty}
.bb-deel__knoppen{grid-area:knoppen;display:flex;flex-wrap:wrap;gap:12px}
.bb-deel__btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;flex:1 1 100%;min-height:52px;padding:12px 20px;border-radius:var(--radius-pill);font:700 var(--fs-button)/1.15 var(--font-body);text-decoration:none;border:2px solid transparent;transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
.bb-deel__btn svg{flex:none}
.bb-deel__btn--fb{background:var(--bb-green-forest);border-color:var(--bb-green-forest);color:var(--bb-white)}
.bb-deel__btn--fb:hover{background:var(--bb-green-dark);border-color:var(--bb-green-dark);color:var(--bb-white);transform:translateY(-2px);box-shadow:var(--shadow-card-h)}
.bb-deel__btn--wa{background:var(--bb-white);border-color:var(--bb-green-light);color:var(--bb-green-forest)}
.bb-deel__btn--wa:hover{background:var(--bb-mint);color:var(--bb-green-dark);transform:translateY(-2px);box-shadow:var(--shadow-card-h)}
@media (min-width:620px){
  /* De knoppen beginnen op dezelfde lijn als de titel en de lopende tekst,
     dus niet onder het logo. */
  .bb-deel{grid-template-areas:"logo kop" "logo tekst" ". knoppen";gap:10px 18px;padding:26px 22px}
  .bb-deel__vak{width:84px;height:84px}
  .bb-deel__logo{padding:7px}
  .bb-deel__knoppen{margin-top:6px}
  .bb-deel__btn{flex:0 1 auto}
}
@media (min-width:1160px){
  .bb-deel{grid-template-columns:auto 1fr auto;grid-template-areas:"logo kop knoppen" "logo tekst knoppen";gap:8px 26px;padding:30px 32px;align-items:center}
  .bb-deel__vak{width:100px;height:100px;align-self:center}
  .bb-deel__logo{padding:8px}
  .bb-deel__knoppen{flex-wrap:nowrap;margin-top:0}
}
@media (prefers-reduced-motion:reduce){.bb-deel__btn:hover{transform:none}}
.bb-rm-force .bb-deel__btn:hover{transform:none}
/* Plaatsing op de pagina's waar het blok staat */
.bb-wa__cta .bb-deel{margin-top:26px}
.bb-formpage__body .bb-deel{margin-top:30px}
/* Op 'Hoe werkt het' staat het blok onder de twee doorverwijskaarten. Extra lucht,
   zodat het duidelijk een eigen blok is en niet bij die kaarten hoort. */
.bb-hw__next .bb-deel{margin-top:44px}
@media (min-width:760px){.bb-hw__next .bb-deel{margin-top:52px}}