/* Actueel: overzicht (page-actueel.php) en artikel (single-actueel.php), zie includes/qm_actueel.php.
   Het artikel gebruikt de blokken van het thema (hero-image, text-fullwidth, contact-block),
   dus hier staat alleen wat het thema niet al regelt. */

/* Overzicht: beige kop, wit blok met de artikelen, beige contactblok; dezelfde afwisseling als op de andere pagina's.
   De kop houdt dus de witruimte en hoekjes (images/q-Hoekje-*) van het thema, en het contactblok zijn
   witte hoekje. De eerste kop van het witte blok staat op dezelfde afstand onder de kop als de tekst op andere
   pagina's (220 px, op mobiel 60 px). */
main .flexibele-content section.related-content.actueel-overzicht {
	background: #fff;
	padding-top: 20px;
}

/* Het witte hoekje boven de kop van het raster is de overgang van wit naar beige; het raster is hier wit. */
main .flexibele-content section.related-content.actueel-overzicht .row.top-bar::before {
	display: none;
}

/* Kaarten: bij hover doet het thema hetzelfde als op Nieuwbouw (wit hoekje in de foto, pijltje verschijnt). De witte
   kaartachtergrond valt op wit weg, net als bij de andere kaarten, die op wit ook niet van kleur veranderen. */

/* Overzicht: dezelfde kolommen als de kaarten op Nieuwbouw (global.css: 3 kolommen met 40 px ertussen,
   onder 1024 px 2 kolommen zonder tussenruimte). Als raster, zodat een halve laatste rij links blijft staan;
   in het thema schuift de laatste kaart dan naar rechts. */
main .flexibele-content section.actueel-overzicht .three-blocks.actueel-lijst {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 40px;
}

main .flexibele-content section.actueel-overzicht .three-blocks.actueel-lijst > .block {
	width: auto;
	max-width: none;
}

.actueel-samenvatting {
	margin: 8px 0 16px;
}

.actueel-paginering {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 60px 0 100px;
}

.actueel-paginering .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid #dcd7d2;
	border-radius: 100px;
	color: #98012e;
	text-decoration: none;
	box-sizing: border-box;
}

.actueel-paginering .page-numbers.current {
	background: #98012e;
	border-color: #98012e;
	color: #fff;
}

.actueel-leeg {
	text-align: center;
	padding: 40px 0 100px;
}

/* Artikel: regel boven de titel met link naar het overzicht en de datum. */
.actueel-meta {
	margin: 0 0 10px;
	font-weight: 600;
}

.actueel-meta a {
	color: inherit;
}

/* Afbeeldingen in de tekst van Frqnt: los, in een figure met onderschrift, of via de
   uitlijnklassen van WordPress (alignleft/alignright/aligncenter, ook wp-caption). */
.actueel-inhoud img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

.actueel-inhoud figure,
.actueel-inhoud .wp-caption,
.actueel-inhoud p:has(> img:only-child) {
	max-width: 100%;
	margin: 40px 0;
}

.actueel-inhoud figcaption,
.actueel-inhoud .wp-caption-text {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: #6b6b6b;
}

.actueel-inhoud .aligncenter {
	margin-left: auto;
	margin-right: auto;
}

.actueel-inhoud .alignleft {
	float: left;
	max-width: 50%;
	margin: 8px 30px 20px 0;
}

.actueel-inhoud .alignright {
	float: right;
	max-width: 50%;
	margin: 8px 0 20px 30px;
}

.actueel-inhoud h2,
.actueel-inhoud h3 {
	clear: both;
}

/* Veelgestelde vragen van Frqnt in het FAQ-blok van het thema: direct onder de kop erboven in de tekst,
   en even breed als de tekstkolom. */
main .flexibele-content section.text-fullwidth.actueel-voor-faq {
	padding-bottom: 0;
}

main .flexibele-content section.faq-container.actueel-faq {
	max-width: min(920px, calc(100% - 60px));
	margin: 10px auto 0;
	padding-bottom: 70px;
}

main .flexibele-content section.faq-container.actueel-faq.met-slot {
	padding-bottom: 40px;
}

main .flexibele-content section.faq-container.actueel-faq .questions {
	margin-top: 0;
}

main .flexibele-content section.faq-container.actueel-faq .answer p:last-child {
	margin-bottom: 0;
}

@media (max-width: 1023px) {
	main .flexibele-content section.actueel-overzicht .three-blocks.actueel-lijst {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
	}
}

/* Op mobiel één kaart per rij, over de volle breedte, zoals de artikelslider op de site.
   In twee kolommen (Nieuwbouw) is er maar 80 px voor de tekst, en ClickUp vraagt ook de samenvatting per kaart. */
@media (max-width: 667px) {
	main .flexibele-content section.actueel-overzicht .three-blocks.actueel-lijst {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Tot 440 px heeft de kop in het thema geen witruimte eronder; de tekst op andere pagina's begint dan 60 px lager. */
@media (max-width: 440px) {
	main .flexibele-content section.related-content.actueel-overzicht {
		padding-top: 60px;
	}
}

@media (max-width: 767px) {
	/* Op mobiel geen tekst naast een afbeelding. */
	.actueel-inhoud .alignleft,
	.actueel-inhoud .alignright {
		float: none;
		max-width: 100%;
		margin: 30px 0;
	}
}

/* Blok "Laatste artikelen" op de homepage */
.actueel-laatste .actueel-meer {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}