/* Het vragenblok.
   Eigen bestand en niet in kennisbank.css, want ditzelfde blok staat onder een
   kennisbankartikel, onder een productcategorie en onder een merk. Zolang het
   in kennisbank.css stond kwam het op de winkelarchieven ongestyled binnen: dat
   stijlblad laadt daar niet. Zie inc/assets.php voor de voorwaarde.
   Het blok blijft zichtbaar, geen accordeon: FAQPage mag alleen om wat op het
   scherm staat, zie docs/ai-en-seo.md. */

/* --- Vragenblok -----------------------------------------------------------
   Zelfde vorm als het blok op de klantenservicepagina: wie dat kent hoeft geen
   tweede vorm te leren. Zichtbaar, en pas daarom mag er FAQPage omheen. */

.faq {
  display: grid;
  gap: 0;
  margin-top: var(--bsv-space-3);

  /* De streep onder het blok zit op de omhulling en niet op het laatste item.
     In twee kolommen is er geen "laatste" meer, en dan zou er onder de ene
     kolom wel een streep staan en onder de andere niet. */
  border-bottom: 1px solid var(--bsv-line);
}

.faq__item {
  display: flex;
  gap: var(--bsv-space-3);
  padding: 18px 0;
  border-top: 1px solid var(--bsv-line);
}

/* Het cijfer doet werk: het telt de vragen en het is het enige gekleurde vlak
   in het blok. docs/design-reference.md vraagt om één accentkleur die iets
   betekent, niet om een palet. */
.faq__mark {
  display: grid;
  flex: 0 0 28px;
  place-items: center;
  height: 28px;
  border-radius: var(--bsv-radius-sm);
  background: var(--bsv-yellow);
  color: var(--bsv-black);
  font-size: 12.5px;
  font-weight: 800;
}

/* De leesbreedte staat vast, ook als het blok maar één vraag heeft en dus één
   kolom blijft. Zonder deze grens werd zo'n antwoord op een breed scherm een
   regel van ruim honderdvijftig tekens. In twee kolommen raakt de grens niets:
   een kolom is daar smaller dan dit. */
.faq__item h3 { max-width: 70ch; margin-bottom: 7px; font-size: var(--bsv-fs-md); line-height: 1.3; }
.faq__item p { max-width: 70ch; margin: 0; color: var(--bsv-body); font-size: var(--bsv-fs-copy); line-height: var(--bsv-lh-copy); }

/* Twee kolommen zodra er ruimte is en er genoeg vragen zijn. De antwoorden
   zijn kort, en vier vragen onder elkaar maken de pagina langer dan de inhoud
   rechtvaardigt. Bij één of twee vragen blijft het één kolom: een half gevulde
   rij ziet eruit als een blok waar iets ontbreekt. */
@media (width >= 761px) {
  .faq__item { gap: var(--bsv-space-4); }

  .faq:has(.faq__item:nth-child(3)) {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--bsv-space-6);
  }
}