/*
 * faqCard — de kaart van een begrip uit de kennisbank.
 *
 * Staat op twee plekken: in het raster van /faq/ en in de rij onder een begrip
 * ("Gerelateerde artikelen", components/faqSlider.css). Op samdesign.nl is het
 * daar letterlijk hetzelfde loop-item-template, dus staat de kaart hier en niet
 * in een van de twee.
 *
 * Het blok met de foto, de datum en de titel schuift 50px over de afbeelding
 * heen; daar staat de foto van de schrijver in.
 *
 * Maten gemeten op https://www.samdesign.nl/faq/ op 1440, 1024, 767 en 390px.
 */

.faqCard {
  /*
   * Het roze streepje vóór de titel. 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");

  display: flex;
  flex-direction: column;
}

.faqCardMedia {
  display: block;
}

/*
 * Een vaste hoogte en geen beeldverhouding: zo staat het op samdesign.nl
 * (370px, onder 768px 350px), dus is de uitsnede op elke breedte anders hoog dan
 * breed. Drie classes in de selector, want de reset heeft
 * img[width][height] { height: auto } staan en dat weegt zwaarder dan twee.
 *
 * Geen inzoomen bij hover: de kaart op samdesign.nl doet dat niet (gemeten met
 * een muis op de eerste kaart — de transform blijft `none`), anders dan de kaart
 * op het portfolio-archief en die van "Tips & trends".
 */
.faqCard .faqCardMedia .faqCardImage {
  width: 100%;
  height: 370px;
  object-fit: cover;
  object-position: center;
}

/*
 * Het blok met de foto, de datum en de titel schuift 50px over de afbeelding
 * heen. position: relative, zodat het over het beeld valt en niet eronder.
 */
.faqCardBody {
  position: relative;
  padding: 0 20px 0 25px;
  margin-top: -50px;
}

.faqCard .faqCardBody .faqCardAuthor {
  width: 81px;
  height: 81px;
  margin-bottom: 15px;
  object-fit: cover;
}

.faqCardDate {
  margin: 0 0 15px;
  color: var(--colorNavy);
  font-size: 20px;
  font-weight: 300;
  line-height: 33px;
}

/*
 * De titel met het streepje ervoor. De kop zelf is de flexbox en het streepje is
 * er een vak in: dan houdt een titel over twee regels zijn inspring op allebei
 * de regels, precies als op samdesign.nl (waar het streepje op het omhulsel
 * staat en de kop ernaast).
 */
.faqCardTitle {
  display: flex;
  align-items: center;
  margin: 0;
  color: var(--colorNavy);
  font-size: 26px;
  font-weight: 400;
  line-height: 33px;
  letter-spacing: -0.05em;
}

.faqCardTitle::before {
  content: "";
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  margin-left: -7px;
  background: var(--faqMark) no-repeat center / cover;
}

/*
 * Op samdesign.nl is de titel platte tekst en is alleen de afbeelding
 * aanklikbaar; bij ons is hij een link (zie docs/beslissingen.md). In rust ziet
 * hij er daardoor hetzelfde uit: de streep is er wel, maar doorzichtig. Zo
 * verschuift er niets en loopt de overgang zacht — zelfde behandeling als de
 * kaarten van "Tips & trends".
 */
.faqCardLink {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  transition: text-decoration-color 0.2s;
}

.faqCardLink:hover {
  text-decoration-color: currentcolor;
}

@media (prefers-reduced-motion: reduce) {
  .faqCardLink {
    transition: none;
  }
}

/* ==================================================================
   767px — kleinere uitsnede, kleinere datum en titel
   ================================================================== */

@media (max-width: 767px) {
  .faqCard .faqCardMedia .faqCardImage {
    height: 350px;
  }

  .faqCardDate {
    font-size: 14px;
    line-height: 14px;
  }

  .faqCardTitle {
    font-size: 24px;
    line-height: 25px;
  }
}