/* ============================================================
   Uitbreidingen van het thema op de kit-vormgeving.
   style.css is de kit (zo min mogelijk aan wijzigen); wat het thema
   erbij bouwt, staat hier, in dezelfde tokens.
   ============================================================ */

/* Geslaagden in het social-blok: carrousel (1.1.0, carrousel 1.2.0).
   Zelfde aanpak als de reviewrij van de kit: scroll-snap, op mobiel tot de rand. */
.soc .carrousel { width: 100%; display: grid; gap: 14px; }
.geslaagden { list-style: none; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) 4px;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 62vw); gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gut);
  scrollbar-width: none; overscroll-behavior-x: contain; }
.geslaagden::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .geslaagden { grid-auto-columns: 250px; gap: 14px; cursor: grab;
  margin: 0; padding: 0 0 4px; scroll-padding-left: 0; } }
.geslaagde { scroll-snap-align: start; position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--r); background: rgba(255,255,255,.06); }
.geslaagde img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; user-select: none; }
.geslaagde-tekst { position: absolute; inset: auto 0 0 0; padding: 36px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
  color: #fff; display: grid; gap: 2px; line-height: 1.25; }
.geslaagde-tekst b { font-weight: 600; font-size: 16px; }
.geslaagde-tekst small { font-family: var(--font-mono); font-size: 12px; opacity: .85; }

.carrousel-knoppen { display: flex; gap: 8px; }
.carrousel.past .carrousel-knoppen { display: none; }
.carrousel-knop { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: transparent; color: inherit; border: 1.5px solid currentColor; cursor: pointer;
  transition: background .2s, color .2s, opacity .2s; }
.sec-dark .carrousel-knop { color: var(--white); border-color: rgba(255,255,255,.3); }
.carrousel-knop:hover:not(:disabled) { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.carrousel-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.carrousel-knop:disabled { opacity: .3; cursor: default; }

/* Alleen voor schermlezers (WordPress-conventie). */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }