/*
 * faqSlider — "Gerelateerde artikelen" onder een begrip uit de kennisbank.
 *
 * Dezelfde sectie als "Tips & trends" op de homepage — kop met inleiding, link
 * en stempel, daaronder een rij kaarten — met de kaart van /faq/ erin
 * (components/faqCard.css). Op samdesign.nl is het letterlijk hetzelfde
 * loop-item-template in een carrousel in plaats van een raster.
 *
 * Drie naast elkaar op een breed scherm, twee op tablet en één op mobiel. De rij
 * schuift met scroll-snap en niet met JavaScript (§8); `carousel.js` zet alleen
 * de stipjes eronder.
 *
 * Maten gemeten op https://www.samdesign.nl/faq/websites/wat-is-een-plug-in/ op
 * 1440, 1024, 767 en 390px.
 */

.faqSlider {
  margin-block: 150px;
}

/*
 * De kop is hier 70px in plaats van de 100px van .sectionTitle. Dat is de maat
 * van deze sectie zelf en niet een uitzondering van deze pagina, want dit
 * component staat nergens anders. Onder 1025px valt hij samen met .sectionTitle
 * (55/66 en 44/36), dus staat daar niets.
 */
@media (min-width: 1025px) {
  .faqSlider .sectionTitle {
    font-size: 70px;
    line-height: 90px;
    letter-spacing: -0.05em;
  }
}

/*
 * Geen row-gap tussen de kop en de regel eronder, en de 30px op de inleiding
 * zelf: de inleiding staat 30px onder de kop en de link op de ónderrand van die
 * regel. Met een row-gap zouden ze allebei zakken.
 */
.faqSliderHeader {
  row-gap: 0;
}

/*
 * Deze inleiding heeft géén streepje ervoor — anders dan bij team, expertise en
 * de klantverhalen, en gelijk aan "Tips & trends": de tekst begint op de
 * rooilijn van de sectie en niet 31px erbinnen.
 */
.faqSliderIntro {
  --introWidth: 683px;

  margin-top: 30px;
  border-left: 0;
  padding-left: 0;
}

/*
 * De link staat rechts, met zijn onderkant gelijk aan die van de inleiding.
 * Bij "Tips & trends" hangt hij aan de bovenrand; hier aan de onderrand.
 */
.faqSliderHeader > .textLink {
  margin-left: auto;
  align-self: flex-end;
}

/*
 * De 53px naar de kaarten staat hier en niet als margin-bottom op de header: de
 * stempel hangt met zijn onderkant aan de onderrand van die header, en zou met
 * die marge ertussen 53px te laag komen.
 */
.faqCards {
  display: flex;
  margin-top: 53px;
  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;
  scrollbar-width: none;
}

/*
 * 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.
 */
.faqCards::-webkit-scrollbar {
  display: none;
}

.faqCards > .faqCard {
  flex: 0 0 calc((100% - 2 * 32px) / 3);
  scroll-snap-align: start;
}

@media (max-width: 1024px) {
  .faqSlider {
    margin-block: 100px;
  }

  .faqCards {
    column-gap: 15px;
  }

  .faqCards > .faqCard {
    flex-basis: calc((100% - 45px - 15px) / 2);
  }

  /* De stempel is hier weg. */
  .faqSliderStamp {
    display: none;
  }

  /*
   * En de link zakt onder de kaarten, in het midden. Daarvoor worden de kop, de
   * inleiding en de link zelf vak in de kolom van de sectie: de header is een
   * div zonder eigen betekenis, dus display: contents kost daar niets. In de
   * HTML staat de link vóór de kaarten, dus één order is genoeg.
   *
   * margin-inline en niet align-self: hierboven staat margin-left op auto, en
   * een auto-marge weegt zwaarder dan align-self.
   */
  .faqSlider > .container {
    display: flex;
    flex-direction: column;
  }

  .faqSliderHeader {
    display: contents;
  }

  .faqSliderHeader > .textLink {
    order: 1;
    margin-block-start: 50px;
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  .faqSlider {
    margin-block: 40px;
  }

  /*
   * Onder 768px loopt de rij van rand tot rand en staan de kaarten tegen elkaar
   * aan: één kaart per veeg, precies zo breed als het scherm. Zo staat het op
   * samdesign.nl — de carrousel daar heeft `image_spacing_custom_mobile: 0` en
   * geen overstek, en zijn container staat op 0 tot 390 in plaats van 20 tot 370
   * (gemeten op 390px, en de container is CSS en dus betrouwbaar; de
   * slidebreedtes van een niet-geïnitialiseerde swiper zijn dat niet).
   *
   * `scroll-padding-inline` moet mee naar nul, anders legt de browser de
   * snapport op een padding die er niet meer is (§7).
   */
  .faqCards {
    column-gap: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }

  .faqCards > .faqCard {
    flex-basis: 100%;
  }
}