/* /missie-visie/ (Elementor post-50) */

/* Paginakop */
.page-hero--missie {
  --ph-img: url("/assets/images/young-friends-outdoor-happy-meet-scaled-1.webp");
  --ph-pos: 0 13%;
  --ph-pos-m: -165px 55%;
  --ph-min: 438px;
  --ph-min-m: 439px;
  --ph-overlay: .76;
  --ph-align: flex-start;
  --ph-intro-w: 59.694%;
  --ph-pad-m: 0 0 10px;
}

/* --------------------------------------------
   Rijen: foto + tekst
   -------------------------------------------- */
.mv-row { display: flex; flex-direction: column; }

.mv-row__inner {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: min(100%, 1140px);
  min-height: 513px;
  margin: 0 auto;
  padding: 50px 0;
}

.mv-row__media {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 283px;
}

.mv-row__media--40 { width: 40%; }
.mv-row__media--46 { width: 46%; }

.mv-row__img {
  transition: transform var(--ease-transform);
  will-change: transform;
}

.mv-row__img img { display: block; width: 100%; max-width: 100%; height: auto; }

@media (hover: hover) {
  .mv-row__img:hover { transform: scale(1.02); }
}

.mv-row__body {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: 53%;
  min-width: 0;
}

.mv-row__body--53 { padding: 10px; }
.mv-row__body--werk { gap: 15px; }

.mv-row__title { color: var(--color-text); font-size: 40px; }
.mv-row__text { padding-top: 10px; }

/* "Hoe gaan wij te werk?": tekst met -20px marge onder, lijsten met pijl-iconen */
.mv-work__lead p { margin-bottom: calc(.9rem - 20px); }

.mv-list { margin: 0; padding: 0 0 0 20px; list-style: none; }

.mv-list__item { display: flex; align-items: center; }

.mv-list__icon { display: flex; }

.mv-list__icon svg {
  width: 14px;
  height: 14px;
  margin-right: 3.5px;
  fill: var(--color-primary);
}

.mv-list__text {
  padding-left: 5px;
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
}

/* --------------------------------------------
   Contactband (donker)
   -------------------------------------------- */
.mv-cta { display: flex; flex-direction: column; background-color: var(--color-slate); }

.mv-cta__inner {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 90%;
  min-height: 238px;
  margin: 0 auto;
  padding: 20px 0;
}

.mv-cta__body {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: 56%;
  min-width: 0;
  padding: 10px;
}

.mv-cta__title { color: var(--color-white); font-size: 50px; }
.mv-cta__text { padding-top: 10px; color: var(--color-white); }
.mv-cta__btns { display: flex; gap: 10px; }
.mv-cta__btn { flex: 0 1 auto; min-width: 0; }   /* widget-wrapper krimpt, knop zelf niet (zoals Elementor) */

.btn--white.mv-cta__contact {
  --btn-border: var(--color-text);
  --btn-hover-border: var(--color-primary);
  border-width: 2px;
}

/* --------------------------------------------
   Kernwaarden (icoonblokken op oranje foto)
   -------------------------------------------- */
.mv-values {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 150px;
  padding: 120px 100px;
  background-color: var(--color-secondary);
  background-image: url("/assets/images/college-colleagues-studying-together-scaled-1.webp");
  background-position: 0 -99px;
  background-size: cover;
}

.mv-values::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-primary);
  opacity: .9;
}

.mv-value {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 7px;
  width: 20.398%;
  max-width: 20.398%;
  text-align: center;
  transition: transform var(--ease-transform);
  will-change: transform;
}

@media (hover: hover) {
  .mv-value:hover { transform: scale(1.03); }
}

.mv-value__icon { display: flex; justify-content: center; }

.mv-value__circle {
  display: flex;
  padding: .5em;
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-slate);
  fill: var(--color-slate);
  font-size: 50px;
  line-height: 1;
}

.mv-value__circle svg { display: block; width: 1em; height: 1em; }

.mv-value__content { flex: 1 1 auto; }

.mv-value__title {
  margin: 8px 0 0;
  color: var(--color-white);
  font-family: var(--font-main);
  font-size: 35px;
  font-weight: 600;
  line-height: 1.2;
}

.mv-value__text {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
}

/* ============================================
   Tablet (≤1024)
   ============================================ */
@media (max-width: 1024px) {
  .mv-values { background-position: 0 0; }
}

/* ============================================
   Mobiel (≤767)
   ============================================ */
@media (max-width: 767px) {
  .mv-row { padding: 0 15px; }

  .mv-row__inner {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 5px;
    max-width: min(100%, 767px);
    padding: 20px 0;
  }

  .mv-row--bieden .mv-row__inner,
  .mv-row--werk .mv-row__inner { flex-direction: column-reverse; }
  .mv-row--doel .mv-row__inner { padding: 20px 0 30px; }

  .mv-row__media,
  .mv-row__body { width: 100%; }
  .mv-row__media { min-height: 186px; }
  .mv-row__body--53 { padding: 0; }
  .mv-row--doel .mv-row__body--53 { padding: 10px 0 0; }

  .mv-row__title { font-size: 25px; }

  .mv-list__item:not(:last-child) { padding-bottom: 8px; }
  .mv-list__item:not(:first-child) { margin-top: 8px; }

  .mv-cta { padding: 0 15px; }

  .mv-cta__inner {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 5px;
    max-width: min(100%, 767px);
    min-height: 0;
    padding: 30px 0;
  }

  .mv-cta__body { width: 100%; padding: 0; }
  .mv-cta__title { font-size: 25px; }
  .mv-cta__text { line-height: .9em; }
  .mv-cta__btns { flex-wrap: wrap; }
  .mv-cta__btns .btn { font-size: 13px; }

  .mv-values {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 15px;
    padding: 60px 15px;
    background-position: -290px 0;
  }

  .mv-values .wave svg { width: calc(234% + 1.3px); --wave-h: 30px; }

  .mv-value { width: 100%; max-width: 100%; text-align: left; }
  .mv-value__icon { justify-content: flex-start; }
  .mv-value__circle { font-size: 33px; }
  .mv-value__title { font-size: 25px; }
}