/* E-mailbeheer — pagina-specifieke afwijkingen t.o.v. de gedeelde blok-CSS.
   Wordt alleen op /e-mailbeheer/ geladen (techdog_page_slug() === 'e-mailbeheer').
   Alle waarden zijn gemeten op de live pagina (1920 / 900 / 600px).

   Blokvolgorde in .td-main:
     1 hero  ·  2 blauwe band  ·  3 Wij helpen u graag  ·  4 Meedenkend
     5 blauwe band  ·  6 Méér dan alleen                                      */

/* ------------------------------------------------------------------ *
 * Altijd geldend
 * ------------------------------------------------------------------ */

/* Het hero-icoon staat 18px boven de kop (Divi-afbeeldingsmodule). */
.page-e-mailbeheer .block-hero__icon{margin-bottom:18px;}

/* Deze hero heeft geen knop; de intro is de laatste regel van de kolom. */
.page-e-mailbeheer .block-hero__intro{margin-bottom:0;}

/* Links in de tekst op een blauwe band blijven wit (Divi erft de tekstkleur). */
.page-e-mailbeheer .block-two-col.block--blue .block-two-col__body a{color:inherit;}

/* Sluit een blok af met de tekst, dan houdt die geen ruimte over. */
.page-e-mailbeheer .block-text-image__body:last-child{margin-bottom:0;}
.page-e-mailbeheer .block-text-image__body p:last-child{margin-bottom:0;}

/* USP-lijst met vinkjes in blok 6. Live: vinkje 20px in merkblauw, tekst
   Inter 300/15px in zwart met 10px ruimte ernaast, 13px tussen de regels. */
.page-e-mailbeheer .block-text-image__features li{align-items:center;gap:10px;margin-bottom:13px;color:#000;}
.page-e-mailbeheer .block-text-image__features li:last-child{margin-bottom:0;}
.page-e-mailbeheer .block-text-image__features li.is-check::before{margin-top:0;}
.page-e-mailbeheer .block-text-image__features li>span{line-height:25.5px;}

/* ------------------------------------------------------------------ *
 * Desktop — verticaal ritme
 * Divi zet onder elke rij 27px en geeft de secties nog een eigen marge
 * (hero 50px, gewone secties 30px, blauwe band 0); die marges klappen
 * samen tussen buren. Gemeten afstand tussen de inhoud van twee
 * opeenvolgende secties: 231 / 211 / 111 / 211 / 211.
 * ------------------------------------------------------------------ */
@media (min-width:981px){
	/* Divi rekent die padding in procenten van de breedte (sectie 4%, rij 2%)
	   en bevriest hem boven 1350px op 54 resp. 27px. */
	.page-e-mailbeheer .block-hero{padding:6% 0;margin-bottom:50px;}
	.page-e-mailbeheer .block-text-image{padding:4% 0 6%;margin:30px 0;}
	/* "Wij helpen u graag!" loopt in Divi zonder sectiepadding door. */
	.page-e-mailbeheer .td-main>.block:nth-child(3){padding-bottom:2%;}
	.page-e-mailbeheer .block-two-col.block--blue{padding:100px 0;padding-bottom:calc(100px + 2%);margin:0;}

	/* Divi's goot is een percentage van de rij, niet een vast aantal pixels;
	   met 5,5% lopen de kolommen op elke breedte gelijk met de live pagina. */
	.page-e-mailbeheer .block-hero__inner,
	.page-e-mailbeheer .block-text-image__inner{gap:5.5%;}

	/* Goot per blauwe band: gutter 2 (3%) bij blok 2, gutter 3 (5,5%) bij blok 5. */
	.page-e-mailbeheer .td-main>.block:nth-child(2) .block-two-col__inner{gap:3%;}
	.page-e-mailbeheer .td-main>.block:nth-child(5) .block-two-col__inner{gap:5.5%;}

	/* Ruimte boven/onder de lijsten rekent Divi in procenten van de rij
	   (1,5% bij blok 2, 2,75% bij blok 5 en 6); omgerekend naar de kolom
	   waarin ze staan is dat 3,09% resp. 5,82%. */
	.page-e-mailbeheer .td-main>.block:nth-child(2) .block-two-col__iconlist{margin-top:3.09%;}
	.page-e-mailbeheer .td-main>.block:nth-child(5) .block-two-col__iconlist{margin-top:5.82%;}
	.page-e-mailbeheer .block-text-image__features{margin-bottom:5.82%;}
}

/* Boven 1350px staan de sectie- en rijpadding van Divi vast. */
@media (min-width:1350px){
	.page-e-mailbeheer .block-hero{padding:81px 0;}
	.page-e-mailbeheer .block-text-image{padding:54px 0 81px;}
	.page-e-mailbeheer .td-main>.block:nth-child(3){padding-bottom:27px;}
	.page-e-mailbeheer .block-two-col.block--blue{padding:100px 0 127px;}
}

/* ------------------------------------------------------------------ *
 * Tablet en telefoon — gestapeld
 * De blokken met de afbeelding links beginnen zonder sectiepadding en
 * zetten de tekst bovenaan: in Divi is dat een aparte rij met de
 * kolommen omgedraaid.
 * ------------------------------------------------------------------ */
@media (max-width:980px){
	.page-e-mailbeheer .block-hero{padding-bottom:77px;margin-bottom:50px;}
	.page-e-mailbeheer .block-hero__inner{gap:30px;}

	.page-e-mailbeheer .block-text-image__inner{gap:30px;}
	.page-e-mailbeheer .block-text-image__features{margin-bottom:30px;}

	.page-e-mailbeheer .block-two-col.block--blue{padding-bottom:127px;margin:0;}
	.page-e-mailbeheer .block-two-col__iconlist{margin-top:30px;}

	.page-e-mailbeheer .td-main>.block:nth-child(3){padding:50px 0 27px;margin:0;}
	.page-e-mailbeheer .td-main>.block:nth-child(4),
	.page-e-mailbeheer .td-main>.block:nth-child(6){padding:0 0 77px;margin:30px 0;}

	/* De gestapelde rij van blok 6 heeft in Divi een kleinere kop. */
	.page-e-mailbeheer .td-main>.block:nth-child(6) .block-text-image__text h2{font-size:40px;line-height:48px;}
}

@media (max-width:767px){
	.page-e-mailbeheer .block-two-col.block--blue{padding-bottom:77px;}
	.page-e-mailbeheer .td-main>.block:nth-child(6) .block-text-image__text h2{font-size:30px;line-height:36px;}
}