/* Klantenetalage: de sites die ondernemers met de bouwer maakten.

   De tokens heten hier `--color-muted` en `--color-accent`. Mijn eerste versie
   gebruikte `--color-text-muted` en `--color-primary`; die bestaan nergens op
   de landing, dus elke regel viel terug op de hardgecodeerde LICHTE kleur en
   stond in donkere modus op ongeveer 3,6:1 tegen een bijna zwarte achtergrond.
   Een niet-bestaande variabele faalt stil naar haar fallback: het ziet er in de
   lichte modus prima uit en pas in het donker niet.
   Bewust een eigen bestand en eigen klassen. De eerste versie leende
   `.affiliate-*` van een andere pagina, en `.affiliate-lede` bestond daar
   helemaal niet: dan ziet het er goed uit tot iemand die pagina opruimt. */
.klanten-shell {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* De bovenmarge is uitgerekend uit de ECHTE maten van de balk. De landingnav
   staat op `position: fixed` en overlapt de bovenkant van de pagina; met `4rem`
   (64px) viel het woord "Klanten" er voor 20 van de 20 pixels achter.

   Mijn eerste reparatie gebruikte `--nav-height`, en dat was raden met een
   variabele erbij: die stuurt de APP-balk aan (`clamp(56px, 6vh, 72px)`), niet
   deze. Gemeten op de live pagina bleek `.landing-nav` 76px hoog en 8 tot 12px
   van de bovenrand te zweven, dus de marge klopte per toeval en hield maar 2px
   over. De balk zelf wordt gezet door `--landing-nav-height` en
   `--landing-nav-float-y` (landing-modern.css), en die twee zijn dus de maat.
   Zwevend op desktop 12px, op mobiel 8px; door de variabelen te gebruiken loopt
   dat vanzelf mee.

   LET OP: dit is niet alleen hier fout. `.affiliate-hero` verstopt zijn eigen
   eyebrow op precies dezelfde manier, ook gemeten op de live site, en de CSS
   laat nog een handvol pagina's zien met dezelfde te krappe bovenmarge. Dat is
   een aparte veegbeurt over de marketingpagina's. */
.klanten-hero {
  padding: calc(var(--landing-nav-float-y) + var(--landing-nav-height) + 2rem) 0 2rem;
  text-align: center;
}

.klanten-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
  color: var(--color-muted, #64748b);
  margin-bottom: 0.5rem;
}

.klanten-lede {
  max-width: 40rem;
  margin: 1rem auto 0;
  color: var(--color-muted, #64748b);
}

.klanten-list {
  padding-bottom: 5rem;
}

/* auto-fit, niet een vast aantal kolommen: de lijst begint bij één site en
   groeit; een raster van drie met één kaart erin leest als een fout.

   De BOVENgrens van 22rem is er om dezelfde reden. Met `1fr` verdeelden twee
   kaarten de volle 72rem onder elkaar, en dan is de foto 630px breed: dat leest
   niet meer als een kaart maar als een banner, en een kaart zonder foto werd een
   enorm gekleurd vlak. Nu blijven ze op kaartformaat en centreert de rij zich,
   bij twee klanten net zo goed als bij twaalf. */
.klanten-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 22rem));
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2rem;
}

/* De kaart is een <a> met blokinhoud, dus flex en niet block: anders bepaalt de
   lengte van de omschrijving de hoogte en staat de host van de ene kaart hoger
   dan die van de buurkaart. `--klant-accent` komt per kaart uit de merkkleur van
   de klant (inline gezet door de build) en valt terug op ons eigen accent voor
   een werkruimte die er geen heeft. */
.klanten-kaart {
  --klant-accent: var(--color-accent, #7c3aed);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 0.75rem;
  background: var(--color-surface, #ffffff);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.klanten-kaart:hover,
.klanten-kaart:focus-visible {
  border-color: var(--klant-accent);
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1.5rem rgb(15 23 42 / 8%);
}

/* Vaste verhouding, gelijk aan de miniatuur die de API maakt (640x400). De
   maat staat ook als width/height op de <img>, dus de plek is gereserveerd
   voordat het plaatje binnen is en het raster verschuift niet bij het laden. */
.klanten-beeld {
  display: block;
  aspect-ratio: 16 / 10;
  background: color-mix(in srgb, var(--klant-accent) 12%, transparent);
}

.klanten-beeld img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Geen foto is een normale stand: een site hoeft geen hero te hebben. Dan een
   vlak met de initialen, zodat het raster één vorm houdt in plaats van een gat
   te krijgen waar een plaatje hoorde.

   RUSTIG, en dat is het hele punt van deze versie. De eerste was een verloop op
   VOLLE merkkleur met een witte letter erin, en twee van die blokken naast
   elkaar lazen niet als een keuze maar als twee kapotte afbeeldingen. Nu een
   lichte tint van de kleur met het monogram IN die kleur: dat is herkenbaar van
   de klant, maar het schreeuwt niet dat er iets ontbreekt. */
.klanten-beeld--merk {
  display: grid;
  place-items: center;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--klant-accent) 14%, var(--color-surface, #fff)) 0%,
    color-mix(in srgb, var(--klant-accent) 7%, var(--color-surface, #fff)) 100%
  );
}

.klanten-initiaal {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  /* De merkkleur zelf op zijn eigen lichte tint. In de donkere modus is
     `--color-surface` donker, dus de tint wordt donker en de letter moet juist
     lichter: vandaar het mengen naar de tekstkleur en niet naar wit. */
  color: color-mix(in srgb, var(--klant-accent) 72%, var(--color-text, #0f172a));
}

/* `flex: 1` is niet decoratief: de rasterrij rekt de kaart tot de hoogte van
   zijn langste buur, maar als geen enkel kind die rek opneemt zakt de speling
   ONDER deze kolom. Dan heeft `margin-top: auto` op .klanten-host geen ruimte
   om op te eten, staan de hosts van een korte en een lange omschrijving alsnog
   op verschillende hoogtes, en houden beide kaarten een lege strook onderaan.
   Zelfde klasse als de lege-kaartrek van #8560 naar #8576. */
.klanten-tekst {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem;
}

.klanten-kaart h2 {
  font-size: 1.125rem;
  margin: 0;
}

.klanten-kaart p {
  margin: 0;
  color: var(--color-muted, #64748b);
  font-size: 0.9375rem;
}

/* `margin-top: auto` duwt de host naar de onderrand, zodat kaarten met een
   korte en een lange omschrijving hem op dezelfde hoogte tonen.

   NIET in `--klant-accent`. Dat was de eerste versie en het is dezelfde fout
   als de niet-bestaande variabele hierboven, alleen andersom: de merkkleur van
   een klant is gekozen voor ZIJN site, niet voor onze achtergrond. Een donker
   bruin (#7A5230) op ons bijna zwarte vlak haalde geen enkele contrasteis. De
   kleur van de klant draagt daarom het beeldvlak en de randkleur bij hover,
   waar hij decoratie is, en onze eigen `--color-accent` draagt de tekst, want
   die is voor beide thema's gekozen. */
.klanten-host {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-accent, #7c3aed);
  word-break: break-all;
}

.klanten-leeg {
  margin-top: 2rem;
  color: var(--color-muted, #64748b);
}

@media (prefers-reduced-motion: reduce) {
  .klanten-kaart {
    transition: none;
  }

  .klanten-kaart:hover,
  .klanten-kaart:focus-visible {
    transform: none;
  }
}

/* Uitleg onder de kaarten. Tot 21-09-2026 stond hier alleen de lege-etalage
   regel: 189 woorden op de hele pagina, en Google hield hem op "gevonden,
   momenteel niet geïndexeerd" terwijl 85 pagina's ernaar linkten. De tekst
   staat ONDER de kaarten omdat de kaarten het punt van de pagina zijn. */
.klanten-uitleg {
  margin: 3rem auto 4rem;
  max-width: 44rem;
  line-height: 1.65;
}
.klanten-uitleg h2 {
  font-size: 1.35rem;
  margin: 2rem 0 0.75rem;
}
.klanten-uitleg p {
  margin: 0 0 1rem;
  color: var(--color-muted, #64748b);
}
.klanten-uitleg a {
  color: var(--color-accent, #7c3aed);
  text-decoration: underline;
}