/*
  card-row — "Net binnen".

  De grid telt per breakpoint een vast aantal kolommen. Dat was eerst auto-fit
  met minmax(190px,1fr), omdat de vaste repeat(5,1fr) uit het kit een tegel op
  een tablet smaller maakte dan de kaartverhouding aankan. Alleen loste dat het
  ene probleem op en kocht er een ander voor terug: bij auto-fit bepaalt het
  áántal tegels de breedte. Met vijf kaarten in de spiegel stond er een keurige
  rij van vijf, met vier kaarten werden het vier veel bredere tegels, en met
  twee twee halve pagina's — dezelfde sectie zag er bij elke voorraadstand
  anders uit, en dat is precies wat een rooster hoort te voorkomen.

  Vandaar nu een geteld raster: vijf op desktop, vier op tablet-landscape, drie
  op tablet-portrait, twee op de telefoon. De tegel houdt daarmee per breakpoint
  één maat, ongeacht of er drie of dertig in staan; een half gevulde laatste rij
  laat gewoon lege ruimte rechts, wat rustiger oogt dan opgeblazen tegels.
*/

/*
  Nachtband. Huisregel: secties scheiden met een rand, niet met een kleurwissel
  alleen — de navy onderrand sluit het donkere podium af tegen de crème pagina.
*/
.bsc-card-row {
  padding-top: var(--band-y, 96px);
  padding-bottom: var(--band-y, 96px);
  border-bottom: var(--border-3) solid var(--bsc-navy-900);
}

.bsc-card-row__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter-x, 28px);
}

.bsc-card-row__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-7);
}

.bsc-card-row__heading {
  display: grid;
  gap: var(--space-3);
}

/*
  Geen eigen eyebrow-definitie meer (§7): maat, tracking, kleur en gewicht komen
  volledig uit .bsc-label, zodat de eyebrow hier identiek is aan die in elke
  andere sectie op dezelfde band.
*/

.bsc-card-row__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(28px, 4vw, 46px);
  line-height: .95;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--text-strong);
}

.bsc-card-row__grid {
  display: grid;
  /* minmax(0,1fr) en niet 1fr: een kaartnaam zonder spaties zou een 1fr-track
     anders breder duwen dan zijn deel, en dan staat één tegel uit het gelid. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* De breekpunten volgen $bs-breakpoints-max uit settings/_vars.scss, zodat een
   blok-CSS-bestand dezelfde grenzen aanhoudt als de SCSS-kant van het thema. */
@media screen and (max-width: 1194px) {
  .bsc-card-row__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media screen and (max-width: 834px) {
  .bsc-card-row__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (max-width: 600px) {
  .bsc-card-row__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Lege staat ────────────────────────────────────────────────────────── */

/*
  Geen raster, geen gat en al helemaal geen verzonnen kaarten: een briefje aan
  de wand dat zegt waar het aanbod wél staat — mét de leeggehaalde binderpagina
  ernaast, zodat de lege staat de band vult in plaats van er een gat in te laten.

  Het briefje is bewust dezelfde vorm als .bsc-agenda__empty (beursagenda) en
  .bsc-veld__leeg (socialveld): papiervlak, gestippelde rand, stukje tape,
  mono-kicker en één gevulde knop. Dat is de derde plek waar de site "hier staat
  nog niets" zegt, en dan hoort er geen vierde eigen stijl bij te komen.

  Namen zijn met opzet lang en blokgebonden (.bsc-card-row__empty-*). Blok-CSS
  laadt hier als platte bestanden in één cascade zonder scoping, dus een korte
  generieke naam is een botsing die staat te wachten.

  De tokens doen het werk voor het donkere podium: dit blok draait binnen
  .bsc-night, waar --surface-card naar night-200 en --border-strong naar
  night-500 kantelt. Geen aparte nachtvariant nodig.
*/

/*
  De compositie. Onder 861px één kolom (briefje boven, sleeves eronder), daarboven
  briefje links en binderpagina rechts.

  minmax(0, 1fr) op de rechterkolom en niet 1fr: een grid-item heeft `min-width:
  auto`, dus een kolom vol vaste-breedte-inhoud kan het raster verder open duwen
  dan de container — dat is de standaard-oorzaak van horizontale overflow in een
  grid. Zie de vw()-clamp-les in het brein.
*/
.bsc-card-row__empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
  margin-top: 12px;
}

@media screen and (min-width: 861px) {
  .bsc-card-row__empty {
    grid-template-columns: minmax(320px, 36ch) minmax(0, 1fr);
    gap: var(--space-8);
  }
}

.bsc-card-row__empty-note {
  --_tape: -3deg;

  position: relative;
  max-width: 46ch;
  padding: var(--space-6) var(--space-6) var(--space-5);
  background: var(--surface-card);
  border: var(--border-2) dashed var(--border-strong);
  color: var(--text-body);
}

/* ── De leeggehaalde binderpagina ──────────────────────────────────────── */

/*
  Vijf lege pockets in de fysieke kaartverhouding. Géén skeleton-loader: er
  laadt niets en er komt hier ook niets vanzelf te staan, dus een pulserende
  placeholder zou liegen over wat er gebeurt. Wat je ziet is precies wat het is:
  de binder ligt open en hij is leeg.

  auto-fit met een minimum in plaats van repeat(5, 1fr): op een tablet zou vijf
  vaste kolommen de pockets smaller maken dan een kaart hoog is, en dan leest
  het als een streepjescode.
*/
.bsc-card-row__sleeves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: var(--space-4);
}

.bsc-card-row__sleeve {
  position: relative;
  display: block;
  /* 63×88 mm — de kaartverhouding staat als token in de settingslaag. */
  aspect-ratio: var(--card-ratio, .716);
  overflow: hidden;
  border-radius: var(--radius-card);
  border: var(--border-2) dashed var(--border-strong);
  background: var(--surface-sunken);
  /*
    De kaartrug erft currentColor. navy-500 op night-100 is een rug die je ziet
    liggen zonder dat hij om aandacht vraagt; de sleeve is decoratie, dus hier
    geldt geen contrasteis — de mededeling staat volledig in het briefje ernaast.
  */
  color: var(--bsc-navy-500);
}

/*
  Eén pocket in merkgeel, net als de middelste kaart in de hero-waaier en de
  eerste settegel. Geel is de event-kleur van dit merk en werkt alleen als hij
  zeldzaam is: één van de vijf, niet allemaal.
*/
.bsc-card-row__sleeve:nth-child(3) {
  border-color: var(--bsc-yellow-700);
  color: var(--bsc-yellow-700);
}

.bsc-card-row__sleeve .bsc-weave {
  display: block;
  width: 100%;
  height: 100%;
}

/* De tape valt over de bovenrand heen, net als bij het lege beursbriefje. */
.bsc-card-row__tape {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 78px;
  height: 24px;
  transform: translateX(-50%) rotate(var(--_tape, -3deg));
  background: rgba(255, 208, 36, 0.62);
  border-left: var(--border-1) solid rgba(255, 208, 36, 0.9);
  border-right: var(--border-1) solid rgba(255, 208, 36, 0.9);
  z-index: 2;
  /* Zonder dit vangt de tape de klik op de bovenkant van het briefje op. */
  pointer-events: none;
}

/*
  Alleen de marge. Maat en kleur komen volledig uit .bsc-label (§7) — ze stonden
  hier met exact dezelfde waarden nog eens overgeschreven, en dat is precies het
  soort componenteigen eyebrow-definitie dat de opruiming heeft weggehaald.
*/
.bsc-card-row__empty-kicker {
  margin: 0 0 var(--space-2);
}

.bsc-card-row__empty-text {
  margin: 0;
  font: var(--weight-regular) var(--text-base) / 1.6 var(--font-ui);
}

.bsc-card-row__empty-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-5) 0 0;
}

/*
  Vangrail. Het briefje is 46ch breed en .bsc-btn heeft overflow:hidden met
  white-space:nowrap: past het label niet, dan knipt de knop hem aan beide
  kanten weg — de eerste letter én het pijltje verdwijnen, en niets in de
  build klaagt daarover. Liever twee regels dan een half woord; min-height op
  .bsc-btn--sm laat de knop gewoon meegroeien.
*/
.bsc-card-row__empty-actions .bsc-btn {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

/*
  Pill-link ("Alles bekijken →"). Staat hier omdat card-row hem introduceert;
  gebruikt een ander block hem ook, dan verhuist hij naar de merklaag.

  De naam is inmiddels misleidend: dit is een control en geen ronde vorm, dus
  hij staat op --radius-md (8px) net als elke andere knop (§1). Hernoemen is
  bewust NIET gedaan — de class zit in card-row.php, fair-agenda.php en
  social-band.php in de markup, en een halve hernoeming is erger dan een
  historische naam. Zie ook de opmerking in het ontwerpbesluit.
*/
.bsc-pill-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 38px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-1) solid var(--border-hairline);
  background: var(--surface-card);
  font: var(--weight-bold) 11px / 1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-brand);
  text-decoration: none;
  /*
    `color` staat er expliciet bij. De globale `a:hover { color: var(--link-hover) }`
    uit _brand.scss is specifieker (0,1,1) dan deze class (0,1,0) en wint dus op
    hover — zonder `color` in deze lijst sprong de tekstkleur hard om terwijl
    rand en vlak netjes overvloeiden.
  */
  transition: color var(--dur-fast) var(--ease-snap),
              border-color var(--dur-fast) var(--ease-snap),
              background-color var(--dur-fast) var(--ease-snap);
}

@media (min-width: 1025px) {
  .bsc-pill-link:hover {
    border-color: var(--border-brand);
    background: var(--surface-sunken);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bsc-pill-link {
    transition: none;
  }
}

/* ── Smal ──────────────────────────────────────────────────────────────── */

@media screen and (max-width: 600px) {
  /*
    Homepage-band: 96 desktop → 48 mobiel (§4). Zonder deze stap stond er op een
    telefoon van 390px 96px lucht boven én onder de band — bijna een kwart
    scherm leeg voor elke sectiewissel.
  */
  .bsc-card-row {
    padding-top: var(--band-y, 48px);
    padding-bottom: var(--band-y, 48px);
  }

  .bsc-card-row__inner {
    padding: 0 var(--gutter-x, 20px);
  }

  /*
    Op een telefoon staat het briefje al tegen de schermranden; de tape voegt
    dan niets toe en duwt de kicker onnodig omlaag. Zelfde keuze als bij de
    beursagenda.
  */
  .bsc-card-row__tape {
    display: none;
  }

  .bsc-card-row__empty {
    margin-top: 0;
    gap: var(--space-6);
  }

  /*
    Drie pockets in plaats van vijf. Op 390px past er een rij van drie precies
    naast elkaar; met vijf krijg je 3 + 2 en hangt er een halve rij onder de
    binder. De laatste twee zijn decoratie en missen dus niets.
  */
  .bsc-card-row__sleeves {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .bsc-card-row__sleeve:nth-child(n + 4) {
    display: none;
  }
}

/*
  Windows-contrastmodus vervangt alle kleuren; de halftransparante tape wordt
  dan een dof blok. Weglaten is daar netter dan doorzetten.
*/
@media (prefers-contrast: more), (forced-colors: active) {
  .bsc-card-row__tape {
    display: none;
  }
}