/*
 * benefitGrid + benefitCard — de donkerblauwe sectie "Wat kun je van ons
 * verwachten?".
 *
 * Maten 1-op-1 van https://www.samdesign.nl/website-laten-maken/ (R9), gemeten
 * op 1440, 1024, 767 en 390px.
 *
 * Drie kaarten naast elkaar op een breed scherm, twee op een tablet en één op
 * een telefoon; ze houden hun 350px en de ruimte ertussen komt uit
 * space-between, precies zoals daar.
 */

/*
 * De twee flauwe lijnen die schuin door het vlak lopen zitten in een SVG van
 * 1920 bij 1485 die het vlak ook zijn kleur geeft (#1a223e); de
 * achtergrondkleur eronder is de kleur die samdesign.nl daar instelt en die je
 * ziet als de tekening niet laadt. Als data-URI en niet als bestand: dat scheelt
 * een verzoek (R6) en het is maar een kilobyte.
 */
.benefitGrid {
  padding-block: 150px;
  background: var(--colorNavy) url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='1920' height='1485' viewBox='0 0 1920 1485'><defs><clipPath id='benefitGridClip'><rect width='1920' height='1316' transform='translate(0 0)' fill='%231a223e'/></clipPath></defs><g transform='translate(-5367 -1723.5)'><rect width='1920' height='1485' transform='translate(5367 1723.5)' fill='%231a223e'/><g transform='translate(5367 1723.572)' clip-path='url(%23benefitGridClip)'><path d='M102.436,940.088,6.356,592.673c-8.8-31.4,2.567-64.515,28.971-85.215L627.94,19.627A93.734,93.734,0,0,1,722.186,7.552l347.28,149.385c59.408,25.53,70.043,100.74,20.169,140.07L245.822,983.213c-49.873,39.675-126.884,16.56-143.386-43.125' transform='translate(908.486 -450.657)' fill='none' stroke='%23fff' stroke-width='1' opacity='0.25'/><path d='M1019.258,86.057l96.08,347.415c8.8,31.395-2.567,64.515-28.971,85.215l-592.98,487.831a93.734,93.734,0,0,1-94.246,12.075L51.861,869.208c-59.408-25.53-70.043-100.74-20.169-140.07L875.506,42.932c49.873-39.675,126.884-16.56,143.386,43.125' transform='translate(786.013 245.871)' fill='none' stroke='%23fff' stroke-width='1' opacity='0.25'/></g></g></svg>") center top repeat;
  color: var(--colorWhite);

  /* Onder de muis houdt een link hier zijn roze: #092041 is de achtergrond (main.css). */
  --linkHoverColor: var(--colorPink);
}

.benefitGridInner {
  display: flex;
  flex-direction: column;
  row-gap: 50px;
}

/*
 * Boven 1024px staat er 100px tussen de inleiding en de eerste kaart: de 50 van
 * row-gap plus deze 50. Daaronder is het alleen die 50.
 */
@media (min-width: 1025px) {
  .benefitGridHeader {
    margin-bottom: 50px;
  }
}

.benefitGridTitle {
  max-width: var(--titleWidth, none);
  margin-bottom: 50px;
}

/*
 * De streep voor de inleiding staat hier 39px van de tekst en niet de 30 van
 * .sectionIntro; zo staat het op samdesign.nl.
 */
.benefitGridIntro {
  padding-left: 39px;
}

/* ------------------------------------------------------------------
   De kaarten
   ------------------------------------------------------------------ */

.benefitCards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 50px;
}

.benefitCard {
  flex: 0 0 350px;
}

/*
 * De hoogte van dit blok (105,5px) is de regelhoogte van de body om een
 * inline-blok van 98px heen — dezelfde truc als bij de pijl onder de hero. Op
 * display: block zou het 98px zijn en schuift alles eronder 7,5px omhoog.
 */
.benefitCardIcon {
  margin-bottom: 15px;
}

.benefitCardIconImage {
  display: inline-block;
  width: 98px;
  height: 98px;
}

.benefitCardTitle {
  margin: 0 0 24px;
  font-size: 40px;
  font-weight: 500;
  line-height: 48px;
  letter-spacing: -2px;
}

.benefitCardText {
  margin: 0;
  font-size: var(--textSize);
  line-height: var(--textLine);
}

/* ==================================================================
   Kleiner dan 1440
   ================================================================== */

@media (max-width: 1024px) {
  .benefitCardTitle {
    line-height: 55px;
  }
}

@media (max-width: 767px) {
  .benefitGrid {
    padding-block: 70px;
  }

  .benefitCardIconImage {
    width: 70px;
    height: 70px;
  }

  .benefitCardTitle {
    font-size: 35px;
    line-height: 35px;
    letter-spacing: -1.75px;
  }
}