/**
 * Nieuwsoverzicht (/nieuws/): herstelt de kaartopmaak van het blok
 * nieuwsoverzicht.
 *
 * WordPress laadde op ELKE pagina de block.css van alle blokken, en
 * laatste-nieuws/block.css (homepage-nieuws) staat in de head ná
 * nieuwsoverzicht/block.css. Beide gebruiken exact dezelfde
 * #id-selectorketen, dus bij gelijke specificiteit wint de laatst geladen
 * homepage-versie — ook op /nieuws/, waar dat blok niet eens staat. Gevolg:
 *   - de kaart kreeg padding 10px i.p.v. 20px 20px 65px 20px, waardoor de
 *     'Lees meer'-tekst bij hover tegen de rand van het hover-vlak plakte
 *     (het hover-vlak zelf staat alleen in de nieuwsoverzicht-CSS, dus op de
 *     homepage valt die krappe padding niet op);
 *   - kolombreedte/-afstand kwamen van de homepage (3 items) i.p.v. van het
 *     overzicht;
 *   - onder 768px werd de lijst de horizontale slider van de homepage
 *     (flex-wrap: nowrap + overflow), terwijl het overzicht 50 items toont.
 *
 * Dit bestand laadt als laatste in de head en staat alleen op pagina's met
 * het blok nieuwsoverzicht (zie base.html.j2). De selectors zijn 1-op-1
 * die van het theme, zodat te zien blijft wát er hersteld wordt; de waarden
 * komen uit nieuwsoverzicht/block.css. Alleen layout wordt teruggezet —
 * typografie en de hover-zoom op de afbeelding blijven zoals ze nu zijn,
 * gelijk aan de homepage.
 */

/* Een raster in plaats van flex-wrap, om één reden: `grid-auto-rows: 1fr` geeft
 * álle rijen de hoogte van de hoogste. Met flex-wrap krijgt elke rij zijn eigen
 * hoogte, en dan springt de onderrand van rij tot rij mee met het langste
 * bericht in die rij - op dit overzicht scheelde dat 686 tot 811 pixels.
 * De kolombreedte komt daarmee uit het raster; de flex-basis van de
 * homepage-CSS wordt in een raster genegeerd en hoeft niet teruggezet. */
#laatste-nieuws__omhulsel .laatste-nieuws__houder #laatste-nieuws__alle-items-omhulsel {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 15px;
	grid-auto-rows: 1fr;
}

#laatste-nieuws__omhulsel .laatste-nieuws__houder #laatste-nieuws__alle-items-omhulsel #laatste-nieuws__item-omhulsel {
	padding: 20px 20px 65px 20px;
}

/* Verbergen door de paginering. Een klasse in plaats van een inline
 * `style.display`, want die zette `display:block` op de kaart en overschreef
 * daarmee de `display:flex` uit de stylesheet. */
#laatste-nieuws__omhulsel .laatste-nieuws__houder #laatste-nieuws__alle-items-omhulsel #laatste-nieuws__item-omhulsel.laatste-nieuws__item--verborgen {
	display: none;
}

@media ( max-width: 767px ) {
	/* Geen slider maar een gewone lijst: het overzicht toont 9 items per pagina. */
	#laatste-nieuws__omhulsel .laatste-nieuws__houder #laatste-nieuws__alle-items-omhulsel {
		grid-template-columns: 1fr;
		overflow: visible;
	}

	#laatste-nieuws__omhulsel .laatste-nieuws__houder #laatste-nieuws__alle-items-omhulsel #laatste-nieuws__item-omhulsel {
		padding: 20px 20px 65px 20px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1200px) and (orientation: portrait),
       only screen and (min-width: 768px) and (max-width: 1023px) {
	#laatste-nieuws__omhulsel .laatste-nieuws__houder #laatste-nieuws__alle-items-omhulsel {
		grid-template-columns: repeat(2, 1fr);
	}

	#laatste-nieuws__omhulsel .laatste-nieuws__houder #laatste-nieuws__alle-items-omhulsel #laatste-nieuws__item-omhulsel {
		padding: 20px 20px 65px 20px;
	}

	/* Bewust NIET teruggezet: het theme verbergt hier het laatste item met
	   `display: none !important` (op de homepage vult dat 2 kolommen netjes).
	   Een tegenregel zou ook !important moeten zijn en daarmee de inline
	   `display` van de paginatie verslaan, waardoor item 50 op élke pagina
	   zichtbaar wordt. Het laatste nieuwsitem blijft dus op tablet-portret
	   verborgen; dat vraagt een aanpassing in de paginatie, niet in de CSS. */
}