/*
 * highlightBand — de donkere band met een kop van twee maten, tekst, een knop en
 * een beeld ernaast.
 *
 * Maten 1-op-1 van https://www.samdesign.nl/website-laten-maken/ (R9), gemeten
 * op 1440, 1024, 767 en 390px.
 *
 * Vanaf 1024px naar beneden staat het beeld onder de tekst in plaats van ernaast,
 * met 70px ertussen.
 */

/*
 * Dezelfde twee flauwe lijnen als bij benefitGrid, maar dan uitgesneden over het
 * hele vlak. Deze tekening heeft geen eigen vlak eronder, dus de kleur komt van
 * de achtergrondkleur.
 *
 * Elke `#` in de data-URI staat als `%23`. Onversleuteld begint een `#` in een
 * URL de fragment-identifier: de browser kapt de tekening daar af en laadt hem
 * helemaal niet. Dat was hier vier keer mis (`fill='#1a223e'`,
 * `url(#highlightBandClip)` en twee keer `stroke='#fff'`), waardoor er alleen de
 * kleur eronder stond. Zelfde fout stond in `benefitGrid.css`.
 */
.highlightBand {
  margin-block: 150px;
  padding-block: 150px;
  background: var(--colorNavyMenu) url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='1920' height='1183' viewBox='0 0 1920 1183'><defs><clipPath id='highlightBandClip'><rect width='1920' height='1183' transform='translate(0 5169.573)' fill='%231a223e'/></clipPath></defs><g transform='translate(0 -5169.572)' clip-path='url(%23highlightBandClip)'><path d='M102.436,986.8,6.356,622.122a86.678,86.678,0,0,1,28.971-89.449L627.94,20.6A90.124,90.124,0,0,1,722.186,7.927l347.28,156.808c59.408,26.8,70.043,105.746,20.169,147.03l-843.814,720.3c-49.873,41.647-126.884,17.383-143.386-45.268' transform='translate(908.486 4696.523)' fill='none' stroke='%23fff' stroke-width='1' opacity='0.25'/><path d='M1019.258,89.18l96.08,364.678a86.677,86.677,0,0,1-28.971,89.449l-592.98,512.071a90.125,90.125,0,0,1-94.246,12.675L51.861,911.245c-59.408-26.8-70.043-105.746-20.169-147.03l843.814-720.3c49.873-41.646,126.884-17.383,143.386,45.268' transform='translate(786.013 5428.814)' fill='none' stroke='%23fff' stroke-width='1' opacity='0.25'/></g></svg>") center / cover no-repeat;
  color: var(--colorWhite);

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

.highlightBandInner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  row-gap: 70px;
}

.highlightBandBody {
  flex: 0 1 var(--highlightTextWidth, 50%);
  max-width: var(--highlightTextWidth, 50%);
}

.highlightBandMedia {
  flex: 0 1 var(--highlightMediaWidth, 50%);
  max-width: var(--highlightMediaWidth, 50%);
  margin: 0;
}

/*
 * Een vaste hoogte snijdt het beeld uit in plaats van het te laten meeschalen —
 * op samdesign.nl is de telefoonmockup 556 bij 650, terwijl het bestand zelf een
 * andere verhouding heeft.
 *
 * Drie classes in de selector, want de reset heeft `img[width][height] { height:
 * auto }` staan en dat weegt zwaarder dan één class.
 */
.highlightBand .highlightBandMedia .highlightBandImage {
  display: block;
  width: 100%;
  height: var(--highlightMediaHeight, auto);
  object-fit: cover;
}

/* ------------------------------------------------------------------
   De kop
   ------------------------------------------------------------------ */

.highlightBandTitle {
  margin-bottom: 57px;
}

/*
 * De tweede regel: kleiner, op een eigen regel, met het roze schuine streepje
 * ervoor. Het streepje is versiering, dus een achtergrond op ::before en geen
 * teken in de tekst.
 */
.highlightBandSubtitle {
  display: block;
  font-size: 40px;
  font-weight: 400;
  line-height: 50px;
  letter-spacing: normal;
}

.highlightBandSubtitle::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 29px;
  margin-right: 8px;
  background: 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.921.251-2.438a.95.95 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.538-.493' transform='matrix(0.914 -0.407 0.407 0.914 9.556 37.517)' fill='%23dc0356'/%3E%3C/svg%3E") center / cover no-repeat;
}

/* ------------------------------------------------------------------
   Tekst en knop
   ------------------------------------------------------------------ */

/*
 * flow-root, zodat de witregel onder de laatste alinea binnen dit blok blijft en
 * niet met de marge eronder samenvalt. Anders wint de grootste van de twee en
 * doet "omhoog trekken" niets.
 */
.highlightBandText {
  display: flow-root;
  margin-bottom: calc(57px - var(--highlightTextPull, 0px));
}

.highlightBandText > :last-child {
  margin-bottom: 0;
}

/* Zie mediaText.css voor het verhaal achter de witregel en het omhoog trekken. */
.highlightBandTextTrailing > :last-child {
  margin-bottom: 1.5em;
}

.highlightBandActions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

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

@media (max-width: 1024px) {
  .highlightBand {
    margin-block: 100px;
    padding-block: 100px;
  }

  /*
   * Onder elkaar: de tekst over de volle breedte en het beeld eronder in het
   * midden, op zijn eigen breedte.
   */
  .highlightBandBody {
    flex-basis: 100%;
    max-width: 100%;
  }

  .highlightBandMedia {
    flex-basis: 100%;
    max-width: 100%;
    text-align: center;
  }

  .highlightBand .highlightBandMedia .highlightBandImage {
    width: var(--highlightMediaWidth, 100%);
    max-width: 100%;
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  .highlightBand {
    margin-block: 75px;
    padding-block: 75px;
  }

  .highlightBandTitle {
    margin-bottom: 25px;
  }

  .highlightBandText {
    margin-bottom: calc(25px - var(--highlightTextPull, 0px));
  }

  .highlightBandSubtitle {
    margin-top: 15px;
    font-size: 30px;
    line-height: 30px;
  }

  .highlightBandSubtitle::before {
    width: 11px;
    height: 22px;
  }

  .highlightBand .highlightBandMedia .highlightBandImage {
    width: var(--highlightMediaWidthMobile, var(--highlightMediaWidth, 100%));
    height: var(--highlightMediaHeightMobile, var(--highlightMediaHeight, auto));
  }
}