/* 1. Forceer de hoofdcontainer */
.layout-builder-wrapper .container,
.node--layout-builder--display .container {
  max-width: 1286px !important;
  width: 100%;
  margin: 0 auto;
  padding: 0 !important;
}

/* 2. Reset de Bootstrap Row en gebruik CSS Grid voor de tussenruimte */
.blb__row {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr; /* Dit regelt de 50% - 25% - 25% verdeling */
  gap: 20px !important; /* EXACT gelijke ruimte tussen alle kolommen en blokken */
  margin: 0 !important;
}

/* 3. Verwijder Bootstrap kolomeigenschappen die in de weg zitten */
.blb__row > [class*="col-"] {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 20px; /* Ruimte tussen blokken binnen een kolom (zoals de 2 dossiers) */
}

/* 4. Middelste Kolom (De dossiers) */
.blb__region--second {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.blb__region--second .block {
  flex: 1; /* Zorgt dat blauw en groen precies even hoog zijn */
  min-height: 0;
}

/* 5. Rechterkolom (Meest gelezen / Zwart blok) */
.blb__region--third {
  background-color: #000000 !important; /* Zwart zoals in het nieuwe voorbeeld */
  color: #ffffff;
  height: 100% !important;
  display: flex !important;
}

.blb__region--third .views-element-container,
.blb__region--third ul {
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blb__region--third li {
  flex: 1;
  border-bottom: 1px solid #333;
  padding: 15px 20px;
  display: flex;
  align-items: center;
}