/*
 * videoBanner — de brede videoband onder de hero.
 *
 * Het donkerblauwe vlak loopt tot 65% van de sectie; de video steekt er
 * onderaan uit. Maten 1-op-1 van samdesign.nl (R9).
 */

.videoBanner {
  position: relative;
  padding-top: 110px;
  margin-bottom: 150px;
  background: linear-gradient(var(--colorNavyMenu) 65%, transparent 0);
}

/*
 * De roze contourvorm die schuin achter de band door loopt. Decoratie, dus een
 * achtergrondafbeelding op een pseudo-element en niet een <img> in de markup.
 */
.videoBanner::before {
  content: '';
  position: absolute;
  top: -380px;
  right: 160px;
  width: 590px;
  height: 910px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='592.742' height='912.477' viewBox='0 0 592.742 912.477'%3E%3Cg transform='translate(-1159.986 -312.689)' opacity='0.3'%3E%3Cpath d='M50.443,474.552,4.814,299.178a41.993,41.993,0,0,1,13.758-43.016L300.006,9.908a42.373,42.373,0,0,1,44.758-6.1L509.688,79.221c28.213,12.887,33.263,50.853,9.578,70.707L118.537,496.321c-23.685,20.028-60.257,8.359-68.094-21.769' transform='translate(1217.392 313.707)' fill='none' stroke='%23dc0156' stroke-width='2'/%3E%3Cpath d='M484.04,54.934l45.628,175.373a41.992,41.992,0,0,1-13.758,43.016L234.3,519.578a42.373,42.373,0,0,1-44.758,6.1L24.621,450.264c-28.213-12.887-33.264-50.853-9.578-70.707L415.772,33.165c23.685-20.028,60.257-8.359,68.094,21.769' transform='translate(1161.015 694.663)' fill='none' stroke='%23dc0156' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
}

.videoBannerInner {
  position: relative;
}

/*
 * Een vaste hoogte, geen verhouding: op samdesign.nl is de band 595px hoog en
 * blijft dat ook als het venster smaller wordt, waardoor de video links en
 * rechts wordt afgesneden (`object-fit: cover`). Met `aspect-ratio: 1280 / 595`
 * — de verhouding die uit de maten op 1440px volgt — kromp de band juist mee:
 * 457px op 1024, 338 op 767 en 163 op 390, tegen 595 en 360 op de bestaande
 * site. Dat is precies de reden dat de hele pagina eronder omhoog schoof.
 *
 * Een vaste hoogte is ook voor CLS beter dan een verhouding (§9): de ruimte
 * staat vast voordat er iets geladen is. De donkerblauwe ondergrond dekt de tijd
 * tot het eerste beeld er is.
 */
.videoBannerVideo {
  display: block;
  width: 100%;
  height: 595px;
  object-fit: cover;
  background: var(--colorNavyMenu);
}

@media (max-width: 1024px) {
  .videoBanner::before {
    right: 20px;
  }
}

/*
 * Op mobiel is de band 360px hoog met 40px lucht erboven en eronder — gemeten op
 * samdesign.nl op 767 en 390px. Hier stond 60px erboven en 80px eronder; samen
 * met de te lage video liep de rest van de pagina daardoor 139px uit de pas.
 */
@media (max-width: 767px) {
  .videoBanner {
    padding-top: 40px;
    margin-bottom: 40px;
  }

  .videoBannerVideo {
    height: 360px;
  }
}

@media (max-width: 630px) {
  .videoBanner::before {
    display: none;
  }
}