/*
 * missionPanel — een donkerblauw vlak tot de vensterrand, met de kerncijfers
 * ernaast.
 *
 * De vorm komt van de sectie "Een duidelijke missie" van
 * samonlinemarketing.nl/over-ons/ (§20): het vlak begint op de linkerrand van
 * het venster, is rechts afgerond, en de tekst erin begint op de rooilijn van de
 * pagina zodat hij met de rest van de pagina uitlijnt. Rechts ernaast staan de
 * cijfers op wit.
 *
 * ------------------------------------------------------------------
 * Hoe het vlak tot de vensterrand komt
 * ------------------------------------------------------------------
 *
 * Niet door de kaart te verplaatsen, maar met een `::before` op de sectie zelf.
 * De sectie is volle breedte, dus `50%` daarvan is de helft van het venster, en
 * daaruit is de rechterrand van het vlak te berekenen:
 *
 *   50% - containerMax/2   = de afstand van de vensterrand tot de rooilijn
 *   + missionPanelWidth    = en dan zo breed als het paneel moet zijn
 *
 * Op 1440px met een container van 1280 en een paneel van 720 is dat
 * 720 - 640 + 720 = 800, en de rooilijn ligt op 80: het paneel is dus precies
 * 720 breed vanaf de rooilijn, met 80px navy links ervan. Precies wat daar staat.
 *
 * `min(100%, …)` houdt hem binnen de sectie op een smal venster, en
 * `isolation: isolate` zorgt dat `z-index: -1` niet achter de achtergrond van
 * .mainContent wegzakt maar netjes achter de inhoud van deze sectie blijft.
 *
 * Vanaf 1024px naar beneden vervalt de truc: daar stapelen het paneel en de
 * cijfers, en draagt de kaart zijn eigen achtergrond met een negatieve
 * buitenmarge om de paginamarge heen.
 */

.missionPanel {
  position: relative;
  isolation: isolate;
  margin-block: var(--sectionSpaceTop, 150px) var(--sectionSpaceBottom, 150px);
}

.missionPanelInner {
  display: grid;
  grid-template-columns: var(--missionPanelWidth, 720px) minmax(0, 1fr);
  align-items: center;
  gap: var(--missionPanelGap, 120px);
}

@media (min-width: 1025px) {
  .missionPanel {
    padding-block: 90px;
  }

  .missionPanel::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0 auto 0 0;
    width: min(
      100%,
      calc(50% - var(--containerMax) / 2 + var(--missionPanelWidth, 720px))
    );
    border-radius: 0 var(--missionPanelRadius, 20px) var(--missionPanelRadius, 20px) 0;
    background: var(--colorNavy);
  }

  /*
   * De tekst begint op de rooilijn en houdt rechts 60px van de rand van het
   * vlak — de kaart is namelijk precies zo breed als het vlak daar is.
   */
  .missionPanelCard {
    padding-right: 60px;
  }

  /*
   * De kop houdt zijn eigen breedte, zodat hij niet onder de stempel in de hoek
   * doorloopt. Zonder dat botsen "Toewijding en resultaat." en de stempel op
   * elkaar — de kop is op 59px 640px breed en de stempel begint op 500.
   */
  .missionPanelTitle {
    max-width: var(--missionPanelTitleWidth, none);
  }
}

/* ------------------------------------------------------------------
   Het paneel
   ------------------------------------------------------------------ */

.missionPanelCard {
  position: relative;
  color: var(--colorWhite);

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

.missionPanelTitle {
  margin-bottom: var(--missionPanelTitleGap, 40px);
}

/*
 * De lopende tekst is op donkerblauw iets lichter dan het wit van de kop: zo
 * staat het ook op de donkere band van mediaText.
 */
.missionPanelText {
  color: #ffffffd9;
}

.missionPanelActions {
  margin-top: 50px;
}

/*
 * De stempel hangt in de rechterbovenhoek van het paneel. Het blok is absoluut
 * en heeft geen hoogte, dus verschuift er niets door.
 */
.missionPanelStamp {
  position: absolute;
  top: 0;
  right: 60px;
  height: 0;
}

/*
 * De stempel staat bóven de kop in de rechterbovenhoek van het paneel. De kaart
 * begint 90px onder de bovenrand van het vlak (de padding van de sectie), dus
 * legt -44px de stempel 46px onder die bovenrand — waar hij op
 * samonlinemarketing.nl ook staat. Horizontaal botst hij niet met de kop: die
 * houdt zijn eigen breedte (zie .missionPanelTitle hierboven).
 */
.missionPanelStamp .stamp {
  top: -44px;
  right: 0;
  bottom: auto;
}

/* ------------------------------------------------------------------
   De cijfers
   ------------------------------------------------------------------ */

.statList {
  display: grid;
  align-content: center;
  gap: 75px;
  margin: 0;
  padding: 0;
}

.statItem {
  position: relative;
  isolation: isolate;
}

/*
 * Het lijnlogo achter het getal. De tekening is 184x284; op 60% is hij 110x170
 * en past hij achter het cijfer en zijn regel eronder. Versiering, dus heel
 * licht en met `z-index: -1` achter de tekst.
 */
.statItemDecoration {
  position: absolute;
  z-index: -1;
  top: -35px;
  left: -45px;
  width: 110px;
  opacity: 0.18;
}

.statItemDecoration svg {
  display: block;
  width: 100%;
  height: auto;
}

.statItemValue {
  margin: 0;
}

.statItemNumber {
  display: block;
  font-size: 59px;
  font-weight: 700;
  line-height: 66px;
  letter-spacing: -2.95px;
}

.statItemLabel {
  display: block;
  margin-top: 6px;
  font-size: 20px;
  font-weight: 500;
  line-height: 33px;
}

.statItemText {
  margin-top: 8px;
}

.statItemLink {
  margin-top: 22px;
}

@media (max-width: 1024px) {
  .missionPanel {
    margin-block:
      var(--sectionSpaceTopTablet, var(--sectionSpaceTop, 150px))
      var(--sectionSpaceBottomTablet, var(--sectionSpaceBottom, 150px));
  }

  .missionPanelInner {
    display: block;
  }

  /*
   * De kaart draagt hier zijn eigen achtergrond. De negatieve buitenmarge is
   * precies de paginamarge, dus loopt het vlak tot de vensterrand — en de
   * padding zet de tekst weer terug op de rooilijn.
   */
  .missionPanelCard {
    margin-inline: calc(-1 * var(--containerPadding));
    padding: 60px var(--containerPadding);
    border-radius: var(--missionPanelRadius, 20px);
    background: var(--colorNavy);
  }

  .missionPanelStamp {
    right: var(--containerPadding);
  }

  /*
   * Vanaf hier is de bovenkant van de kaart óók de bovenkant van het navy vlak:
   * de sectie heeft geen `padding-block: 90px` meer en de kaart draagt zijn
   * eigen achtergrond. De -44px van de brede stand legde de stempel daardoor
   * half op het wit boven het paneel — een rond vlak dat uit de hoek hangt.
   *
   * 46px is dezelfde afstand tot de bovenrand van het navy als op een breed
   * scherm: daar staat de kaart 90px onder die rand en de stempel 44px boven de
   * kaart, dus 46px onder de rand. Onder 768px is de stempel er niet.
   */
  .missionPanelStamp .stamp {
    top: 46px;
  }

  .statList {
    gap: 60px;
    margin-top: 60px;
  }
}

@media (max-width: 767px) {
  .missionPanel {
    margin-block:
      var(--sectionSpaceTopMobile, var(--sectionSpaceTopTablet, var(--sectionSpaceTop, 75px)))
      var(--sectionSpaceBottomMobile, var(--sectionSpaceBottomTablet, var(--sectionSpaceBottom, 75px)));
  }

  .missionPanelCard {
    padding: 45px var(--containerPadding);
  }

  .missionPanelActions {
    margin-top: 35px;
  }

  /*
   * De stempel is op een telefoon te groot voor de hoek van het paneel: hij zou
   * over de kop heen vallen. Weg dus — het is versiering.
   */
  .missionPanelStamp {
    display: none;
  }

  .statList {
    gap: 45px;
    margin-top: 45px;
  }

  .statItemNumber {
    font-size: 44px;
    line-height: 50px;
    letter-spacing: -2.2px;
  }

  .statItemLabel {
    font-size: 17px;
    line-height: 28px;
  }

  .statItemDecoration {
    top: -25px;
    left: -30px;
    width: 85px;
  }
}