/* ============================================================
   Pagina In de media
   ============================================================ */
.bb-md__head { background: var(--bb-green-dark); color: var(--bb-white); padding: 44px 0 40px; position: relative; overflow: hidden; }
.bb-md__head::after { content: ""; position: absolute; right: -140px; bottom: -180px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(148, 177, 67, 0.35), rgba(148, 177, 67, 0) 70%); pointer-events: none; }
.bb-md__kicker { font: 700 var(--fs-caption) var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bb-yellow); margin: 0 0 10px; }
.bb-md__head h1 { margin: 0 0 14px; color: var(--bb-white); }
.bb-md__lead { font-size: var(--fs-lead); color: rgba(255, 255, 255, 0.88); max-width: 46ch; margin: 0; text-wrap: pretty; }
.bb-md__stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.bb-md__stats li { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-pill); padding: 8px 16px; }
.bb-md__stats b { font: 400 22px var(--font-display); color: var(--bb-yellow); }
.bb-md__stats span { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.86); }

/* filter */
/* De filterbalk plakt onder de menubalk. De hoogte daarvan komt uit ui.jsx: met een
   vast getal bleef er op sommige schermbreedtes een spleetje open. Die ene pixel
   eraf laat de balken elkaar net raken; de menubalk ligt erboven, dus je ziet er
   niets van. */
.bb-md__filter { position: sticky; top: calc(var(--bb-header-h, 73px) - 1px); z-index: 20; background: var(--bg-page); border-bottom: 1px solid var(--border-card); padding: 12px 0; }
.bb-md__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bb-md__chip { min-height: 44px; padding: 9px 18px; border: 2px solid var(--border-card); border-radius: var(--radius-pill); background: var(--bb-white); font: 700 var(--fs-small) var(--font-body); color: var(--bb-green-dark); cursor: pointer; transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.bb-md__chip:hover { border-color: var(--bb-green-light); }
.bb-md__chip[aria-pressed="true"] { background: var(--bb-green-forest); border-color: var(--bb-green-forest); color: var(--bb-white); }

/* uitgelicht */
.bb-md__hero { padding: 44px 0 8px; }
.bb-md__herocard { background: var(--bb-white); border: 2px solid var(--border-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); overflow: hidden; display: grid; }
.bb-md__herofoto { position: relative; background: var(--bb-mint); aspect-ratio: 4 / 3; }
.bb-md__herofoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-md__badge { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 8px; background: var(--bb-yellow); color: var(--bb-green-dark); border-radius: var(--radius-pill); padding: 8px 16px; font: 700 var(--fs-caption) var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 6px 16px rgba(6, 69, 48, 0.2); }
.bb-md__herobody { padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 14px; }
.bb-md__stemmen { display: flex; align-items: baseline; gap: 10px; }
.bb-md__stemmen b { font: 400 clamp(38px, 7vw, 56px)/1 var(--font-display); color: var(--bb-green-forest); }
.bb-md__stemmen span { font-size: var(--fs-small); color: var(--fg-muted); }
.bb-md__herobody h2 { margin: 0; font-size: var(--fs-h3); }
.bb-md__onder { margin: 0; font-weight: 700; color: var(--bb-green-dark); }
.bb-md__herobody p { margin: 0; color: var(--fg-2); text-wrap: pretty; }
.bb-md__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

/* items */
.bb-md__list { padding: 40px 0 8px; display: flex; flex-direction: column; gap: 22px; }
.bb-md__sectiekop { display: flex; align-items: center; gap: 14px; margin: 26px 0 2px; }
.bb-md__sectiekop h2 { margin: 0; font-size: var(--fs-h3); }
.bb-md__sectiekop::after { content: ""; flex: 1; height: 3px; border-radius: 3px; background: var(--bb-green-light); opacity: 0.35; }
.bb-md__item { background: var(--bb-white); border: 2px solid var(--border-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); overflow: hidden; display: grid; transition: box-shadow var(--t-base) var(--ease-out); }
.bb-md__item:hover { box-shadow: var(--shadow-card-h); }
.bb-md__videoblok { grid-column: 1 / -1; padding: 0 22px 26px; display: flex; flex-direction: column; gap: 4px; }
.bb-md__videokicker { margin: 0; font: 700 var(--fs-caption) var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-green-forest); }
.bb-md__videotitel { margin: 0 0 12px; font-size: var(--fs-lead); color: var(--bb-green-dark); }
.bb-md__itemfoto { position: relative; background: var(--bb-mint); }
.bb-md__itemfoto--contain { background: var(--bb-white); padding: 14px; }
.bb-md__itemfoto--contain img { min-height: 260px; }
/* Het logo van Wijk aan Zet is transparant en strak uitgesneden. De correctie voor
   de witruimte eromheen is daarom vervallen. Alleen boven blijft er ruimte staan,
   anders plakt het logo tegen de bovenrand van de kaart. */
@media (max-width: 759px) {
  #artikel-noord-aan-zet .bb-md__itemfoto--contain { padding: 25px 14px 0; }
  #artikel-noord-aan-zet .bb-md__itemfoto--contain img { min-height: 0; height: 168px; }
}
.bb-md__itemfoto img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; }
.bb-md__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.bb-md__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 700 var(--fs-caption) var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); }
.bb-md__bron { display: inline-flex; align-items: center; gap: 8px; background: var(--bb-mint); color: var(--bb-green-dark); border-radius: var(--radius-pill); padding: 6px 14px; }
.bb-md__body h3 { margin: 0; font-size: 22px; text-wrap: pretty; }
.bb-md__body blockquote, .bb-md__sam { margin: 0; padding-left: 16px; border-left: 3px solid var(--bb-green-light); font: 400 21px/1.5 var(--font-hand); color: var(--bb-green-forest); text-wrap: pretty; }
.bb-md__bronregel { font-size: var(--fs-caption); color: var(--fg-muted); margin: 0; }
.bb-md__notitie { display: flex; align-items: flex-start; gap: 10px; background: var(--bb-cream); border-radius: var(--radius-lg); padding: 12px 14px; font-size: var(--fs-small); color: var(--fg-2); }
.bb-md__notitie svg { flex: none; color: var(--bb-green-forest); margin-top: 2px; }
.bb-md__link { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; font: 700 var(--fs-body) var(--font-body); color: var(--bb-green-forest); text-decoration: none; }
.bb-md__link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* video */
.bb-md__video { position: relative; aspect-ratio: 16 / 9; background: var(--bb-green-dark); border-radius: var(--radius-lg); overflow: hidden; }
.bb-md__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bb-md__play { position: absolute; inset: 0; width: 100%; border: 0; background: linear-gradient(160deg, #1040 0%, rgba(6, 69, 48, 0.9) 100%), var(--bb-green-dark); color: var(--bb-white); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; cursor: pointer; padding: 20px; overflow: hidden; }
.bb-md__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.bb-md__play .ic, .bb-md__play .t { position: relative; z-index: 1; }
.bb-md__videohulp { margin: 10px 0 0; font-size: var(--fs-caption); color: var(--fg-muted); }
.bb-md__videohulp a { color: var(--bb-green-forest); font-weight: 700; }
.bb-md__play span.ic { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--bb-yellow); color: var(--bb-green-dark); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3); transition: transform var(--t-base) var(--ease-out); }
.bb-md__play:hover span.ic { transform: scale(1.06); }
.bb-md__play span.t { font: 700 var(--fs-small) var(--font-body); max-width: 34ch; text-align: center; }
.bb-md__consent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px; text-align: center; color: var(--bb-white); }
.bb-md__consent p { margin: 0; font-size: var(--fs-small); max-width: 40ch; color: rgba(255, 255, 255, 0.9); }
.bb-md__consent .bb-md__link { align-self: center; }

/* audio */
.bb-md__audio { display: flex; flex-direction: column; gap: 12px; }
.bb-md__audio audio { width: 100%; }
.bb-md__leeg { background: var(--bb-mint); border-radius: var(--radius-xl); padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.bb-md__leeg h3 { margin: 0; font-size: 21px; }
.bb-md__leeg p { margin: 0; color: var(--fg-2); max-width: 52ch; text-wrap: pretty; }

/* voor journalisten */
.bb-md__pers { padding: 44px 0 64px; }
/* Journalistenblok: mintgroen en rustig van toon. Donkergroene tekst op mint haalt ruim de
   contrasteis, en een lichte rand vervangt de zware schaduw van de donkere versie. */
.bb-md__perscard { background: var(--bb-mint); color: var(--bb-green-dark); border-radius: var(--radius-xl); padding: 32px 28px; display: grid; gap: 22px; box-shadow: inset 0 0 0 1.5px rgba(6, 69, 48, 0.1); }
.bb-md__perscard h2 { margin: 0 0 10px; color: var(--bb-green-dark); font-size: var(--fs-h3); }
.bb-md__perscard p { margin: 0; color: var(--fg-2); max-width: 46ch; text-wrap: pretty; }
.bb-md__perslinks { display: flex; flex-direction: column; gap: 10px; }
.bb-md__perslinks a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--bb-green-forest); font-weight: 700; text-decoration: none; }
.bb-md__perslinks a:hover { color: var(--bb-green-dark); text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 760px) {
  .bb-md__head { padding: 56px 0 52px; }
  .bb-md__herocard { grid-template-columns: 1fr; }
  .bb-md__herofoto { aspect-ratio: 16 / 9; }
  .bb-md__herobody { padding: 34px 34px 36px; }
  .bb-md__item { grid-template-columns: 0.9fr 1.1fr; }
  .bb-md__item--spiegel { grid-template-columns: 1.1fr 0.9fr; }
  .bb-md__item--spiegel .bb-md__itemfoto { grid-column: 2; grid-row: 1; }
  .bb-md__item--spiegel .bb-md__body { grid-column: 1; grid-row: 1; }
  .bb-md__videoblok { padding: 34px 30px 30px; }
  /* Op desktop stond de video over de volle kaartbreedte en overheerste die het
     artikel. Hij krijgt nu de breedte van ongeveer één kolom. Op mobiel blijft
     de video wel de volledige breedte houden. */
  .bb-md__videoblok { max-width: 620px; }
  .bb-md__item--geenfoto { grid-template-columns: 1fr; }
  .bb-md__body { padding: 28px 30px 30px; }
  .bb-md__perscard { grid-template-columns: 1.3fr 1fr; padding: 38px 40px; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-md__play span.ic { transition: none; }
}


/* Foto's die naar de hoofdpagina van de nieuwsbron linken. De foto blijft een foto: geen
   onderstreping, geen kleurverandering. Bij aanwijzen en bij toetsenbordfocus komt er een
   klein pijltje rechtsonder en zoomt het beeld een fractie in, zodat het duidelijk is dat
   er iets te klikken valt. */
a.bb-md__fotolink { display: block; text-decoration: none; color: inherit; overflow: hidden; }
a.bb-md__fotolink img { transition: transform var(--t-slow) var(--ease-out); }
a.bb-md__fotolink:hover img, a.bb-md__fotolink:focus-visible img { transform: scale(1.03); }
.bb-md__fotolink-ic {
  position: absolute; right: 14px; bottom: 14px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bb-white); color: var(--bb-green-dark);
  box-shadow: 0 4px 12px rgba(6, 69, 48, 0.24); opacity: 0; transform: translateY(6px);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-bounce);
}
a.bb-md__fotolink:hover .bb-md__fotolink-ic, a.bb-md__fotolink:focus-visible .bb-md__fotolink-ic { opacity: 1; transform: translateY(0); }
/* De uitgelichte kaart bovenaan: de link vult de fotohoek volledig. */
.bb-md__herofotolink { position: absolute; inset: 0; }
.bb-md__herofotolink img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) {
  a.bb-md__fotolink img, .bb-md__fotolink-ic { transition: none; }
  a.bb-md__fotolink:hover img, a.bb-md__fotolink:focus-visible img { transform: none; }
}


/* Banner onder het laatste artikel: de steun van de gemeente Haarlem. Donkergroen met een
   geel streepje aan de bovenkant en een zachte gloed rechtsboven, zodat hij opvalt na de
   rij witte artikelkaarten. Laag van hoogte: twee kolommen op de desktop, gestapeld op
   mobiel. */
.bb-md__gem {
  position: relative; overflow: hidden; margin: 44px 0 0;
  background: var(--bb-green-dark); border-radius: var(--radius-xl);
  padding: 26px 28px; display: grid; gap: 22px; align-items: center;
  box-shadow: var(--shadow-card);
}
.bb-md__gem::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--bb-yellow); }
.bb-md__gem-glow { position: absolute; right: -70px; top: -110px; width: 260px; height: 260px; border-radius: 50%; background: rgba(250, 215, 40, 0.14); pointer-events: none; }
.bb-md__gem-tekst { position: relative; }
.bb-md__gem .k { margin: 0 0 6px; font: 700 var(--fs-caption) var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bb-yellow); }
.bb-md__gem .t { margin: 0 0 8px; font-family: var(--font-display); font-size: 22px; line-height: 1.25; color: var(--bb-white); text-wrap: balance; }
.bb-md__gem .d { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: rgba(255, 255, 255, 0.86); max-width: 62ch; text-wrap: pretty; }
a.bb-md__gem-logo { position: relative; justify-self: start; background: var(--bb-white); border-radius: var(--radius-md); padding: 12px 16px; }
.bb-md__gem-logo img { display: block; width: 196px; height: auto; }
@media (min-width: 820px) {
  .bb-md__gem { grid-template-columns: minmax(0, 1fr) auto; gap: 34px; padding: 28px 34px; }
  a.bb-md__gem-logo { justify-self: end; }
}
@media (max-width: 719px) {
  .bb-md__gem { padding: 22px 20px; border-radius: var(--radius-lg); }
  .bb-md__gem .t { font-size: 21px; }
  /* Op mobiel vult het witte vlak de breedte binnen de padding van de banner, en schaalt
     het logo mee. De selector begint met a, want anders wint de regel a.bb-logolink uit
     styles.css met width: max-content. */
  a.bb-md__gem-logo { display: block; width: 100%; max-width: 100%; justify-self: stretch; padding: 16px 18px; }
  .bb-md__gem-logo img { width: 100%; max-width: 320px; margin: 0 auto; }
}