/* ------------------------------------------------------------------ *
 * overzicht.css — het paginasjabloon "Overzicht"
 *
 * Vijf kolommen die de hele site in kaart brengen: rubrieken, reeksen, de nieuwste
 * artikelen, de nieuwste reacties en een onderwerpenwolk.
 *
 * Wordt alleen ingeladen op pagina's die dit sjabloon gebruiken (inc/enqueue.php).
 * Op alle andere schermen is dit dode bagage.
 *
 * Mobile-first: de basis is één kolom onder elkaar. De meerkolomsopmaak komt er pas
 * bij als er breedte voor is, en dat is per kolom uitgerekend en niet geraden — zie de
 * media queries onderaan.
 * ------------------------------------------------------------------ */

.rb-overzicht {
	padding-block: var(--s8) var(--s10);
}

/* ------------------------------------------------------------------ *
 * 1. Kop
 * ------------------------------------------------------------------ */

.rb-overzicht__kop {
	margin-bottom: var(--s8);
	padding-bottom: var(--s6);
	border-bottom: var(--bw) solid var(--rule);
}

.rb-overzicht__titel {
	margin: 0;
	font: var(--t-h1);
	color: var(--heading);
	text-wrap: balance;
}

/*
 * De inleiding komt uit de editor en is dus lopende tekst: op de leeskolom houden,
 * niet over de volle breedte van vijf kolommen laten uitlopen.
 *
 * De opmaak staat hier en niet op de gedeelde klasse .rb-tekst uit page.php, want die
 * klasse heeft in dit thema (nog) geen enkele CSS-regel — zie het rapport bij deze taak.
 * Erop leunen zou betekenen dat deze pagina er pas goed uitziet als dat elders is
 * opgelost.
 */
.rb-overzicht__inleiding {
	max-width: var(--measure);
	margin-top: var(--s5);
	font: var(--t-body);
	color: var(--text);
}

.rb-overzicht__inleiding > * {
	margin-block: var(--block);
}

.rb-overzicht__inleiding > :first-child {
	margin-block-start: 0;
}

.rb-overzicht__inleiding > :last-child {
	margin-block-end: 0;
}

/* ------------------------------------------------------------------ *
 * 2. Het raster
 * ------------------------------------------------------------------ */

.rb-overzicht__raster {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s9);
}

/* ------------------------------------------------------------------ *
 * 3. Een kolom
 * ------------------------------------------------------------------ */

.rb-kolom {
	min-width: 0; /* anders duwt een lange titel de rasterkolom breder dan 1fr */
}

/*
 * De kop is een balk met omgekeerd contrast, net als in het voorbeeld. Niet zwart maar
 * --knop-vlak: dat paar is al doorgerekend (10,47:1 licht, 9,80:1 donker) en het is de
 * enige plek in dit thema waar een gevuld vlak met tekst erop bestaat. Een tweede
 * gevuld paar erbij verzinnen levert alleen een extra kleur op die niemand beheert.
 */
.rb-kolom__kop {
	margin: 0 0 var(--s5);
	padding: var(--s3) var(--s4);
	background: var(--knop-vlak);
	color: var(--knop-tekst);
	/*
	 * --t-label is 14px, en dat mag voor een label maar niet voor een kop: dit is een
	 * <h2> en een kop onder 16px is altijd fout (CLAUDE.md §3). Vandaar wel de
	 * labelbehandeling — vet, kapitalen, gespatieerd — maar op 16px.
	 */
	font: var(--t-label);
	font-size: var(--fs-meta);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	text-align: center;
	text-wrap: balance;
}

.rb-kolom__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Een haarlijn tussen de rijen, niet eromheen. De laatste rij krijgt er geen: een lijn
 * onder het laatste item sluit de kolom af alsof er nog iets volgt.
 */
.rb-kolom__rij + .rb-kolom__rij {
	border-top: var(--bw) solid var(--rule);
}

/*
 * De hele rij is de link, niet alleen het woord. Zo is het tikvlak de volle breedte van
 * de kolom in plaats van de breedte van de tekst, en dat scheelt op een telefoon het
 * verschil tussen mikken en tikken.
 *
 * min-height en geen height: bij 200% tekstvergroting moet de rij mee kunnen groeien
 * (WCAG 1.4.4).
 */
.rb-kolom__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4);
	min-height: var(--tap);
	padding: var(--s2) 0;
	color: var(--accent);
	text-decoration: none;
}

.rb-kolom__link--blok {
	display: block;
	padding-block: var(--s3);
}

.rb-kolom__naam,
.rb-kolom__titel {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.rb-kolom__titel {
	display: block;
	font: var(--t-body);
	text-wrap: pretty;
}

/*
 * Het aantal is een feit naast de naam, geen deel van de linktekst. Gedempt en niet
 * onderstreept, zodat de link zelf de naam blijft.
 *
 * tabular-nums houdt de cijfers onder elkaar uitgelijnd; zonder dat springen 1 en 11 in
 * een rijtje van vijftien rubrieken zichtbaar heen en weer.
 */
.rb-kolom__aantal {
	flex: 0 0 auto;
	font: var(--t-meta);
	font-variant-numeric: tabular-nums;
	color: var(--muted);
	text-decoration: none;
}

.rb-kolom__datum {
	display: block;
	margin-top: var(--s1);
	font: var(--t-caption);
	color: var(--muted);
}

.rb-kolom__wie {
	font: var(--t-body);
	font-weight: 700;
	color: var(--text);
}

.rb-kolom__op {
	color: var(--muted);
}

/*
 * De genummerde lijst toont zijn nummers zelf, niet via list-style: een ::before laat
 * zich uitlijnen en kleuren, een marker niet. counter-reset op de lijst, counter-increment
 * op de rij — dan lopen de nummers door ongeacht wat ertussen staat.
 */
.rb-kolom__lijst--genummerd {
	counter-reset: rb-reactie;
}

.rb-kolom__lijst--genummerd .rb-kolom__rij {
	counter-increment: rb-reactie;
	display: grid;
	grid-template-columns: var(--s7) 1fr;
	gap: var(--s3);
	align-items: start;
}

.rb-kolom__lijst--genummerd .rb-kolom__rij::before {
	content: counter(rb-reactie);
	padding-top: var(--s3);
	font: var(--t-h2);
	font-style: italic;
	color: var(--heading);
	text-align: right;
}

/*
 * max-width op de leegtekst: de onderwerpenwolk loopt over de volle breedte, en zonder
 * begrenzing kwam die ene zin op 1104px uit — 165 tekens op één regel, ruim boven de
 * 60-75 uit CLAUDE.md §3. Een lege toestand is nog steeds tekst die iemand leest.
 */
.rb-kolom__leeg {
	margin: 0;
	max-width: var(--measure);
	font: var(--t-caption);
	color: var(--muted);
	text-wrap: pretty;
}

/* ------------------------------------------------------------------ *
 * 4. De onderwerpenwolk
 * ------------------------------------------------------------------ */

.rb-wolk {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	/*
	 * stretch, zodat alle vakjes op één regel even hoog worden.
	 *
	 * De lettergrootte verschilt per term — dat is de hele bedoeling van een wolk — en
	 * daarmee verschilt ook de hoogte van het vakje. Zonder dit stond "graf" op 28px
	 * naast "kennis" op 19px met een verschil van negen pixels in de omranding, en dan
	 * lijkt de rij scheef te staan. Nu bepaalt de grootste term de hoogte van zijn regel
	 * en staat de rest daar netjes in.
	 */
	align-items: stretch;
	/*
	 * 8px tussenruimte is de ondergrens uit CLAUDE.md §3 voor aangrenzende tikvlakken.
	 * In een wolk staan ze per definitie naast elkaar, dus dit is hier geen detail.
	 */
	gap: var(--s2);
}

/*
 * --wolk-maat komt uit het sjabloon en loopt van 1rem tot 1,75rem, afhankelijk van hoe
 * vaak het onderwerp voorkomt. De ondergrens is bewust 16px en niet de gebruikelijke
 * 11 of 12: dit is linktekst en dus leesbare tekst (CLAUDE.md §3). Het verschil tussen
 * groot en klein wordt daardoor subtieler dan in de meeste wolken — dat is de prijs.
 */
/*
 * Het vakje vult het lijstitem, en het lijstitem rekt mee met zijn regel. Twee stappen,
 * want de <li> is het flex-item van de wolk en de <a> zit daarin — zonder de <li> ook
 * op flex te zetten blijft de link zo hoog als zijn eigen tekst.
 */
.rb-wolk__item {
	display: flex;
}

.rb-wolk__link {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	min-height: var(--tap);
	padding: 0 var(--s4);
	border: var(--bw) solid var(--rule);
	font-size: var(--wolk-maat, 1rem);
	line-height: var(--lh-head);
	color: var(--accent);
	text-decoration: none;
}

.rb-wolk__aantal {
	font: var(--t-label);
	font-weight: 400;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ *
 * 5. Hover — uitsluitend op apparaten die het kennen
 *
 * Op een touchscreen blijft een hover-stand plakken na een tik (CLAUDE.md §3).
 * ------------------------------------------------------------------ */

@media (hover: hover) {

	.rb-kolom__link:hover {
		background: var(--callout);
	}

	.rb-kolom__link:hover :is(.rb-kolom__naam, .rb-kolom__titel) {
		color: var(--accent-hover);
		text-decoration-thickness: 2px;
	}

	.rb-wolk__link:hover {
		border-color: var(--accent);
		background: var(--callout);
	}
}

/* ------------------------------------------------------------------ *
 * 6. Van klein naar groot
 *
 * De grenzen zijn gekozen op wat er in een kolom past, niet op ronde getallen.
 * Een kolom moet minstens ~260px breed zijn om "Ruwaybida №1 — Soufiane Abu Abdillah"
 * op twee regels te houden; smaller wordt het een woordenkolom.
 * ------------------------------------------------------------------ */

@media (min-width: 600px) {

	.rb-overzicht__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s8) var(--s7);
	}

	/*
	 * De wolk is geen lijst maar een vlak dat uitwaaiert; die hoort over de volle
	 * breedte zodra er meer dan één kolom is. In een halve kolom werd hij 348px breed,
	 * en dan past er geen leesbare regel meer in — gemeten: 52 tekens, onder de 60 uit
	 * CLAUDE.md §3. Bovendien staat hij als vijfde blok anders in zijn eentje op een
	 * lege regel.
	 */
	.rb-kolom--wolk {
		grid-column: 1 / -1;
	}
}

@media (min-width: 900px) {

	.rb-overzicht__raster {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {

	.rb-overzicht__raster {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}