/*
  sidetrack — de twee zijsporen aan het eind van een pagina.

  Elk paneel is één groot klikvlak. De kop staat in display-type maar bewust een
  slag kleiner dan een sectiekop: dit blok sluit een pagina af, het opent er geen
  tweede. De kana in de hoek is decor (aria-hidden in de markup) en doet hetzelfde
  werk als het tabblad op de kaartenbak — hij geeft het paneel een gezicht zonder
  een woord op te eisen.
*/

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

.bsc-sidetrack__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter-x, 28px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-6);
}

.bsc-sidetrack__panel {
  position: relative;
  /*
    Flexkolom en niet grid, met margin-top: auto op de bestemmingsregel. Met een
    vast grid-template-rows moet je het aantal rijen raden, en dat klopt niet
    meer zodra iemand in de editor de tekst of de kop leeghaalt. Zo staat de
    bestemming altijd onderaan en sluiten twee panelen met ongelijke
    tekstlengte toch op één lijn af.
  */
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  min-height: 100%;
  border: var(--border-2) solid var(--border-hairline);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}

/*
  Alleen een paneel dát ergens heen gaat reageert. Een statisch paneel is een
  <div> en krijgt hier per definitie niets van mee — geen hover, geen cursor,
  geen verschuiving. Een muisaanwijzer die reageert op iets dat niet klikt is
  een leugen (huisregel; zie ook channel-board).

  De reactie is die van een KAART uit de materiaaltabel: 2px omhoog, de rand
  neemt de merkkleur over. --dur-base en --ease-snap horen bij interactie.
*/
a.bsc-sidetrack__panel {
  transition:
    transform var(--dur-base) var(--ease-snap),
    border-color var(--dur-fast) var(--ease-snap),
    background-color var(--dur-fast) var(--ease-snap);
}

a.bsc-sidetrack__panel:hover,
a.bsc-sidetrack__panel:focus-visible {
  transform: translateY(-2px);
  border-color: var(--border-brand);
  background: var(--surface-raised);
}

@media (prefers-reduced-motion: reduce) {
  a.bsc-sidetrack__panel {
    transition: border-color var(--dur-fast) var(--ease-snap);
  }

  a.bsc-sidetrack__panel:hover,
  a.bsc-sidetrack__panel:focus-visible {
    transform: none;
  }
}

/*
  De kana zit in de rechterbovenhoek en loopt half buiten beeld. Groot genoeg om
  het paneel een silhouet te geven, licht genoeg om nooit met de kop te
  concurreren — hij staat achter de tekst en vangt geen muisklikken.
*/
.bsc-sidetrack__kana {
  position: absolute;
  top: calc(var(--space-4) * -1);
  right: var(--space-4);
  font: var(--weight-bold) clamp(56px, 8vw, 84px) / 1 var(--font-ui);
  color: var(--border-hairline);
  pointer-events: none;
  user-select: none;
}

.bsc-sidetrack__title {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--text-strong);
}

.bsc-sidetrack__text {
  position: relative;
  margin: 0;
  max-width: 46ch;
  font: var(--weight-regular) 16px / 1.6 var(--font-ui);
  color: var(--text-body);
}

/*
  De bestemming. Dit is de enige plek waar staat wáár je heen gaat, dus hij is
  tekst en geen icoontje. De pijl ernaast is aria-hidden decor en schuift mee op
  hover — de gebruikelijke "hij gaat die kant op"-hint.
*/
.bsc-sidetrack__dest {
  position: relative;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
  font: var(--weight-bold) 13px / 1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-brand);
}

.bsc-sidetrack__arrow {
  font-size: 15px;
  transition: transform var(--dur-base) var(--ease-snap);
}

a.bsc-sidetrack__panel:hover .bsc-sidetrack__arrow,
a.bsc-sidetrack__panel:focus-visible .bsc-sidetrack__arrow {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .bsc-sidetrack__arrow {
    transition: none;
  }

  a.bsc-sidetrack__panel:hover .bsc-sidetrack__arrow,
  a.bsc-sidetrack__panel:focus-visible .bsc-sidetrack__arrow {
    transform: none;
  }
}

/*
  De focusring komt uit de globale :focus-visible en volgt currentColor. Op dit
  paneel is currentColor --text-body (crème op nacht, navy op crème), dus de ring
  steekt in beide banden af. Niets te overschrijven — wel bewust een offset
  binnen het paneel houden, want overflow: hidden knipt een outline-offset van
  buitenaf weg.
*/
.bsc-sidetrack__panel:focus-visible {
  outline-offset: -4px;
}

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

  .bsc-sidetrack__inner {
    padding: 0 var(--gutter-x, 20px);
    gap: var(--space-5);
  }

  .bsc-sidetrack__panel {
    padding: var(--space-5);
  }
}