/*
  channel-board — de contactkanalen als panelen.

  Twee dingen zijn hier niet onderhandelbaar:

  1. Het hele paneel is de link, dus het hele paneel is ook wat oplicht. Op deze
     site is drie keer een hover-vlak gemeld dat groter was dan het klikbare
     gebied; dat gebeurt zodra het effect op de <li> staat en de <a> erbinnen.
  2. Een paneel zónder link (.bsc-channel zonder --link) krijgt géén enkele
     hover- of focusreactie. Anders belooft de aanwijzer iets wat er niet is.
*/

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

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

/* Titel links, intro rechts — geen eyebrow-titel-tekst-stapel. */
.bsc-channels__head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-6) var(--space-8);
  align-items: end;
  margin-bottom: var(--space-7);
}

.bsc-channels__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-channels__intro {
  margin: 0;
  font: var(--weight-regular) var(--text-md) / 1.6 var(--font-ui);
  color: var(--text-body);
  max-width: var(--measure);
}

.bsc-channels__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bsc-channels__item {
  display: grid;
}

/* ── Het paneel ────────────────────────────────────────────────────────── */

.bsc-channel {
  position: relative;
  display: grid;
  gap: var(--space-2);
  align-content: start;
  /* Ruimte rechtsboven voor de hoekcode. */
  padding: var(--space-6) var(--space-5) var(--space-5);
  /* Papier, ook in een nachtband — zelfde materiaal als de sighting-stub. */
  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: dat token volgt --border-outline, en dat is op een
    nachtband night-000 — precies de paginakleur, dus een schaduw die je niet
    ziet. navy-700 leest wél als offsetrand. Zelfde afweging in binder-page.
  */
  box-shadow: 5px 5px 0 var(--bsc-navy-700);
  text-decoration: none;
  /* Ruim boven de 44px van WCAG 2.5.5; hier is het hele vlak het raakvlak. */
  min-height: 132px;
}

.bsc-channel__tag {
  position: absolute;
  top: calc(var(--border-3) * -1);
  right: calc(var(--border-3) * -1);
  padding: 6px 10px;
  background: var(--bsc-yellow-500);
  color: var(--bsc-navy-900);
  border: var(--border-2) solid var(--bsc-navy-900);
  /* Half afgerond: sluit aan op de hoek van de kaart (§1). */
  border-radius: 0 var(--radius-card) 0 var(--radius-sm);
  font: var(--weight-bold) 11px / 1 var(--font-mono);
  letter-spacing: var(--tracking-label);
}

.bsc-channel__name {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: 22px;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--bsc-navy-900);
}

.bsc-channel__value {
  font-size: 14px;
  font-weight: var(--weight-bold);
  /* navy-700 op paper-100 haalt 8,9:1. */
  color: var(--bsc-navy-700);
  /* Een lang e-mailadres mag afbreken in plaats van de kolom openduwen. */
  overflow-wrap: anywhere;
}

.bsc-channel__note {
  font: var(--weight-regular) 14px / 1.55 var(--font-ui);
  /* #5b7383 op paper-100 haalt 4,66:1. */
  color: #5b7383;
}

/*
  ── De reactie ────────────────────────────────────────────────────────────
  Materiaal TEGEL uit de tabel in _tokens.scss: 4px omhoog. De schaduwworp
  groeit met dezelfde 4px mee, want de harde schaduw is een lichtbron op een
  vaste plek. Fallbacks erbij zodat dit blok ook klopt vóór de eerstvolgende
  gulp-build de nieuwe tokens in de bundel zet.

  Uitsluitend op --link: een paneel zonder adres beweegt niet.
*/
.bsc-channel--link {
  /* Ruimte onderin voor de pijl, zodat die nooit op de toelichting valt. */
  padding-bottom: calc(var(--space-5) + 18px);
  transition:
    transform var(--dur-base, 180ms) var(--ease-snap, ease),
    box-shadow var(--dur-base, 180ms) var(--ease-snap, ease);
}

/*
  De pijl. Twee van de drie panelen gaan ergens heen en één niet; zonder dit
  teken zien ze er identiek uit en ontdek je het verschil pas met de muis.
  aria-hidden-equivalent: het is een ::after, dus schermlezers zien het niet —
  die horen de <a> al als link.
*/
.bsc-channel--link::after {
  content: '→';
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-4);
  font: var(--weight-bold) 18px / 1 var(--font-mono);
  color: var(--bsc-navy-700);
  transition: transform var(--dur-fast, 120ms) var(--ease-snap, ease);
}

@media (hover: hover) and (pointer: fine) {
  /* Materiaal TEGEL (_tokens.scss): 4px naar de kijker, worp groeit met 4px mee. */
  .bsc-channel--link:hover {
    transform: translate(calc(var(--react-tile, 4px) * -1), calc(var(--react-tile, 4px) * -1));
    box-shadow: 9px 9px 0 var(--bsc-navy-700);
  }

  .bsc-channel--link:hover::after {
    transform: translateX(4px);
  }
}

/* Toetsenbordpariteit: hover geldt niet voor wie tabt. */
.bsc-channel--link:focus-visible {
  transform: translate(calc(var(--react-tile, 4px) * -1), calc(var(--react-tile, 4px) * -1));
  box-shadow: 9px 9px 0 var(--bsc-navy-700), var(--glow-brand);
}

.bsc-channel--link:active {
  transform: translate(var(--react-press, 3px), var(--react-press, 3px));
  box-shadow: 2px 2px 0 var(--bsc-navy-700);
}

/* ── Onder tablet ──────────────────────────────────────────────────────── */
@media screen and (max-width: 900px) {
  .bsc-channels__head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

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

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

  .bsc-channel {
    min-height: 0;
  }
}