/* ==========================================================================
   Realisatie-overzicht (design.md §20.2). Filterchips (werktype primair, materiaal secundair), raster van
   realisatiekaarten (1 / 2 / 3 kolommen, één brede kaart), "Meer laden" en de lege toestand.
   Geen prototype-equivalent (de sectie is daar verborgen): afgeleid van realisaties_featured en de filterchips-patronen.
   ========================================================================== */

.realisaties-overzicht__filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
  margin-bottom: var(--sp-10);
}

.realisaties-overzicht__group-label {
  margin-bottom: var(--sp-2);
  color: var(--text-secondary);
}

.realisaties-overzicht__chips {
  display: flex;
  gap: var(--sp-2);
  margin-inline: calc(-1 * var(--page-margin));
  padding-inline: var(--page-margin);
  overflow-x: auto;
}

.realisaties-overzicht__chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding-inline: var(--sp-4);
  border: var(--border-hairline-w) solid var(--color-gray-mid);
  background: var(--color-white);
  color: var(--color-black);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-ui) var(--ease-ui),
    border-color var(--dur-ui) var(--ease-ui),
    color var(--dur-ui) var(--ease-ui);
}

.realisaties-overzicht__chip:hover {
  border-color: var(--color-black);
}

.realisaties-overzicht__chip[aria-current="true"] {
  border-color: var(--color-black);
  background: var(--color-black);
  color: var(--color-white);
}

.realisaties-overzicht__count {
  margin-bottom: var(--sp-5);
  color: var(--text-secondary);
  font-size: var(--fs-small);
}

.realisaties-overzicht__count:focus {
  outline: none;
}

.realisaties-overzicht__grid {
  display: grid;
  gap: var(--sp-10);
}

.realisaties-overzicht__item .card {
  height: 100%;
}

.realisaties-overzicht__pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-12);
}

.realisaties-overzicht__empty {
  display: grid;
  justify-items: start;
  gap: var(--sp-5);
  padding-block: var(--sp-10);
}

.realisaties-overzicht__empty p {
  font-size: var(--fs-lead);
}

[data-vr-results][aria-busy="true"] {
  opacity: 0.55;
  transition: opacity var(--dur-ui) var(--ease-ui);
}

@media (min-width: 40em) {
  .realisaties-overzicht__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-8);
  }

  .realisaties-overzicht__item--wide {
    grid-column: 1 / -1;
  }

  .realisaties-overzicht__filters {
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    column-gap: var(--sp-12);
  }

  .realisaties-overzicht__chips {
    flex-wrap: wrap;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}

@media (min-width: 64em) {
  .realisaties-overzicht__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--sp-16);
  }

  .realisaties-overzicht__item--wide {
    grid-column: span 2;
  }

  /* De filterbalk blijft onder de header plakken (design.md §20.2). */
  .realisaties-overzicht__filters {
    position: sticky;
    top: var(--header-h-compact);
    z-index: calc(var(--z-header) - 1);
    margin-inline: calc(-1 * var(--page-margin));
    padding: var(--sp-3) var(--page-margin);
    background: var(--color-off-white);
  }
}