/* ============================================================
   OVER BUITEN BUDDIES — het verhaal van Sabrina
   Eigen ritme: hero met portret, vijf hoofdstukken met een
   hoofdstukrail, twee donkere accentbanden, missie en partner.
   ============================================================ */

/* ---------- hero ---------- */
.bb-over-hero { position: relative; overflow: hidden; background: var(--bb-cream); padding: 52px 0 16px; }
@media (min-width: 900px) { .bb-over-hero { padding: 38px 0 16px; } }
.bb-over-hero__blob {
  position: absolute; top: -28%; right: -18%; width: 68vw; height: 68vw; max-width: 900px; max-height: 900px;
  border-radius: 50%; background: var(--bb-mint); z-index: 0;
}
.bb-over-hero .bb-container { position: relative; z-index: 1; }
.bb-over-hero__grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
@media (min-width: 900px) { .bb-over-hero__grid { grid-template-columns: 1.16fr 0.84fr; gap: 48px; align-items: center; } }
.bb-over-hero__kicker { margin: -23px 0 14px; font: 400 clamp(20px, 2.4vw, 26px) var(--font-hand); color: var(--bb-green-forest); transform: rotate(-1deg); }
.bb-over-hero h1 { margin: 0; font-size: clamp(38px, 6.6vw, 76px); line-height: 0.98; letter-spacing: -0.01em; }
.bb-over-hero__mark { position: relative; display: inline-block; padding-bottom: 0.22em; }
.bb-over-hero__mark svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 0.22em; overflow: visible; }
.bb-over-hero__mark svg path {
  fill: none; stroke: var(--bb-green-light); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 320; stroke-dashoffset: 320; animation: bbDrawLine 1.2s var(--ease-out) 0.5s forwards;
}
@keyframes bbDrawLine { to { stroke-dashoffset: 0; } }
.bb-over-hero__lead { margin: 18px 0 0; font: 400 clamp(26px, 3.3vw, 35px) var(--font-hand); color: var(--bb-green-forest); max-width: 24em; }
/* De tagline verschijnt woord voor woord, een seconde nadat de groene lijn onder
   'Buddies?' klaar is (0,5 s wachten plus 1,2 s tekenen). Het woord 'echt' wordt
   van links naar rechts geschreven, net als op de homepage. */
.bb-over-hero__lead .bb-word--write {
  clip-path: inset(0 100% 0 0); opacity: 0;
  animation: bbWriteIn 1100ms cubic-bezier(0.65, 0.05, 0.36, 1) both;
}
.bb-over-hero__who { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.bb-over-hero__who-line { width: 44px; height: 3px; border-radius: 2px; background: var(--bb-green-light); flex: none; }
.bb-over-hero__who strong { display: block; font: 400 20px var(--font-display); color: var(--bb-green-dark); }
.bb-over-hero__who small { display: block; font-size: 15px; color: var(--bb-muted); margin-top: 2px; }
.bb-over-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Op desktop loopt de mintcirkel achter de foto door tot de onderrand van de hero,
   waar het missieblok in dezelfde kleur begint. Zo vormen ze één doorlopend vlak
   zonder witruimte ertussen. De aansluiting zelf staat bij de missieregels. */
@media (min-width: 900px) {
  /* Onder de foto blijft altijd lucht, zodat het regeltje met haar naam nooit
     tegen het missieblok aan plakt. De mintcirkel loopt er wel onderdoor,
     dus de kleur blijft doorlopen. */
  .bb-over-hero { padding-bottom: 32px; }
  .bb-over-hero__blob { top: auto; bottom: -13%; right: -34%; width: min(84vw, 1080px); height: min(84vw, 1080px); max-width: none; max-height: none; }
}

.bb-over-portrait { margin: 0; }
/* Op laptopformaat staat de foto rechts en kleiner, op één hoogte met de titel
   ernaast. Daardoor begint het verhaal er netjes onder in plaats van naast een
   torenhoge foto. */
@media (min-width: 900px) {
  .bb-over-hero__media { align-self: center; }
  .bb-over-portrait { width: min(100%, 344px); margin-left: auto; }
}
@media (min-width: 1200px) { .bb-over-portrait { width: min(100%, 376px); } }
.bb-over-portrait__frame {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 24px; border: 6px solid var(--bb-white);
  box-shadow: 0 26px 60px rgba(6, 69, 48, 0.26);
}
.bb-over-portrait__frame img {
  position: absolute; top: -6%; left: 0; width: 100%; height: 112%;
  object-fit: cover; object-position: center 38%; display: block;
  transform: translateY(var(--py, 0px));
}
.bb-over-portrait figcaption { display: flex; align-items: center; gap: 9px; margin-top: 12px; font: 400 17px/1.3 var(--font-hand); color: var(--bb-green-forest); }
.bb-over-portrait__badge {
  width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--bb-white);
  border: 3px solid var(--bb-green-light); display: grid; place-items: center; box-shadow: var(--shadow-card);
}
.bb-over-portrait__badge img { width: 68%; height: 68%; object-fit: contain; }

/* ---------- hoofdstukrail ---------- */
.bb-story { position: relative; }
.bb-rail { display: none; }
@media (min-width: 1360px) {
  .bb-rail {
    display: flex; flex-direction: column; gap: 20px;
    position: fixed; left: 34px; top: 50%; transform: translateY(-50%);
    z-index: 20; padding-left: 16px;
    transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  }
  /* Voorbij de ondertekening schuift de rail zacht uit beeld. */
  .bb-rail.is-uit { opacity: 0; transform: translateY(-50%) translateX(-18px); pointer-events: none; }
}
.bb-rail__line { position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: rgba(19, 86, 55, 0.18); }
.bb-rail__item {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--bb-muted); font: 600 14px var(--font-body); position: relative;
}
.bb-rail__item:hover { color: var(--bb-green-dark); }
/* Boven een donkere achtergrond draaien de kleuren om. Per item gemeten, dus ook
   als de rail half over een donkere sectie valt klopt elke regel afzonderlijk.
   Contrast op #064530: witte tekst 7,9:1, het geelgroen 5,8:1, actief wit 11:1. */
.bb-rail__item.is-donker { color: var(--bb-white); }
.bb-rail__item.is-donker:hover,
.bb-rail__item.is-donker.is-on { color: var(--bb-white); }
.bb-rail__item.is-donker .bb-rail__n,
.bb-rail__item.is-donker .bb-rail__n--intro { color: rgba(255, 255, 255, 0.92); }
.bb-rail__item.is-donker .bb-rail__dot { background: rgba(255, 255, 255, 0.42); }
.bb-rail__item.is-donker.is-on .bb-rail__dot { background: var(--bb-green-grass); box-shadow: 0 0 0 5px rgba(175, 198, 0, 0.3); }
/* De lijn loopt door alle secties heen, dus die krijgt één tint die op zowel
   cream als donkergroen leesbaar blijft. */
.bb-rail__line { background: rgba(148, 177, 67, 0.55); }
.bb-rail__dot {
  position: absolute; left: -16px; width: 11px; height: 11px; border-radius: 50%;
  background: rgba(19, 86, 55, 0.25);
  transition: background var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.bb-rail__item.is-on { color: var(--bb-green-dark); }
.bb-rail__item.is-on .bb-rail__dot { background: var(--bb-green-forest); box-shadow: 0 0 0 5px rgba(148, 177, 67, 0.32); transform: scale(1.1); }
.bb-rail__item, .bb-rail__n { transition: color var(--t-base); }
.bb-rail__n { font: 400 14px var(--font-display); color: var(--bb-green-light); }
/* De missie is de introductie en heeft dus geen hoofdstuknummer. */
.bb-rail__n--intro { font: 700 11px/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-green-forest); }
.bb-rail__label { white-space: nowrap; max-width: 0; overflow: hidden; opacity: 0; transform: translateX(-6px); transition: max-width var(--t-slow) var(--ease-out), opacity var(--t-base), transform var(--t-base); }
.bb-rail__item:hover .bb-rail__label, .bb-rail__item.is-on .bb-rail__label { max-width: 240px; opacity: 1; transform: none; }

/* ---------- speelse vlakken achter de secties ---------- */
.bb-blob { position: absolute; z-index: 0; pointer-events: none; }
.bb-blob--left { left: -20%; top: -30%; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; }
.bb-blob--right { right: -18%; bottom: -32%; width: 56vw; height: 56vw; max-width: 720px; max-height: 720px; }
.bb-blob--mint { background: radial-gradient(circle at center, var(--bb-mint) 0%, rgba(232, 244, 236, 0.55) 46%, rgba(232, 244, 236, 0) 72%); }
.bb-blob--cream { background: radial-gradient(circle at center, var(--bb-cream) 0%, rgba(253, 253, 245, 0.6) 46%, rgba(253, 253, 245, 0) 72%); }
.bb-blob--grass { background: radial-gradient(circle at center, rgba(175, 198, 0, 0.16) 0%, rgba(175, 198, 0, 0.07) 46%, rgba(175, 198, 0, 0) 72%); }
@media (max-width: 719px) { .bb-blob { opacity: 0.6; } }

/* ---------- hoofdstukken ---------- */
.bb-chapter { position: relative; overflow: hidden; padding: 44px 0; }
.bb-chapter > *:not(.bb-blob) { position: relative; z-index: 1; }
.bb-missie { position: relative; overflow: hidden; }
.bb-missie > *:not(.bb-blob) { position: relative; z-index: 1; }
@media (min-width: 900px) { .bb-chapter { padding: 56px 0; } }
/* De missie sluit nu direct aan op de foto van Sabrina, daarna begint het verhaal. */
#wat-ik-zag { padding-top: 40px; }
.bb-chapter--cream { background: var(--bb-cream); }
.bb-chapter--mint { background: var(--bb-mint); }
.bb-chapter--split { background: var(--bb-cream); }
.bb-chapter--dark { background: var(--bb-green-dark); }
.bb-chapter__inner { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.bb-chapter__head { display: flex; align-items: center; gap: 14px; margin-bottom: -2px; }
.bb-chapter__n {
  font: 400 clamp(38px, 5vw, 56px)/0.9 var(--font-display); letter-spacing: -0.02em;
  /* Strokekleur donkerder dan het lichte groen: haalt 3,8:1 op cream en 3,4:1 op mint,
     zodat de cijfers voldoen aan de 3:1-eis voor grote tekst (WCAG 1.4.3). */
  color: transparent; -webkit-text-stroke: 2px #6E8C2E;
}
.bb-chapter__label { margin: 0; font: 700 14px/1.28 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bb-green-forest); text-wrap: balance; }
.bb-chapter--dark .bb-chapter__label { color: var(--bb-green-grass); }
.bb-chapter--dark .bb-chapter__n { -webkit-text-stroke-color: rgba(255, 255, 255, 0.4); }
.bb-chapter__body { margin: 0; font-size: clamp(19px, 2vw, 21px); line-height: 1.62; color: var(--fg-2); text-wrap: pretty; }
.bb-chapter__body b { color: var(--bb-green-forest); font-weight: 700; }
.bb-chapter__body--accent { border-left: 4px solid var(--bb-green-light); padding-left: 18px; }
.bb-chapter__body--light { color: rgba(255, 255, 255, 0.88); }
.bb-chapter__statement { margin: 0; font: 400 clamp(26px, 3.8vw, 40px)/1.16 var(--font-display); color: var(--bb-white); }
.bb-chapter__sign { margin: 10px 0 0; font: 400 clamp(32px, 4vw, 44px)/1 var(--font-hand); color: var(--bb-green-grass); transform: rotate(-4deg); transform-origin: left center; }
/* Afsluitende regel in handschrift, boven de ondertekening. */
.bb-chapter__signoff { margin: 10px 0 0; font: 400 clamp(19px, 2.1vw, 24px)/1.35 var(--font-hand); color: rgba(255, 255, 255, 0.94); max-width: 24em; transform: rotate(-2deg); transform-origin: left center; }
/* Op desktop past de regel in één keer, zoals een met de hand geschreven regel. */
@media (min-width: 1000px) { .bb-chapter__signoff { max-width: none; white-space: nowrap; font-size: 23px; } }
/* De regels schrijven zichzelf, letter voor letter. */
.bb-handwriting { display: flex; flex-direction: column; }
.bb-handsign { display: block; }
/* Een woord blijft altijd één geheel, dus de regel breekt nooit middenin een woord. */
.bb-handsign__w { display: inline-block; white-space: nowrap; }
.bb-handsign__w > span, .bb-handsign > span:not(.bb-handsign__w) { display: inline-block; white-space: pre; opacity: 0; transform: translate(-4px, 5px); transition: opacity .28s var(--ease-out), transform .34s var(--ease-out); }
.bb-handsign.in .bb-handsign__w > span, .bb-handsign.in > span:not(.bb-handsign__w) { opacity: 1; transform: none; }

.bb-pullquote { position: relative; padding: 6px 0 8px; }
.bb-pullquote__mark { color: var(--bb-green-light); }
.bb-pullquote__words { display: inline; }
.bb-pullquote__words span:last-child { margin-right: 0; white-space: pre-wrap; }
.bb-pullquote__text { margin: 0; font: 400 clamp(24px, 3.4vw, 36px)/1.25 var(--font-hand); color: var(--bb-green-dark); }

.bb-chapter__split { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; max-width: 820px; margin: 0 auto; }
@media (min-width: 900px) { .bb-chapter__split { grid-template-columns: 1fr 0.62fr; gap: 40px; } }
.bb-chapter__inner--left { max-width: none; margin: 0; }
.bb-chapter__photo {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-xl);
  border: 6px solid var(--bb-white); box-shadow: 0 18px 44px rgba(6, 69, 48, 0.2);
}
.bb-chapter__photo img {
  position: absolute; top: -6%; left: 0; width: 100%; height: 112%;
  object-fit: cover; display: block; transform: translateY(var(--py, 0px));
}

.bb-idea-quote { background: var(--bb-green-forest); padding: 40px 0; margin: 30px 0; }
.bb-idea-quote__text { max-width: 860px; margin: 0 auto; text-align: center; font: 400 clamp(22px, 3.2vw, 36px)/1.3 var(--font-hand); color: var(--bb-white); }

.bb-photostrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 4px; }
.bb-photostrip img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); display: block; }
.bb-photostrip img:nth-child(1) { transform: rotate(-1.6deg); }
.bb-photostrip img:nth-child(2) { transform: rotate(1.2deg); }
.bb-photostrip img:nth-child(3) { transform: rotate(-0.8deg); }

/* ---------- missie ---------- */
.bb-missie { padding: 52px 0; }
/* Als de missie boven het verhaal staat, krijgt hij een eigen mintvlak met een
   zachte bovenrand. Zo scheidt hij de foto van het verhaal zonder een harde lijn. */
.bb-missie--intro { background: var(--bb-mint); border-radius: 34px 34px 0 0; margin-top: 30px; padding: 42px 0 48px; }
@media (min-width: 900px) { .bb-missie--intro { margin-top: 0; border-radius: 0; padding: 44px 0 56px; } }
.bb-missie .bb-section__head { margin-bottom: 26px; }
.bb-missie__list { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 12px; max-width: 820px; }
.bb-missie__list > li {
  display: flex; align-items: center; gap: 16px;
  background: var(--bb-white); border-radius: var(--radius-lg);
  padding: 18px 22px; box-shadow: var(--shadow-card);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.bb-missie__list > li:hover { transform: translateX(5px); box-shadow: var(--shadow-card-h); }
.bb-missie__icon { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--bb-mint); color: var(--bb-green-forest); display: grid; place-items: center; }
.bb-missie__text { font: 700 17px/1.45 var(--font-body); color: var(--bb-green-dark); }

/* ---------- partner en toekomst ---------- */
.bb-partner { padding: 52px 0; }
.bb-partner__grid { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 1000px; margin: 0 auto; }
@media (min-width: 820px) { .bb-partner__grid { grid-template-columns: 1fr 1.2fr; gap: 24px; } }
.bb-partner__grid > .bb-fade { display: flex; }
.bb-partner__card {
  width: 100%; background: var(--bb-white); border-radius: var(--radius-lg);
  padding: 28px 26px; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 14px;
}
.bb-partner__card h2 { margin: 0; font-size: 26px; }
.bb-partner__card p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--fg-2); }
/* Het logo zit in een link naar haarlem.nl. De maatvoering staat daarom op de link, want
   die is nu het flexitem in de kaart, en het logo vult de link. Zo blijft het klikvlak
   precies zo groot als het logo. */
.bb-partner__card a.bb-logolink { width: 210px; max-width: 70%; margin-top: auto; }
.bb-partner__logo { width: 100%; max-width: 210px; height: auto; margin-top: auto; }
.bb-partner__card--future { background: var(--bb-green-dark); }
.bb-partner__card--future h2 { color: var(--bb-white); }
.bb-partner__card--future p { color: rgba(255, 255, 255, 0.88); }
.bb-partner__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }

/* ---------- woord-voor-woord reveal ---------- */
.bb-wordreveal span { display: inline-block; white-space: pre-wrap; opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.bb-wordreveal.in span { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .bb-rail { transition: none; }
  .bb-wordreveal span { opacity: 1; transform: none; transition: none; }
  .bb-handsign span { opacity: 1; transform: none; transition: none; }
  .bb-over-hero__mark svg path { animation: none; stroke-dashoffset: 0; }
  .bb-over-portrait__frame img, .bb-chapter__photo img { transform: none; }
  .bb-photostrip img { transform: none; }
}
.bb-rm-force .bb-wordreveal span { opacity: 1; transform: none; transition: none; }
.bb-rm-force .bb-handsign span { opacity: 1; transform: none; transition: none; }
.bb-rm-force .bb-over-hero__mark svg path { animation: none; stroke-dashoffset: 0; }
.bb-rm-force .bb-over-portrait__frame img, .bb-rm-force .bb-chapter__photo img { transform: none; }

/* ================================================================
   LEESBAARHEID OP MOBIEL (WCAG 2.2, EAA)
   ================================================================
   Het verhaal van Sabrina is de langste leestekst van de site. De hoofdstuktekst
   staat op een telefoon daarom op 18 pixels, gelijk aan de lopende tekst elders,
   met dezelfde regelafstand als op de desktop. */
@media (max-width: 719px) {
  .bb-over-hero__who small { font-size: 16.5px; }
  .bb-chapter__label { font-size: 16px; }
  /* Elke alinea van het verhaal is op een telefoon exact even groot, gelijk aan de
     lopende tekst op alle andere pagina's: 18 pixels, met dezelfde regelafstand.
     De hoofdstuktekst stond op 19 en de missielijst en de partnerkaarten op 18,
     waardoor de tekst per onderdeel van maat verschilde. */
  .bb-chapter__body,
  .bb-chapter__body--accent,
  .bb-chapter__body--light,
  .bb-missie__text,
  .bb-partner__card p { font-size: 18px; line-height: 1.66; }
  .bb-over-portrait figcaption { font-size: 19px; }
}