/*
  collectors-band — de crème papier-wereld.

  De .bsc-paper-class op de sectie herdefinieert de semantische tokens (zie
  settings/_tokens.scss), dus alles hierbinnen leest automatisch navy op crème.
  Daarom staan hier bijna geen expliciete kleuren: waar dat wel zo is, gaat het
  om de motieven zelf (hazard-rail, halftone, schroefpunten), niet om tekst.
*/

/*
  Geen margin-top meer (§4). Die stapelde bovenop de 96px onderpadding van
  .bsc-standwand en de 96px binnenpadding van deze band zelf: 288px tussen twee
  secties, terwijl elders 192px staat. De padding van de secties regelt de
  afstand al.
*/
.bsc-collectors {
  position: relative;
  overflow: hidden;
  background: var(--bsc-paper-100);
  border-top: var(--border-3) solid var(--bsc-navy-900);
  border-bottom: var(--border-3) solid var(--bsc-navy-900);
  color: var(--bsc-navy-900);
}

/* Halftone-puntenveld. */
.bsc-collectors__texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--bsc-paper-300) 1.5px, transparent 1.6px);
  background-size: 14px 14px;
  opacity: .5;
}

/* Hazard-rail van 12px langs de bovenrand. */
.bsc-collectors__rail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--bsc-amber-500) 0 14px,
    var(--bsc-paper-100) 14px 28px
  );
  border-bottom: var(--border-2) solid var(--bsc-navy-900);
}

/* Verticale katakana-tab die rechts van de sectie afloopt. */
.bsc-collectors__kana {
  position: absolute;
  top: 34px;
  right: 0;
  writing-mode: vertical-rl;
  background: var(--bsc-navy-900);
  color: var(--bsc-paper-100);
  padding: 14px 6px;
  /* Half afgerond blijft een bewuste vorm; de basiswaarde volgt --radius-sm (§1). */
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  font: var(--weight-bold) 13px / 1 var(--font-ui);
  letter-spacing: .22em;
  pointer-events: none;
}

.bsc-collectors__inner {
  position: relative;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--band-y, 96px) var(--gutter-x, 28px);
  display: grid;
  gap: var(--space-8);
}

.bsc-collectors__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-7);
  flex-wrap: wrap;
}

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

/*
  Geen eigen eyebrow-definitie meer (§7). Ook de kleur niet: deze band draagt
  .bsc-paper, en die kantelt --text-faint al naar #5b7383. Op paper-100 haalt
  dat 4,66:1 — ruim voldoende voor 11px-tekst, en exact de kleur die de eyebrow
  van .bsc-standwand op dezelfde crème band al had. De navy-700 hier was dus
  geen bandcontext maar een handmatige afwijking van de buurman.
*/

.bsc-collectors__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(32px, 5vw, 72px);
  line-height: .92;
  text-transform: uppercase;
  color: var(--bsc-navy-900);
}

/*
  Drie stickers van 124px plus twee gaten van 14px = 400px. Met flex-shrink:0
  hield de rij die breedte vast en wrapte hij nooit, waardoor de derde sticker
  op een telefoon door de overflow:hidden van de band werd afgesneden. Nu mag de
  rij krimpen én wrappen, en schalen de stickers zelf mee onder de 600px.
*/
.bsc-collectors__stickers {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 100%;
}

/* ── Sticker ───────────────────────────────────────────────────────────── */

.bsc-sticker {
  --_size: 124px;
  position: relative;
  width: var(--_size);
  height: var(--_size);
  flex: 0 0 auto;
  transform: rotate(var(--_rotate, 0deg));

  svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

.bsc-sticker__ring {
  font: var(--weight-black) 21px / 1 var(--font-ui);
  letter-spacing: 2.6px;
}

.bsc-sticker__caption {
  font: var(--weight-bold) 15px / 1 var(--font-ui);
  letter-spacing: 1.6px;
}

.bsc-sticker__center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56%;
  height: 56%;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  color: var(--bsc-navy-900);
  font: var(--weight-black) calc(var(--_size) * .13) / 1.1 var(--font-ui);
}

/* ── Poster-panelen ────────────────────────────────────────────────────── */

.bsc-collectors__panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}

.bsc-poster {
  position: relative;
  padding: var(--space-7) var(--space-6);
  border: var(--border-3) solid var(--bsc-navy-900);
  border-radius: var(--radius-md);
  background: var(--bsc-paper-100);
  color: var(--bsc-navy-900);
}

.bsc-poster--sky   { background: var(--bsc-sky-300); }
.bsc-poster--amber { background: var(--bsc-amber-500); }

.bsc-poster--stripe {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(252, 132, 0, .16) 0 12px,
    transparent 12px 24px
  );
}

/*
  Vier amberkleurige schroefpunten in de hoeken. Eén element met vier
  achtergronden in plaats van vier spans — het is decoratie, geen inhoud.
*/
.bsc-poster__screws {
  position: absolute;
  inset: 10px;
  pointer-events: none;
  background-image:
    radial-gradient(circle 4.5px at 4.5px 4.5px, var(--bsc-amber-500) 0 2.5px, var(--bsc-navy-900) 2.5px 4.5px, transparent 4.6px),
    radial-gradient(circle 4.5px at calc(100% - 4.5px) 4.5px, var(--bsc-amber-500) 0 2.5px, var(--bsc-navy-900) 2.5px 4.5px, transparent 4.6px),
    radial-gradient(circle 4.5px at 4.5px calc(100% - 4.5px), var(--bsc-amber-500) 0 2.5px, var(--bsc-navy-900) 2.5px 4.5px, transparent 4.6px),
    radial-gradient(circle 4.5px at calc(100% - 4.5px) calc(100% - 4.5px), var(--bsc-amber-500) 0 2.5px, var(--bsc-navy-900) 2.5px 4.5px, transparent 4.6px);
  background-repeat: no-repeat;
}

.bsc-poster__kana {
  position: absolute;
  top: 22px;
  right: -15px;
  writing-mode: vertical-rl;
  background: var(--bsc-navy-900);
  color: var(--bsc-paper-100);
  padding: 10px 5px;
  border-radius: var(--radius-sm);
  font: var(--weight-bold) 13px / 1 var(--font-ui);
  letter-spacing: .22em;
}

/*
  Maat, tracking, gewicht en casing komen uit .bsc-label (§7).

  De KLEUR blijft wél een eigen declaratie, en dat is gemeten en geen luiheid.
  Een poster is geen band: .bsc-poster--sky staat op sky-300 (#8fddf3) en
  .bsc-poster--amber op amber-500 (#ffd024), en die vullingen kantelen de
  semantische tokens niet mee. De crème-waarde van --text-faint (#5b7383) haalt
  daar 3,27:1 respectievelijk 3,38:1 — onder de 4,5:1 die WCAG 1.4.3 voor deze
  tekstgrootte vraagt. navy-700 haalt op alle drie de postervarianten minstens
  6,30:1. De uitzondering hoort dus bij het paneel, niet bij het idioom.
*/
.bsc-poster__eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--bsc-navy-700);
}

.bsc-poster__title {
  margin: 0 0 10px;
  font: var(--weight-regular) clamp(26px, 3vw, 34px) / 1 var(--font-display);
  text-transform: uppercase;
  color: var(--bsc-navy-900);
}

.bsc-poster__text {
  margin: 0 0 16px;
  max-width: 34ch;
  font: var(--weight-regular) 14px / 1.6 var(--font-ui);
}

/* ── Verzendticket ─────────────────────────────────────────────────────── */

.bsc-ticket {
  position: relative;
  display: flex;
  background: var(--bsc-paper-000);
  border: var(--border-3) solid var(--bsc-navy-900);
  border-radius: var(--radius-md);
  color: var(--bsc-navy-900);
  overflow: hidden;
}

.bsc-ticket__body {
  flex: 1;
  padding: 22px 24px;
  display: grid;
  gap: 14px;
  min-width: 0;
}

/*
  Geen eigen eyebrow-definitie meer (§7). Het ticket staat op paper-000; daar
  haalt de gekantelde --text-faint 4,84:1, dus de kleur mag gewoon uit de
  bandcontext komen. (Anders dan bij .bsc-poster__eyebrow hierboven, waar het
  paneel zijn eigen felle vulling heeft.)
*/

.bsc-ticket__title {
  margin: 0;
  font: var(--weight-regular) clamp(22px, 3vw, 30px) / .98 var(--font-display);
  text-transform: uppercase;
  color: var(--bsc-navy-900);
}

.bsc-ticket__rows {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-top: 4px;
  border-top: var(--border-2) dashed rgba(0, 48, 72, .35);
}

.bsc-ticket__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;

  dt {
    font: var(--weight-medium) 13px / 1.5 var(--font-ui);
  }

  dd {
    margin: 0;
    font: var(--weight-medium) 13px / 1.4 var(--font-mono);
    white-space: nowrap;
  }
}

.bsc-ticket__note {
  margin: 0;
  font: var(--weight-regular) 12px / 1.5 var(--font-ui);
  color: var(--bsc-navy-700);
}

/* De perforatie: een gestreepte scheiding tussen ticket en amberkleurige stub. */
.bsc-ticket__stub {
  flex: 0 0 96px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 18px 0;
  background: var(--bsc-amber-500);
  border-left: var(--border-3) dashed var(--bsc-navy-900);
}

.bsc-ticket__stub-kana {
  writing-mode: vertical-rl;
  font: var(--weight-bold) 15px / 1 var(--font-ui);
  letter-spacing: .24em;
}

.bsc-ticket__stub-label {
  writing-mode: vertical-rl;
  font: var(--weight-bold) 11px / 1 var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
}

@media screen and (max-width: 760px) {
  /* Drie stickers naast elkaar passen hier niet meer op hun ontwerpmaat. */
  .bsc-sticker {
    --_size: 96px;
  }
}

@media screen and (max-width: 600px) {
  /* Homepage-band: 96 desktop → 48 mobiel (§4). 46/42 was willekeurig. */
  .bsc-collectors__inner {
    padding: var(--band-y, 48px) var(--gutter-x, 20px);
  }

  .bsc-sticker {
    --_size: 88px;
  }

  .bsc-poster {
    padding: 24px 22px;
  }

  /* De stub kost op smalle schermen te veel breedte voor decoratie. */
  .bsc-ticket__stub {
    display: none;
  }
}