/*
  binder-page — een opsomming als binderpagina.

  Het vel is crème papier met ringgaten langs de linkerrand; de sleeves zijn
  doorzichtige pockets met een glansstreep. Geen enkele van die vormen is
  versiering om de versiering: ze maken van een <ul> een object dat een
  verzamelaar herkent voordat hij de koppen leest.
*/

/* Familie A (§3): verticaal ritme op de sectie, goot op de inner. */
.bsc-binder {
  padding: var(--block-y, 64px) 0;
  background: var(--surface-page);
  color: var(--text-body);
}

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

/* space-7 en niet space-6: de ruiter steekt 27px boven het vel uit en heeft
   die extra lucht nodig om niet tegen de kop te plakken. */
.bsc-binder__head {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
  max-width: 56ch;
}

/* Eyebrow: volledig uit .bsc-label (§7). */

.bsc-binder__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: .98;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--text-strong);
}

.bsc-binder__intro {
  margin: 0;
  font: var(--weight-regular) var(--text-md) / 1.6 var(--font-ui);
  color: var(--text-muted);
}

/* ── Het vel ───────────────────────────────────────────────────────────── */

/*
  Het vel is altijd crème, ook in een nachtband: papier is papier. De tokens
  worden lokaal gekanteld in plaats van via .bsc-paper op de sectie, zodat de
  kop erboven de kleur van de band houdt.
*/
.bsc-binder__sheet {
  --_gutter-rings: 56px;

  position: relative;
  /* space-7 verticaal: met space-6 was het vel 234px hoog en las het als
     een strook in plaats van als een pagina uit een ordner. */
  padding: var(--space-7) var(--space-6) var(--space-7) var(--_gutter-rings);
  background: var(--bsc-paper-100);
  color: var(--bsc-navy-900);
  border: var(--border-3) solid var(--bsc-navy-900);
  /* Contentkaart (§1). */
  border-radius: var(--radius-card);
  /*
    NIET --shadow-hard hier. Dat token volgt --border-outline, en op een
    nachtband is dat night-000: exact de paginakleur, dus een onzichtbare
    schaduw. navy-700 op night-000 leest wél als een offsetrand en houdt het
    merk bij zijn vier inkten. Zelfde afweging in channel-board en envelope.
  */
  box-shadow: 5px 5px 0 var(--bsc-navy-700);
}

/* Halftone: hetzelfde papierraster als de Standwand-band. */
.bsc-binder__sheet::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: radial-gradient(var(--bsc-paper-300) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: .6;
}

/* De ringmarge: een smalle strook met een vouwlijn erlangs. */
.bsc-binder__rings {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--_gutter-rings);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: var(--space-5) 0;
  border-right: var(--border-2) dashed var(--bsc-paper-300);
}

/*
  Een ringgat: écht rond, dus --radius-pill is hier op zijn plaats (§1). De
  binnenschaduw maakt er een gat van in plaats van een schijfje.
*/
.bsc-binder__ring {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--surface-page);
  border: var(--border-2) solid var(--bsc-navy-900);
}

/*
  Tabbladruiter: steekt bóven het vel uit, zoals in een echte ordner.

  Stond eerst rechts binnen het vel, en dat was fout: de ruiter lag daar
  gemeten bovenop de vierde sleeve (tab 1263–1332, sleeve 1026–1297) en dekte
  een stuk tekst af. Boven de bovenrand raakt hij niets, en het is bovendien
  waar een ruiter in het echt zit.
*/
.bsc-binder__tab {
  position: absolute;
  bottom: calc(100% - var(--border-3));
  right: var(--space-6);
  padding: 8px 14px;
  background: var(--bsc-navy-900);
  color: var(--bsc-paper-100);
  /* Half afgerond is een bewuste vorm; de basiswaarde is papier (§1). */
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font: var(--weight-bold) 11px / 1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  pointer-events: none;
}

/* ── De sleeves ────────────────────────────────────────────────────────── */

.bsc-binder__sleeves {
  position: relative;
  display: grid;
  /* minmax(0,…) zodat een lange kop de kolom niet openduwt. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bsc-binder__sleeve {
  position: relative;
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-5) var(--space-4) var(--space-4);
  background: var(--bsc-paper-000);
  /* Een sleeve is een papieren/plastic object, geen contentkaart: 4px (§1). */
  border-radius: var(--radius-sm);
  border: var(--border-2) solid var(--bsc-navy-900);
}

/*
  De pocketopening: een streep langs de bovenrand, net als de rand van een
  echte sleeve. Geen aparte div nodig.
*/
.bsc-binder__sleeve::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  height: var(--border-2);
  background: var(--bsc-paper-300);
}

/* Glansstreep, schuin over de pocket. Puur decoratief en niet aanklikbaar. */
.bsc-binder__sleeve::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, .9) 0 14%, transparent 14.5% 100%);
  opacity: .8;
}

.bsc-binder__index {
  position: relative;
  z-index: 1;
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  /* #5b7383 op paper-000 haalt 4,7:1 — ook voor dit kleine formaat ruim genoeg. */
  color: #5b7383;
}

.bsc-binder__sleeve-title {
  position: relative;
  z-index: 1;
  margin: 0;
  font: var(--weight-extrabold) 17px / 1.25 var(--font-ui);
  color: var(--bsc-navy-900);
}

.bsc-binder__sleeve-text {
  position: relative;
  z-index: 1;
  margin: 0;
  font: var(--weight-regular) 15px / 1.6 var(--font-ui);
  color: var(--bsc-navy-900);
}

@media screen and (max-width: 600px) {
  /* Contentblok: 64 desktop → 40 mobiel (§4). */
  .bsc-binder {
    padding: var(--block-y, 40px) 0;
  }

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

  /*
    Op 390px kost de ringmarge een vijfde van de leesbreedte. Hij wordt smaller
    en de gaten kleiner; weghalen zou het hele beeld kosten.
  */
  .bsc-binder__sheet {
    --_gutter-rings: 34px;
    padding: var(--space-5) var(--space-4) var(--space-5) var(--_gutter-rings);
  }

  .bsc-binder__ring {
    width: 12px;
    height: 12px;
  }

  .bsc-binder__tab {
    right: var(--space-3);
  }
}