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

   Blokvolgorde in .td-main:
     1 hero  ·  2 blauwe band "Één centrale plek"  ·  3 gradient-tip
     4 "Wij helpen u graag!"  ·  5 blauwe band "Persoonlijke aandacht"     */

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

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

/* ------------------------------------------------------------------ *
 * Desktop — verticaal ritme
 * Divi rekent sectie- en rijpadding in procenten van de breedte
 * (sectie 4%, rij 2%) en bevriest ze boven 1350px op 54 resp. 27px.
 * Gemeten afstand tussen de inhoud van twee opeenvolgende secties:
 * 231 / 207 / 195 / 157.
 * ------------------------------------------------------------------ */
@media (min-width:981px){
	/* Divi zet de kop van deze hero op 50px; de thema-standaard is 65px.
	   (Tablet 60px en telefoon 40px komen al uit de hero-CSS.) */
	.page-crm-systemen .block-hero__text h1{font-size:50px;line-height:50px;}

	.page-crm-systemen .block-hero{padding:6% 0;margin:50px 0;}
	.page-crm-systemen .block-two-col.block--blue{padding:100px 0 calc(100px + 2%);margin:0;}
	/* "Wij helpen u graag!" heeft geen onderpadding; alleen de 2% van de rij. */
	.page-crm-systemen .block-text-image{padding:4% 0 2%;margin:30px 0;}

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

	/* Ruimte boven de icoon-lijsten is de ondermarge van de Divi-tekstmodule:
	   2,75% van een goot-3-rij (= 5,82% van de kolom) in de hero, 1,5% van
	   een goot-2-rij (= 3,09% van de kolom) op de blauwe band. */
	.page-crm-systemen .block-hero__intro:has(+ .block-hero__iconlist){margin-bottom:5.82%;}
	.page-crm-systemen .block-two-col__iconlist{margin-top:3.09%;}
	.page-crm-systemen .block-text-image__body{margin-bottom:5.82%;}
}

/* Boven 1350px staan de sectie- en rijpadding van Divi vast. */
@media (min-width:1350px){
	.page-crm-systemen .block-hero{padding:81px 0;}
	.page-crm-systemen .block-two-col.block--blue{padding:100px 0 127px;}
	.page-crm-systemen .block-text-image{padding:54px 0 27px;}
}

/* ------------------------------------------------------------------ *
 * Tablet en telefoon — gestapeld
 * ------------------------------------------------------------------ */
@media (max-width:980px){
	/* Sectiepadding is hier 50px en de rijpadding 30px; de sectiemarge boven
	   de hero is 75px (.td-main levert er 50 van). */
	.page-crm-systemen .block-hero{padding:80px 0;margin:75px 0 50px;}
	.page-crm-systemen .block-hero__inner{gap:30px;}
	.page-crm-systemen .block-hero__intro:has(+ .block-hero__iconlist){margin-bottom:30px;}

	.page-crm-systemen .block-two-col.block--blue{padding:100px 0 130px;margin:0;}
	.page-crm-systemen .block-two-col__iconlist{margin-top:30px;}

	.page-crm-systemen .block-text-image{padding:50px 0 30px;margin:0;}
	.page-crm-systemen .block-text-image__inner{gap:30px;}
	.page-crm-systemen .block-text-image__body{margin-bottom:30px;}
}

@media (max-width:767px){
	/* Sectiemarge boven de hero is hier 10px; .td-main levert er al 25 van. */
	.page-crm-systemen .block-hero{margin:0 0 50px;}
	.page-crm-systemen .block-two-col.block--blue{padding:50px 0 80px;}

	/* Divi zet de koppen van de blauwe banden hier op 32px (thema: 35px). */
	.page-crm-systemen .block-two-col.block--blue h2{font-size:32px;line-height:38.4px;}
}