/* Los bericht (Actueel) — herbouw van de Divi Theme Builder-body "Alle Berichten".
   Maatvoering 1:1 uit Divi:
   - sectie 4% padding (bevroren op 54px boven 1350px; ≤980px vast 50px);
     de bovenmarge van 100/50/25px levert .td-main al.
   - rijen: 80% breed, max 720px (tekstkolom) of 1280px (banden onderaan),
     rijpadding 2% boven (bevroren 27px; ≤980px 30px).
   - modulemarges zijn 2,75% van de rijbreedte = 5,82% binnen een halve kolom.
   - kolomgoot 5,5% (gutter 3). */

.td-article{padding:4% 0;background:#fff;}
@media (min-width:1350px){
	.td-article{padding:54px 0;}
}

.td-article__row{
	width:80%;margin-left:auto;margin-right:auto;
	padding-top:2%;
}
@media (min-width:1350px){
	.td-article__row{padding-top:27px;}
}
.td-article__row--narrow{max-width:720px;}
.td-article__row--wide{max-width:1280px;}

/* Twee kolommen naast elkaar (goot 5,5%). */
.td-article__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:5.5%;align-items:start;}

/* ---- Modules in de tekstkolom ------------------------------------------- */
.td-article__date{
	margin:0 0 2.75%;
	font-family:"Inter",Helvetica,Arial,sans-serif;font-weight:600;
	font-size:15px;line-height:23.8px;color:#000;
}
.td-article__title{
	margin:0 0 2.75%;padding:0;
	font-family:var(--td-font-head);font-weight:500;
	font-size:50px;line-height:1.1em;color:var(--td-blue);
}
.td-article__text{
	margin:0 0 2.75%;
	font-family:"Inter",Helvetica,Arial,sans-serif;font-weight:300;
	font-size:15px;line-height:23.8px;color:#000;
}
.td-article__figure{margin:0 0 2.75%;}
.td-article__figure a{display:block;}
.td-article__figure img{display:block;width:100%;height:auto;}

/* In een halve kolom is dezelfde 2,75% van de rij gelijk aan 5,82%. */
.td-article__cols .td-article__figure{margin-bottom:5.82%;}
/* Gestapelde extra beelden: Divi zet 34px onder de bovenste. */
.td-article__cols--stack .td-article__figure{margin-bottom:34px;}
.td-article__cols--stack .td-article__figure:last-child{margin-bottom:5.82%;}
/* De laatste module in de laatste kolom heeft in Divi geen ondermarge. */
.td-article__cols>.td-article__col:last-child>.td-article__figure:last-child{margin-bottom:0;}

/* Rijen met 33px extra onderaan (Divi: custom_padding "||33px"). */
.td-article__cols--stack,
.td-article__sharerow{padding-bottom:33px;}

/* ---- Delen --------------------------------------------------------------- */
.td-article__sharelabel{
	margin:0 0 2px;text-align:center;
	font-family:"Inter",Helvetica,Arial,sans-serif;font-weight:600;
	font-size:15px;line-height:23.8px;color:var(--td-blue);
}
/* Divi's knoppen zijn inline-block in een regel van 23,8px; daardoor staan ze
   2px onder de bovenkant van de module (module 52px hoog, knoppen 45 + 5). */
.td-share{text-align:center;font-family:var(--td-font-body);font-size:14px;line-height:0;padding-top:2px;}
.td-share__btn{
	display:inline-flex;align-items:center;justify-content:center;
	width:45px;height:45px;margin:0 0 5px;vertical-align:top;
	background:#fff;border-radius:100px;color:var(--td-blue);
	transition:color .3s ease,background-color .3s ease;
}
.td-share__btn svg{display:block;width:20px;height:20px;}
.td-share__btn:hover{background:var(--td-blue);color:#fff;}

/* ---- "Wij helpen u graag" ------------------------------------------------ */
.td-article__help,
.td-article__backrow{margin-top:47px;margin-bottom:47px;padding-top:0;}
.td-article__help{
	display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
	column-gap:5.5%;align-items:start;
	padding-bottom:27px;
}
.td-article__help h2{
	margin:30px 0;padding:0 0 10px;
	font-family:var(--td-font-head);font-weight:500;
	font-size:50px;line-height:1.2em;color:var(--td-blue);
}
.td-article__helpbody{
	margin:0 0 5.82%;
	font-family:"Inter",Helvetica,Arial,sans-serif;font-weight:300;
	font-size:15px;line-height:23.8px;color:#000;
}
.td-article__helpbody p{margin:0;padding-bottom:1em;}
.td-article__helpbody p:last-child{padding-bottom:0;}
.td-article__buttons{display:flex;flex-wrap:wrap;gap:20px;}

/* ---- "Ga terug" ---------------------------------------------------------- */
.td-btn--back{position:relative;padding-left:45px;}
.td-btn--back::before{
	content:"";position:absolute;left:24px;top:50%;
	width:14px;height:14px;margin-top:-7px;
	background:currentColor;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8 .4 34.3z'/%3E%3C/svg%3E") no-repeat 50%/contain;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8 .4 34.3z'/%3E%3C/svg%3E") no-repeat 50%/contain;
}

/* ---- Vergrootweergave ---------------------------------------------------- */
.td-lightbox-overlay{
	position:fixed;inset:0;z-index:2000;
	display:flex;align-items:center;justify-content:center;
	background:rgba(0,0,0,.8);padding:40px;cursor:zoom-out;
}
.td-lightbox-overlay img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;}
.td-lightbox-overlay button{
	position:absolute;top:16px;right:20px;
	width:44px;height:44px;line-height:1;
	font-size:32px;color:#fff;background:none;border:0;cursor:pointer;
}

/* ---- Tablet: kolommen stapelen -------------------------------------------
   Divi zet onder 980px alles op één kolom, met 30px tussen de kolommen en
   vaste modulemarges van 30px in plaats van de procentuele. --------------- */
@media (max-width:980px){
	.td-article{padding:50px 0;}
	.td-article__row{padding-top:30px;}
	.td-article__title{font-size:55px;}

	.td-article__cols,
	.td-article__help{grid-template-columns:minmax(0,1fr);row-gap:30px;}
	/* De banden onderaan houden hun eigen rijpadding (0 boven, 30 onder). */
	.td-article__help,
	.td-article__backrow{padding-top:0;}
	.td-article__help{padding-bottom:30px;}

	.td-article__date,
	.td-article__title,
	.td-article__text,
	.td-article__figure,
	.td-article__cols .td-article__figure,
	.td-article__cols--stack .td-article__figure:last-child,
	.td-article__helpbody{margin-bottom:30px;}
	.td-article__cols--stack .td-article__figure{margin-bottom:34px;}
	.td-article__cols>.td-article__col:last-child>.td-article__figure:last-child{margin-bottom:0;}
}

/* ---- Telefoon ------------------------------------------------------------ */
@media (max-width:767px){
	.td-article__title{font-size:35px;}
	.td-article__help h2{font-size:35px;}
	/* Divi zet de tweede knop op telefoon tegen de eerste aan, met 20px erboven. */
	.td-article__buttons{gap:0;padding-top:20px;}
}

/* ---- Inhoud uit de tekstverwerker ----------------------------------------
   Een bericht dat gewoon met de WordPress-editor is geschreven. De basisletter
   erft van .td-article__text; hieronder staat alleen wat de editor zelf kan
   opleveren: koppen, lijsten, citaten, tabellen en ingevoegde afbeeldingen.
   Regelafstand 23,8px = dezelfde ritmemaat als de rest van het artikel. */
.td-article__content::after{content:"";display:table;clear:both;}
.td-article__content>*:first-child{margin-top:0;}
.td-article__content>*:last-child{margin-bottom:0;}

.td-article__content p{margin:0 0 23.8px;}
.td-article__content h2,
.td-article__content h3,
.td-article__content h4{
	font-family:var(--td-font-head);font-weight:500;color:var(--td-blue);
	margin:34px 0 14px;
}
.td-article__content h2{font-size:30px;line-height:1.2em;}
.td-article__content h3{font-size:22px;line-height:1.25em;}
.td-article__content h4{font-size:18px;line-height:1.3em;}

.td-article__content a{color:var(--td-blue);text-decoration:underline;}
.td-article__content a:hover{text-decoration:none;}
.td-article__content strong,
.td-article__content b{font-weight:600;}

.td-article__content ul,
.td-article__content ol{margin:0 0 23.8px;padding-left:20px;}
.td-article__content ul{list-style:disc;}
.td-article__content ol{list-style:decimal;}
.td-article__content li{margin:0 0 6px;}

.td-article__content blockquote{
	margin:0 0 23.8px;padding:2px 0 2px 20px;
	border-left:3px solid var(--td-blue);
}
.td-article__content blockquote p:last-child{margin-bottom:0;}

.td-article__content hr{border:0;border-top:1px solid #e5e7eb;margin:34px 0;}

.td-article__content table{width:100%;border-collapse:collapse;margin:0 0 23.8px;}
.td-article__content th,
.td-article__content td{border:1px solid #e5e7eb;padding:8px 10px;text-align:left;}

/* Ingevoegde afbeeldingen: standaard over de volle kolombreedte. */
.td-article__content img{display:block;max-width:100%;height:auto;}
.td-article__content figure,
.td-article__content .wp-caption{max-width:100%;margin:0 0 23.8px;}
.td-article__content figcaption,
.td-article__content .wp-caption-text{
	margin:8px 0 0;font-size:13px;line-height:1.5;color:#666;
}
.td-article__content .aligncenter{margin-left:auto;margin-right:auto;}
.td-article__content .alignnone{margin-bottom:23.8px;}
.td-article__content .alignleft{float:left;margin:4px 24px 16px 0;max-width:50%;}
.td-article__content .alignright{float:right;margin:4px 0 16px 24px;max-width:50%;}

.td-article__content iframe,
.td-article__content embed,
.td-article__content video,
.td-article__content .wp-video,
.td-article__content .wp-embedded-content{max-width:100%;margin:0 0 23.8px;}

@media (max-width:767px){
	.td-article__content h2{font-size:26px;}
	.td-article__content h3{font-size:20px;}
	.td-article__content .alignleft,
	.td-article__content .alignright{float:none;margin:0 0 23.8px;max-width:100%;}
}