/**
 * News — hub, sectiearchief en artikel.
 *
 * Maten en kleuren komen uit het goedgekeurde prototype. Ik heb geprobeerd ze
 * er met een script uit te halen; dat kostte drie pogingen en leverde losse
 * blokken op die csscheck.py terecht afkeurde. Met de hand schrijven is hier
 * korter dan een transformatie repareren.
 *
 * !important overal, zoals de rest van deze plugin, omdat Cornerstone anders
 * wint.
 *
 * Mobile first: het raster is één kolom en wordt breder bij 760 en 1000.
 */

/* ── DE SHELL ──────────────────────────────────────────────────────────
   Woordelijk uit about.css. Hier stond alleen een kleur en een font-stack,
   en dat was op drie manieren te weinig:

     1. GEEN FULL-BLEED. .trh-root breekt met width:100vw uit de kolom van
        het thema. Zonder dat blok begint de pagina op de breedte die
        Cornerstone eromheen zet, en dan staat news smaller dan de rest.

     2. GEEN RESET. De regel op alle kinderen zet text-transform:none. Zonder
        dat wint de themastijl en gaan de koppen in kapitalen — precies wat er
        misging.

     3. DE FONT-STACK STOND OP ÉÉN ELEMENT. Cornerstone zet zijn eigen font op
        koppen met hogere specificiteit, dus erven hielp niet. Nu op .trh-root
        met de reset eronder, zoals elke andere module het doet. */
.trn-page,
.trh-root.trn-page {
	position: relative !important;
	left: 50% !important;
	right: 50% !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	width: 100vw !important;
	max-width: 100vw !important;
	overflow-x: clip !important;
	--c-navy: #0c1927 !important;
	--c-navy-2: #0f1d2c !important;
	--c-oefen: #122131 !important;
	--c-green: #03c988 !important;
	--line: rgba(255,255,255,.10) !important;
	font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	-webkit-font-smoothing: antialiased !important;
	color: #fff !important;
	line-height: 1.5 !important;
	background: #0d1b2a !important;
}
.trn-page *, .trn-page *::before, .trn-page *::after {
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	text-transform: none !important;
}
/* Erven is hier niet genoeg: Cornerstone zet zijn eigen font rechtstreeks op
   h1 tot h6 met hogere specificiteit dan .trn-page, dus de kinderen erven de
   themastijl in plaats van de onze. Gemeten in een nagebouwde omgeving: de H1
   kwam er als Georgia uit.

   Vandaar font-family:inherit op alle tekstelementen — dat verwijst terug naar
   .trn-page en slaat de themaregel plat, zonder de stack drie keer te
   herhalen. */
.trn-page h1, .trn-page h2, .trn-page h3, .trn-page h4,
.trn-page p, .trn-page a, .trn-page span, .trn-page time,
.trn-page li, .trn-page em, .trn-page nav, .trn-page button {
	font-family: inherit !important;
}

.trn-page :focus-visible {
	outline: 2px solid var(--c-green) !important;
	outline-offset: 3px !important;
	border-radius: 8px !important;
}

/* ── DE GOOT ───────────────────────────────────────────────────────────
   Alleen .trh-w draagt hem, één klasse, zodat regels met twee klassen erop
   winnen. Ontbrak volledig; daardoor liep de inhoud tot de schermrand. */
.trn-page .trh-w {
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 0 16px !important;
}
@media (min-width: 700px) {
	.trn-page .trh-w { padding: 0 32px !important; }
}

/* ── KOP ───────────────────────────────────────────────────────────────
   Geen hero-shell. Die en het leaditem zouden hier hetzelfde zeggen, en dat
   kost 600px voordat er één bericht in beeld komt. */
.trn-page .trn-masthead { padding: calc(var(--hdr-total-h, 72px) + 24px) 0 0 !important; }
.trn-page .trn-mast-row {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 10px 40px !important;
	align-items: baseline !important;
}
@media (min-width: 860px) {
	.trn-page .trn-mast-row { grid-template-columns: minmax(0,auto) minmax(0,1fr) !important; }
}
.trn-page .trn-mast-h1 {
	margin: 0 !important;
	font-size: clamp(19px, 1.6vw, 21px) !important;
	line-height: 1.2 !important;
	letter-spacing: -.02em !important;
	font-weight: 500 !important;
}
.trn-page .trn-mast-upd {
	font-size: 13px !important;
	font-weight: 500 !important;
	color: rgba(255,255,255,.45) !important;
	white-space: nowrap !important;
	margin-left: auto !important;
}
/* ── DE KOP, UITGEREKEND ───────────────────────────────────────────────
   Twee keer ingedikt. Eerst stond de intro ONDER de H1 en kostte 78px; naast
   de H1 werd dat 15. Nu is hij helemaal weg en de H1 van 30 naar 20px.

   Waarom de intro mag verdwijnen: zijn taak — iemand die koud binnenkomt
   vertellen wat hier staat — wordt door de meta description gedaan, en die
   leest een zoeker in de zoekresultaten. Wie geklikt heeft ziet de koppen.
   Dezelfde zin staat daarom nu in de description en niet meer op de pagina.

   Waarom de H1 NIET mag verdwijnen: dan wordt de kop van het eerste bericht
   de H1 van de pagina, en zegt die dat hij over dat ene artikel gaat.

   20px en niet 12px hoofdletters: vijf pixels duurder, maar de kop blijft
   leesbaar en beschrijvend, en dat is wat als H1 gelezen wordt.

   --trn-boven is alles boven het beeld. Eén getal, want het vangnet verderop
   rekent ermee; in de vorige versie stond daar 305 hardgecodeerd en dan loopt
   het uit elkaar zodra je hier iets verandert. */
.trn-page { --trn-boven: 242px !important; }

.trn-page .trn-mast-row {
	display: flex !important;
	align-items: baseline !important;
	gap: 24px !important;
	padding-bottom: 20px !important;
	border-bottom: 1px solid var(--line) !important;
}

/* ── KRUIMELPAD ────────────────────────────────────────────────────────
   Stond er niet in. De template gebruikte de klassen wel, dus hij erfde de
   body-grootte en werd bijna even groot als de H1.

   Woordelijk uit about.css, inclusief het gedrag onder 700px: daar is de
   kruimel weg en staat er een terugknop. */
.trn-page .trh-hero-bread {
	display: none !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 12px !important;
	color: rgba(255,255,255,.55) !important;
	margin-bottom: 18px !important;
}
@media (min-width: 700px) {
	.trn-page .trh-hero-bread { display: flex !important; }
}
.trn-page .trh-hero-bread a { color: rgba(255,255,255,.55) !important; text-decoration: none !important; }
.trn-page .trh-hero-bread a:hover { color: rgba(255,255,255,.8) !important; }
.trn-page .trh-hero-bread-sep { color: rgba(255,255,255,.3) !important; flex: none !important; }
.trn-page .trh-hero-bread-cur { color: rgba(255,255,255,.8) !important; font-weight: 500 !important; }

/* ── BEELD ─────────────────────────────────────────────────────────── */
.trn-page .trn-shot {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	border-radius: 12px !important;
	background: rgba(255,255,255,.03) !important;
	border: 1px solid var(--line) !important;
	object-fit: cover !important;
}
/* De ratio hoort op ELK beeld, niet alleen op de plaatshouder. Die stond er
   alleen op .trn-shot--empty; een echte foto van 1200x750 werd daardoor op
   1136px breed 710 hoog, en dan is het leaditem in zijn eentje hoger dan een
   laptopscherm. Dat was precies wat er misging.

   Vandaar object-fit:cover erboven: de foto wordt bijgesneden in plaats van
   de doos op te rekken. */
.trn-page .trn-shot { aspect-ratio: 16 / 9 !important; }

/* TWEE uitgelichte berichten naast elkaar in plaats van één over de volle
   breedte. Eén breed item was 1136px en dus 640px hoog bij 16:9 — samen met
   de kop erboven bleef er niets van de pagina over, en dan zie je niet dat er
   nog meer is.

   Twee kolommen halveren de breedte en daarmee de hoogte: 555px breed geeft
   312px beeld. Dat past, en je ziet meteen dat het er twee zijn.

   Geen 21:9 meer en geen max-height. Die ratio bestaat niet in de praktijk,
   dus object-fit moest er een derde vanaf snijden — precies de vreemde
   uitsnede die je zag. 16:9 is wat een foto werkelijk is. */
.trn-page .trn-leads {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 26px !important;
}

/* ── HET VANGNET ───────────────────────────────────────────────────────
   De som hierboven klopt bij 1460px breed. Bij een ander scherm, een langere
   intro of een tweede regel in de balk klopt hij niet meer, en dan valt de
   kaart alsnog onder de vouw.

   Boven het beeld staat --trn-boven. Laat je 40px intro zien, dan mag het
   beeld 100svh min dat min 40 hoog worden. Boven ongeveer 590px bindt de cap
   niet en is het gewoon 16:9; daaronder snijdt hij bij in plaats van de
   pagina te laten overlopen.

   object-fit:cover doet het snijden, dus de foto vervormt niet — dat was de
   fout van de vorige poging met 21:9. */
.trn-page .trn-lead .trn-shot {
	max-height: calc(100svh - var(--trn-boven) - 40px) !important;
	object-fit: cover !important;
}

/* ── LEAD ──────────────────────────────────────────────────────────── */
.trn-page .trn-lead-sec { padding: 20px 0 0 !important; }
.trn-page .trn-lead {
	position: relative !important;
	border-radius: 12px !important;
	overflow: hidden !important;
}
.trn-page .trn-lead-over {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	padding: 52px 18px 16px !important;
	background: linear-gradient(to top, rgba(6,14,24,.94) 0, rgba(6,14,24,.72) 46%, rgba(6,14,24,0) 100%) !important;
}
.trn-page .trn-meta {
	display: flex !important;
	align-items: center !important;
	gap: 9px !important;
	margin: 0 0 9px !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	letter-spacing: .09em !important;
	text-transform: uppercase !important;
	color: rgba(255,255,255,.55) !important;
}
.trn-page .trn-meta span:first-child { color: var(--c-green, #03c988) !important; }
.trn-page .trn-meta i { font-style: normal !important; opacity: .4 !important; }
.trn-page .trn-lead-h2 {
	margin: 0 !important;
	font-size: clamp(19px, 1.9vw, 25px) !important;
	line-height: 1.18 !important;
	letter-spacing: -.02em !important;
	font-weight: 500 !important;
	max-width: 22ch !important;
	text-wrap: balance !important;
}
.trn-page .trn-lead-h2 a { color: #fff !important; text-decoration: none !important; }
.trn-page .trn-lead-h2 a:hover { text-decoration: underline !important; text-underline-offset: 4px !important; }

/* De intro staat ONDER het beeld in de gewone stroom, niet in een aparte
   kolom ernaast. Dat was de klacht: je zag de tekst onder het blok niet, want
   die stond buiten beeld. In de stroom kan dat niet gebeuren. */
.trn-page .trn-lead-foot { display: block !important; padding: 14px 2px 0 !important; }
.trn-page .trn-lead-intro {
	margin: 0 !important;
	font-size: 16px !important;
	line-height: 1.65 !important;
	color: rgba(255,255,255,.62) !important;
	max-width: 620px !important;
}

/* ── BRON ──────────────────────────────────────────────────────────────
   Geef je andermans cijfers door, dan hoort erbij waar ze vandaan komen en
   wanneer ze gepubliceerd zijn. Zonder dat kan niemand nagaan of je gelijk
   hebt, en verouderen ze ongemerkt. */
.trn-page .trn-source {
	margin: 9px 0 0 !important;
	font-size: 12.5px !important;
	line-height: 1.5 !important;
	color: rgba(255,255,255,.32) !important;
}
.trn-page .trn-source::before { content: "Source — " !important; color: rgba(255,255,255,.24) !important; }
.trn-page .trn-source a { color: rgba(255,255,255,.42) !important; text-decoration: underline !important; }

.trn-page .trn-chip {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	margin-top: 16px !important;
	height: 34px !important;
	padding: 0 15px !important;
	border-radius: 999px !important;
	border: 1px solid rgba(3,201,136,.3) !important;
	background: rgba(3,201,136,.08) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--c-green, #03c988) !important;
	text-decoration: none !important;
	white-space: nowrap !important;
}
.trn-page .trn-chip:hover { background: rgba(3,201,136,.16) !important; border-color: rgba(3,201,136,.5) !important; }

/* ── HET RASTER ────────────────────────────────────────────────────── */
.trn-page .trn-grid-sec { padding: clamp(30px, 4vh, 56px) 0 clamp(44px, 6.5vh, 88px) !important; }
.trn-page .trn-sechead {
	display: flex !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	margin-bottom: 22px !important;
	padding-bottom: 13px !important;
	border-bottom: 1px solid var(--line) !important;
}
.trn-page .trn-sechead h2 {
	margin: 0 !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	letter-spacing: -.01em !important;
}
.trn-page .trn-sechead span { font-size: 13px !important; color: rgba(255,255,255,.4) !important; }

.trn-page .trn-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 30px 26px !important; }
.trn-page .trn-card { display: flex !important; flex-direction: column !important; }
.trn-page .trn-card .trn-shot { margin-bottom: 14px !important; }
.trn-page .trn-card-h3 {
	margin: 0 0 8px !important;
	font-size: 18px !important;
	line-height: 1.28 !important;
	font-weight: 500 !important;
	letter-spacing: -.01em !important;
}
.trn-page .trn-card-h3 a { color: #fff !important; text-decoration: none !important; }
.trn-page .trn-card-h3 a:hover { text-decoration: underline !important; text-underline-offset: 3px !important; }
.trn-page .trn-card-intro {
	margin: 0 !important;
	font-size: 14.5px !important;
	line-height: 1.6 !important;
	color: rgba(255,255,255,.52) !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}
.trn-page .trn-leeg { color: rgba(255,255,255,.45) !important; font-size: 15px !important; }

/* ── SECTIES — pas vanaf ongeveer zestig berichten ─────────────────────
   Dan lukt scannen niet meer en worden de vier bakken echte archieven. Tot
   die tijd zijn het labels: een filter dat vier berichten verbergt is erger
   dan geen filter. */
.trn-page .trn-cats { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 22px !important; }
.trn-page .trn-cat {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	height: 34px !important;
	padding: 0 14px !important;
	border-radius: 999px !important;
	border: 1px solid rgba(255,255,255,.12) !important;
	background: rgba(255,255,255,.05) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: rgba(255,255,255,.8) !important;
	text-decoration: none !important;
}
.trn-page .trn-cat:hover { background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.2) !important; }
.trn-page .trn-cat em { font-style: normal !important; font-size: 11.5px !important; color: rgba(255,255,255,.38) !important; }

/* ── PAGINERING ────────────────────────────────────────────────────────
   Echte <a href>. Een "meer laden"-knop met JavaScript betekent dat een
   crawler alleen pagina één ziet — dezelfde val als bij de mobiele
   kaartweergave op de prijspagina. */
.trn-page .trn-pager {
	display: flex !important;
	gap: 6px !important;
	align-items: center !important;
	margin-top: 34px !important;
	padding-top: 22px !important;
	border-top: 1px solid var(--line) !important;
}
.trn-page .trn-pager a {
	min-width: 34px !important;
	height: 34px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 8px !important;
	border: 1px solid rgba(255,255,255,.12) !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	color: rgba(255,255,255,.7) !important;
	text-decoration: none !important;
}
.trn-page .trn-pager a[data-on="1"] {
	background: rgba(3,201,136,.14) !important;
	border-color: rgba(3,201,136,.45) !important;
	color: var(--c-green, #03c988) !important;
}
.trn-page .trn-pager-more { font-size: 13px !important; color: rgba(255,255,255,.35) !important; margin-left: 4px !important; }

/* ── HET ARTIKEL ───────────────────────────────────────────────────── */
.trn-page .trn-art { max-width: 720px !important; }
.trn-page .trn-art-h1 {
	margin: 14px 0 16px !important;
	font-size: clamp(27px, 3.4vw, 38px) !important;
	line-height: 1.12 !important;
	letter-spacing: -.025em !important;
	font-weight: 500 !important;
	text-wrap: balance !important;
}
.trn-page .trn-byline {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 0 26px !important;
	padding-bottom: 20px !important;
	border-bottom: 1px solid var(--line) !important;
	font-size: 13.5px !important;
	color: rgba(255,255,255,.5) !important;
}
.trn-page .trn-byline a { color: rgba(255,255,255,.72) !important; text-decoration: none !important; }
.trn-page .trn-byline a:hover { text-decoration: underline !important; }
.trn-page .trn-body { font-size: 17px !important; line-height: 1.7 !important; color: rgba(255,255,255,.78) !important; }
.trn-page .trn-body p { margin: 0 0 20px !important; }
.trn-page .trn-body h2 { margin: 34px 0 12px !important; font-size: 22px !important; font-weight: 500 !important; letter-spacing: -.015em !important; }
.trn-page .trn-body h3 { margin: 28px 0 10px !important; font-size: 18px !important; font-weight: 500 !important; }
.trn-page .trn-body a { color: var(--c-green, #03c988) !important; }
.trn-page .trn-body ul, .trn-page .trn-body ol { margin: 0 0 20px 20px !important; }
.trn-page .trn-body li { margin: 0 0 8px !important; }

/* ── VANAF TABLET ──────────────────────────────────────────────────── */
@media (min-width: 760px) {
	.trn-page .trn-grid  { grid-template-columns: repeat(2, 1fr) !important; }
	.trn-page .trn-leads { grid-template-columns: repeat(2, 1fr) !important; }
	.trn-page .trn-lead-over { padding: 64px 22px 18px !important; }
}

/* ── VANAF DESKTOP ─────────────────────────────────────────────────── */
@media (min-width: 1000px) {
	.trn-page .trn-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Een bronblok midden in de tekst. Zelfde toon als de bronregel onder een
   bericht, zodat het herkenbaar is als hetzelfde soort informatie — maar met
   ruimte eromheen, want hij onderbreekt de lezer. */
.trn-page .trn-source--inline {
	margin: 22px 0 !important;
	padding-left: 14px !important;
	border-left: 2px solid rgba(255,255,255,.12) !important;
}