/* ==========================================================================
   Home — Quotes: wat opdrachtgevers zeggen
   ========================================================================== */
.s-quotes__grid {
  display: grid;
  gap: clamp(2.5rem, 1.75rem + 2.5vw, 3.5rem);
}
@media (min-width: 1024px) {
  .s-quotes__grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: var(--gap-lg);
    align-items: center;
  }
}

/* Introductie. De smalle maat in ch schaalt mee met de kop, zodat de
   regelval op elk scherm gelijk blijft (elke zin begint op een nieuwe regel). */
.s-quotes__titel { max-width: 13.75ch; text-wrap: pretty; }
.s-quotes__tekst { margin-top: 1.4rem; max-width: 46ch; }

/* Quotes */
.s-quotes__lijst {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

.s-quotes__kaart {
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  border-radius: var(--r-lg);
  background: var(--wit);
  box-shadow: var(--shadow-card);
}

.s-quotes__icoon {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  /* Het teken vult de viewBox niet (ca. 1/4 lucht boven, 1/6 links): negatieve
     marges zetten het optisch op de padding- en tekstrand en dicht bij de quote. */
  margin: -.625rem 0 .75rem -.3rem;
  color: var(--blauw);
}

.s-quotes__quote p {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: 1.38;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.s-quotes__bron {
  display: grid;
  gap: .15rem;
  padding-top: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  line-height: 1.4;
}
.s-quotes__bron::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: 1.1rem;
  background: var(--lijn);
}
.s-quotes__naam { font-weight: var(--fw-bold); }
.s-quotes__functie { font-size: var(--fs-small); color: var(--tekst-zacht); }

/* Gedeelde bron onder de kaarten (zolang de quotes anoniem zijn) */
.s-quotes__bron-alg {
  margin-top: 1.25rem;
  padding-inline: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--tekst-zacht);
}

/* Ritme: de kaarten verspringen licht ten opzichte van elkaar (niet bij één quote) */
@media (min-width: 640px) {
  .s-quotes__item:not(:only-child) { width: 88%; }
  .s-quotes__item:nth-child(even) { margin-left: auto; }
  /* Onder de laatste kaart; die staat bij een even aantal rechts */
  .s-quotes__lijst:has(> .s-quotes__item:nth-child(even):last-child) + .s-quotes__bron-alg { margin-left: 12%; }
}

/* Bronregel als notitie met getekend pijltje (brandbook p.18). Pijl 2 begint
   links: de tekst staat links ervan (rechts uitgelijnd tegen de staart), de
   punt wijst met lucht omhoog naar de kaart. */
.s-quotes__bron-alg.notitie { --pijl-b: 2.3rem; --pijl-h: 3.2rem; --staart-y: .66; margin-top: 1.1rem; padding-right: 0; }
.s-quotes__bron-alg .notitie__tekst { max-width: 24ch; }