/* WordPress-aanpassingen op het statische ontwerp (style.css blijft ongewijzigd). */

/* Ingelogd: de adminbalk (32px, mobiel 46px) schuift de vaste header en het menu omlaag. */
body.admin-bar .site-header{ top:32px; }
body.admin-bar .overlay{ top:32px; }
@media (max-width:782px){
  body.admin-bar .site-header{ top:46px; }
  body.admin-bar .overlay{ top:46px; }
}

/* WPBakery/Salient zetten wrappers om elke rij; die mogen de lay-out niet beïnvloeden. */
.b2p-home .wpb_row,
.b2p-home .vc_row,
.b2p-home .row_col_wrap_12,
.b2p-home .vc_column_container,
.b2p-home .vc_column-inner,
.b2p-home .wpb_wrapper,
.b2p-home .wpb_content_element,
.b2p-home .wpb_raw_code{
  margin:0; padding:0; width:auto; max-width:none; float:none; display:block;
}

/* Tellers: vaste cijferbreedte, zodat de tekst tijdens het tellen niet verspringt. */
.facts__n [data-count]{ font-variant-numeric:tabular-nums; }

/* Toelichting onder de tellers mag de hele kolombreedte gebruiken (was max. 22 tekens breed). */
.facts__l{ max-width:none; }

/* ---- Videocarrousel (Partners aan het woord) ------------------------------------------------
   Eén grote speler met alle video's als thumbnails eronder, zodat je in één oogopslag ziet wat er te kiezen is. */
.vcar{ max-width:1000px; margin:0 auto clamp(44px, 5vw, 72px); }
.vcar__stage .hp-video{ max-width:none; margin:0; border:0; background:#000; }
.vcar__now{ margin:14px 2px 0; font-size:15px; font-weight:600; letter-spacing:-.01em; color:#fff; }
.vcar__railwrap{ position:relative; margin-top:22px; }
.vcar__rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 3 * 16px) / 4); gap:16px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:3px; scroll-behavior:smooth; scrollbar-width:none; padding:3px;
  margin:-3px;
}
.vcar__rail::-webkit-scrollbar{ display:none; }
.vcar__thumb{
  appearance:none; background:none; border:0; padding:0; margin:0; color:inherit; font:inherit; text-align:left; cursor:pointer;
  scroll-snap-align:start; display:flex; flex-direction:column; gap:10px;
}
.vcar__thumb-media{ position:relative; display:block; aspect-ratio:16/9; border-radius:var(--radius-sm); overflow:hidden; background:var(--petrol-deep);
  box-shadow:0 0 0 1px var(--line-light); opacity:.62; transition:opacity .3s var(--ease), box-shadow .3s var(--ease); }
.vcar__thumb-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; }
.vcar__thumb-play{ position:absolute; left:10px; bottom:10px; width:30px; height:30px; border-radius:50%; background:#fff; color:var(--petrol-deep);
  display:flex; align-items:center; justify-content:center; padding-left:2px; }
.vcar__thumb-title{ font-size:14px; line-height:1.35; font-weight:600; letter-spacing:-.01em; color:rgba(255,255,255,.72); transition:color .3s; }
.vcar__thumb:hover .vcar__thumb-media, .vcar__thumb:focus-visible .vcar__thumb-media{ opacity:1; }
.vcar__thumb:hover .vcar__thumb-title{ color:#fff; }
.vcar__thumb:focus-visible{ outline:2px solid #fff; outline-offset:4px; border-radius:var(--radius-sm); }
.vcar__thumb[aria-pressed="true"] .vcar__thumb-media{ opacity:1; box-shadow:0 0 0 2px var(--teal); }
.vcar__thumb[aria-pressed="true"] .vcar__thumb-title{ color:#fff; }
.vcar__arrows{ display:none; margin:14px 0 0; }
.vcar[data-overflow] .vcar__arrows{ display:flex; }
.vcar .strip-arrow{ background:transparent; border-color:var(--line-light); color:#fff; }
.vcar .strip-arrow:hover{ background:#fff; border-color:#fff; color:var(--ink); }
@media (max-width:900px){
  .vcar__rail{ grid-auto-columns:calc((100% - 16px) / 2.3); }
}
@media (max-width:560px){
  .vcar__rail{ grid-auto-columns:62%; }
}
/* Kaart om het geheel, met per video een subkaart. */
.vcar{ padding:clamp(16px, 2.2vw, 28px); border-radius:var(--radius); background:rgba(255,255,255,.06); box-shadow:0 0 0 1px var(--line-light); }
.vcar__thumb{ padding:10px; border-radius:var(--radius-sm); background:rgba(255,255,255,.07); box-shadow:0 0 0 1px var(--line-light); transition:background .3s var(--ease), box-shadow .3s var(--ease); }
.vcar__thumb:hover{ background:rgba(255,255,255,.12); }
.vcar__thumb[aria-pressed="true"]{ background:rgba(255,255,255,.14); box-shadow:0 0 0 1px var(--teal); }
.vcar__thumb[aria-pressed="true"] .vcar__thumb-media{ box-shadow:none; }

/* Desktop: speler links, de keuzevideo's als lijst rechts ernaast. */
@media (min-width:901px){
  .vcar{ max-width:1160px; display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; }
  .vcar__railwrap{ margin-top:0; }
  .vcar__rail{ grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:1fr; gap:14px; overflow:visible; scroll-snap-type:none; }
  .vcar__thumb{ flex-direction:row; align-items:center; gap:14px; }
  .vcar__thumb-media{ flex:0 0 120px; }
  .vcar__thumb-title{ flex:1; }
}
@media (prefers-reduced-motion: reduce){
  .vcar__rail{ scroll-behavior:auto; }
  .vcar__thumb-media, .vcar__thumb-title{ transition:none; }
}

/* Staat de carrousel onderaan de sectie, dan geen extra ruimte eronder. */
.vcar:last-child{ margin-bottom:0; }

/* Agenda zonder geplande trainingen. */
.agenda__empty{ margin:22px 0 0; padding:22px 0; border-top:1px solid var(--line); color:var(--grey); font-size:15px; }

/* Nieuws zonder berichten. */
.news__empty{ grid-column:1 / -1; margin:0; padding:22px 0; color:rgba(255,255,255,.7); font-size:15px; }

/* ---- Merkenoverzicht: het blauwe vak vult een lege plek in het raster ---------------------------
   De klassen --r3b/--r3c/--r2 worden door het blok gezet als het aantal vakken niet netjes in de rij past. */
@media (min-width:1001px){
  .brand-index--r3b .brand-index__item--cta{ grid-column:span 2; border-right:none; }
  .brand-index--r3b .brand-index__item:nth-last-child(3){ border-bottom:1px solid var(--line); }
  .brand-index--r3c .brand-index__item--cta{ grid-column:1 / -1; border-right:none; }
  .brand-index--r3c .brand-index__item:nth-last-child(2),
  .brand-index--r3c .brand-index__item:nth-last-child(3){ border-bottom:1px solid var(--line); }
}
@media (min-width:641px) and (max-width:1000px){
  .brand-index--r2 .brand-index__item--cta{ grid-column:1 / -1; border-right:none; }
  .brand-index--r2 .brand-index__item:nth-last-child(2){ border-bottom:1px solid var(--line); }
}

/* Productcarrousel: pijltjes weg als alles past; bij twee kaarten verdelen ze de breedte. */
.strip-row[hidden]{ display:none; }
.brand-slider--few > .brand-slide{ flex:1 1 0; }

/* Apparatuuroverzicht (twee kolommen): bij een oneven aantal vakken loopt het blauwe vak over de hele rij. */
@media (min-width:701px){
  .brand-index--twofill .brand-index__item--cta{ grid-column:1 / -1; border-right:none; }
  .brand-index--twofill .brand-index__item:nth-last-child(2){ border-bottom:1px solid var(--line); }
}

/* formulieren: succes-/foutmelding en honeypot */
.pt-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.pt-form__ok{ padding:36px 32px; border:1px solid rgba(14,18,19,.16); border-radius:var(--radius); background:var(--paper); }
.pt-form__ok h3{ margin:0 0 10px; font-size:22px; }
.pt-form__ok p{ margin:0; color:var(--grey-d, var(--grey)); line-height:1.6; }
.pt-form[data-busy] .btn{ opacity:.6; pointer-events:none; }

/* losse trainingen en nieuwsberichten */
.vac-layout--single{ grid-template-columns:minmax(0,820px); }
.vac-article .wpb_text_column p:last-child{ margin-bottom:0; }

/* hero-inhoud op dezelfde breedte en uitlijning als de rest van de pagina (.wrap) */
.hero__inner{ max-width:1440px; margin-left:auto; margin-right:auto; box-sizing:border-box; }

/* header-inhoud op dezelfde breedte als de rest van de pagina (.wrap); achtergrond blijft schermbreed */
.site-header{ padding-inline:max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); }

/* Pers-carrousel: kaarten sluiten op elkaar aan, net als het persblok op de homepage. */
.press-strip{ gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-left:1px solid var(--line); border-radius:var(--radius); }
.press-strip > .press-card{ border:0; border-right:1px solid var(--line); border-radius:0; }
.press-strip > .press-card{ flex:1 0 clamp(270px,30%,380px); max-width:none; }

.press-strip > .press-card .pers__outlet{ margin-top:clamp(20px,2vw,28px); }