/* Blokken uit papendorp-core/inc/blocks-evenement.php: programma, sprekers, sessies, WhatsApp, contactpersoon.
   Alleen presets uit theme.json. Mobiel eerst, breder vanaf 48rem. Grijs alleen decoratief, nooit tekst. */

.pd-programma,
.pd-sprekers,
.pd-sessies {
	--pd-lijn: color-mix(in srgb, var(--wp--preset--color--antraciet) 20%, transparent);
}

.pd-programma__kop,
.pd-sprekers__kop,
.pd-sessies__kop {
	margin: 0 0 var(--wp--preset--spacing--30);
}

/* De knop (.pd-knop) staat in site.css: één vorm voor de hele site. Hier alleen: mag afbreken op een smal scherm. */
.pd-knop { padding-block: 0.5rem; text-align: center; }

/* Programma: tijd in een vaste kolom, regels gescheiden door een dunne lijn. */
.pd-programma__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--pd-lijn);
}
.pd-programma__rij {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: var(--wp--preset--spacing--30);
	padding-block: 0.75rem;
	border-bottom: 1px solid var(--pd-lijn);
}
.pd-programma__tijd {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Sprekers: lijst, foto alleen als die er is. */
.pd-sprekers__lijst,
.pd-sessies__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
}
.pd-sprekers__item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}
.pd-sprekers__foto {
	flex: none;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	object-fit: cover;
}
.pd-sprekers__tekst > *,
.pd-sessies__item > * {
	margin: 0;
}
.pd-sprekers__naam,
.pd-sessies__titel {
	font-weight: 700;
}
.pd-sprekers__functie {
	font-size: var(--wp--preset--font-size--klein);
}

/* Sessies: titel vet, omschrijving eronder. */
.pd-sessies__item > * + * {
	margin-top: 0.25rem;
}

/* WhatsApp, blok. Op de pagina rustig; als volle band antraciet met witte tekst. */
.pd-whatsapp.is-blok {
	padding-block: var(--wp--preset--spacing--50);
}
.pd-whatsapp__binnen {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-items: center;
}
.pd-whatsapp__tekst > * {
	margin: 0;
}
.pd-whatsapp__tekst > * + * {
	margin-top: var(--wp--preset--spacing--30);
}
.pd-whatsapp__uitleg {
	max-width: 36rem;
}
.pd-whatsapp__actie {
	padding-top: 0.25rem;
}
/* Word lid: donkergroen (--pd-whatsapp, site.css) met witte tekst en een gewoon wit icoon, net als de zwevende knop.
   Het felle groen uit het beeldmerk met een witte ballon oogde als een app-badge (Stefan, 19 okt). WhatsApp heeft overal één kleur. */
.pd-whatsapp__actie .pd-knop,
.pd-form__whatsapp .pd-knop {
	padding-left: 1.15rem;
	background: var(--pd-whatsapp);
	color: var(--wp--preset--color--wit);
	font-weight: 600;
}
.pd-whatsapp__actie .pd-knop .pd-icoon,
.pd-form__whatsapp .pd-knop .pd-icoon {
	font-size: 1.35rem;
}
.pd-whatsapp__actie .pd-knop:hover,
.pd-whatsapp__actie .pd-knop:focus-visible,
.pd-form__whatsapp .pd-knop:hover,
.pd-form__whatsapp .pd-knop:focus-visible {
	background: var(--wp--preset--color--nacht);
	color: var(--wp--preset--color--wit);
}

/* De kaart: wit op de donkere band, één kolom; de QR staat naast de knop, waar je hem zoekt. */
.pd-whatsapp__kaart {
	display: grid;
	gap: 1.1rem;
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--antraciet);
}
.pd-whatsapp__kaart > * { margin: 0; }
.pd-whatsapp__kaart .pd-whatsapp__kop {
	color: var(--wp--preset--color--antraciet);
	font-size: clamp(1.75rem, 2.4vw, 2.125rem);
	line-height: 1.15;
	text-wrap: balance;
}
.pd-whatsapp__kaart .pd-mensen { margin-bottom: 0.5rem; }
.pd-whatsapp__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; padding-top: 0.25rem; }
.pd-whatsapp__acties .pd-whatsapp__actie { margin: 0; padding: 0; }
@media (max-width: 37.49rem) {
	.pd-whatsapp__acties .pd-whatsapp__actie { flex: 1; }
	.pd-whatsapp__kaart .pd-whatsapp__actie .pd-knop { width: 100%; box-sizing: border-box; }
}
.pd-whatsapp__noot {
	font-size: var(--wp--preset--font-size--klein);
	color: color-mix(in srgb, var(--wp--preset--color--antraciet) 80%, transparent);
}
.pd-whatsapp__qr {
	display: none;
	margin: 0;
}
.pd-whatsapp__qrvlak {
	width: 5.5rem;
	padding: 0.3rem;
	background: var(--wp--preset--color--wit);
	outline: 1px solid var(--pd-lijn);
}
.pd-whatsapp__qrvlak svg {
	display: block;
	width: 100%;
	height: auto;
}
.pd-whatsapp__qrvlak .dark,
.pd-zwevend__qrvlak .dark {
	fill: var(--wp--preset--color--antraciet);
}
.pd-whatsapp__qr figcaption {
	margin-top: 0.4rem;
	font-size: 0.875rem;
}
/* De QR alleen op een computer: op de telefoon open je WhatsApp gewoon met de knop. */
@media (min-width: 64rem) {
	.pd-whatsapp__qr { display: flex; align-items: center; gap: 0.75rem; }
	.pd-whatsapp__qr figcaption { margin: 0; max-width: 7rem; line-height: 1.35; }
}

/* Wat de knop doet, onder de knop: op de telefoon opent WhatsApp, op een computer het paneel met de code. Dezelfde
   grens als de zwevende knop (site.css) en het paneel (site.js). */
.pd-whatsapp__gebeurt { margin: 0.6rem 0 0; font-size: var(--wp--preset--font-size--klein); line-height: 1.4; color: color-mix(in srgb, var(--wp--preset--color--antraciet) 80%, transparent); }
.pd-whatsapp__gebeurt-computer { display: none; }
@media (min-width: 60rem) and (hover: hover) {
	.pd-whatsapp__gebeurt-telefoon { display: none; }
	.pd-whatsapp__gebeurt-computer { display: inline; }
}

/* Gezichten: echte mensen bij activiteiten, als rij vierkanten die iets over elkaar liggen. */
.pd-mensen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
.pd-mensen__rij { display: flex; flex: none; margin: 0; padding: 0 0 0 0.75rem; list-style: none; }
.pd-mensen__rij li { margin-left: -0.75rem; }
.pd-mensen__foto { display: block; width: 5rem; height: 5rem; object-fit: cover; box-shadow: 0 0 0 3px var(--wp--preset--color--wit); }
.pd-mensen__bij { margin: 0; font-size: var(--wp--preset--font-size--klein); line-height: 1.35; color: color-mix(in srgb, var(--wp--preset--color--antraciet) 80%, transparent); }

/* Voorbeeldbericht: een ballon zoals in WhatsApp, in de kleuren van de site. */

.pd-whatsapp.is-blok.alignfull {
	background: var(--wp--preset--color--nacht);
	color: var(--wp--preset--color--wit);
	padding-inline: var(--wp--style--root--padding-left, var(--wp--preset--spacing--40));
}
.pd-whatsapp.is-blok.alignfull .pd-whatsapp__kop {
	color: var(--wp--preset--color--wit);
}
.pd-whatsapp.is-blok.alignfull .pd-whatsapp__binnen {
	max-width: var(--wp--style--global--wide-size, 72rem);
	margin-inline: auto;
}
.pd-whatsapp.alignfull .pd-knop:hover,
.pd-whatsapp.alignfull .pd-knop:focus-visible {
	background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--antraciet);
}

/* WhatsApp, compact: alleen een tekstlink met klein merkje. */
.pd-whatsapp.is-compact p {
	margin: 0;
}
.pd-whatsapp__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: inherit;
}
.pd-whatsapp__merk {
	flex: none;
	width: 1em;
	height: 1em;
}

/* Hint voor redacteuren als een instelling ontbreekt (bezoekers zien niets). */
.pd-hint {
	margin: 0;
	padding: 0.5rem 0.75rem;
	border: 1px dashed currentColor;
	border-radius: 0;
	font-size: var(--wp--preset--font-size--klein);
}

/* Contactpersoon, kaart: foto rond links, gegevens ernaast. */
.pd-contact {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}
.pd-contact__foto {
	flex: none;
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	object-fit: cover;
}
/* Nog geen portret: de voorletters in een lichtblauwe cirkel op dezelfde plek. */
.pd-contact__voorletters {
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--blauw-licht);
	color: var(--wp--preset--color--antraciet);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	letter-spacing: 0.02em;
}
.pd-contact__tekst > * {
	margin: 0;
}
.pd-contact__naam {
	font-weight: 700;
}
.pd-contact__links {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}
.pd-contact__links a {
	overflow-wrap: anywhere;
}

/* Contactpersoon, tekst: regels onder elkaar in de kleur van de omgeving (donkere voet). */
.pd-contact.is-tekst {
	display: block;
	color: inherit;
}
.pd-contact.is-tekst .pd-contact__links {
	margin-top: 0;
}
.pd-contact.is-tekst a {
	color: currentColor;
	text-decoration: underline;
	text-decoration-color: currentColor;
}
.pd-contact.is-tekst a:hover {
	text-decoration-thickness: 2px;
}

/* Naast de nieuwsbrief (home, Blijf op de hoogte): geen eigen ruimte boven en de koppen op één lijn. */
.pd-op-de-hoogte .pd-whatsapp.is-blok { padding-block: 0; }
.pd-op-de-hoogte > * { margin-block-start: 0 !important; }
@media (min-width: 56rem) { .pd-op-de-hoogte > * + * { padding-top: 0 !important; } }