/* Homepage (17 okt): de hoofdactie in het eerste scherm, de volgende activiteit als actie, een foto bij elk punt van
   "Wat de community je oplevert" en de terugblik als één groot en twee klein uit dezelfde activiteit.
   Blokken: papendorp-core/inc/blocks-home.php. Alleen presets uit theme.json; rechte hoeken; geen hover-vergroting. */

/* ---------- Opening ---------- */
/* Telefoon en tablet: kop en knoppen direct onder de foto, de volgende activiteit daaronder. Zo staat de hoofdactie
   in het eerste scherm en volgt de leesvolgorde de HTML (eerst de kop, dan de activiteit). */
@media (max-width: 59.99rem) {
	.pd-opening__paneel { grid-row: 2; padding-top: var(--wp--preset--spacing--40); }
	.pd-opening .pd-volgende--actie { grid-row: 3; margin-top: var(--wp--preset--spacing--40); }
	.pd-opening h1 { margin-bottom: 0.75rem; }
	.pd-opening .pd-lead { margin-bottom: 1.25rem; font-size: 1.125rem; }
	/* Direct onder twee oranje knoppen leest een oranje tab als een derde knop: hier een kopje in het donkere vlak. */
	.pd-opening .pd-volgende--actie .pd-volgende__label { align-self: stretch; padding: 1.125rem 1.25rem 0; background: var(--wp--preset--color--blauw-licht); color: var(--wp--preset--color--antraciet); }
}
@media (min-width: 60rem) {
	.pd-opening .pd-volgende--actie { width: 22rem; }
	/* Breedte uit de opening zelf (cqw), niet uit het venster (vw): is de pagina smaller dan het venster (schuifbalk,
	   een zijbalk zoals die van het prikbord), dan liep het tekstvlak over de volgende activiteit (prikbord 20 okt). */
	.pd-opening__paneel { width: min(calc(max(var(--pd-rand), (100cqw - 72rem) / 2) + 46rem), calc(100cqw - var(--pd-rand) - 24rem)); }
	.pd-opening .pd-lead { margin-bottom: 1.5rem; }
}
/* Breedbeeld (prikbord 21 okt, Steven: "niet te ver in de breedte op een breedscherm"): de foto loopt tot 120rem (1920px) en
   staat gecentreerd; op een breder scherm blijft het lichtblauwe vlak ernaast staan in plaats van een steeds platter
   uitgesneden foto. Tot en met 1920px verandert er niets. */
.pd-opening .pd-opening__foto { width: min(100%, 120rem); justify-self: center; }

/* Volgende activiteit als actie: het hele blok is één link, de knop maakt dat zichtbaar. */
.pd-volgende--actie { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; max-width: 100%; color: var(--wp--preset--color--antraciet); text-decoration: none; font-size: 1rem; } /* Licht vlak sinds 19 okt: geen donkere blokken op de home (Stefan). */
.pd-volgende--actie .pd-volgende__label { align-self: flex-start; color: var(--wp--preset--color--wit); }
.pd-volgende__blok { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.125rem; padding: 1.125rem 1.25rem 1.25rem; background: var(--wp--preset--color--blauw-licht); }
.pd-volgende__datum { display: flex; flex-direction: column; align-items: center; min-width: 3.25rem; color: var(--wp--preset--color--antraciet); font-family: var(--wp--preset--font-family--display); font-weight: 700; line-height: 0.95; font-variant-numeric: tabular-nums; }
.pd-volgende__dag { font-size: 3rem; letter-spacing: -0.03em; }
.pd-volgende__maand { margin-top: 0.35rem; font-family: var(--wp--preset--font-family--body); font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--pd-hoofdletters); }
.pd-volgende__over { display: grid; gap: 0.35rem; align-content: start; }
.pd-volgende__titel { font-family: var(--wp--preset--font-family--display); font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
.pd-volgende__meta { font-size: 0.9375rem; line-height: 1.45; color: color-mix(in srgb, var(--wp--preset--color--antraciet) 82%, transparent); }
.pd-volgende__voor { justify-self: start; margin-top: 0.3rem; padding: 0.2rem 0.5rem; background: var(--wp--preset--color--wit); color: var(--wp--preset--color--antraciet); font-size: 0.75rem; font-weight: 500; line-height: 1.4; text-transform: uppercase; letter-spacing: var(--pd-hoofdletters); }
.pd-volgende__knop {
	grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.25rem;
	box-shadow: inset 0 0 0 1.5px currentColor; font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--pd-hoofdletters);
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.pd-volgende--actie:hover .pd-volgende__knop,
.pd-volgende--actie:focus-visible .pd-volgende__knop { background: var(--wp--preset--color--oranje); color: var(--wp--preset--color--antraciet); box-shadow: none; }
.pd-volgende--actie:hover .pd-volgende__titel { text-decoration: underline; text-decoration-color: var(--wp--preset--color--oranje); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

/* ---------- Wat de community je oplevert: een foto per punt, als rijen ---------- */
.pd-opleveren > * { margin-block: 0; }
.pd-punten { display: grid; margin-top: var(--wp--preset--spacing--40) !important; border-top: 1px solid var(--pd-lijn); }
.pd-punt { display: grid; gap: 0.75rem; padding-block: 1.5rem; border-bottom: 1px solid var(--pd-lijn); }
.pd-punt > * { margin-block: 0 !important; }
.pd-punt .pd-fotoplek__bijschrift { margin-top: 0.4rem; }
.pd-punt__tekst > * { margin: 0; }
.pd-punt__tekst h3 { margin-bottom: 0.4rem; font-size: var(--wp--preset--font-size--groot); font-weight: 600; line-height: 1.25; }
.pd-punt__tekst p { max-width: 34rem; }
@media (min-width: 40rem) {
	.pd-punt { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
}
@media (min-width: 60rem) {
	.pd-opleveren { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--wp--preset--spacing--50); align-items: start; }
	.pd-opleveren > h2 { position: sticky; top: 2rem; }
	.pd-punten { margin-top: 0 !important; }
	.pd-punt { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); }
	.pd-punt:first-child { padding-top: 0; }
	.pd-punten { border-top: 0; }
}

/* ---------- Terugblik op de homepage: één groot en twee klein uit dezelfde activiteit ---------- */
/* Eerst de foto's, dan het verhaal in het nachtblauwe vlak eronder; op een groot scherm staan de cijfers rechts in
   dat vlak. Niets over de foto's heen: op een groepsfoto staan overal gezichten. De foto's staan los in het raster
   (display: contents). */
.pd-uitgelicht--reeks { grid-template-columns: 1fr 1fr; gap: 0.75rem; align-items: start; }
.pd-uitgelicht--reeks > * { grid-area: auto; margin: 0 !important; }
.pd-uitgelicht--reeks .pd-fotoreeks { display: contents; }
.pd-fotoreeks__beeld { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 35%; background: var(--wp--preset--color--warmwit); }
.pd-fotoreeks__beeld.is-groot { grid-column: 1 / -1; aspect-ratio: 3 / 2; object-position: 50% 40%; order: 1; }
.pd-uitgelicht--reeks .pd-uitgelicht__tekst { grid-column: 1 / -1; order: 2; max-width: none; }
.pd-fotoreeks__beeld:not(.is-groot) { order: 3; }
.pd-fotoreeks.is-2 .pd-fotoreeks__beeld:not(.is-groot) { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.pd-fotoreeks__foto { grid-column: 1 / -1; order: 4; margin: 0; font-size: 0.8125rem; line-height: 1.4; color: color-mix(in srgb, var(--wp--preset--color--antraciet) 80%, transparent); }
@media (min-width: 60rem) {
	.pd-uitgelicht--reeks { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: stretch; }
	.pd-fotoreeks__beeld.is-groot { grid-column: 1; grid-row: 1 / span 2; height: 0; min-height: 100%; aspect-ratio: auto; } /* Even hoog als de twee kleine (3:2) samen: dan is hij zelf ook ongeveer 3:2. */
	.pd-fotoreeks__beeld:not(.is-groot) { grid-column: 2; align-self: start; aspect-ratio: 3 / 2; }
	.pd-fotoreeks.is-2 .pd-fotoreeks__beeld:not(.is-groot) { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; height: 0; min-height: 100%; aspect-ratio: auto; }
	.pd-fotoreeks__foto { grid-column: 1 / -1; grid-row: 3; text-align: right; }
	.pd-uitgelicht--reeks .pd-uitgelicht__tekst { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--wp--preset--spacing--50); align-items: start; padding: var(--wp--preset--spacing--50); }
	.pd-uitgelicht--reeks .pd-uitgelicht__tekst > * { grid-column: 1; margin: 0; }
	.pd-uitgelicht--reeks .pd-uitgelicht__tekst > .pd-label { justify-self: start; }
	.pd-uitgelicht--reeks .pd-uitgelicht__tekst > * + * { margin-top: 0.75rem; }
	.pd-uitgelicht--reeks .pd-uitgelicht__tekst h2 { font-size: var(--wp--preset--font-size--kop); line-height: 1.15; }
	.pd-uitgelicht--reeks .pd-uitgelicht__tekst p:not(.pd-label):not(.pd-tekstlink):not(.pd-cijfers) { max-width: 34rem; font-size: var(--wp--preset--font-size--normaal); }
	.pd-uitgelicht--reeks .pd-cijfers { grid-column: 2; grid-row: 1 / span 5; margin: 0 !important; padding: 0 0 0 var(--wp--preset--spacing--40); border-top: 0; border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--warmwit) 25%, transparent); }
}

/* Bijschrift in de diashow: de link naar de activiteit krijgt een tikvlak van 44px, de regel zelf blijft laag. */
.pd-diashow figcaption a { padding-block: 0.95rem; } /* Inline: vergroot alleen het tikvlak, de regel breekt niet anders af. */
.pd-home .pd-sectie__kop .pd-tekstlink a, .pd-uitgelicht--reeks .pd-tekstlink a { display: inline-block; margin-block: -0.75rem; padding-block: 0.75rem; }

/* Illustraties uit (B-020): dan staat op die plek een echte foto boven de contactpersoon. */
.pd-met-illustratie > .pd-fotoplek { max-width: 26rem; margin-bottom: var(--wp--preset--spacing--40); }

/* Lage telefoons (iPhone SE, 667 hoog): iets minder foto, zodat Bekijk de agenda nog in het eerste scherm staat. */
@media (max-width: 59.99rem) and (max-height: 45rem) {
	.pd-diashow { --pd-held-h: clamp(10rem, 26svh, 22rem); }
	.pd-opening__foto img { height: clamp(10rem, 26svh, 22rem) !important; }
}
@media (min-width: 48rem) { .pd-diashow.wp-block-gallery > .wp-block-image figcaption.wp-element-caption { white-space: nowrap; } }

/* Het bewijs onder Eerder op Papendorp: één zin, geen eigen blok (18 okt, minder is meer). */
.pd-reekszin { margin-top: var(--wp--preset--spacing--40); padding-top: 1rem; border-top: 1px solid var(--pd-lijn); font-size: 1.0625rem; }
.pd-reekszin a { margin-left: 0.35rem; font-weight: 700; color: inherit; text-decoration-color: var(--wp--preset--color--oranje); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }

/* De volgende activiteit: Aanmelden is de belangrijkste knop op de pagina, dus gevuld oranje. */
.pd-opening .pd-volgende__knop { background: var(--wp--preset--color--oranje); color: var(--wp--preset--color--antraciet); box-shadow: none; }
.pd-opening .pd-volgende--actie:is(:hover, :focus-visible) .pd-volgende__knop { background: var(--wp--preset--color--wit); color: var(--wp--preset--color--antraciet); }

/* ---------- Over de community (19 okt, klant): afsluiter voor de voet, tekst links en mensen rechts. ---------- */
/* De foto begint op de hoogte van de hoofdletters van de kop (prikbord 23 okt, Steven), zoals op Doe mee (site.css,
   .pd-tweeluik). Browsers zonder text-box: de foto een fractie lager. */
.pd-over { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.pd-over > * { margin-block: 0 !important; }
.pd-over__tekst > * { margin-block: 0 !important; max-width: 34rem; }
.pd-over__tekst > * + * { margin-top: 1rem !important; }
.pd-over__tekst h2 { margin-bottom: 0.25rem !important; text-box: trim-start cap alphabetic; }
.pd-over__foto { margin: 0 !important; }
.pd-over__foto .pd-fotoplek__beeld { aspect-ratio: 4 / 3; }
@media (min-width: 56rem) {
	.pd-over { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: stretch; }
	/* De foto is even hoog als de tekst: boven gelijk met de hoofdletters van de kop, onder met de laatste regel
	   (prikbord 24 okt, het punt ging terug op open). De foto bepaalt de hoogte niet, hij vult wat de tekst neemt. */
	.pd-over__foto { position: relative; min-height: 18rem; }
	.pd-over__foto .pd-fotoplek__beeld { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
	.pd-over__tekst > :last-child { text-box: trim-end text; }
}
@supports not (text-box: trim-start cap alphabetic) {
	@media (min-width: 56rem) { .pd-over > .pd-over__foto { margin-top: 0.6rem !important; } }
}

/* Opening: WhatsApp-knop naast Bekijk de agenda (19 okt), op één regel waar het past. Geen QR hier: die zit in de pop-up. */
.pd-opening__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 0 !important; }
.pd-opening__acties > * { margin: 0 !important; }
.pd-opening__acties .pd-whatsapp.is-knop { padding: 0; }
.pd-opening__acties .pd-whatsapp__acties { padding-top: 0; } /* Op dezelfde hoogte als Bekijk de events. */
.pd-opening__acties .pd-whatsapp__actie { padding: 0; }
.pd-opening__acties .pd-whatsapp__qr,
.pd-opening__acties .pd-whatsapp__gebeurt { display: none; } /* De opening blijft twee knoppen; de uitleg staat in het paneel en in de band. */

/* ---------- Doe je mee? (19 okt) ---------- */
/* Eén licht vlak met twee getinte panelen naast elkaar: komen (groene tint, WhatsApp en nieuwsbrief) en organiseren
   (oranje tint, knop). Tekst bovenin, het beeld vult de onderkant van het paneel van rand tot rand en valt een stukje
   onder de rand weg. Illustraties uit (B-020): dan een foto van mensen op die plek. Daaronder de nieuwsbrief en
   Even overleggen? als witte stroken. Rechte hoeken, zoals de hele huisstijl (design.md). Telefoon: onder elkaar. */
.pd-meedoen { margin-block: 0 !important; padding: clamp(3rem, 7vw, 5.5rem) var(--wp--preset--spacing--40) clamp(2.5rem, 5vw, 4rem); }
.pd-meedoen__binnen { max-width: 72rem; margin-inline: auto !important; }
/* Op een gewone pagina (Bedrijven) loopt het vlak net als op de home tot de randen van het scherm, met de panelen op de
   lijn van de inhoud, en sluit het aan op de voet (24 okt). De schaduw kleurt alleen, hij maakt de pagina niet breder. */
.pd-pagina .entry-content > .pd-meedoen { margin-top: var(--wp--preset--spacing--50) !important; padding-inline: 0; box-shadow: 0 0 0 100vmax var(--wp--preset--color--warmwit); clip-path: inset(0 -100vmax); }
.pd-pagina:has(.entry-content > .pd-meedoen:last-child) { padding-bottom: 0; }
.pd-meedoen__binnen > * { margin-block: 0 !important; }
.pd-meedoen__kop > * { margin: 0 !important; }
.pd-meedoen__kop h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; } /* Groot (19 okt), maar onder de H1 van de pagina (revisie 24 okt). */
.pd-meedoen__kop .pd-lead { margin-top: 0.85rem !important; max-width: 40rem; }
.pd-meedoen__keuzes { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem) !important; }
.pd-meedoen__keuze {
	--pd-paneel-rand: clamp(1.5rem, 3vw, 2.5rem);
	display: grid; grid-template-rows: auto 1fr; gap: 1.75rem; margin: 0 !important;
	padding: var(--pd-paneel-rand) var(--pd-paneel-rand) 0; overflow: hidden; background: var(--pd-tint);
}
.pd-meedoen__keuze--komen { --pd-tint: color-mix(in oklab, var(--wp--preset--color--groen) 14%, var(--wp--preset--color--wit)); }
.pd-meedoen__keuze--organiseren { --pd-tint: color-mix(in oklab, var(--wp--preset--color--staalblauw) 16%, var(--wp--preset--color--wit)); } /* Blauwe tint, was oranje (19 okt). */
.pd-meedoen__tekst { display: grid; align-content: start; gap: 1rem; margin: 0 !important; }
.pd-meedoen__tekst > *, .pd-meedoen__uitleg > * { margin: 0 !important; max-width: 30rem; }
.pd-meedoen__tekst h3 { font-size: clamp(1.75rem, 2.8vw, 2.25rem); line-height: 1.08; }
.pd-meedoen__tekst > p, .pd-meedoen__uitleg > p { font-size: 1.125rem; line-height: 1.55; }
.pd-meedoen__uitleg { display: grid; align-content: start; gap: 1rem; }
:is(.pd-meedoen__tekst, .pd-meedoen__uitleg) > .pd-meedoen__noot { font-size: 0.9375rem; margin-top: -0.4rem !important; }
/* Zonder beeld onderin (Bedrijven, prikbord 23 okt): het paneel houdt rondom dezelfde rand. */
.pd-meedoen--zonder-beeld .pd-meedoen__keuze, .pd-meedoen__keuze:not(:has(> .pd-met-illustratie, > .pd-fotoplek)) { padding-bottom: var(--pd-paneel-rand); }
.pd-meedoen__tekst .wp-block-buttons { margin-top: 0.5rem !important; }
.pd-meedoen .pd-whatsapp.is-knop { padding: 0; margin-top: 0.5rem !important; }
.pd-meedoen .pd-whatsapp__acties { padding-top: 0; } /* Op dezelfde hoogte als de knop in het andere paneel. */
.pd-meedoen .pd-whatsapp__qr { display: none; } /* De QR zit al in de zwevende knop en de pop-up; hier blijft het paneel rustig. */
/* Het beeld van rand tot rand onderin het paneel. */
.pd-meedoen__keuze .pd-met-illustratie { display: grid; align-self: end; margin: 0 calc(-1 * var(--pd-paneel-rand)) !important; padding: 0; }
.pd-meedoen__keuze .pd-met-illustratie > * { margin: 0 !important; max-width: none; }
.pd-meedoen__keuze .pd-met-illustratie > .pd-illustratie { width: 100%; max-width: none; }
.pd-meedoen__keuze .pd-illustratie img { width: 100%; height: auto; margin-bottom: -3%; }
.pd-meedoen__foto { margin: 0 !important; }
.pd-meedoen__foto .pd-fotoplek__beeld { aspect-ratio: 16 / 10; }
/* Onder de panelen twee witte stroken met dezelfde opbouw: links de vraag, rechts het antwoord. De nieuwsbrief staat
   open (de doelgroep is 50+ en mailt liever), Even overleggen? toont de contactpersoon groot met portret (zonder
   portret de voorletters, blocks-evenement.php). Prikbord 20 okt. */
.pd-meedoen__strook { display: grid; gap: 1.25rem 3rem; align-items: center; margin-top: clamp(1.25rem, 2.5vw, 2rem) !important; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--wp--preset--color--wit); }
.pd-meedoen__strook > * { margin: 0 !important; }
.pd-meedoen__strooktekst > * { margin: 0 !important; max-width: 26rem; }
.pd-meedoen__strookkop { font-size: clamp(1.75rem, 2.8vw, 2.25rem); line-height: 1.08; }
.pd-meedoen__strooktekst p { margin-top: 0.6rem !important; font-size: 1.125rem; line-height: 1.5; }
.pd-meedoen__mail { align-items: start; }
.pd-meedoen .pd-contact { gap: clamp(1rem, 2.5vw, 1.75rem); }
.pd-meedoen .pd-contact__foto { width: clamp(5.5rem, 9vw, 7.5rem); height: clamp(5.5rem, 9vw, 7.5rem); }
.pd-meedoen .pd-contact__naam { font-size: 1.25rem; }
.pd-meedoen .pd-contact__links { display: grid; gap: 0.25rem; margin-top: 0.6rem; font-size: 1.0625rem; }
.pd-meedoen .pd-contact__links a { color: inherit; text-underline-offset: 0.2em; }
@media (max-width: 29.99rem) {
	.pd-meedoen .pd-contact { flex-direction: column; align-items: flex-start; } /* Smalle telefoon: portret boven de gegevens, het mailadres op één regel. */
	/* De WhatsApp-knop op één regel vanaf 360 breed (brak op 375 in twee gecentreerde regels, revisie 24 okt). */
	.pd-meedoen__keuze { --pd-paneel-rand: 1.25rem; }
	.pd-meedoen .pd-whatsapp__actie .pd-knop { padding-inline: 1rem; }
}
@media (max-width: 23.99rem) { .pd-meedoen .pd-whatsapp__actie .pd-knop { font-size: 0.8125rem; } } /* 360 breed. */
@media (min-width: 60rem) { /* Was 48rem: op 768 brak het mailadres van de contactpersoon midden in het adres (revisie 24 okt). */
	.pd-meedoen__strook { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
@media (min-width: 60rem) {
	.pd-meedoen__keuzes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	/* Kop, uitleg, knop en beeld van de twee panelen op dezelfde lijnen, ook als de ene kop of uitleg langer is
	   (prikbord 23 okt, Anne: "mooier uitlijnen en duidelijkere blokken"). De uitleg staat in een eigen groep
	   (pd-meedoen__uitleg), anders telt elke alinea als een rij. Zonder subgrid: elk paneel op zijn eigen maat. */
	@supports (grid-template-rows: subgrid) {
		.pd-meedoen__keuzes:has(.pd-meedoen__uitleg) { grid-template-rows: auto auto auto 1fr; }
		.pd-meedoen__keuze:has(.pd-meedoen__uitleg) { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
		.pd-meedoen__keuze:has(.pd-meedoen__uitleg) > .pd-meedoen__tekst { display: contents; }
		.pd-meedoen__keuze:has(.pd-meedoen__uitleg) .pd-meedoen__tekst > h3 { grid-row: 1; }
		.pd-meedoen__keuze:has(.pd-meedoen__uitleg) .pd-meedoen__uitleg { grid-row: 2; margin-top: 1rem !important; }
		.pd-meedoen__keuze:has(.pd-meedoen__uitleg) .pd-meedoen__tekst > :is(.pd-whatsapp, .wp-block-buttons) { grid-row: 3; align-self: start; margin-top: 1.5rem !important; }
		/* Het beeld altijd op de vierde rij, ook als een paneel geen knop heeft (WhatsApp-link nog leeg). */
		.pd-meedoen__keuze:has(.pd-meedoen__uitleg) > :not(.pd-meedoen__tekst) { grid-row: 4; margin-top: 1.75rem !important; }
	}
}

/* ---------- Eerder op Papendorp: de foto's dragen ---------- */
@media (min-width: 60rem) {
	.pd-terugzien__item:not(.is-groot) { grid-template-columns: 13.5rem minmax(0, 1fr) !important; padding-block: 1.5rem !important; }
	.pd-terugzien__item:not(.is-groot) .pd-terugzien__beeld { aspect-ratio: 4 / 3; }
}

/* ---------- Kleur (prikbord 20 okt, Anne: "heel statig en zakelijk, zoveel wit") ---------- */
/* Binnen B-030 (vlakken blauw, oranje alleen voor knoppen, geen donkere vlakken): de bovenkant van de home is één
   lichtblauw vlak, van de opening tot en met de buren, met de volgende activiteit als witte kaart erin. Eerder op
   Papendorp (sinds 19 okt onder de komende activiteiten, drie items) staat op een lichte groene tint, het groen
   uit het logo. Daarna wit, de warme band en de voet. */
.pd-opening { background: var(--wp--preset--color--blauw-licht); padding-bottom: var(--wp--preset--spacing--50); }
.pd-opening .pd-volgende__blok { background: var(--wp--preset--color--wit); }
.pd-opening .pd-volgende__voor { background: var(--wp--preset--color--blauw-licht); } /* Wit op de witte kaart leek ingesprongen tekst (revisie 24 okt). */
@media (max-width: 59.99rem) {
	.pd-opening .pd-volgende--actie .pd-volgende__label { background: var(--wp--preset--color--wit); } /* Telefoon: kopje in de kaart. */
}
.pd-opening + .pd-buren, .pd-buren { margin-top: 0 !important; padding-top: clamp(1.25rem, 3.5vw, 3rem); }
@media (min-width: 60rem) {
	.pd-opening__paneel { background: var(--wp--preset--color--blauw-licht); }
}
.pd-sectie--eerder {
	--pd-tint: color-mix(in oklab, var(--wp--preset--color--groen) 12%, var(--wp--preset--color--wit));
	margin-top: 0 !important;
	padding-block: clamp(2.5rem, 6vw, 4.5rem) !important; /* Ook na een andere sectie (site.css zet daar padding-top 0). */
	border-image: conic-gradient(var(--pd-tint) 0 0) fill 0 / / 0 100vw; /* Van rand tot rand zonder extra opmaak. */
}
.pd-sectie--eerder .pd-terugzien { margin-top: 0; }