/* ═══════════════════════════════════════════════════════════════════
 *  Juristpagina (B-103, v2.28.0; verhaalblok B-110, v2.32.0; kaartenrij en
 *  slot B-111, v2.33.0) — bouwt op orj-secties.css en over.css (hero, strip,
 *  verhaalblok, juristenkaart-type, slot, chips, streep, tekstlink). Hier
 *  alleen wat nieuw is. Maten gemeten op het canvas "ORJ · juristpagina" (Chromium, de
 *  Inter-bestanden van de plugin) op 1440 · 1024 · 768 · 393 · 360.
 *  Thema-resets met !important waar het Pro-thema doorlekt (regel 7).
 * ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · Hero ─────────────────────────────────────────────────────── */
/* Kruimelpad als lijst (nav > ol, aria-current op de laatste stap). */
.orj-kruimels-lijst { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none !important; margin: 0 !important; padding: 0 !important; }
.orj-kruimels-lijst li { display: inline-flex; align-items: center; gap: 6px; margin: 0 !important; padding: 0 !important; }

/* Functieregel 24 onder de naam: vrij van de streep (die hangt 10 onder
   de achternaam). De alinea volgt 12 lager. */
.orj-jh-functie { margin: 24px 0 0 !important; font-size: 18px !important; line-height: 26px !important; font-weight: 500 !important; color: #4b5563 !important; }
.orj-jh .orj-oh-alinea { margin-top: 12px !important; }

/* Portret in de merkvorm: dezelfde contour als het logo, de kaarten en
   de plaatshouders (includes/merk.php). De rand is dezelfde vorm in mint,
   4 % groter, achter de foto. Verhouding van de vorm: 100 × 97,25. */
.orj-sec .orj-jh-portret img { border-radius: 0 !important; height: 97.25% !important; margin-top: 1.375%; clip-path: url(#orj-vorm); }
.orj-jh-rand { position: absolute; z-index: 0; left: -4%; top: -2.6%; width: 108%; height: 105%; fill: var(--orj-mint); }

@media (max-width: 639px) {
	.orj-jh-functie { margin-top: 20px !important; font-size: 16px !important; line-height: 24px !important; }
}

/* ── 3 · Over <voornaam>: loopbaan en aanpak — verhaalblok (B-110) ── */
/* De basis is sectie 2 van /over-ons/ (.orj-spec-*, over.css, §11g):
   mint blok radius 24, padding 64/64/64/96, tekst 17/1,65 in #4b5563 met
   vette aanloop, booglijn linksboven in de linkerpadding. Hier alleen
   wat de juristpagina toevoegt: de kop met vaste breuk, de drie standen
   rechts (foto · reviewkaart · geen) en het citaat als alinea. */
/* Stand foto: het portret (4 : 5) rekt mee met de tekst (stretch, over.css)
   maar wordt nooit een strook: minstens 400 hoog. */
.orj-jv-foto { min-height: 400px; }

/* Stand kaart: de review als witte kaart in een iets bredere kolom,
   verticaal gecentreerd naast de tekst (de tekst is korter dan de kaart). */
.orj-jv--kaart .orj-spec-kaart { grid-template-columns: minmax(0, 1fr) clamp(320px, 32vw, 400px); align-items: center; }
.orj-jv-kaart { position: relative; background: #fff; border-radius: 16px; padding: 32px 36px; }
.orj-jv-label { margin: 0 !important; font-size: 15px !important; line-height: 22px !important; font-weight: 600 !important; letter-spacing: 0 !important; color: #4b5563 !important; text-transform: none !important; }
.orj-jv-citaatblok { margin: 18px 0 0 !important; padding: 0 !important; }
.orj-jv-quote { display: block; line-height: 0; }
.orj-jv-citaatblok blockquote { margin: 10px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; quotes: none; }
.orj-jv-citaatblok blockquote::before,
.orj-jv-citaatblok blockquote::after { content: none !important; }
.orj-jv-citaatblok blockquote p { margin: 0 !important; max-width: none; font-size: 20px !important; line-height: 1.45 !important; font-weight: 500 !important; font-style: normal !important; letter-spacing: -.01em; color: var(--orj-ink) !important; text-wrap: pretty; }
.orj-jv-citaatblok figcaption { margin-top: 12px; font-size: 15px; line-height: 22px; font-weight: 500; color: #4b5563; }
.orj-jv-kenmerken { margin-top: 22px; padding-top: 18px; border-top: 1px solid #e5e7eb; }
.orj-jv-kenmerken p { margin: 0 !important; font-size: 15px !important; line-height: 22px !important; font-weight: 500; color: #4b5563 !important; }
.orj-jv-kenmerken ul { list-style: none !important; margin: 8px 0 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(2, max-content); gap: 6px 24px; }
.orj-jv-kenmerken li { margin: 0 !important; padding: 0 !important; font-size: 15px; line-height: 24px; font-weight: 600; color: var(--orj-ink); }
.orj-jv-link { margin: 20px 0 0 !important; line-height: 24px; }
/* De link in de kaart mag breken: de pijl blijft bij het laatste woord. */
.orj-jv-kaart .orj-tekstlink { display: inline; }
.orj-jv-kaart .orj-tekstlink svg { display: inline-block; vertical-align: -3px; margin-left: 4px; }

/* Standen foto en geen: het citaat als alinea in ink, met „…” en de bron eronder. */
.orj-jv-citaat { color: var(--orj-ink) !important; }
.orj-jv-citaat q { quotes: "\201E" "\201D"; font-style: normal !important; }
.orj-jv-citaat q::before { content: open-quote !important; }
.orj-jv-citaat q::after { content: close-quote !important; }
.orj-jv-bron { display: block; margin-top: 4px; font-size: 15px; line-height: 22px; color: #4b5563; }

/* Stand geen: één kolom, en dan smaller (960) zodat 567 tekst niet in
   een blok van 1215 zwemt. */
.orj-jv-smal { max-width: 960px; margin-left: auto; margin-right: auto; }

@media (max-width: 959px) {
	.orj-jv--kaart .orj-spec-kaart { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.orj-jv-kaart { margin-top: 32px; }
	.orj-jv-foto { min-height: 0; max-width: 480px; }
	.orj-jv-foto img { aspect-ratio: 1 / 1; }   /* een portret niet in 16 : 9 snijden */
}
@media (max-width: 639px) {
	.orj-jv-kaart { margin-top: 24px; padding: 24px 22px; border-radius: 12px; }
	.orj-jv-citaatblok blockquote p { font-size: 18px !important; }
	.orj-jv-foto img { aspect-ratio: 4 / 5; }
}

/* ── 4 · Artikelen als kaartenrij (B-111) ─────────────────────────── */
/* Het type van de juristenkaarten (§11h, over.css): .orj-jur zet de
   sectiepadding 96, .orj-kopc de gecentreerde kop, .orj-jur-rij--N de rij
   en .orj-jur-kaart de witte haarlijnkaart (rand #e5dccc, radius 16,
   flex-kolom). Hier alleen de artikelinhoud, op de schaal van de
   reviewkaart in het verhaalblok: padding 32, meta 14, titel 20/26,
   samenvatting 16/1,6 (hoogstens vier regels), voet 20/20. Gemeten op
   1440: kaart 384 × 316 (1,22 : 1), sectie 687 met drie, 1034 met zes. */
.orj-ja .orj-kopc-sub { max-width: 620px; margin: 16px auto 0 !important; color: #4b5563; }   /* 6,7:1 op crème; muted haalt 4,3:1 (§2b) */
.orj-ja { position: relative; overflow: hidden; }
.orj-ja .orj-wrap { position: relative; z-index: 1; }
.orj-artk { position: relative; padding: 32px !important; transition: border-color .2s ease; }
.orj-jur-rij--5 .orj-artk { padding: 24px !important; }   /* vijf in een rij (224 breed): de maat van de juristenkaart */
.orj-artk:hover { border-color: var(--orj-mint-donker); }
.orj-artk-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.orj-artk-meta .orj-chip { position: relative; z-index: 1; }   /* boven de klikvlak-link van de kaart */
.orj-art-leestijd,
.orj-art-datum { font-size: 14px; line-height: 20px; font-weight: 500; color: #4b5563; }
.orj-artk-titel { margin: 16px 0 0 !important; font-size: 20px !important; line-height: 26px !important; font-weight: 700 !important; letter-spacing: -.02em !important; color: var(--orj-ink) !important; hyphens: auto; -webkit-hyphens: auto; }
.orj-artk-titel a { color: var(--orj-ink) !important; text-decoration: none !important; }
.orj-artk-titel a:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.orj-artk-titel a:focus-visible { outline: 2px solid var(--orj-green); outline-offset: 3px; border-radius: 2px; }
/* De hele kaart klikbaar via de titel (één link, geen geneste). */
.orj-artk-titel a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
/* Bijdrage (B-112): de regel onder de titel, de maat van de functieregel op de juristenkaart. */
.orj-artk-rol { margin: 6px 0 0 !important; font-size: 14px !important; line-height: 20px !important; font-weight: 500 !important; color: #4b5563 !important; }
.orj-artk-sam { margin: 12px 0 0 !important; max-width: none; font-size: 16px !important; line-height: 1.6 !important; color: #4b5563 !important; flex: 1 0 auto; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.orj-artk-voet { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 20px; }
.orj-artk .orj-art-lees,
.orj-artk .orj-art-datum { position: relative; z-index: 1; }
.orj-art-lees { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; line-height: 24px; font-weight: 600; color: var(--orj-green-dark); white-space: nowrap; }
/* Uitklap: kaarten 7+ verbergt jurist.js; zonder JS staat alles open en blijft de knop hidden. */
.orj-artk--meer[hidden] { display: none; }
.orj-ja-meer { margin-top: 32px; text-align: center; }
.orj-ja-meer-knop { appearance: none; border: 0; background: none; margin: 0; padding: 12px 16px; min-height: 48px; border-radius: 14px; display: inline-flex; align-items: center; gap: 6px; font: 600 15px/24px var(--orj-font, 'Inter', sans-serif); color: var(--orj-green-dark); cursor: pointer; }
.orj-ja-meer-knop:hover { text-decoration: underline; text-underline-offset: 3px; }
.orj-ja-meer-knop:focus-visible { outline: 2px solid var(--orj-green); outline-offset: 2px; }
.orj-ja-meer-knop[hidden] { display: none; }
/* Booglijn rechtsboven (§11c, B-058): de haarlijntint van crème, 440 met
   streek 20; blijft ≥ 240 px van de kop en loopt deels achter de
   rechterkaart (wit, ondoorzichtig — nooit achter leestekst). Onder 960
   naar rechtsonder, weg van de gecentreerde kop. */
.orj-ja-boog { position: absolute; top: 0; right: 0; width: 440px; height: 440px; transform: scaleX(-1); pointer-events: none; z-index: 0; }
.orj-ja-boog path { stroke: #e5dccc; stroke-width: 20px; vector-effect: non-scaling-stroke; }

/* ── 5 · Slot op de juristpagina (B-111) ─────────────────────────── */
/* Het blok staat hier alleen (geen mediabeat erboven): de marge van 56
   vervalt, 96 boven en onder (§10, L). Booglijn linksonder zodat
   verhaalblok (linksboven), artikelen (rechtsboven) en slot van kant
   wisselen; alleen vanaf 960 — onder 960 houdt over.css hem rechtsboven,
   want linksonder zou hij achter de knop komen. */
.orj-jp .orj-herk-blok { margin-top: 0; }
@media (min-width: 960px) {
	.orj-jp .orj-herk-boog { top: auto; bottom: 0; transform: scaleY(-1); }
}

/* ── Responsief ───────────────────────────────────────────────────── */
@media (max-width: 959px) {
	.orj-ja-boog { top: auto; bottom: 0; width: 220px; height: 220px; transform: scaleX(-1) scaleY(-1); }
}
@media (max-width: 639px) {
	.orj-artk, .orj-jur-rij--5 .orj-artk { padding: 24px !important; }
	.orj-artk-titel { font-size: 19px !important; line-height: 25px !important; }
	.orj-artk-sam { font-size: 15px !important; }
	.orj-ja-boog { width: 180px; height: 180px; }
	.orj-ja-boog path { stroke-width: 12px; }
}
@media (prefers-reduced-motion: reduce) { .orj-artk { transition: none; } }

/* Beheerdersmelding als een profiel uit staat (bezoekers zien niets). */
.orj-jp-melding { max-width: 760px; margin: 40px auto; padding: 16px 20px; border-radius: 8px; background: #fff7ed; color: #7c2d12; font-size: 15px; }