/*
 * mAIndblowing.com – Ontdek Interactica
 * Plaats dit bestand in: /wp-content/themes/[childtheme]/css/interactica.css
 * Alle stijlen zijn beperkt tot elementen met een mbi-klasse.
 */

:where(.mbi-hero, .mbi-feature, .mbi-series, .mbi-projects, .mbi-closing) {
  --mbi-paper: #f4f1ea;
  --mbi-paper-light: #faf8f3;
  --mbi-ink: #162a3a;
  --mbi-red: #b94339;
  --mbi-teal: #2e7b80;
  --mbi-line: rgba(22, 42, 58, 0.16);
  --mbi-shadow: 0 18px 50px rgba(22, 42, 58, 0.10);
}

/* 1. HERO */
.mbi-hero {
  position: relative;
  overflow: hidden;
  background: var(--mbi-paper) !important;
  padding: 110px 0 92px !important;
}

.mbi-hero::before,
.mbi-hero::after {
  position: absolute;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(46, 123, 128, 0.20);
  border-radius: 50%;
  animation: mbi-breathe 9s ease-in-out infinite;
}

.mbi-hero::before {
  width: 430px;
  height: 430px;
  top: -270px;
  right: -80px;
}

.mbi-hero::after {
  width: 270px;
  height: 270px;
  left: -170px;
  bottom: -165px;
  animation-delay: -3s;
}

.mbi-hero .et_pb_row,
.mbi-section-intro.et_pb_row {
  width: 90%;
  max-width: 920px;
}

.mbi-eyebrow {
  margin-bottom: 18px !important;
  color: var(--mbi-red) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
}

.mbi-title h1 {
  margin: 0;
  padding: 0;
  color: var(--mbi-ink) !important;
  font-size: clamp(42px, 5.3vw, 68px) !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em;
}

.mbi-lead {
  max-width: 820px;
  margin: 26px auto 0 !important;
  color: rgba(22, 42, 58, .82) !important;
  font-size: 19px !important;
  line-height: 1.75 !important;
}

.mbi-buttons {
  margin-top: 35px;
}

.mbi-buttons.et_pb_row {
  display: flex;
  width: 90%;
  max-width: 480px;
  justify-content: center;
  gap: 12px;
}

.mbi-buttons .et_pb_column {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

.mbi-button-primary .et_pb_button,
.mbi-button-secondary .et_pb_button,
.mbi-feature-button .et_pb_button,
.mbi-closing-button .et_pb_button {
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  transition: transform .25s ease, background-color .25s ease,
              border-color .25s ease, color .25s ease !important;
}

.mbi-button-primary .et_pb_button,
.mbi-feature-button .et_pb_button {
  border-color: var(--mbi-red) !important;
  background: var(--mbi-red) !important;
  color: #fff !important;
}

.mbi-button-secondary .et_pb_button {
  border-color: rgba(22, 42, 58, .40) !important;
  background: transparent !important;
  color: var(--mbi-ink) !important;
}

.mbi-button-primary .et_pb_button:hover,
.mbi-button-secondary .et_pb_button:hover,
.mbi-feature-button .et_pb_button:hover,
.mbi-closing-button .et_pb_button:hover {
  transform: translateY(-2px);
}

/* Pulspunt */
.mbi-pulse {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mbi-pulse::before {
  display: inline-block;
  width: 8px;
  height: 8px;
  content: "";
  border-radius: 50%;
  background: var(--mbi-red);
  box-shadow: 0 0 0 0 rgba(185, 67, 57, .34);
  animation: mbi-pulse 2.8s ease-out infinite;
}

/* 2. UITGELICHT PROJECT */
.mbi-feature {
  background: var(--mbi-paper-light) !important;
  padding: 105px 0 !important;
}

.mbi-feature > .et_pb_row {
  display: flex;
  width: 90%;
  max-width: 1320px;
  align-items: center;
  gap: 6%;
}

.mbi-feature .et_pb_column:first-child { width: 57% !important; }
.mbi-feature .et_pb_column:last-child { width: 37% !important; }

.mbi-feature-image {
  overflow: hidden;
  border: 1px solid var(--mbi-line);
  border-radius: 12px;
  box-shadow: var(--mbi-shadow);
}

.mbi-feature-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.mbi-feature-image:hover img { transform: scale(1.025); }

.mbi-feature-label,
.mbi-series-number {
  color: var(--mbi-red) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase;
}

.mbi-feature-title h2,
.mbi-section-title h2 {
  color: var(--mbi-ink) !important;
  font-size: clamp(32px, 3.3vw, 48px) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
}

.mbi-feature-copy,
.mbi-section-copy {
  color: rgba(22, 42, 58, .78) !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
}

.mbi-interaction-hint {
  margin: 24px 0 !important;
  color: var(--mbi-teal) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .03em;
}

/* 3. REEKSEN */
.mbi-series {
  background: var(--mbi-paper) !important;
  padding: 110px 0 120px !important;
}

.mbi-section-intro {
  margin-bottom: 58px !important;
  text-align: center;
}

.mbi-series-row.et_pb_row {
  display: grid;
  width: 90%;
  max-width: 1320px;
  margin-bottom: 34px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
}

.mbi-series-row .et_pb_column {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

.mbi-series-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--mbi-line);
  border-radius: 12px;
  background: var(--mbi-paper-light);
  box-shadow: 0 8px 26px rgba(22, 42, 58, .05);
  transition: transform .32s ease, border-color .32s ease,
              box-shadow .32s ease;
}

.mbi-series-card::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  content: "";
  background: var(--mbi-red);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .32s ease;
}

.mbi-series-card:hover {
  transform: translateY(-5px);
  border-color: rgba(185, 67, 57, .50);
  box-shadow: var(--mbi-shadow);
}

.mbi-series-card:hover::after { transform: scaleY(1); }

.mbi-series-image { margin-bottom: 0 !important; }

.mbi-series-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.mbi-series-content {
  position: relative;
  padding: 30px 34px 34px;
}

.mbi-series-content h3 {
  margin: 7px 45px 10px 0;
  padding: 0;
  color: var(--mbi-ink) !important;
  font-size: clamp(22px, 2vw, 29px) !important;
  font-weight: 550 !important;
  line-height: 1.2 !important;
}

.mbi-series-content p {
  color: rgba(22, 42, 58, .74);
  font-size: 15px;
  line-height: 1.65;
}

.mbi-series-content::after {
  position: absolute;
  top: 34px;
  right: 34px;
  content: "\2192";
  color: var(--mbi-red);
  font-size: 25px;
  transition: transform .3s ease;
}

.mbi-series-card:hover .mbi-series-content::after {
  transform: translateX(5px);
}

/* 4. PROJECTRASTER */
.mbi-projects {
  background: #f8f6f1 !important;
  padding: 110px 0 120px !important;
}

.mbi-projects .mbi-section-intro { margin-bottom: 45px !important; }

#jig-interactica {
  width: 90%;
  max-width: 1320px;
  margin: 0 auto;
}

#jig-interactica .jig-imageContainer {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  outline: none;
  border-radius: 8px !important;
}

#jig-interactica .jig-imageContainer::after {
  position: absolute;
  z-index: 5;
  inset: 0;
  content: "";
  pointer-events: none;
  box-sizing: border-box;
  border: 1px solid rgba(185, 67, 57, .65);
  border-radius: inherit;
}

#jig-interactica .jig-filterButtons {
  margin-bottom: 34px !important;
  text-align: center;
}

#jig-interactica .jig-filterButton {
  margin: 4px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(22, 42, 58, .26) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--mbi-ink) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  transition: all .24s ease !important;
}

#jig-interactica .jig-filterButton:hover,
#jig-interactica .jig-filterButton.selected,
#jig-interactica .jig-filterButton.jig-filterButtonSelected {
  border-color: var(--mbi-red) !important;
  background: var(--mbi-red) !important;
  color: #fff !important;
}

/* 5. AFSLUITING */
.mbi-closing {
  position: relative;
  overflow: hidden;
  background: var(--mbi-ink) !important;
  padding: 95px 0 !important;
  text-align: center;
}

.mbi-closing .et_pb_row {
  width: 90%;
  max-width: 820px;
}

.mbi-closing-title h2 {
  color: #fff !important;
  font-size: clamp(34px, 4vw, 52px) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
}

.mbi-closing-copy {
  margin: 22px auto 30px !important;
  color: rgba(255, 255, 255, .75) !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
}

.mbi-closing-button .et_pb_button {
  border-color: var(--mbi-red) !important;
  background: var(--mbi-red) !important;
  color: #fff !important;
}

/* ANIMATIES */
@keyframes mbi-pulse {
  0% { box-shadow: 0 0 0 0 rgba(185, 67, 57, .34); }
  70%, 100% { box-shadow: 0 0 0 11px rgba(185, 67, 57, 0); }
}

@keyframes mbi-breathe {
  0%, 100% { transform: scale(.96); opacity: .55; }
  50% { transform: scale(1.04); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mbi-hero::before,
  .mbi-hero::after,
  .mbi-pulse::before { animation: none; }

  .mbi-feature-image img,
  .mbi-series-card,
  .mbi-series-content::after { transition: none; }
}

/* TABLET */
@media (max-width: 980px) {
  .mbi-hero { padding: 88px 0 75px !important; }

  .mbi-feature > .et_pb_row {
    display: block;
  }

  .mbi-feature .et_pb_column:first-child,
  .mbi-feature .et_pb_column:last-child {
    width: 100% !important;
  }

  .mbi-feature .et_pb_column:last-child {
    margin-top: 48px !important;
  }

  .mbi-series-row.et_pb_row {
    grid-template-columns: 1fr;
  }
}

/* SMARTPHONE */
@media (max-width: 767px) {
  .mbi-hero,
  .mbi-feature,
  .mbi-series,
  .mbi-projects,
  .mbi-closing {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  .mbi-title h1 { font-size: 42px !important; }
  .mbi-lead { font-size: 17px !important; line-height: 1.65 !important; }

  .mbi-buttons .et_pb_button_module_wrapper {
    display: block;
    margin-right: 0 !important;
    margin-bottom: 12px !important;
  }

  .mbi-buttons.et_pb_row {
    display: block;
  }

  .mbi-buttons .et_pb_column {
    width: 100% !important;
  }

  .mbi-buttons .et_pb_button { width: 100%; text-align: center; }

  .mbi-series-content { padding: 24px 24px 28px; }
  .mbi-series-content::after { top: 27px; right: 24px; }
  .mbi-series-row.et_pb_row { gap: 24px; margin-bottom: 24px !important; }
}

/* ==========================================================
   INTERACTICA — PAGINA'S VAN DE AFZONDERLIJKE REEKSEN
   ========================================================== */

/* Gedeelde kleurvariabelen voor de reekspagina's. */

.mbi-reeks-hero,
.mbi-reeks-content,
.mbi-reeks-closing {
  --mbi-paper: #f4f1ea;
  --mbi-paper-light: #faf8f3;
  --mbi-ink: #162a3a;
  --mbi-red: #b94339;
  --mbi-teal: #2e7b80;
  --mbi-line: rgba(22, 42, 58, 0.16);
}

/* Hero met label en dynamische paginatitel. */

.mbi-reeks-hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 72px !important;
  background: var(--mbi-paper) !important;
}

.mbi-reeks-hero::after {
  position: absolute;
  top: -160px;
  right: -120px;
  width: 320px;
  height: 320px;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(46, 123, 128, 0.16);
  border-radius: 50%;
}

.mbi-reeks-hero-row.et_pb_row {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 1160px;
}

/* Teruglink boven de introductie. */

.mbi-reeks-back {
  margin-bottom: 38px !important;
}

.mbi-reeks-back a {
  color: var(--mbi-teal);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.25s ease;
}

.mbi-reeks-back a:hover {
  color: var(--mbi-red);
}

/* Klein reekslabel. */

.mbi-reeks-label {
  margin-bottom: 16px !important;
}

/* Dynamische paginatitel. */

.mbi-reeks-title h1,
.mbi-reeks-title .entry-title {
  margin: 0;
  padding: 0;
  color: var(--mbi-ink) !important;
  font-size: clamp(40px, 6vw, 74px) !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em;
  overflow-wrap: normal;
}

/* Sectie met unieke pagina-inhoud. */

.mbi-reeks-content {
  padding: 70px 0 110px !important;
  background: var(--mbi-paper-light) !important;
}

.mbi-reeks-content-row.et_pb_row {
  width: 90%;
  max-width: 1320px;
}

/* Unieke omschrijving van de reeks. */

.mbi-reeks-description {
  max-width: 820px;
  margin-bottom: 46px !important;
  color: rgba(22, 42, 58, 0.82) !important;
  font-size: 18px !important;
  line-height: 1.8 !important;
}

/* JIG-raster binnen de reekspagina. */

.mbi-reeks-grid {
  width: 100%;
}

/* Kaders zonder invloed op de berekende JIG-afmetingen. */

.mbi-reeks-grid .jig-imageContainer {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  outline: none;
  border-radius: 8px !important;
}

.mbi-reeks-grid .jig-imageContainer::after {
  position: absolute;
  z-index: 5;
  inset: 0;
  content: "";
  pointer-events: none;
  box-sizing: border-box;
  border: 1px solid rgba(185, 67, 57, 0.65);
  border-radius: inherit;
}

/* Rustige afsluiting met terugknop. */

.mbi-reeks-closing {
  padding: 72px 0 !important;
  background: var(--mbi-paper) !important;
  text-align: center;
}

.mbi-reeks-closing-copy {
  margin-bottom: 22px !important;
  color: var(--mbi-ink) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
}

.mbi-reeks-closing-button .et_pb_button {
  padding: 11px 21px !important;
  border: 1px solid var(--mbi-red) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--mbi-red) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease !important;
}

.mbi-reeks-closing-button .et_pb_button:hover {
  transform: translateY(-2px);
  background: var(--mbi-red) !important;
  color: #fff !important;
}

/* Tablet. */

@media (max-width: 980px) {
  .mbi-reeks-hero {
    padding: 82px 0 62px !important;
  }

  .mbi-reeks-content {
    padding: 58px 0 88px !important;
  }

  .mbi-reeks-title h1,
  .mbi-reeks-title .entry-title {
    font-size: clamp(38px, 7vw, 60px) !important;
  }
}

/* Smartphone. */

@media (max-width: 767px) {
  .mbi-reeks-hero {
    padding: 68px 0 52px !important;
  }

  .mbi-reeks-back {
    margin-bottom: 30px !important;
  }

  .mbi-reeks-title h1,
  .mbi-reeks-title .entry-title {
    font-size: clamp(32px, 8vw, 46px) !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere;
  }

  .mbi-reeks-content {
    padding: 45px 0 72px !important;
  }

  .mbi-reeks-description {
    margin-bottom: 35px !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  .mbi-reeks-closing {
    padding: 56px 0 !important;
  }

  .mbi-reeks-closing-copy {
    font-size: 19px !important;
  }
}

/* Respecteer bezoekers die animatie willen beperken. */

@media (prefers-reduced-motion: reduce) {
  .mbi-reeks-back a,
  .mbi-reeks-closing-button .et_pb_button {
    transition: none !important;
  }
}

/* ==========================================================
   INTERACTICA — AFSLUITING REEKSPAGINA'S
   Betrouwbare uitlijning en knopstijl voor Divi 5.
   ========================================================== */

.mbi-reeks-closing {
  text-align: center !important;
}

/* Tekst en knop onder elkaar en in het midden. */

.mbi-reeks-closing .et_pb_column {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Tekstmodule centreren. */

.mbi-reeks-closing .mbi-reeks-closing-copy {
  width: 100%;
  text-align: center !important;
}

/* Knopmodule en eventuele Divi-wrapper centreren. */

.mbi-reeks-closing .mbi-reeks-closing-button,
.mbi-reeks-closing .et_pb_button_module_wrapper {
  text-align: center !important;
}

/* Knop zelf, ongeacht de precieze Divi 5-structuur. */

.mbi-reeks-closing a.et_pb_button,
.mbi-reeks-closing .mbi-reeks-closing-button a,
.mbi-reeks-closing a.mbi-reeks-closing-button {
  display: inline-block !important;
  width: auto !important;
  padding: 11px 21px !important;

  border: 1px solid #b94339 !important;
  border-radius: 999px !important;

  background: transparent !important;
  color: #b94339 !important;

  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;

  text-align: center !important;
  text-decoration: none !important;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease !important;
}

/* Reactie wanneer de bezoeker over de knop beweegt. */

.mbi-reeks-closing a.et_pb_button:hover,
.mbi-reeks-closing .mbi-reeks-closing-button a:hover,
.mbi-reeks-closing a.mbi-reeks-closing-button:hover {
  transform: translateY(-2px);
  background: #b94339 !important;
  color: #fff !important;
}

/* ==========================================================
   ONTDEK INTERACTICA — KNOPPEN IN DIVI 5
   ========================================================== */

/* Algemene vormgeving van alle vier de knoppen. */

.mbi-hero a.et_pb_button,
.mbi-feature a.et_pb_button,
.mbi-closing a.et_pb_button {
  display: inline-block !important;
  width: auto !important;
  padding: 11px 21px !important;

  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 999px !important;

  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;

  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease !important;
}

/* Primaire knop in de hero. */

.mbi-hero .mbi-button-primary a.et_pb_button,
.mbi-hero a.et_pb_button.mbi-button-primary,
.mbi-buttons .et_pb_column:first-child a.et_pb_button {
  border-color: #b94339 !important;
  background: #b94339 !important;
  color: #fff !important;
}

/* Secundaire knop in de hero. */

.mbi-hero .mbi-button-secondary a.et_pb_button,
.mbi-hero a.et_pb_button.mbi-button-secondary,
.mbi-buttons .et_pb_column:last-child a.et_pb_button {
  border-color: rgba(22, 42, 58, 0.40) !important;
  background: transparent !important;
  color: #162a3a !important;
}

/* Knop bij het uitgelichte project. */

.mbi-feature a.et_pb_button {
  border-color: #b94339 !important;
  background: #b94339 !important;
  color: #fff !important;
}

/* Knop in het donkere slotvlak. */

.mbi-closing a.et_pb_button {
  border-color: #b94339 !important;
  background: #b94339 !important;
  color: #fff !important;
}

/* Hoverbeweging. */

.mbi-hero a.et_pb_button:hover,
.mbi-feature a.et_pb_button:hover,
.mbi-closing a.et_pb_button:hover {
  padding: 11px 21px !important;
  transform: translateY(-2px);
}

/* Voorkomt dat Divi bij hover zelf een pijltje toevoegt. */

.mbi-hero a.et_pb_button::after,
.mbi-feature a.et_pb_button::after,
.mbi-closing a.et_pb_button::after {
  display: none !important;
}

/* ==========================================================
   INTERACTICA — NAVIGATIE TUSSEN REEKSEN: DIVI 5-CORRECTIE
   ========================================================== */

/* Zorg dat de module de beschikbare breedte gebruikt. */

.mbi-reeks-closing .mbi-reeks-nav-module {
  display: block !important;
  width: 100% !important;
  max-width: 1120px !important;
  margin: 28px auto 0 !important;
}

/* De drie navigatieonderdelen naast elkaar. */

.mbi-reeks-closing .mbi-reeks-nav {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 32px !important;
  width: 100% !important;
}

/* Links onder elkaar binnen de vorige en volgende reeks. */

.mbi-reeks-closing .mbi-reeks-nav-prev a,
.mbi-reeks-closing .mbi-reeks-nav-next a {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  color: #162a3a !important;
  text-decoration: none !important;
}

/* Vorige reeks links uitlijnen. */

.mbi-reeks-closing .mbi-reeks-nav-prev {
  text-align: left !important;
}

.mbi-reeks-closing .mbi-reeks-nav-prev a {
  align-items: flex-start !important;
}

/* Volgende reeks rechts uitlijnen. */

.mbi-reeks-closing .mbi-reeks-nav-next {
  text-align: right !important;
}

.mbi-reeks-closing .mbi-reeks-nav-next a {
  align-items: flex-end !important;
}

/* Vermiljoenrode aanduidingen boven de reeksnamen. */

.mbi-reeks-closing .mbi-reeks-nav-label {
  display: block !important;
  color: #b94339 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Donkerblauwe reeksnamen. */

.mbi-reeks-closing .mbi-reeks-nav-title {
  display: block !important;
  color: #162a3a !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

/* Centrale knop. */

.mbi-reeks-closing .mbi-reeks-nav-center {
  text-align: center !important;
}

.mbi-reeks-closing .mbi-reeks-nav-center a {
  display: inline-block !important;
  width: auto !important;
  padding: 11px 20px !important;

  border: 1px solid #b94339 !important;
  border-radius: 999px !important;

  background: transparent !important;
  color: #b94339 !important;

  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.mbi-reeks-closing .mbi-reeks-nav-center a:hover {
  background: #b94339 !important;
  color: #fff !important;
}

/* Smartphone: onderdelen gecentreerd onder elkaar. */

@media (max-width: 767px) {

  .mbi-reeks-closing .mbi-reeks-nav {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .mbi-reeks-closing .mbi-reeks-nav-prev,
  .mbi-reeks-closing .mbi-reeks-nav-next {
    text-align: center !important;
  }

  .mbi-reeks-closing .mbi-reeks-nav-prev a,
  .mbi-reeks-closing .mbi-reeks-nav-next a {
    align-items: center !important;
  }

  .mbi-reeks-closing .mbi-reeks-nav-item:empty {
    display: none !important;
  }

  .mbi-reeks-closing .mbi-reeks-nav-center {
    order: 3;
  }
}

/* ==========================================================
   INTERACTICA — INDIVIDUELE PROJECTPAGINA'S
   ========================================================== */

/* Gedeelde kleuren voor de projecttemplate. */

.mbi-project-hero,
.mbi-project-stage,
.mbi-project-navigation,
.mbi-project-closing {
  --mbi-paper: #f4f1ea;
  --mbi-paper-light: #faf8f3;
  --mbi-ink: #162a3a;
  --mbi-red: #b94339;
  --mbi-teal: #2e7b80;
  --mbi-line: rgba(22, 42, 58, 0.16);
}

/* ----------------------------------------------------------
   COMPACTE PROJECTINTRODUCTIE
   ---------------------------------------------------------- */

.mbi-project-hero {
  position: relative;
  overflow: hidden;
  padding: 58px 0 24px !important;
  background: #f4f1ea !important;
}

.mbi-project-hero-row.et_pb_row {
  width: 90% !important;
  max-width: 1440px !important;
  padding: 0 !important;
}

/* Teruglink naar het Interactica-overzicht. */

.mbi-project-back {
  margin-bottom: 23px !important;
}

.mbi-project-back a {
  color: #2e7b80 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;

  transition: color 0.25s ease;
}

.mbi-project-back a:hover {
  color: #b94339 !important;
}

/* Klein label boven het interactieve project. */

.mbi-project-label {
  margin-bottom: 0 !important;
}

/* ----------------------------------------------------------
   PODIUM VOOR HET INTERACTIEVE WERK
   ---------------------------------------------------------- */

.mbi-project-stage {
  padding: 22px 0 60px !important;
  background: #f4f1ea !important;
}

.mbi-project-stage-row.et_pb_row {
  width: 94% !important;
  max-width: 1440px !important;
  padding: 0 !important;
}

/* De berichtinhoud neemt de beschikbare breedte volledig in. */

.mbi-project-content {
  width: 100% !important;
  margin: 0 !important;
}

/* ----------------------------------------------------------
   NAVIGATIE TUSSEN INDIVIDUELE PROJECTEN
   ---------------------------------------------------------- */

.mbi-project-navigation {
  padding: 22px 0 60px !important;
  background: #f4f1ea !important;
}

.mbi-project-navigation-row.et_pb_row {
  width: 90% !important;
  max-width: 1320px !important;

  padding: 28px 0 0 !important;

  border-top: 1px solid rgba(22, 42, 58, 0.14);
}

/* Algemene vormgeving van projectnavigatie. */

.mbi-project-post-nav a {
  color: #162a3a !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-decoration: none !important;

  transition: color 0.25s ease;
}

.mbi-project-post-nav a:hover {
  color: #b94339 !important;
}

/* Gebruik indien aanwezig de standaard Divi-verdeling. */

.mbi-project-post-nav .nav-previous,
.mbi-project-post-nav .nav-next {
  max-width: 46%;
}

.mbi-project-post-nav .nav-next {
  text-align: right;
}

/* ----------------------------------------------------------
   AFSLUITING PROJECTPAGINA
   ---------------------------------------------------------- */

.mbi-project-closing {
  padding: 72px 0 !important;
  background: #faf8f3 !important;
  text-align: center !important;
}

/* Houd tekst en knop gecentreerd onder elkaar. */

.mbi-project-closing .et_pb_column {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.mbi-project-closing-copy {
  width: 100% !important;
  margin-bottom: 22px !important;

  color: #162a3a !important;
  font-size: 21px !important;
  font-weight: 500 !important;

  text-align: center !important;
}

/* Knopmodule centreren. */

.mbi-project-closing .mbi-project-closing-button,
.mbi-project-closing .et_pb_button_module_wrapper {
  text-align: center !important;
}

/* Betrouwbare knopstijl voor Divi 5. */

.mbi-project-closing a.et_pb_button,
.mbi-project-closing .mbi-project-closing-button a,
.mbi-project-closing a.mbi-project-closing-button {
  display: inline-block !important;
  width: auto !important;
  padding: 11px 21px !important;

  border: 1px solid #b94339 !important;
  border-radius: 999px !important;

  background: transparent !important;
  color: #b94339 !important;

  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;

  text-align: center !important;
  text-decoration: none !important;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease !important;
}

/* Hoverstijl van de terugknop. */

.mbi-project-closing a.et_pb_button:hover,
.mbi-project-closing .mbi-project-closing-button a:hover,
.mbi-project-closing a.mbi-project-closing-button:hover {
  transform: translateY(-2px);

  background: #b94339 !important;
  color: #fff !important;
}

/* Vermijd het standaard Divi-pijltje. */

.mbi-project-closing a.et_pb_button::after {
  display: none !important;
}

/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 980px) {

  .mbi-project-hero {
    padding: 48px 0 20px !important;
  }

  .mbi-project-stage {
    padding: 18px 0 46px !important;
  }

  .mbi-project-stage-row.et_pb_row {
    width: 96% !important;
  }

  .mbi-project-navigation {
    padding: 18px 0 46px !important;
  }

  .mbi-project-closing {
    padding: 62px 0 !important;
  }
}

/* ----------------------------------------------------------
   SMARTPHONE
   ---------------------------------------------------------- */

@media (max-width: 767px) {

  .mbi-project-hero {
    padding: 38px 0 16px !important;
  }

  .mbi-project-hero-row.et_pb_row {
    width: 90% !important;
  }

  .mbi-project-back {
    margin-bottom: 18px !important;
  }

  .mbi-project-stage {
    padding: 14px 0 36px !important;
  }

  .mbi-project-stage-row.et_pb_row {
    width: 98% !important;
  }

  .mbi-project-navigation {
    padding: 12px 0 38px !important;
  }

  .mbi-project-navigation-row.et_pb_row {
    width: 90% !important;
    padding-top: 22px !important;
  }

  .mbi-project-post-nav a {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .mbi-project-closing {
    padding: 52px 0 !important;
  }

  .mbi-project-closing-copy {
    font-size: 19px !important;
  }

  .mbi-project-closing a.et_pb_button,
  .mbi-project-closing .mbi-project-closing-button a,
  .mbi-project-closing a.mbi-project-closing-button {
    max-width: 90vw !important;
    padding: 10px 18px !important;

    font-size: 14px !important;
  }
}

/* ----------------------------------------------------------
   BEPERK BEWEGING WANNEER DE BEZOEKER DAT WENST
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .mbi-project-back a,
  .mbi-project-post-nav a,
  .mbi-project-closing a.et_pb_button {
    transition: none !important;
  }
}

/* =========================================
   INTERACTICA — PROJECTTITEL
   ========================================= */

.mb-interactica-project-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 22px 25px 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #0b1018;
}

.mb-interactica-project-heading {
  min-width: 0;
}

.mb-interactica-project-series {
  display: block;
  margin-bottom: 7px;
  color: #76d9d0;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1.8px;
}

.mb-interactica-project-title {
  margin: 0 !important;
  padding: 0 !important;
  color: #e9eef3 !important;
  font-family: inherit;
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.6px;
}

.mb-interactica-project-label {
  flex: 0 0 auto;
  padding-bottom: 4px;
  color: rgba(178, 191, 201, 0.52);
  font-size: 9px;
  letter-spacing: 1.5px;
}

@media (max-width: 680px) {

  .mb-interactica-project-header {
    align-items: flex-start;
    padding: 19px;
  }

  .mb-interactica-project-title {
    font-size: clamp(23px, 7vw, 31px);
  }

  .mb-interactica-project-label {
    display: none;
  }

}

/* =========================================
   INTERACTICA — ATLAS TITEL EN INTRODUCTIE
   ========================================= */

#mb-gravity-atlas .mb-interactica-project-header {
  padding: 22px 25px 12px;
  border-bottom: 0;
  background: #0b1018;
}

#mb-gravity-atlas .mb-interactica-project-title {
  margin: 0 !important;
  color: #e9eef3 !important;
  font-size: clamp(24px, 3.2vw, 36px) !important;
  line-height: 1.15 !important;
}

#mb-gravity-atlas .mbga-intro {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 25px 22px !important;
  box-sizing: border-box !important;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
  border-left: 1px solid rgba(255, 255, 255, 0.09);
  background: #0b1018 !important;
}

#mb-gravity-atlas .mbga-intro p {
  max-width: 850px;
  margin: 0 !important;
  padding: 0 !important;
  color: #aab6c2 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

#mb-gravity-atlas .mbga-stage {
  margin-top: 0 !important;
  border-radius: 0 !important;
}

@media (max-width: 680px) {

  #mb-gravity-atlas .mb-interactica-project-header {
    padding: 19px 19px 10px;
  }

  #mb-gravity-atlas .mb-interactica-project-title {
    font-size: clamp(23px, 7vw, 31px) !important;
  }

  #mb-gravity-atlas .mbga-intro {
    padding: 0 19px 18px !important;
  }

}

.mb-interactica-project-intro {
  max-width: 760px;
  margin: 9px 0 0 !important;
  padding: 0 !important;
  color: #aab6c2 !important;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.7 !important;
}