/**
 * Bloglayout: opmaak van een bericht in het nieuwe sjabloon (mockup v5).
 *
 * Laadt alleen als px_bloglayout_actief() waar is; elke selector begint met
 * .px-bloglayout. De CSS van px-post-content laadt nog steeds. Deze regels
 * overschrijven daarvan de breedte van 630 px, de padding van de kop, de marges
 * van tekst en beeld, de uitbraak van 900 px, de koppen en de regel die elke
 * link in de tekst blauw onderstreept.
 *
 * Bron: mockups/blog-layout-src/template.html in de werkruimte.
 */

.px-bloglayout {
	--px-blog-kop: 800px;
	--px-blog-tekst: 720px;
	--px-blog-uitbraak: var(--row-width-narrow);
	--px-blog-uitbraak-helft: calc(var(--row-width-narrow) / 2);
	--px-blog-ritme: var(--space-d3);
}


/* ── Groep: kop, tekstdelen, brede blokken en delen ─────────────────────────
   Eén verticale maat tussen alle blokken. De blokken zelf hebben geen boven
   of ondermarge; die zouden in een flexcontainer optellen. */

.px-bloglayout .px-post-content-groep {
	display: flex;
	flex-direction: column;
	gap: var(--px-blog-ritme);
	padding-block: var(--px-blog-ritme);
}

/* Beaver Builder zet een clearfix (::before en ::after) op elke module. In deze
   flexbox tellen die mee als item en krijgen ze de gap, dus erboven en eronder
   kwam er een ritme bij. */
.px-bloglayout .px-post-content-groep::before,
.px-bloglayout .px-post-content-groep::after {
	content: none;
	display: none;
}

/* Het geefblok zet zelf zijn afstand erboven. */
.px-bloglayout .px-post-content-groep:has(+ .px-cta-banner) {
	padding-block-end: 0;
}

.px-bloglayout .px-post-content__container {
	gap: var(--px-blog-ritme);
}


/* ── Kop en metaregel ── */

.px-bloglayout .px-post-content__header {
	max-width: var(--px-blog-kop);
	padding: 0;
	position: relative;
}

.px-bloglayout .px-post-content__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-d075);
	margin-top: var(--space-d05);

	color: var(--gray-dark);
	font-family: var(--font-display);
	font-size: var(--text-d1);
	font-weight: var(--weight-medium);
	line-height: var(--lh-normal);
}

.px-bloglayout .px-post-content__meta-sep {
	color: var(--gray-mid);
}

.px-bloglayout .px-post-content__meta-cat {
	display: inline-block;
	padding: 0.15em 0.85em;
	border-radius: var(--radius-pill);
	background-color: var(--blue-light);
	color: var(--navy);
	font-size: 0.9em;
	text-decoration: none;
}

.px-bloglayout .px-post-content__meta-cat:hover {
	background-color: var(--sky-blue);
}


/* ── Uitgelicht beeld ── */

.px-bloglayout .px-post-content__figure {
	margin: 0;
	position: relative;
}


/* ── Tekstkolom ── */

.px-bloglayout .px-post-content__body {
	width: 100%;
	max-width: var(--px-blog-tekst);
	margin: 0 auto;
	position: relative;
}

/* Knoppen en downloads houden hun eigen kleur; alleen een gewone link is blauw. */
.px-bloglayout .px-post-content__body a.px-btn,
.px-bloglayout .px-post-content__body a.px-downloads__link {
	text-decoration: none;
}

.px-bloglayout .px-post-content__body a.btn--prim {
	color: var(--white);
}

.px-bloglayout .px-post-content__body a.btn--prim:hover,
.px-bloglayout .px-post-content__body a.btn--prim:focus-visible {
	color: var(--gray-dark);
}

.px-bloglayout .px-post-content__body a.btn--prim:active {
	color: var(--white);
}

.px-bloglayout .px-post-content__body a.px-downloads__link,
.px-bloglayout .px-post-content__body a.px-downloads__link:hover {
	color: var(--gray-dark);
}


/* ── Koppen in de tekst ──
   h2 op d15 met blauw streepje, h3 op d125, h4 op d1. Het streepje is een
   blok vóór de tekst en geen flexbox, zodat een kop met een link of vet woord
   op één regel blijft. */

.px-bloglayout .px-post-content__body h2,
.px-bloglayout .px-post-content__body h3,
.px-bloglayout .px-post-content__body h4 {
	letter-spacing: -0.2px;
	scroll-margin-top: 120px;
	position: relative;
}

.px-bloglayout .px-post-content__body h2 {
	font-size: var(--text-d15);
	line-height: var(--lh-snug);
	margin-bottom: var(--space-d075);
}

.px-bloglayout .px-post-content__body h2::before {
	content: "";
	display: block;
	width: 1.66em;
	height: 0.166em;
	margin-bottom: 0.42em;
	background-color: var(--divider-primary);
}

.px-bloglayout .px-post-content__body h3 {
	font-size: var(--text-d125);
	line-height: var(--lh-snug);
	margin-bottom: var(--space-d05);
}

.px-bloglayout .px-post-content__body h4 {
	font-size: var(--text-d1);
	line-height: var(--lh-snug);
	margin-bottom: var(--space-d05);
}

.px-bloglayout .px-post-content__body p + h2,
.px-bloglayout .px-post-content__body figure + h2,
.px-bloglayout .px-post-content__body .wp-block-list + h2 {
	margin-top: var(--px-blog-ritme);
}

.px-bloglayout .px-post-content__body p + h3,
.px-bloglayout .px-post-content__body p + h4,
.px-bloglayout .px-post-content__body .wp-block-list + h3,
.px-bloglayout .px-post-content__body .wp-block-list + h4 {
	margin-top: var(--space-d2);
}

/* Op de telefoon springt de broodtekst naar d125; de koppen gaan mee. */
@media (max-width: 767px) {
	.px-bloglayout .px-post-content__body h2 {
		font-size: var(--text-d2);
	}

	.px-bloglayout .px-post-content__body h3 {
		font-size: var(--text-d15);
	}
}


/* ── Citaat ── */

.px-bloglayout .px-post-content__body blockquote {
	margin: var(--px-blog-ritme) 0;
	position: relative;
}


/* ── Citaat met foto (blok px-citaat-foto), de persona van px-quote ── */

.px-bloglayout .px-post-content__body .px-post-content__quote {
	display: flex;
	flex-direction: column;
	gap: var(--space-d075);
	margin: var(--px-blog-ritme) 0;
}

.px-bloglayout .px-post-content__body .px-post-content__quote blockquote {
	margin: 0;
}

.px-bloglayout .px-post-content__quote .px-quote__author {
	display: flex;
	align-items: center;
	gap: var(--space-d075);
}

.px-bloglayout .px-post-content__quote .px-quote__avatar {
	width: var(--space-d5);
	height: var(--space-d5);
	border-radius: var(--radius-full);
	object-fit: cover;
	flex-shrink: 0;
}

.px-bloglayout .px-post-content__quote .px-quote__meta {
	display: flex;
	flex-direction: column;
}

.px-bloglayout .px-post-content__quote .px-quote__name {
	color: var(--gray-dark);
	font-family: var(--font-display);
	font-size: var(--text-d125);
	font-weight: var(--weight-semibold);
	line-height: 1.3;
	letter-spacing: -0.25px;
}

.px-bloglayout .px-post-content__quote .px-quote__subtitle {
	color: var(--gray-dark);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: var(--weight-regular);
	line-height: 1.75;
}


/* ── Afbeeldingen, kolommen en video breken uit tot de breedte van de banner ── */

.px-bloglayout .px-post-content__body figure:not(:has(blockquote)) {
	margin: var(--px-blog-ritme) 0;
}

.px-bloglayout .px-post-content__body .wp-block-image,
.px-bloglayout .px-post-content__body .wp-block-columns,
.px-bloglayout .px-post-content__body .wp-block-embed.is-type-video {
	max-width: var(--px-blog-uitbraak);
	margin-left: calc(50% - var(--px-blog-uitbraak-helft));
	margin-right: calc(50% - var(--px-blog-uitbraak-helft));
	position: relative;
}

.px-bloglayout .px-post-content__body .wp-block-image img {
	width: 100%;
	height: 500px;
	object-fit: cover;
	margin: 0;
}

/* Een beeld dat in de editor een eigen maat kreeg, blijft binnen de tekst. */
.px-bloglayout .px-post-content__body .wp-block-image.is-resized {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.px-bloglayout .px-post-content__body .wp-block-image.is-resized img {
	width: auto;
	max-width: 100%;
	height: auto;
	object-fit: initial;
}

/* Oude inhoud zonder blokken: een [caption] met een vaste breedte en een iframe
   uit [embed] staken op de telefoon buiten beeld (ook op productie). */
.px-bloglayout .px-post-content__body .wp-caption,
.px-bloglayout .px-post-content__body iframe {
	max-width: 100%;
}

/* Spotify, SoundCloud en andere embeds blijven binnen de tekstbreedte. */
.px-bloglayout .px-post-content__body .wp-block-embed:not(.is-type-video) {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}


/* ── Twee afbeeldingen naast elkaar (wp-block-columns) ── */

.px-bloglayout .px-post-content__body .wp-block-columns {
	display: flex;
	gap: var(--space-d15);
	margin-block: var(--px-blog-ritme);
}

.px-bloglayout .px-post-content__body .wp-block-columns .wp-block-column {
	flex: 1 1 0;
	min-width: 0;
}

.px-bloglayout .px-post-content__body .wp-block-columns .wp-block-image {
	max-width: 100%;
	margin: 0;
}

.px-bloglayout .px-post-content__body .wp-block-columns .wp-block-image img {
	height: 320px;
}


/* ── Drieluik: galerij van precies drie foto's ──
   Eén staande foto links, twee liggende rechts, bijschrift onder het geheel.
   Een galerij met meer of minder foto's houdt de gewone beeldopmaak. */

.px-bloglayout .px-post-content__body .wp-block-gallery:has(> .wp-block-image:nth-of-type(3):last-of-type) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(2, 1fr);
	gap: var(--space-d1);
	aspect-ratio: 16 / 10;
	max-width: var(--px-blog-uitbraak);
	margin-left: calc(50% - var(--px-blog-uitbraak-helft));
	margin-right: calc(50% - var(--px-blog-uitbraak-helft));
	position: relative;
}

.px-bloglayout .px-post-content__body .wp-block-gallery:has(> .wp-block-image:nth-of-type(3):last-of-type) > .wp-block-image {
	display: block;
	height: 100%;
	max-width: none;
	margin: 0;
}

.px-bloglayout .px-post-content__body .wp-block-gallery:has(> .wp-block-image:nth-of-type(3):last-of-type) > .wp-block-image:first-child {
	grid-row: span 2;
}

.px-bloglayout .px-post-content__body .wp-block-gallery:has(> .wp-block-image:nth-of-type(3):last-of-type) > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.px-bloglayout .px-post-content__body .wp-block-gallery:has(> .wp-block-image:nth-of-type(3):last-of-type) > .wp-element-caption {
	grid-column: 1 / -1;
	align-self: end;
	margin-top: var(--space-d05);
}


/* ── Video in de tekst ── */

.px-bloglayout .px-post-content__body .wp-block-embed {
	display: block;
	margin-block: var(--px-blog-ritme);
}

.px-bloglayout .px-post-content__body .wp-block-embed__wrapper:has(.px-video) {
	border-radius: 0;
	box-shadow: none;
	aspect-ratio: auto;
	overflow: visible;
}

.px-bloglayout .px-post-content__body .wp-block-embed figcaption {
	margin: var(--space-d05) 0 0;
	text-align: center;

	color: var(--text-base);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-style: italic;
	font-weight: 400;
	line-height: 175%;
}

.px-bloglayout .px-video--ratio-9-16 {
	aspect-ratio: 9 / 16;
}

/* De oude CSS van px-post-content zet elke afbeelding in de tekst op height: auto.
   Een poster van 16:9 (de thumbnail van een YouTube Short) vulde daardoor alleen
   de bovenkant van het staande kader. */
.px-bloglayout .px-post-content__body .px-video__thumb {
	height: 100%;
}

.px-bloglayout .px-video__platform {
	position: absolute;
	top: var(--space-d075);
	left: var(--space-d075);
	z-index: 1;

	display: inline-flex;
	align-items: center;
	gap: var(--space-d025);
	padding: 0 var(--space-d05);

	border-radius: var(--space-d025);
	background-color: var(--white);

	color: var(--gray-dark);
	font-family: var(--font-display);
	font-size: var(--text-d1);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-normal);
	letter-spacing: -0.2px;
}

.px-bloglayout .px-video__platform svg {
	width: 1.15em;
	height: 1.15em;
	fill: currentColor;
	flex-shrink: 0;
}

/* Eén staande video (een YouTube Short in de tekst of het blok met één video)
   staat even breed als een video in het duo, in het midden. */
.px-bloglayout .px-post-content__body > .wp-block-embed.is-type-video:has(.px-video--ratio-9-16) {
	max-width: calc((100% - var(--space-d15)) / 2);
	margin-left: auto;
	margin-right: auto;
}


/* ── Staande video's naast elkaar (blok px-staande-videos) ──
   Binnen de tekstbreedte: uitbreken maakt twee staande video's te hoog. */

.px-bloglayout .px-post-content__body .px-video-duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-d15);
	margin-block: var(--px-blog-ritme);
}

.px-bloglayout .px-post-content__body .px-video-duo--een {
	grid-template-columns: minmax(0, calc((100% - var(--space-d15)) / 2));
	justify-content: center;
}

.px-bloglayout .px-post-content__body .px-video-duo .wp-block-embed.is-type-video {
	max-width: none;
	margin: 0;
}


/* ── Berichten van Instagram (blok px-instagram) ──
   Het kader krijgt eerst de vorm van het beeld. Na een klik laadt de iframe en
   meldt Instagram zelf hoe hoog het bericht is; assets/js/px-bloglayout-insta.js
   zet die hoogte als --px-insta-hoogte. Zolang die er nog niet is, houdt het
   kader een ruime hoogte aan, zodat het bericht niet halverwege afgesneden staat. */

.px-bloglayout .px-post-content__body .px-insta-duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: var(--space-d15);
	margin-block: var(--px-blog-ritme);
}

.px-bloglayout .px-post-content__body .px-insta-duo--een {
	grid-template-columns: minmax(0, calc((100% - var(--space-d15)) / 2));
	justify-content: center;
}

.px-bloglayout .px-post-content__body .px-insta-duo .wp-block-embed {
	max-width: none;
	margin: 0;
}

.px-bloglayout .px-insta {
	aspect-ratio: var(--px-insta-verhouding, 4 / 5);
}

/* Een gewoon bericht heeft geen afspeelknop; het logo van Instagram staat in
   hetzelfde witte rondje, zodat duidelijk is dat er iets opengaat bij een klik. */
.px-bloglayout .px-insta .px-video__play--bericht {
	width: 72px;
	height: 72px;
	align-items: center;
	justify-content: center;

	border-radius: 50%;
	background-color: var(--white);
	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.35);

	color: var(--action);
}

.px-bloglayout .px-insta .px-video__play--bericht svg {
	width: 38px;
	height: 38px;
	fill: currentColor;
}

.px-bloglayout .px-insta.is-geladen {
	aspect-ratio: auto;
	height: var(--px-insta-hoogte, 860px);
	background-color: var(--white);
}


/* ── Uitleg om een begrip te duiden (blok px-uitleg) ── */

.px-bloglayout .px-post-content__body .px-uitleg {
	margin: var(--px-blog-ritme) 0;
	padding: var(--space-d2) var(--space-d3);
	background-color: var(--white);
	box-shadow: var(--shadow-elevated);
}

.px-bloglayout .px-post-content__body .px-uitleg > :last-child {
	margin-bottom: 0;
}


/* ── Knop en downloads onder de tekst (blokken px-knop en px-downloads) ── */

.px-bloglayout .px-post-content__body .wp-block-buttons {
	margin: var(--space-d2) 0 0;
}

.px-bloglayout .px-post-content__body .px-downloads {
	margin: var(--space-d15) 0 0;
	padding: 0;
}

.px-bloglayout .px-post-content__body .px-downloads__item {
	margin: 0;
}


/* ── Delen ──
   Het bestaande onderdeel (een nav met links) met de maten van de mockup:
   tekstbreedte, een lijn erboven, het label op een eigen regel en de knoppen
   eronder. base.css zet het label op display: contents; hier weer een blok. */

.px-bloglayout .px-post-content__delen > .px-container {
	width: 100%;
}

.px-bloglayout .px-post-content__delen .px-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-d075);
	width: 100%;
	max-width: var(--px-blog-tekst);
	margin: 0 auto;
	padding-top: var(--px-blog-ritme);
	border-top: 1px solid rgba(51, 51, 51, 0.15);
	position: relative;
}

.px-bloglayout .px-post-content__delen .px-share__label {
	display: block;
	flex-basis: 100%;
	margin: 0 0 calc(var(--space-d1) - var(--space-d075));

	color: var(--gray-dark);
	font-family: var(--font-display);
	font-size: var(--text-body);
	font-style: normal;
	font-weight: var(--weight-semibold);
	line-height: var(--lh-relaxed);
}

.px-bloglayout .px-post-content__delen .px-share__btn {
	gap: var(--space-d05);
	font-size: var(--text-d1);
}

.px-bloglayout .px-post-content__delen .px-share__btn svg {
	width: 1.15em;
	height: 1.15em;
	fill: var(--gray-dark);
	flex-shrink: 0;
}


/* ── Banner en fotoslider tussen de tekstdelen ──
   De opmaak komt uit px-banner en px-slider; de afstand komt uit de groep.
   Zonder min-width: 0 maakt Chromium de sliderviewport op de telefoon zo breed
   als alle foto's samen, en dan staan de pijlen buiten beeld. */

.px-bloglayout .px-post-content-groep > .px-banner {
	margin: 0;
	padding-block: 0;
}

.px-bloglayout .px-post-content-groep > .px-slider .px-slider__viewport {
	width: 100%;
	min-width: 0;
	margin: 0;
}


/* ── Responsive ── */

/* Terug naar tekstbreedte zodra de uitbraak niet meer past: 1040 px plus
   twee keer de zijmarge. */
@media (max-width: 1140px) {
	.px-bloglayout .px-post-content__body .wp-block-image,
	.px-bloglayout .px-post-content__body .wp-block-columns,
	.px-bloglayout .px-post-content__body .wp-block-embed.is-type-video,
	.px-bloglayout .px-post-content__body .wp-block-gallery:has(> .wp-block-image:nth-of-type(3):last-of-type) {
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}

@media (max-width: 992px) {
	.px-bloglayout .px-post-content__body .wp-block-image img {
		height: auto;
	}
}

@media (max-width: 767px) {
	.px-bloglayout .px-post-content__body .wp-block-columns {
		flex-direction: column;
		gap: var(--space-d1);
	}

	.px-bloglayout .px-post-content__body .wp-block-columns .wp-block-image img {
		height: auto;
	}

	.px-bloglayout .px-post-content__body .wp-block-gallery:has(> .wp-block-image:nth-of-type(3):last-of-type) {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		aspect-ratio: auto;
	}

	.px-bloglayout .px-post-content__body .wp-block-gallery:has(> .wp-block-image:nth-of-type(3):last-of-type) > .wp-block-image:first-child {
		grid-row: auto;
	}

	.px-bloglayout .px-post-content__body .wp-block-gallery:has(> .wp-block-image:nth-of-type(3):last-of-type) > .wp-block-image img {
		height: 240px;
	}

	.px-bloglayout .px-post-content__body > .wp-block-embed.is-type-video:has(.px-video--ratio-9-16) {
		max-width: calc((100% - var(--space-d1)) / 2);
	}

	.px-bloglayout .px-post-content__body .px-video-duo--een {
		grid-template-columns: minmax(0, calc((100% - var(--space-d1)) / 2));
	}

	.px-bloglayout .px-post-content__body .px-video-duo {
		gap: var(--space-d1);
	}

	.px-bloglayout .px-video-duo .px-video__poster {
		padding: var(--space-d1);
	}

	.px-bloglayout .px-video-duo .px-video__play svg {
		width: 56px;
		height: 56px;
	}

	.px-bloglayout .px-post-content__body .px-insta-duo {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-d1);
	}

	.px-bloglayout .px-post-content__body .px-insta-duo--een {
		grid-template-columns: minmax(0, 1fr);
	}

	.px-bloglayout .px-post-content__body .px-uitleg {
		padding: var(--space-d15) var(--space-d1);
	}
}


/* ── Eerste en laatste element van een tekstdeel ──
   Onderaan het bestand, zodat ze winnen van de marges hierboven: de afstand
   tussen de delen komt alleen uit de groep. */

.px-bloglayout .px-post-content__body > :first-child {
	margin-top: 0;
}

.px-bloglayout .px-post-content__body > :last-child {
	margin-bottom: 0;
}

/* ── Fotorij met een kader ──────────────────────────────────────────────────
   Staat een fotorij op liggend, vierkant of staand, dan komt de foto in een vak
   met die verhouding en vult hij dat vak. Welk deel in beeld blijft komt als
   --px-kader-positie uit het veld mee. Op origineel verandert er niets: dan staat
   er dezelfde figure als voorheen. */

.px-bloglayout .px-blog-kader {
	display: block;
	overflow: hidden;
}

.px-bloglayout .px-blog-kader--liggend {
	aspect-ratio: 3 / 2;
}

.px-bloglayout .px-blog-kader--vierkant {
	aspect-ratio: 1 / 1;
}

.px-bloglayout .px-blog-kader--staand {
	aspect-ratio: 3 / 4;
}

/* De oude CSS van px-post-content zet elke afbeelding in de tekst op height: auto;
   in een kader moet de foto juist de hoogte van het vak vullen. */
.px-bloglayout .px-blog-kader img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--px-kader-positie, 50% 50%);
}