/* Juriductus bovenop het framework van de Ductus-familie (framework/stijl.css).
   Merkverschil zit in de tokens (inhoud.mjs). Hier staan alleen de bouwstenen
   die de familie niet heeft: de hero zonder video, het bewijsstuk en de kantlijn. */

/* ---------- Hero: donker vlak met de liniëring van een wetboek ---------- */
.jhero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--c-deep); color: #efe6e7;
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) calc(var(--sectie) + var(--plaat));
}
.jhero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2.35rem, color-mix(in srgb, var(--merk-licht) 9%, transparent) 2.35rem calc(2.35rem + 1px));
  mask-image: linear-gradient(100deg, transparent 0, #000 55%, #000 100%);
}
.jhero .wrap { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s5) var(--s4); align-items: center; }
/* De kantlijn: de tekst van de hero hangt aan een lijn, zoals een noot in de marge. */
.jhero-tekst { grid-column: 1 / span 6; position: relative; padding-left: clamp(1rem, 2vw, 1.75rem); }
.jhero-tekst::before { content: ""; position: absolute; left: 0; top: 0.3rem; bottom: 0.3rem; width: 2px; background: color-mix(in srgb, var(--merk-licht) 60%, transparent); transform-origin: top; animation: jlijn 1.2s var(--ease) both; }
.jhero-tekst::after { content: ""; position: absolute; left: -5px; top: 3.1rem; width: 12px; height: 12px; border-radius: 50%; background: var(--merk); border: 2px solid var(--merk-licht); box-sizing: border-box; animation: jbron 0.6s 0.9s var(--ease) both; }
.jhero .kicker { color: var(--merk-licht); }
.jhero h1 { font-size: var(--t-display); color: #fff; margin: var(--s2) 0 var(--s3); }
.jhero h1 em { color: var(--merk-licht); }
.jhero .lead { color: #d9c9cb; max-width: 34em; }
.jhero .acties { margin-top: var(--s4); }
.jhero .knop { background: var(--merk-licht); border-color: var(--merk-licht); color: var(--c-deep); }
.jhero .knop:hover { background: #fff; border-color: #fff; }
.jhero-bewijs { grid-column: 8 / -1; }
.ai-regel { display: flex; gap: 0.7rem; align-items: baseline; margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid color-mix(in srgb, var(--merk-licht) 28%, transparent); color: #cdbcbe; font: 400 0.8rem/1.6 var(--font-mono); letter-spacing: 0.02em; max-width: 36rem; }
.ai-regel b { flex: none; font-weight: 500; color: var(--c-deep); background: var(--merk-licht); padding: 0.05rem 0.45rem; letter-spacing: 0.08em; }
@media (max-width: 1000px) {
  .jhero-tekst, .jhero-bewijs { grid-column: 1 / -1; }
}

/* ---------- Bewijsstuk: een bewering met haar bronnen ---------- */
.bewijs { padding: clamp(1.4rem, 1rem + 1.4vw, 2rem); color: var(--c-ink); }
.bewijs .label { display: block; margin-bottom: 0.6rem; }
.bewijs-zin { font: 600 clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem)/1.3 var(--font-display); letter-spacing: -0.015em; text-wrap: balance; }
.bewijs-zin mark { background: linear-gradient(to top, var(--merk-zweem) 0 42%, transparent 42%); color: inherit; padding-inline: 0.1em; }
.bronnen { list-style: none; margin: var(--s3) 0 0; padding: 0 0 0 1.6rem; position: relative; display: grid; gap: var(--s2); }
.bronnen::before { content: ""; position: absolute; left: 0.3rem; top: -0.9rem; bottom: 0.9rem; width: 1.5px; background: var(--merk); transform-origin: top; animation: jlijn 1.1s 0.35s var(--ease) both; }
.bron { position: relative; animation: jbron 0.6s var(--ease) both; }
.bron:nth-child(1) { animation-delay: 0.55s; }
.bron:nth-child(2) { animation-delay: 0.85s; }
.bron:nth-child(3) { animation-delay: 1.15s; }
.bron::before { content: ""; position: absolute; left: -1.6rem; top: 0.42rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--c-surface); border: 1.5px solid var(--merk); transform: translateX(-0.07rem); }
.bron-soort { font: 500 0.68rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--merk-diep); }
.bron a { display: block; margin-top: 0.2rem; font-weight: 600; color: var(--c-ink); text-decoration-color: var(--merk-licht); text-underline-offset: 3px; }
.bron a:hover { color: var(--merk-diep); }
.bron-meta { display: block; margin-top: 0.15rem; font: 400 0.78rem/1.5 var(--font-mono); color: var(--c-ink-mute); }
.bron-meta .status { color: var(--merk-diep); font-weight: 500; }
.bewijs-voet { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--c-line); font-size: 0.85rem; color: var(--c-ink-mute); }

@keyframes jlijn { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes jbron { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .jhero-tekst::before, .jhero-tekst::after, .bronnen::before, .bron { animation: none; }
}

/* ---------- Kantlijn: de vindplaats naast de alinea ---------- */
.kantlijn-blok { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s3) var(--s4); align-items: start; }
.kantlijn-blok + .kantlijn-blok { margin-top: var(--s5); }
.kantlijn { grid-column: 1 / span 3; border-left: 2px solid var(--merk); padding-left: var(--s2); font: 400 0.8rem/1.6 var(--font-mono); color: var(--c-ink-mute); }
.kantlijn b { display: block; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--merk-diep); font-size: 0.7rem; margin-bottom: 0.3rem; }
.kantlijn a { color: var(--merk-diep); text-underline-offset: 3px; overflow-wrap: anywhere; }
.kantlijn-blok > .tekst { grid-column: 5 / span 7; }
@media (max-width: 900px) { .kantlijn, .kantlijn-blok > .tekst { grid-column: 1 / -1; } }

/* ---------- Paginakop zonder kanaalstrook ---------- */
.paginakop--kaal { border-top: 0; }

/* ---------- Brontabel ---------- */
.brontabel { width: 100%; border-collapse: collapse; background: var(--c-surface); box-shadow: var(--plaat) var(--plaat) 0 var(--merk-plaat); border: 1px solid var(--c-line); border-top: 3px solid var(--merk); }
.brontabel th, .brontabel td { text-align: left; vertical-align: top; padding: 1rem 1.1rem; border-bottom: 1px solid var(--c-line); font-size: var(--t-klein); line-height: 1.55; }
.brontabel thead th { font: 500 var(--t-label)/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-mute); }
.brontabel tbody th { font-weight: 600; color: var(--c-ink); width: 22%; }
.brontabel td { color: var(--c-ink-soft); }
.brontabel a { color: var(--merk-diep); text-underline-offset: 3px; }
.brontabel tr:last-child > * { border-bottom: 0; }
.tabel-rol { overflow-x: auto; padding-bottom: var(--plaat); padding-right: var(--plaat); }
.tabel-rol .brontabel { min-width: 44rem; }

/* De voet heeft hier geen video; een rustige lijn in de merkkleur volstaat. */
.voet { border-top: 3px solid var(--merk); }