/*
 * expertiseSection — de donkerblauwe sectie met de diensten.
 *
 * De negatieve bovenmarge laat hem onder de portfoliosectie door schuiven;
 * de 360px padding erboven vangt dat weer op. Maten 1-op-1 van samdesign.nl.
 */

.expertiseSection {
  margin-top: -200px;
  padding-block: 360px 150px;
  background: var(--colorNavyMenu);
  color: var(--colorWhite);

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

.expertiseInner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 40px;
  row-gap: 30px;
}

/*
 * De inleiding erin krijgt geen eigen maximum: hij is precies deze kolom min
 * het streepje. Dat is 399px zolang de kolom 430px is en 624px zodra hij onder
 * 1131px 655px wordt — precies wat samdesign.nl doet.
 */
.expertiseIntro {
  flex: 0 1 430px;
  max-width: 430px;
}

.expertiseTitle {
  margin-bottom: 60px;
}

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

.expertiseCards {
  display: grid;
  flex: 0 1 655px;
  grid-template-columns: minmax(0, 321fr) minmax(0, 326fr);
  column-gap: 8px;
  row-gap: 30px;
  max-width: 655px;
}

.expertiseCardTitle {
  display: flex;
  align-items: center;
  margin: 0 0 23px;
  font-size: 40px;
  font-weight: 500;
  line-height: 66px;
  letter-spacing: -2px;
}

/* Het roze streepje voor de kop. Decoratie, dus een pseudo-element. */
.expertiseCardTitle::before {
  content: '';
  flex: none;
  width: 35px;
  height: 35px;
  margin-left: -7px;
  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.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") center / cover no-repeat;
}

.expertiseCardText {
  max-width: 281px;
  margin: 0 0 23px;
  color: #8d919f;
  font-size: var(--textSize);
  line-height: var(--textLine);
}

/* ------------------------------------------------------------------
   Lees meer
   ------------------------------------------------------------------ */

.expertiseCardLink {
  display: inline-flex;
  align-items: center;
  column-gap: 11px;
  color: var(--colorWhite);
  font-size: var(--textSize);
  line-height: var(--textLine);
  text-decoration: none;
  transition: margin-left 0.3s;
}

.expertiseCardLink:hover {
  margin-left: 10px;
}

.expertiseCardLinkLabel {
  border-bottom: 1px solid transparent;
}

/* Het pijltje zit in een rond vlak dat bij hover roze wordt. */
.expertiseCardLinkIcon {
  display: flex;
  align-items: center;
  padding: 12px 18px 13px;
  border-radius: 99px;
  transition: background-color 0.3s;
}

.expertiseCardLink:hover .expertiseCardLinkIcon {
  background: var(--colorPink);
}

.expertiseCardLinkIcon svg {
  flex: none;
}

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

@media (max-width: 1130px) {
  .expertiseIntro,
  .expertiseCards {
    flex-basis: 655px;
    max-width: 655px;
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  .expertiseSection {
    padding-block: 275px 40px;
  }

  .expertiseTitle {
    margin-bottom: 30px;
  }

  .expertiseCardTitle {
    margin-bottom: 12px;
    font-size: 18px;
    line-height: 29px;
    letter-spacing: -0.9px;
  }

  /*
   * Het streepje blijft ook op mobiel 35px — samdesign.nl verkleint het niet.
   * Wat wél verandert is de ruimte erna: de kop begint daar 23px vanaf de
   * kaartrand in plaats van 28px, en dat is precies die -5px.
   */
  .expertiseCardTitle::before {
    margin-right: -5px;
  }

  .expertiseCardText {
    margin-bottom: 12px;
  }

  .expertiseCardLinkIcon {
    padding: 12px;
  }
}

@media (max-width: 705px) {
  .expertiseCards {
    column-gap: 2%;
  }
}