/* Doe mee (pagina doe-mee, inhoud uit bin/demo/vul.php): naast "Zo doe je mee" drie echte foto's, één groot en twee
   klein (zaal, inschrijftafel, vrijwilligers), en bij "Wie zit erachter?" een foto van mensen van het park.
   Foto's: blok papendorp/foto (papendorp-core/inc/blocks-fotoplekken.php). Rechte hoeken, geen hover-vergroting. */

/* Basis van elke papendorp/foto: beeld 3:2 met bijschrift eronder. */
.pd-fotoplek { margin: 0; min-width: 0; }
.pd-fotoplek__beeld { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 40%; background: var(--wp--preset--color--warmwit); }
.pd-fotoplek__bijschrift { margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.4; color: color-mix(in srgb, var(--wp--preset--color--antraciet) 80%, transparent); }
.pd-fotoplek__bijschrift a { display: inline-block; margin-block: -0.85rem; padding-block: 0.85rem; color: inherit; text-underline-offset: 0.2em; } /* Tikvlak 44px. */

.pd-doe-mozaiek { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem 0.75rem; align-items: start; }
.pd-doe-mozaiek > .pd-fotoplek { margin: 0; }
.pd-doe-mozaiek > .pd-doe-mozaiek__groot { grid-column: 1 / -1; }
.pd-doe-mozaiek > .pd-fotoplek:not(.pd-doe-mozaiek__groot) .pd-fotoplek__beeld { aspect-ratio: 4 / 3; }

/* Zo doe je mee op een lichtblauw vlak, zoals de bovenkant van de home (prikbord 23 okt, Anne: "Kunnen we hier nog
   iets van een kleur inbrengen?"). Samen met de groene kaart bij Een goed idee? is de pagina niet meer alleen wit. */
.pd-tweeluik--vlak { --pd-vlak-rand: clamp(1.5rem, 3.5vw, 3rem); padding: var(--pd-vlak-rand); }
/* Op een computer vult de foto de rechterkant van het vlak van rand tot rand, zo hoog als de stappen: geen los
   plaatje met een leeg blauw stuk eronder (24 okt). */
@media (min-width: 56rem) {
	.pd-tweeluik--vlak { align-items: stretch; }
	.pd-tweeluik--vlak > .pd-doe-mozaiek { display: block; position: relative; min-height: 20rem; margin: calc(-1 * var(--pd-vlak-rand)) calc(-1 * var(--pd-vlak-rand)) calc(-1 * var(--pd-vlak-rand)) 0 !important; }
	.pd-tweeluik--vlak .pd-doe-mozaiek__groot { position: absolute; inset: 0; }
	.pd-tweeluik--vlak .pd-doe-mozaiek__groot .pd-fotoplek__beeld { width: 100%; height: 100%; aspect-ratio: auto; }
}

.pd-doe-wie { margin-top: var(--wp--preset--spacing--50); }
.pd-doe-wie > .wp-block-group > p { max-width: 38rem; }

/* Desktop: alleen de grote foto naast "Zo doe je mee"; met de twee kleine erbij stond er 250px wit onder de tekst. */
@media (min-width: 56rem) {
	.pd-doe-mozaiek > .pd-fotoplek:not(.pd-doe-mozaiek__groot) { display: none; }
}

/* ---------- Bied iets aan (19 okt) ---------- */
/* Formulier links, rechts een getinte kaart: de illustratie bovenin van rand tot rand, daaronder Even overleggen? en
   Anne (blok contactpersoon, kaart). Illustraties uit (B-020): een foto van mensen op die plek. Rechte hoeken. */
.pd-doe-kaart {
	--pd-kaart-rand: clamp(1.5rem, 3vw, 2.25rem);
	display: grid; gap: 1rem; margin: 0 !important; padding: 0 var(--pd-kaart-rand) var(--pd-kaart-rand); overflow: hidden;
	background: color-mix(in oklab, var(--wp--preset--color--groen) 14%, var(--wp--preset--color--wit));
}
.pd-doe-kaart > * { margin: 0 !important; }
.pd-doe-kaart .pd-met-illustratie { display: grid; margin: 0 calc(-1 * var(--pd-kaart-rand)) !important; padding: 0; }
.pd-doe-kaart .pd-met-illustratie > *,
.pd-doe-kaart .pd-met-illustratie > .pd-fotoplek { margin: 0 !important; max-width: none; } /* Foto van rand tot rand, ook tegen home.css in. */
.pd-doe-kaart .pd-met-illustratie > .pd-illustratie { width: 100%; max-width: none; padding: 1.25rem 0.75rem 0; box-sizing: border-box; }
.pd-doe-kaart .pd-illustratie img { width: 100%; height: auto; }
.pd-doe-kaart .pd-doe-kaart__foto .pd-fotoplek__beeld { aspect-ratio: 4 / 3; }
.pd-doe-kaart .pd-doe-kaart__foto .pd-fotoplek__bijschrift { margin: 0; padding: 0.5rem var(--pd-kaart-rand) 0; }
.pd-doe-kaart__kop { margin-top: 0.75rem !important; font-size: clamp(1.75rem, 2.5vw, 2.25rem); line-height: 1.05; }
.pd-doe-kaart .pd-contact { display: block; }
.pd-doe-kaart .pd-contact__links { margin-top: 0.75rem; display: grid; gap: 0.4rem; }
.pd-doe-kaart .pd-contact__links a { color: inherit; text-underline-offset: 0.2em; }
/* Naast het lange formulier blijft de kaart in beeld. */
@media (min-width: 56rem) { .pd-doe-kaart { position: sticky; top: 6rem; } }