/* ==========================================================================
   Overzichtspagina's (/inzichten)

   Het design kent geen apart overzichtsartboard; deze sectie volgt daarom de
   opbouw die het design elders wél vastlegt voor een label-met-lijst:
   .werkenbij-vacatures — volle breedte, padding 120px, labelkolom 281px,
   gap 78px. Zo staat het bracketlabel op dezelfde vaste x als op alle andere
   pagina's, ook boven 1440px.
   ========================================================================== */

.insights-index {
  width: 100%;
}

.insights-index__inner {
  display: flex;
  gap: 78px;
  align-items: flex-start;
  background: var(--blue-100);
  padding: 120px var(--page-padding-x);
  width: 100%;
}

.insights-index__label {
  width: 281px;
  flex-shrink: 0;
}

.insights-index__cards {
  flex: 1 1 0;
  min-width: 0;
}

/* Doorlopend raster in plaats van de horizontale strook van .insights__cards.
   De minimumbreedte is de kaartbreedte uit het design (819px strook, twee
   kaarten van 404 + 11px halve gap), zodat een kaart hier even breed oogt
   als op de home- en artikelpagina.

   min(340px, 100%) en niet 340px: is de kolom smaller dan 340, dan zou een
   kale minmax(340px, 1fr) een spoor van 340px maken en dus uit de sectie
   lopen. Met min() zakt de ondergrens mee. */
.insights-index__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 22px;
  width: 100%;
  align-items: start;
}

/* De kaart zelf komt uit insights.css en is daar een flex-item (flex: 1 0 0).
   In een raster bepaalt de kolom de breedte, dus die groeiregel moet uit. */
.insights-index__grid .insight-card {
  flex: none;
  width: 100%;
  height: 100%;
}

.insights-index__empty {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 1.125rem; /* 18px */
  line-height: 1.5;
  color: var(--green-1200);
}

/* ---- Mobiel ---- */
/* 920px is het projectbreekpunt (zie responsive.css); dezelfde waarde staat
   ook in de scripts. Wijzig hem nooit op één plek. */
@media (max-width: 920px) {
  .insights-index__inner {
    flex-direction: column;
    gap: 12px;
    padding: 24px 16px;
  }

  .insights-index__label {
    width: auto;
  }

  .insights-index__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .insights-index__grid .insight-card {
    height: auto;
  }
}