/*
 * clientLogos — een raster van witte kaartjes met een klantlogo erin.
 *
 * De vorm komt van de sectie "Onze partners & sponsoren" van
 * samonlinemarketing.nl: een kaartje met een heel lichte rand, een flinke radius
 * en het logo gecentreerd in het midden met ruime lucht eromheen. Bij ons zijn
 * het klanten en geen sponsoren, en staat het als strook onder de hero van
 * /over-ons/ (§20).
 *
 * Een raster en geen veegvlak: acht logo's passen in twee rijen van vier, en dan
 * staan ze er allemaal zonder dat de bezoeker iets moet doen. Daarom ook geen
 * JavaScript en geen carouselDots.
 *
 * Elk kaartje is even hoog (--clientLogosCardHeight) en het logo wordt binnen
 * die doos ingepast met `object-fit: contain`: klantlogo's hebben allemaal een
 * andere verhouding, en een logo dat de doos vult zou uitgerekt of afgesneden
 * worden.
 */

.clientLogos {
  margin-block: var(--sectionSpaceTop, 150px) var(--sectionSpaceBottom, 150px);
}

/* ------------------------------------------------------------------
   Het raster
   ------------------------------------------------------------------ */

.clientLogosGrid {
  display: grid;
  grid-template-columns: repeat(var(--clientLogosColumns, 4), minmax(0, 1fr));
  gap: 19px;
  margin: 0;
  padding: 0;
}

.clientLogo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: var(--clientLogosCardHeight, 148px);
  padding: 24px;
  border: 1px solid var(--colorNavSubBorder);
  border-radius: 12px;
  background: var(--colorWhite);
}

/*
 * Het logo houdt zijn eigen verhouding en wordt alleen kleiner gemaakt waar het
 * niet past. `max-height` zit op de kaarthoogte min de padding, zodat een hoog
 * logo niet buiten het kaartje valt.
 */
.clientLogoImage {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(var(--clientLogosCardHeight, 148px) - 48px);
  object-fit: contain;
}

/*
 * Een kaartje dat een link is, vult het kaartje helemaal: zo is het hele vlak
 * aanklikbaar en niet alleen de logopixels. De focusring komt van de reset en
 * wordt hier niet weggehaald (§7).
 */
.clientLogoLink {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------------
   Kop links, logo's rechts
   ------------------------------------------------------------------
   De vorm die samonlinemarketing.nl gebruikt: een tekstkolom links met de kop,
   een korte inleiding en een tekstlink, en het raster daarnaast. Onder 1025px
   komt de tekst boven het raster te staan — dat is de bronvolgorde, dus er komt
   geen omzetten aan te pas.
   ------------------------------------------------------------------ */

.clientLogosAside .clientLogosInner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 75px;
}

.clientLogosAside .clientLogosHead {
  flex: 1 1 320px;
  min-width: 0;
}

.clientLogosAside .clientLogosGrid {
  flex: 1 1 560px;
  min-width: 0;
}

/* Zonder kop houdt het raster de volle breedte van de container. */
.clientLogosPlain .clientLogosHead {
  margin-bottom: 50px;
}

.clientLogosIntro {
  margin-top: 27px;
}

.clientLogosLink {
  margin-top: 30px;
}

@media (max-width: 1024px) {
  .clientLogos {
    margin-block:
      var(--sectionSpaceTopTablet, var(--sectionSpaceTop, 150px))
      var(--sectionSpaceBottomTablet, var(--sectionSpaceBottom, 150px));
  }

  /*
   * Twee kolommen vanaf hier: vier logo's naast elkaar op een tablet maakt elk
   * kaartje smaller dan het logo erin.
   */
  .clientLogosGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clientLogosAside .clientLogosInner {
    display: block;
  }

  .clientLogosAside .clientLogosHead {
    margin-bottom: 50px;
  }
}

@media (max-width: 767px) {
  .clientLogos {
    margin-block:
      var(--sectionSpaceTopMobile, var(--sectionSpaceTopTablet, var(--sectionSpaceTop, 75px)))
      var(--sectionSpaceBottomMobile, var(--sectionSpaceBottomTablet, var(--sectionSpaceBottom, 75px)));
  }

  .clientLogosGrid {
    gap: 12px;
  }

  .clientLogo {
    height: 110px;
    padding: 16px;
  }

  .clientLogoImage {
    max-height: 78px;
  }

  .clientLogosPlain .clientLogosHead,
  .clientLogosAside .clientLogosHead {
    margin-bottom: 35px;
  }
}