/*
  stock-overview — het Cardmarket-voorraadoverzicht.

  Deelt de filterrail-opmaak met het WooCommerce-archief (woocommerce/
  _woo-products.scss): dezelfde .bsc-filter-classes, zodat filteren op de hele
  site hetzelfde voelt. Dit bestand voegt alleen de sectie en de resultaatlijst toe.
*/

/* Familie A, net als elke andere sectie: de gutter zit op de inner, niet op de
   sectie. Stond hier op familie B, waardoor /voorraad/ als enige pagina 28px
   uit de rooilijn viel (contentLeft 80 in plaats van 108). */
.bsc-stock {
  padding: var(--block-y) 0;
}

.bsc-stock__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter-x);
  display: grid;
  /* minmax(0,1fr) is hier niet optioneel: zonder die 0 weigert een grid-kolom
     smaller te worden dan zijn inhoud en breekt de grid uit de pagina. */
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--space-7);
}

.bsc-stock__inner--vol {
  grid-template-columns: minmax(0, 1fr);
}

.bsc-stock__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-2) solid var(--border-hairline);
}

.bsc-stock__count {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
}

.bsc-stock__sort {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.bsc-stock__sort-item {
  font: var(--weight-medium) 12px / 1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: var(--border-2) solid transparent;
}

.bsc-stock__sort-item.is-current {
  color: var(--text-strong);
  border-bottom-color: var(--bsc-yellow-500);
}

/*
  Geteld raster, geen auto-fit — zie de toelichting boven in card-row.css. Kort:
  bij auto-fit bepaalt het aantal tegels de tegelbreedte, dus veranderde deze
  pagina van gezicht zodra er kaarten verkocht waren. Hier vier kolommen in
  plaats van vijf, want naast de grid staat tot 1194px nog de filterrail.
*/
.bsc-stock__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

.bsc-stock__leeg {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  max-width: 52ch;
  padding: var(--space-7) 0;
}

.bsc-stock__leeg h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(24px, 3vw, 34px);
  text-transform: uppercase;
}

.bsc-stock__leeg p {
  margin: 0;
  line-height: 1.6;
  color: var(--text-body);
}

/* ── Zoekbalk in de filterrail ─────────────────────────────────────────── */

/*
  Hier zat het zichtbaarste gat op de site: het zoekveld had géén enkele
  CSS-regel en viel dus terug op de browser — 16px hoog, wit, zwarte
  systeemfont, geen rand — pal boven een volledig gemerkte gele knop.

  Vorm, hoogte en kleur komen nu uit het controlsysteem in
  components/_forms.scss; dit bestand doet alleen de indeling: veld en knop op
  één rij, allebei 44px, zodat het als één zoekbalk leest.
*/
.bsc-filter__search-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}

.bsc-filter__search-row .bsc-filter__search-input {
  flex: 1 1 auto;
  /* Zonder min-width:0 weigert een flex-item smaller te worden dan zijn
     intrinsieke maat en duwt het veld de knop uit de rail. */
  min-width: 0;
}

.bsc-filter__search-row .bsc-filter__search-submit {
  flex: 0 0 auto;
  padding: 0 var(--space-4);
}

/* "Alles"-link boven een filtergroep: rustiger dan de gewone items. */
.bsc-filter__item--wissen {
  color: var(--text-muted);
  font-style: italic;
}

/* ── Paginering ────────────────────────────────────────────────────────── */

.bsc-stock__pager {
  margin-top: var(--space-7);
  display: flex;
  justify-content: center;
}

.bsc-stock__pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-3);
  margin: 0 var(--space-1);
  border: var(--border-1) solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-body);
  font: var(--weight-bold) 13px / 1 var(--font-mono);
  text-decoration: none;
}

.bsc-stock__pager .page-numbers.current {
  background: var(--bsc-yellow-500);
  border-color: var(--border-outline);
  color: var(--bsc-navy-900);
}

.bsc-stock__pager .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  min-width: auto;
}

@media screen and (max-width: 1194px) {
  .bsc-stock__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
}

@media screen and (max-width: 600px) {
  .bsc-stock {
    padding: var(--space-6) 20px var(--space-8);
  }
}