/* ==========================================================================
   Blok: uitgelichte realisaties (design.md §17.8; geen prototype-equivalent, de sectie is daar verborgen).
   Mobiel: horizontale scroll-snap rij met kaarten van 85 %. Desktop: 1 grote (7/12) + 2 kleinere, daarna een rij van 3.
   De kaart zelf staat in components/card.css.
   ========================================================================== */

.block-realisaties-featured__head {
  max-width: 48rem;
}

.block-realisaties-featured__grid {
  display: flex;
  gap: var(--sp-4);
  margin: var(--sp-12) calc(-1 * var(--page-margin)) 0;
  padding-inline: var(--page-margin);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--page-margin);
}

.block-realisaties-featured__item {
  flex: 0 0 85%;
  scroll-snap-align: start;
}

.block-realisaties-featured__item .card {
  height: 100%;
}

.block-realisaties-featured__more {
  margin-top: var(--sp-12);
}

@media (min-width: 64em) {
  .block-realisaties-featured__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--sp-10) var(--sp-8);
    margin: var(--sp-16) 0 0;
    padding-inline: 0;
    overflow: visible;
  }

  .block-realisaties-featured__item {
    grid-column: span 4;
  }

  .block-realisaties-featured__item:nth-child(1) {
    grid-column: 1 / span 7;
    grid-row: span 2;
  }

  .block-realisaties-featured__item:nth-child(2),
  .block-realisaties-featured__item:nth-child(3) {
    grid-column: 8 / span 5;
  }

  /* De grote kaart vult de hoogte van de twee kleine: de foto rekt mee */
  .block-realisaties-featured__item:nth-child(1) .card__media {
    flex: 1 1 auto;
    aspect-ratio: auto;
  }

  .block-realisaties-featured__grid[data-count="1"] .block-realisaties-featured__item:nth-child(1),
  .block-realisaties-featured__grid[data-count="2"] .block-realisaties-featured__item:nth-child(1) {
    grid-row: auto;
    grid-column: span 6;
  }

  .block-realisaties-featured__grid[data-count="2"] .block-realisaties-featured__item:nth-child(2) {
    grid-column: span 6;
  }
}