/*
 * De kennisbank: /faq/ en /faq/<categorie>/ — CLAUDE.md §21.
 *
 * De maten komen 1-op-1 van https://www.samdesign.nl/faq/ (R9), gemeten met
 * getComputedStyle en getBoundingClientRect op 1440, 1024, 767 en 390px. Waar
 * hieronder een getal met een decimaal staat, is dat wat de bestaande site
 * berekent — niet een keuze van ons.
 *
 * Breekpunten: 1024px (kleinere kop, twee kolommen) en 767px (één kolom, een
 * container van 400px, kleinere teksten). Verder wisselt de intro vanzelf van
 * indeling: zodra de kop en de tekst niet meer naast elkaar passen, zakt de
 * tekst eronder — dat regelt `max-width: fit-content` en niet een breekpunt.
 *
 * Laadt alleen op dit archief; zie mu-plugins/samdesign-faq/inc/assets.php.
 */

/* ==================================================================
   Tokens van deze pagina
   ================================================================== */

.faqFilter {
  /*
   * Het roze streepje vóór een filterlink en vóór de titel op een kaart.
   * Eén decoratieve achtergrond, geen inline SVG: hij komt vijftien keer op de
   * pagina voor en een achtergrond kost geen extra markup of verzoek.
   *
   * Dezelfde SVG als op het portfolio-archief en in een artikel; de vulling is
   * #dc0356 — nét een andere roze dan --colorPink (#dc0155) en --colorPinkDeep
   * (#dc0556). Zo staat het in de bron van samdesign.nl.
   */
  --faqMark: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29.085' height='28.859' viewBox='0 0 29.085 28.859'%3E%3Cpath d='M2.862-8.921l.251-2.438a.951.951,0,0,1,.311-.974L21.01-29.725c.284-.237.608-.208,1.11-.18l.458.06,1.894.157a.956.956,0,0,1,.217,1.6L4.4-8.428a.956.956,0,0,1-1.541-.493' transform='matrix(0.914,-0.407,0.407,0.914,9.556,37.517)' fill='%23dc0356'/%3E%3C/svg%3E");
}

/* ==================================================================
   Kop en introtekst
   ------------------------------------------------------------------
   Twee blokken op één regel, met hun onderkanten gelijk: de kop links, de tekst
   rechts tegen de rand. Passen ze niet meer samen, dan zakt de tekst onder de
   kop. Zelfde opbouw als op het portfolio-archief.
   ================================================================== */

.faqIntro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-block: 80px;
}

.faqTitle {
  max-width: fit-content;
  color: var(--colorNavy);
}

/*
 * flex-basis 100% met een max-width erover: op een breed scherm klemt de
 * max-width de tekst op zijn eigen breedte en past hij naast de kop; zodra de
 * max-width 100% wordt, dwingt de basis hem naar de volgende regel.
 *
 * De streep zit op dit blok en loopt dus alleen langs de tekst, niet langs de
 * 40px lucht erboven.
 */
.faqLead {
  flex: 0 0 100%;
  max-width: fit-content;
  margin-top: 40px;
  margin-left: auto;
  border-left: 1px solid var(--colorNavy);
}

.faqLead p {
  max-width: 600px;
  margin-left: 30px;
  font-size: var(--textSize);
  line-height: var(--textLine);
}

/* ==================================================================
   Het filter
   ------------------------------------------------------------------
   Navigatie, geen koppen: op samdesign.nl staat elk item in een <h3> om zijn
   lettergrootte. De maten zijn gelijk, de betekenis niet (§6).
   ================================================================== */

.faqFilter {
  margin-block: 50px;
}

.faqFilterList {
  display: flex;
  flex-wrap: wrap;
  column-gap: 50px;
}

.faqFilterItem {
  display: flex;
  align-items: center;
  width: fit-content;
}

/*
 * Het streepje staat 7px buiten de container. Dat is geen vergissing maar wat de
 * bestaande site doet: een negatieve marge op het icoon, zodat de tekst wél
 * netjes op de containerrand begint.
 */
.faqFilterItem::before {
  content: "";
  display: block;
  flex: none;
  width: 22px;
  height: 22px;
  margin-left: -7px;
  background: var(--faqMark) no-repeat center / cover;
}

.faqFilterLink {
  color: var(--colorNavy);
  font-size: 20px;
  line-height: 23px;
  letter-spacing: -0.05em;
  text-decoration: none;
}

/* ==================================================================
   Het raster
   ================================================================== */

/*
 * 80px boven het raster en niet 50: de marge van het filter en die van het
 * raster vallen samen, en de grootste van de twee wint. Op samdesign.nl staat
 * er 80 tussen het filter en de eerste rij kaarten.
 */
.faqBody {
  margin-block: 80px 150px;
}

.faqGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

/* ==================================================================
   Meer bekijken
   ------------------------------------------------------------------
   Een echte link naar de volgende pagina. assets/js/pages/faq.js maakt er een
   "meer laden" van; zonder JavaScript blijft het een link die werkt.
   ================================================================== */

.faqMore {
  margin-top: 80px;
  text-align: center;
}

.faqMoreLink {
  display: inline-block;
  color: var(--colorNavy);
  font-size: 20px;
  line-height: 35px;
  text-decoration: none;
}

.faqMoreLink[aria-disabled="true"] {
  cursor: default;
  opacity: 0.4;
}

.faqEmpty {
  font-size: var(--textSize);
  line-height: var(--textLine);
}

/* ==================================================================
   1024px — twee kolommen
   ================================================================== */

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

/* ==================================================================
   767px — één kolom in een container van 400px
   ------------------------------------------------------------------
   Vanaf hier klemt samdesign.nl de inhoud van deze pagina op 400px en zet hij
   die in het midden. Dat is een eigen grens van die pagina en niet die van
   .containerNarrow, die op een tablet al naar 800px gaat.
   ================================================================== */

@media (max-width: 767px) {
  .faqFilter,
  .faqBody {
    max-width: calc(400px + var(--containerPadding) * 2);
  }

  /*
   * Alleen de introsectie houdt hier meer lucht aan de zijkant, het filter en
   * het raster niet. Zo staat het op samdesign.nl. De max-width telt die 30px
   * dus twee keer mee, anders is de tekst erbinnen 380 in plaats van 400 breed.
   */
  .faqIntro {
    max-width: calc(400px + 30px * 2);
    margin-block: 80px 50px;
    padding-inline: 30px;
  }

  /* De kop neemt een hele regel, zodat de tekst eronder komt en niet ernaast. */
  .faqTitle,
  .faqLead {
    flex-basis: 100%;
    max-width: 100%;
  }

  .faqLead {
    margin-left: 0;
  }

  .faqFilterLink {
    font-size: 23px;
    line-height: 29px;
  }

  .faqGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}