/*
  statement — de opening met een uitspraak op papier.

  Het probleem dat dit blok oplost is niet alleen typografisch. Op 1440 stond
  elke openingssectie als één tekstkolom van 62ch aan de linkerkant, met de
  hele rechterhelft leeg. Twee kolommen — plaat links, tekst rechts — vullen de
  band en geven de pagina meteen een object in plaats van alleen letters.
*/

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

.bsc-statement__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter-x, 28px);
  display: grid;
  /* minmax(0,…) zodat een lange regel de kolom niet openduwt (§vw-valkuil). */
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-8);
  align-items: start;
}

/* Zonder tweede kolom draagt de plaat de sectie alleen. */
.bsc-statement--solo .bsc-statement__inner {
  grid-template-columns: minmax(0, 1fr);
}

/* ── De plaat ──────────────────────────────────────────────────────────── */

/*
  De plaat is altijd crème, ook in een nachtband: dit is een papieren object,
  net als het ticket en de sighting-stub. De tokens worden hier lokaal gekanteld
  in plaats van via .bsc-paper op de sectie, want de tekstkolom ernaast moet
  juist wél de kleur van de band houden.
*/
.bsc-statement__slab {
  position: relative;
  padding: var(--space-7) var(--space-6) var(--space-7) var(--space-8);
  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);
  /* Het tokenpaar, niet een eigen 6px: de harde schaduw is een lichtbron op
     een vaste plek (zie de materiaaltabel in _tokens.scss). */
  box-shadow: var(--shadow-hard-yellow, 5px 5px 0 var(--bsc-yellow-500));
  /* Papier hangt nooit helemaal recht. Klein genoeg om niet als fout te lezen. */
  transform: rotate(-1deg);
}

/*
  Halftone op de plaat, hetzelfde raster als de Standwand-band, zodat het
  dezelfde papiersoort is en niet toevallig ook crème.
*/
.bsc-statement__slab::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;
}

/* Verticale katakana langs de linkerrand — het idioom van de collectors-band. */
.bsc-statement__kana {
  position: absolute;
  top: var(--space-5);
  left: 0;
  writing-mode: vertical-rl;
  padding: 12px 5px;
  background: var(--bsc-navy-900);
  color: var(--bsc-paper-100);
  /* Half afgerond blijft een bewuste vorm; basiswaarde is papier (§1). */
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font: var(--weight-bold) 12px / 1 var(--font-ui);
  letter-spacing: .22em;
  pointer-events: none;
}

.bsc-statement__quote {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  /* Bungee in kleinkapitaal-formaat: groot genoeg om te schreeuwen, klein
     genoeg om een hele zin te dragen zonder af te breken. */
  font-size: clamp(21px, 2.4vw, 30px);
  line-height: 1.18;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-wrap: balance;
}

/* ── De tekstkolom ─────────────────────────────────────────────────────── */

/*
  .bsc-prose levert de leestypografie (dev/css/components/_page.scss). Hier
  alleen de bovenlijn: de tekst begint iets lager dan de plaat, zodat de twee
  kolommen niet als een tabel op één regel starten.
*/
.bsc-statement__body {
  max-width: var(--measure);
  padding-top: var(--space-4);
}

.bsc-statement__body > :first-child { margin-top: 0; }
.bsc-statement__body > :last-child  { margin-bottom: 0; }

/* ── Tablet: onder elkaar, plaat eerst ─────────────────────────────────── */
@media screen and (max-width: 900px) {
  .bsc-statement__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .bsc-statement__body {
    padding-top: 0;
  }
}

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

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

  /*
    Op 390px kost de rotatie aan weerszijden ruimte die er niet is: de plaat
    steekt dan onder de goot uit en veroorzaakt horizontale overflow. Recht
    zetten is hier geen verlies — de harde gele schaduw draagt de vorm al.
  */
  .bsc-statement__slab {
    transform: none;
    padding: var(--space-6) var(--space-5) var(--space-6) var(--space-7);
  }
}