/*
  fair-agenda — de beursagenda als zelfstandige sectie: eventflyers op papier.

  De vorm komt uit het concept: dit is geen agendatabel maar een prikbord.
  Elke beurs is een flyer die met een stukje tape opgehangen is, minimaal scheef
  omdat niemand recht plakt, en onderaan afgescheurd.

  Drie technieken doen dat werk:
    · clip-path op het papier tekent de scheurrand. Onregelmatige punten, want
      een perfecte zigzag leest als decoratie en niet als papier.
    · filter: drop-shadow op de OUDER, niet box-shadow op het papier zelf. Een
      box-shadow zou door de clip-path afgesneden worden; een drop-shadow volgt
      juist de geknipte vorm, inclusief de scheurtanden.
    · de tape zit op de ouder, buiten de clip-path — anders knipt het papier
      zijn eigen plakband weg.

  Kleuren komen bijna allemaal uit de semantische tokens, zodat de zone ook
  klopt als iemand hem buiten de crème band (.bsc-paper) zet.
*/

/* ══════════════════════════════════════════════════════════════════════════
   DE SECTIESCHIL — .bsc-band
   ══════════════════════════════════════════════════════════════════════════

   Deze schil stond tot 2026-08-08 in dev/css/components/_standwand.scss en
   hoorde bij de Standwand: één band met drie zones (beurzen, partners, social).
   Die container is opgeheven — Duncan wilde de beursagenda als zelfstandige
   sectie en de feed als een apart blok, en partners helemaal weg. De band zelf
   was het sterke deel en is daarom mee verhuisd naar de blocks die hem nog
   gebruiken.

   HET STAAT BEWUST TWEE KEER. fair-agenda.css en social-band.css dragen elk
   hun eigen kopie, want beide blokken moeten los bruikbaar zijn zonder de CSS
   van de ander (dezelfde afweging als bij het flyer/print-motief). Wijzig je
   hier iets, wijzig het dan in béide bestanden.

   Familie A (§3): verticaal ritme op de sectie, goot op de inner.
*/

.bsc-band {
  position: relative;
  padding: var(--band-y, 96px) 0;
  /* De rails staan absoluut tegen de rand; overflow houdt ze binnen de band. */
  overflow: hidden;
  /* Eigen stapelcontext, zodat het halftone-raster op z-index -1 onder de
     inhoud blijft maar niet achter de sectie erboven wegzakt. */
  isolation: isolate;
  background: var(--surface-page);
  color: var(--text-body);
}

/*
  Halftone. Een radiaal puntraster op lage dekking geeft het vlak textuur zonder
  een afbeelding te kosten. `background-attachment` blijft bewust op de
  standaardwaarde: fixed geeft op iOS Safari een schokkerige scroll.

  De kleur komt uit --border-hairline en niet uit een vaste crèmewaarde: deze
  band staat nu ook op nacht (de socialband), en daar moet het raster meekantelen.
*/
.bsc-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(var(--border-hairline) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: .55;
}

/* ── De hazard-rail ────────────────────────────────────────────────────── */

/*
  Schuine geel/navy strepen, boven en onder de band. Absoluut gepositioneerd:
  in de normale flow zouden ze ná de band-padding beginnen en zweefde er een
  strook achtergrond bóven de bovenste rail — dan leest de band niet meer als
  één afgesloten vlak, precies wat de rail moest voorkomen.

  `--_rail` maakt de streepbreedte instelbaar zonder de gradient te herhalen.
*/
.bsc-band__rail {
  --_rail: 14px;

  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  /* De strepen zitten op het pseudo-element; deze doos is het venster waar de
     tape doorheen rolt. */
  overflow: hidden;
}

.bsc-band__rail:first-child { top: 0; }
.bsc-band__rail:last-child  { bottom: 0; }

.bsc-band__rail::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--bsc-yellow-500) 0,
    var(--bsc-yellow-500) var(--_rail),
    var(--bsc-navy-900) var(--_rail),
    var(--bsc-navy-900) calc(var(--_rail) * 2)
  );
}

@media (prefers-contrast: more) {
  .bsc-band__rail { height: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MERKACCENT — DE TAPE DIE UITROLT
   ══════════════════════════════════════════════════════════════════════════

   Rolt de hazard-tape bij binnenkomst over de boven- en onderrand — bovenaan
   van links naar rechts, onderaan terug — dan zie je de band letterlijk
   afgezet worden voordat je hem leest.

   LET OP, DIT IS NU SLAPEND. dev/scripts/custom/reveal.js zet het attribuut
   [data-bsc-reveal] alleen op de selectors die in zijn eigen TAPE-lijst staan,
   en dat is nog '.bsc-standwand__rail' — een class die na de opheffing van de
   Standwand nergens meer gerenderd wordt. De regels hieronder werken dus pas
   zodra '.bsc-band__rail' in die lijst staat. Tot die tijd staat de tape er
   gewoon (de keyframe komt uit -100% náár de rustpositie, dus zonder JS is de
   rustpositie de enige staat) — er is geen zichtbare fout, alleen een gemiste
   beweging.
*/

/*
  Geen uitrollende tape meer.

  De hazard-rail rolde bij binnenkomst over de rand — een gele streep die de
  volle bandbreedte aflegde. Duncan: "de animaties van deze dingen is echt to
  much". Terecht: op een pagina met twee banden zag je hem vier keer, en een
  strook die 1280px aflegt trekt meer aandacht dan de inhoud erachter.

  De rail staat er nu gewoon. Dat is ook wat hazard-tape doet: het hángt er.
*/


/* ── Inner en kop ──────────────────────────────────────────────────────── */

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

.bsc-band__head {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  max-width: 46ch;
}

/*
  De ruiter. Een omgevouwen papieren labeltje met een Latijnse code en het
  katakana-equivalent eronder.

  HIJ STAAT NU BOVEN DE KOP, OP DE PLEK VAN DE EYEBROW. In de Standwand hing hij
  ónder de kop als zonelabel — er waren drie zones onder één kop en hij zei welke
  je las. Met één zone per sectie zou dat twee labels boven dezelfde lijst
  opleveren die hetzelfde zeggen. Als eyebrow blijft het merksignaal staan en is
  de dubbeling weg. Zet hem niet terug onder de kop.
*/
.bsc-band__tab {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  /* Reset: dit is een <p> en zou anders de globale p-margin erven. */
  margin: 0;
  justify-self: start;
  padding: 7px 16px 6px;
  background: var(--bsc-navy-900);
  color: var(--bsc-yellow-500);
  /* Afgesneden hoek rechtsonder: een ruiter, geen knop. */
  clip-path: polygon(0 0, 100% 0, 100% 65%, calc(100% - 10px) 100%, 0 100%);
}

.bsc-band__tab-code {
  font: var(--weight-regular) 15px / 1 var(--font-display);
  letter-spacing: .04em;
}

.bsc-band__tab-ja {
  font: var(--weight-regular) 10px / 1 var(--font-mono);
  letter-spacing: .1em;
  /* Yellow-200 op navy-900 haalt ruim 4,5:1; yellow-500 zou hier te hard
     concurreren met de code ernaast. */
  color: var(--bsc-yellow-200);
}

.bsc-band__title {
  margin: 0;
  font: var(--weight-regular) clamp(34px, 5vw, 56px) / .95 var(--font-display);
  letter-spacing: -.01em;
  color: var(--text-strong);
  text-wrap: balance;
}

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

/*
  DE MASTHEAD: kop links, intro rechts.

  Gestapeld op één kolom van 46ch is de goede vorm op een telefoon, maar op
  desktop laat het tweederde van de band leeg náást een kop die daardoor over
  drie regels valt. Vanaf 861px wordt de kop daarom een spread met een haarlijn
  eronder: ruiter en titel links, intro rechts, en dan begint de inhoud. De
  kolommen zijn 1fr en minmax(0, 42ch) — die tweede grens houdt de intro
  leesbaar in plaats van hem tot 600px op te rekken.

  Deze vorm komt uit de Standwand en is bewust meeverhuisd; hij was daar de
  oplossing voor vier identieke sectie-openingen onder elkaar op de homepage.
*/

/* Geldt op ÉLKE breedte: zonder deze regel valt de gap van de buitenste grid
   tussen de ruiter en de <h2> weg zodra ze in een eigen omhulling zitten. */
.bsc-band__head-main {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
}

@media screen and (min-width: 861px) {
  .bsc-band__head {
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 42ch);
    align-items: end;
    column-gap: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: var(--border-1) solid var(--border-hairline);
  }

  /* De intro lijnt met de onderkant van de titel uit, niet met de bovenkant. */
  .bsc-band__intro {
    padding-bottom: 6px;
  }
}

@media screen and (max-width: 600px) {
  .bsc-band__inner {
    gap: var(--space-5);
  }
}

/* ── De flyerwand ──────────────────────────────────────────────────────── */

.bsc-agenda__wall {
  display: grid;
  /* auto-fill met een ruime minimum: liever drie brede flyers dan vijf smalle
     waar de grote datum niet meer in past. */
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--space-6) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bsc-agenda__slot {
  display: flex;
}

/* ── De flyer ──────────────────────────────────────────────────────────── */

.bsc-flyer {
  --_tilt: -0.9deg;
  --_tape: -4deg;
  --_tear: 12px;

  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Ruimte voor de tape die over de bovenrand heen valt. */
  padding-top: 12px;
  transform: rotate(var(--_tilt));
  filter: drop-shadow(4px 4px 0 var(--border-outline));
}

/* Om en om kantelen, zodat de wand niet als een net raster leest. */
.bsc-agenda__slot:nth-child(4n + 2) .bsc-flyer { --_tilt: 0.8deg;  --_tape: 5deg; }
.bsc-agenda__slot:nth-child(4n + 3) .bsc-flyer { --_tilt: -0.5deg; --_tape: -7deg; }
.bsc-agenda__slot:nth-child(4n + 4) .bsc-flyer { --_tilt: 1.1deg;  --_tape: 3deg; }

/*
  GEEN HOVER, GEEN LIFT, GEEN CURSOR (2026-08-08).

  Hier stond een `transition` plus een `:hover` die de flyer 2px optilde en de
  schaduw verzwaarde. Dat hoorde bij de link naar de losse beurspagina, en die
  pagina bestaat niet meer — zie fair-agenda.php en \BSC_Content\Post_Types.

  Huisregel op deze site: een object dat niet meer klikt, mag er ook niet
  klikbaar uitzien. Een flyer die onder de muis beweegt terwijl er niets
  gebeurt is een belofte die niet wordt ingelost, en dat is hier al vier keer
  misgegaan. De regels zijn daarom wég en niet uitgecommentarieerd.

  Wat nog wél reageert op deze flyer: de externe link "Site van de beurs"
  onderaan, als de beurs er een heeft.
*/

.bsc-flyer__paper {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  /* Onderaan extra ruimte: daar zit de scheur, en tekst tot in de tanden
     ziet eruit als een renderfout. */
  padding: var(--space-5) var(--space-5) calc(var(--space-6) + var(--_tear));
  background: var(--surface-card);
  border: var(--border-2) solid var(--border-strong);
  /* Geen onderrand: een scheur heeft geen gedrukte lijn. */
  border-bottom: 0;
  color: var(--text-body);

  /*
    De scheurrand. Handmatig onregelmatig gemaakt (wisselende diepte en een
    paar tanden die net niet tot de bodem komen) — dat is het verschil tussen
    "afgescheurd" en "uitgeknipt met een kartelschaar".
  */
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--_tear)),
    95% 100%,
    90% calc(100% - var(--_tear) * 0.55),
    85% calc(100% - 1px),
    80% calc(100% - var(--_tear)),
    75% 100%,
    70% calc(100% - var(--_tear) * 0.7),
    65% calc(100% - 2px),
    60% calc(100% - var(--_tear)),
    55% 100%,
    50% calc(100% - var(--_tear) * 0.5),
    45% calc(100% - 1px),
    40% calc(100% - var(--_tear) * 0.95),
    35% 100%,
    30% calc(100% - var(--_tear) * 0.7),
    25% calc(100% - 2px),
    20% calc(100% - var(--_tear)),
    15% 100%,
    10% calc(100% - var(--_tear) * 0.6),
    5% 100%,
    0 calc(100% - var(--_tear))
  );
}

/* Het stukje tape. Halftransparant, zodat het papier eronder doorschemert. */
.bsc-flyer__tape {
  position: absolute;
  top: 0;
  left: 50%;
  width: 78px;
  height: 24px;
  transform: translateX(-50%) rotate(var(--_tape, -4deg));
  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 bovenste 12px van de flyer op. */
  pointer-events: none;
}

/* ── De datum: het eerste wat je scant ─────────────────────────────────── */

/*
 * Dit is een <time> bij een eendaagse beurs en een <p> bij een meerdaagse (twee
 * datums passen niet in één datetime-attribuut) of bij een beurs zonder datum.
 * Vandaar de margin-reset: zonder dat springt alleen de meerdaagse flyer.
 */
.bsc-flyer__date {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  color: var(--text-strong);
}

.bsc-flyer__day {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 50px);
  line-height: 0.82;
  letter-spacing: -0.01em;
}

.bsc-flyer__month {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1;
  text-transform: uppercase;
}

.bsc-flyer__year {
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  line-height: 1;
  color: var(--text-muted);
}

/*
 * "Datum volgt": bewust klein en in het mono-label, niet in het grote
 * Bungee-formaat van een echte datum. Een beurs zonder datum mag zichtbaar
 * zijn, maar hoort de flyers mét datum niet te overschreeuwen — dezelfde
 * afweging als in de datumkolom op /beurzen.
 */
.bsc-flyer__tbd {
  font: var(--weight-bold) 10px / 1.3 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Titel ─────────────────────────────────────────────────────────────── */

/*
  Kale kop, geen link. `.bsc-flyer__link` en de bijbehorende ::after-overlay,
  hover-onderstreping en :has()-focusring zijn op 2026-08-08 verwijderd samen
  met de losse beurspagina's. Er zit dus ook geen onzichtbare klikbare laag
  meer over de flyer — de tekst is weer gewoon te selecteren.
*/
.bsc-flyer__title {
  margin: 0;
  font: var(--weight-extrabold) 18px / 1.2 var(--font-ui);
  color: var(--text-strong);
  text-wrap: balance;
}

/* ── Aanwezigheid ──────────────────────────────────────────────────────── */

/*
  Nooit alleen kleur (WCAG 1.4.1): de tekst zegt het al, en daarbovenop
  verschillen de statussen in vulling en randstijl. Groen of oranje als
  tekstkleur zou op crème bovendien de 4,5:1 niet halen.
*/
.bsc-flyer__status {
  margin: 0;
  padding: 5px 10px;
  font: var(--weight-bold) 11px / 1.1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-body);
  border: var(--border-1) solid var(--border-strong);
  /* Papieren object → --radius-sm (§1); 2px was geen eigen rol. */
  border-radius: var(--radius-sm);
}

/*
  Gevuld en gestempeld: dít is de status waarbij hij op een vaste plek te vinden
  is, en dat is de enige aanwezigheid waar een bezoeker zijn dag op kan plannen.
  Vandaar dat alleen deze het gele vlak krijgt.

  De modifier heette `--hulp` tot 2026-08-08 (en daarvóór `--stand`, van een
  eigen kraam die niet bestaat). Nu `--vrijwilliger`, het woord dat Duncan zelf
  gebruikt. LET OP: dev/css/components/_fairs.scss heeft nog
  `.bsc-fair-status--hulp` voor het archief en de beurspagina; die wacht op de
  volgende gulp-ronde.
*/
.bsc-flyer__status--vrijwilliger {
  background: var(--bsc-yellow-500);
  border-color: var(--bsc-navy-900);
  color: var(--bsc-navy-900);
  font-weight: var(--weight-extrabold);
}

/* Alleen omlijnd: aanwezig, maar rondlopend. */
.bsc-flyer__status--bezoeker {
  background: transparent;
}

/* Gearceerd en gestippeld: nog niet zeker, en dat mag je zien. */
.bsc-flyer__status--misschien {
  border-style: dashed;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 5px,
    rgba(69, 96, 115, 0.14) 5px 10px
  );
}

.bsc-flyer__gone {
  margin: 0;
  font: var(--weight-medium) 11px / 1.1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── De externe link naar de beurssite ─────────────────────────────────── */

/*
  margin-top: auto duwt hem naar de onderkant zodat alle flyers op dezelfde
  hoogte eindigen. De verticale padding brengt het raakvlak op 44px (WCAG
  2.5.5).

  De `position: relative; z-index: 2` die hier stond tilde hem boven de
  klikbare laag van de flyer uit. Die laag is weg, dus dit is nu de enige link
  op de flyer en hoeft nergens meer bovenuit te steken.
*/
.bsc-flyer__site {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding: 12px 0 0;
  min-height: 44px;
  font: var(--weight-bold) 11px / 1.2 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.bsc-flyer__site:hover {
  color: var(--link-hover);
  text-decoration-thickness: 2px;
}

/* Een afgelopen beurs blijft leesbaar — geen opacity, dat kost contrast. */
.bsc-flyer--geweest .bsc-flyer__paper {
  border-style: dashed;
}

.bsc-flyer--geweest .bsc-flyer__day,
.bsc-flyer--geweest .bsc-flyer__month {
  color: var(--text-muted);
}

/* ── Link naar het volledige overzicht ─────────────────────────────────── */

.bsc-agenda__more {
  margin: 0;
  justify-self: end;
}

.bsc-agenda__more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  min-height: 44px;
  font: var(--weight-bold) 12px / 1.2 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.bsc-agenda__more-link:hover {
  color: var(--link-hover);
  text-decoration-thickness: 2px;
}

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

/*
  Geen gat in de wand en geen verzonnen voorbeeldbeurs, maar een leeg briefje
  dat eerlijk zegt dat er niets hangt — en meteen wijst naar de plek waar de
  aankondigingen wél als eerste staan.
*/
.bsc-agenda__empty {
  --_tape: -3deg;

  position: relative;
  max-width: 46ch;
  margin-top: 12px;
  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);
}

/* Ook het lege briefje hangt aan tape; die valt over de bovenrand heen. */
.bsc-agenda__empty .bsc-flyer__tape {
  top: -12px;
}

.bsc-agenda__empty-kicker {
  margin: 0 0 var(--space-2);
  font-size: 11px;
  color: var(--text-faint);
}

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

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

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

@media screen and (max-width: 600px) {
  .bsc-agenda__wall {
    /* Eén kolom: twee flyers naast elkaar op een telefoon persen de datum plat. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .bsc-flyer__paper {
    padding: var(--space-4) var(--space-4) calc(var(--space-5) + var(--_tear));
  }

  .bsc-agenda__more {
    justify-self: start;
  }
}

/* ── Voorkeuren van de bezoeker ────────────────────────────────────────── */

/*
  De flyer heeft sinds 2026-08-08 geen transitie en geen hover meer (hij is geen
  link), dus hier valt niets meer uit te zetten. De tape-reveal van de band
  hangt in _band.scss en heeft daar zijn eigen reduced-motion-regel.
*/

/*
  Meer contrast gevraagd: de gekantelde flyers rechttrekken en de scheurrand
  laten vervallen. Vorm mag nooit in de weg zitten van leesbaarheid.
*/
@media (prefers-contrast: more) {
  .bsc-flyer {
    transform: none;
  }

  .bsc-flyer__paper {
    clip-path: none;
    border-bottom: var(--border-2) solid var(--border-strong);
    padding-bottom: var(--space-5);
  }

  .bsc-flyer__tape {
    display: none;
  }
}

/*
  Windows-contrastmodus vervangt alle kleuren; clip-path en drop-shadow vallen
  dan weg en de flyer zou zonder onderrand als een half element lezen.
*/
@media (forced-colors: active) {
  .bsc-flyer__paper {
    clip-path: none;
    border-bottom: var(--border-2) solid;
    padding-bottom: var(--space-5);
  }

  .bsc-flyer__tape {
    display: none;
  }
}