/* ============================================================
   Bedrijven (ervaringen.html), 14 september 2026

   Onder één paginakop: een introtekst, drie reviews en een langzame
   logobalk. Alleen deze pagina laadt dit bestand.

   Wat hier bewust niet staat, en niet moet komen:
   - geen kader, ronde hoek, schaduw of haarlijn om of langs de balk; de
     randen zijn een verloop naar de achtergrond (mask-image);
   - geen grijswaardefilter, kleuromslag of opschaling bij hover: de balk
     pauzeert en dat is de enige terugkoppeling;
   - geen tweede lettertype en geen nieuwe kleur;
   - geen bibliotheek voor de beweging.
   ============================================================ */

.bedrijven {
  /* De grond blijft ivoor: er staan gekleurde logo's in. */
  background: var(--surface);
  overflow-x: clip;
}

/* ---- Drie reviews --------------------------------------------------- */
.bedrijven__reviews {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
  margin-top: var(--space-block);
}

@media (min-width: 760px) {
  /* Eén kolom per review, zonder vast aantal: sinds 15 september 2026 zijn
     het er tijdelijk twee, en een lege derde kolom zou als gat lezen. */
  .bedrijven__reviews {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: none;
    gap: 0;
  }

  /* Scheiding is witruimte plus één haarlijn tussen de kolommen. */
  .review + .review {
    border-left: var(--rule-w) solid var(--rule);
  }

  .review {
    padding-inline: var(--space-gutter);
  }

  .review:first-child { padding-left: 0; }
  .review:last-child { padding-right: 0; }
}

.review {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
}

.review__logo {
  display: block;
  height: 48px;
}

.review__logo img {
  display: block;
  width: auto;
  max-width: none;
  height: 28px;
}

/* Alleen het lichtgroene beeldmerk, zonder eigen vlak: iets hoger dan de
   woordmerken om hetzelfde gewicht te dragen. */
.review__logo--wierenga-en-de-graaf img { height: 40px; }

/* Logo en, bij een bedrijf zonder logo, de naam in tekst delen dezelfde
   regel van 48px. Daardoor beginnen de drie reviewteksten op één hoogte. */
.review__logo {
  display: flex;
  align-items: center;
}

.review__naam {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin: 0;
  color: var(--blauw);
  font-size: var(--h3);
}

.review__vak {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--small);
}

/* De review zelf: gewone lopende tekst, geen aanhalingstekens, sterren of
   cijfers. De kolom houdt de regel kort genoeg om prettig te lezen. */
.review__tekst {
  margin: 0;
}

.review__tekst p {
  max-width: 38ch;
  margin: 0;
  color: var(--text);
  font-size: var(--body);
  line-height: var(--leading-body);
}

/* ---- Logobalk ------------------------------------------------------- */
.logobalk {
  /* Rond 48 px per seconde bij een set van 1440px. Pas de duur hier aan,
     niet in de keyframes. */
  --logobalk-duur: 30s;
  margin-top: var(--space-section-tight);
  overflow: hidden;
  /* clip in plaats van hidden: een link die focus krijgt mag de balk niet
     zelf opzij scrollen, want dan klopt de -50% van de animatie niet meer
     en valt er een gat. hidden blijft als terugval staan. */
  overflow: clip;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

@media (max-width: 639px) {
  .logobalk {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  }
}

.logobalk__spoor {
  display: flex;
  width: max-content;
  animation: logobalk-schuif var(--logobalk-duur) linear infinite;
  /* Eén laag op de GPU voor de hele balk, niet één per logo. */
  will-change: transform;
}

.logobalk__set {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-around;
  /* Een set moet minstens zo breed zijn als het venster. Is hij smaller,
     dan valt er bij -50% aan het eind van iedere doorloop rechts een leeg
     stuk (gemeten 226px op 1440px met zes logo's). */
  min-width: 100vw;
}

/* Exact -50%: de twee sets zijn identiek, dus de naad valt samen. Alleen
   transform beweegt, nooit left, margin of width. */
@keyframes logobalk-schuif {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.logobalk:hover .logobalk__spoor,
.logobalk:focus-within .logobalk__spoor {
  animation-play-state: paused;
}

.logobalk__logo {
  display: grid;
  place-items: center;
  flex: none;
  height: 72px;
  padding-inline: clamp(28px, 3vw, 48px);
  color: inherit;
  text-decoration: none;
  /* De algemene linkregel in style.css zet een onderlijn op iedere <a>.
     In de balk hoort geen enkele lijn. */
  border-bottom: 0;
}

a.logobalk__logo:focus-visible {
  outline: 2px solid var(--blauw);
  outline-offset: -6px;
}

/* Optische maatvoering: niet één hoogte voor alles, maar een gelijk
   gewicht. Gecontroleerd naast elkaar op 1440px; bijstellen per logo is
   hier de bedoeling. Hoogte op de img, breedte auto, geen scale(). */
.logobalk__logo img {
  display: block;
  width: auto;
  max-width: none;
  height: 34px;
}

.logobalk__logo--worketeers img { height: 40px; }
.logobalk__logo--hoe-opleidingen img { height: 34px; }
/* Staand beeldmerk zonder vlak, in licht groen: groter zetten. */
.logobalk__logo--wierenga-en-de-graaf img { height: 50px; }
/* Dun lijnwerk weegt licht: groter zetten. */
.logobalk__logo--beeldmerk img { height: 46px; }
.logobalk__logo--psychologisch-centrum img { height: 52px; }

/* Plaatshouder zolang een logo ontbreekt: de naam in de huisletter. */
.logobalk__naam {
  color: var(--text-muted);
  font-size: 1.125rem;
  font-variation-settings: "opsz" 16;
  font-weight: 500;
  white-space: nowrap;
}

/* ---- Toetsenbord: de balk staat stil en alles is in beeld ------------ */
/* Pauzeren alleen is met Tab niet genoeg: een logo dat op dat moment achter
   de gemaskeerde rand of buiten de balk staat, krijgt focus zonder dat je
   het ziet. Zodra een logo toetsenbordfocus heeft, wordt de balk daarom het
   stille raster hieronder, met elk logo één keer. Op 1440px passen de zes
   logo's op één regel, dus de hoogte verandert niet. Met de muis blijft het
   gewoon pauzeren. */
.logobalk:has(:focus-visible) {
  -webkit-mask-image: none;
  mask-image: none;
}

.logobalk:has(:focus-visible) .logobalk__spoor {
  width: auto;
  animation: none;
  transform: none;
}

.logobalk:has(:focus-visible) .logobalk__set {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.logobalk:has(:focus-visible) .logobalk__set[aria-hidden="true"] {
  display: none;
}

/* ---- Stil raster: beperkte beweging en smalle schermen --------------- */
/* Geen scrollbare strook: een stil, gecentreerd, wrappend raster met elk
   logo één keer. Onder 520px ook zonder voorkeur voor beperkte beweging,
   want zes logo's in regels van drie lezen daar beter dan een strook. */
@media (prefers-reduced-motion: reduce), (max-width: 519px) {
  .logobalk {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .logobalk__spoor {
    width: auto;
    animation: none;
    will-change: auto;
  }

  .logobalk__set {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--space-4);
  }

  .logobalk__set[aria-hidden="true"] {
    display: none;
  }
}

@media (max-width: 519px) {
  .logobalk__set > .logobalk__logo {
    flex: 0 0 33.333%;
    height: 64px;
    padding-inline: var(--space-2);
  }

  .logobalk__logo img { height: 26px; }
  .logobalk__logo--worketeers img { height: 28px; }
  .logobalk__logo--hoe-opleidingen img { height: 24px; }
  .logobalk__logo--wierenga-en-de-graaf img { height: 36px; }
  .logobalk__logo--beeldmerk img { height: 34px; }
  .logobalk__logo--psychologisch-centrum img { height: 24px; }

  .logobalk__naam {
    font-size: var(--small);
    white-space: normal;
    text-align: center;
  }
}