/*
 * teamSlider — de rij teamleden onder "Samen winnen".
 *
 * Vier naast elkaar op een breed scherm, twee op tablet en één op mobiel, met
 * een stukje van de volgende in beeld. Verschuiven gaat met scroll-snap; er is
 * geen JavaScript voor nodig.
 */

.teamSlider {
  margin-block: 150px;
}

.teamSliderHeader {
  margin-bottom: 0;
}

.teamSliderIntro {
  --introWidth: 683px;
}

.teamCards {
  display: flex;
  column-gap: 32px;
  margin-inline: calc(var(--containerPadding) * -1);
  padding-inline: var(--containerPadding);
  /* Dicht op de y-as, anders vangt de rij het scrollen van de pagina op (§7). */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--containerPadding);
  overscroll-behavior-x: contain;
}

/*
 * Geen scrollbalk: dit is een veegvlak, net als de carrousel op samdesign.nl.
 * Verschuiven blijft werken met de muis, met een veeg en — dankzij tabindex en
 * het aria-label op de lijst — met de pijltjestoetsen.
 */
.teamCards {
  scrollbar-width: none;
}

.teamCards::-webkit-scrollbar {
  display: none;
}


.teamCard {
  flex: 0 0 calc((100% - 3 * 32px) / 4);
  scroll-snap-align: start;
}

/*
 * 53px tussen de kop en de rij. Op samdesign.nl staat die op de widgetcontainer
 * van de carrousel (`margin: 53px 0 0 0`, en vanaf 1024px `53px -20px 0 0`), dus
 * op elke breedte dezelfde 53. Dat stond hier niet, waardoor de rij overal 53px
 * te hoog begon — ook op de homepage. Gemeten met de swiper-wekker uit
 * docs/beslissingen.md; zonder die wekker meet je de stand vóór de carrousel is
 * opgebouwd en valt dit niet op (§34).
 *
 * In het raster hoort hij niet: daar staat de ruimte al onder de inleiding.
 */
.teamSlider:not(.teamSliderGrid) .teamCards {
  margin-top: 53px;
}

.teamCardImage {
  width: 100%;
  height: auto;
  margin-bottom: 35px;
}

/*
 * De naam en de functie staan naast elkaar en lijnen met hun bovenkant uit, met
 * 35px eronder. Op samdesign.nl zijn het twee blokken van elk 33px hoog waar het
 * naamblok een `margin-bottom: 35px` op heeft; met `baseline` wordt de regel
 * 33,6px hoog en werd elke kaart een pixel te hoog. Die twee stonden alleen in
 * de rastervariant en gelden ook voor de rij (§34).
 */
.teamCardMeta {
  display: flex;
  align-items: flex-start;
  column-gap: 30px;
  margin: 0 0 35px;
}

.teamCardName {
  font-size: 19px;
  font-weight: 600;
  line-height: 33px;
}

/* Het puntje tussen de naam en de functie. Decoratie, dus een pseudo-element. */
.teamCardRole {
  position: relative;
  font-size: 17px;
  font-weight: 400;
  line-height: 33px;
}

.teamCardRole::before {
  content: '';
  position: absolute;
  top: 16px;
  left: -16px;
  width: 2px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
}

/*
 * De link naast de kop staat rechts op zijn regel. Zakt hij onder de inleiding
 * — dat gebeurt zodra die twee samen niet meer passen — dan blijft hij daar
 * rechts staan, en onder 768px komt hij in het midden. Zo staat het op
 * samdesign.nl: op 767px staat deze link daar op 322px van links, precies het
 * midden van de sectie.
 */
.teamSliderHeader > .textLink {
  margin-left: auto;
}

/*
 * Vanaf 1024px naar beneden loopt de rij aan de rechterkant tot de schermrand en
 * begint hij gewoon op de rooilijn: op samdesign.nl staat er vanaf dat breekpunt
 * `margin: 53px -20px 0 0` op de carrousel, dus alleen rechts een negatieve
 * marge. Gemeten op 767px: de rij is daar 747 breed en begint op x = 20, op de
 * homepage én op /wordpress-website-laten-maken/. Bij ons liep hij twee kanten
 * op, waardoor elke kaart 20px te smal was (§34).
 *
 * Zonder padding aan de zijkanten hoort ook `scroll-padding-inline` op 0: de
 * snappositie ligt dan op de rand van de rij zelf (§7).
 */
@media (max-width: 1024px) {
  .teamCards {
    margin-inline: 0 calc(var(--containerPadding) * -1);
    padding-inline: 0;
    scroll-padding-inline: 0;
  }

  /*
   * De strook van de volgende kaart die in beeld blijft. Op samdesign.nl is dat
   * `--swiper-offset-size`: 50px op de meeste pagina's en 55 op de homepage
   * onder 768px, dus een var met de homepage-waarde als standaard.
   */
  .teamCard {
    flex-basis: calc((100% - var(--teamPeek, 50px) - 32px) / 2);
  }
}

@media (max-width: 767px) {
  .teamSliderHeader > .textLink {
    margin-inline: auto;
  }

  .teamSlider {
    margin-block: 40px;
  }

  .teamCard {
    flex-basis: calc(100% - var(--teamPeek, 55px));
  }
}

/* ==================================================================
   Het raster
   ------------------------------------------------------------------
   Op /over-ons/ staat hetzelfde team niet als rij om te verschuiven maar als
   raster: vier naast elkaar, twee op een tablet en één op een telefoon, met
   alle teamleden in beeld. Maten 1-op-1 van samdesign.nl (R9).
   ================================================================== */

/* Hier staat 50px tussen de kop en de inleiding, en 50px onder de inleiding. */
.teamSliderGrid .teamSliderHeader {
  row-gap: 50px;
  margin-bottom: 50px;
}

/* En de inleiding heeft hier géén streepje ervoor, anders dan op de homepage. */
.teamSliderGrid .teamSliderIntro {
  border-left: 0;
  padding-left: 0;
}

.teamSliderGrid .teamCards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  overflow: visible;
  scroll-snap-type: none;
  margin-inline: 0;
  padding-inline: 0;
}

.teamSliderGrid .teamCard {
  flex: none;
}

/*
 * De functie krimpt op samdesign.nl in twee stappen mee met de kolom: 12px
 * zodra vier kolommen van 297px niet meer passen, en 15px vanaf het moment dat
 * er twee kolommen zijn. Die 1210px is een eigen grens van de bestaande site.
 */
@media (max-width: 1210px) {
  .teamSliderGrid .teamCardRole {
    font-size: 12px;
  }
}

@media (max-width: 1024px) {
  .teamSliderGrid .teamCards {
    grid-template-columns: repeat(2, 1fr);
  }

  .teamSliderGrid .teamCardRole {
    font-size: 15px;
  }
}

@media (max-width: 767px) {
  .teamSliderGrid .teamCards {
    grid-template-columns: 1fr;
  }
}