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

   Blokvolgorde in .td-main:
     1 hero  ·  2 blauwe band "Efficiëntie én automatisering"
     3 Wij helpen u graag  ·  4 Meer dan alleen een kassasysteem
     5 blauwe band "Persoonlijke aandacht bij uw totaaloplossing"          */

/* ------------------------------------------------------------------ *
 * Desktop
 * ------------------------------------------------------------------ */
@media (min-width:981px){
	/* Divi's goot is een percentage van de rij, niet een vast aantal pixels.
	   De hero en beide tekst+afbeelding-rijen staan op de standaardgoot 3
	   (5,5%); daarmee is de illustratie 726px op een 1920px-scherm, precies
	   zoals live. */
	.page-afrekensystemen .block-hero__inner,
	.page-afrekensystemen .block-text-image__inner{gap:5.5%;}

	/* Onder elke Divi-rij staat 2% van de schermbreedte; de blauwe banden
	   zetten alleen de bovenpadding op 0, dus die 2% blijft onderin staan
	   bovenop de 100px sectiepadding. */
	.page-afrekensystemen .block-two-col.block--blue{padding-bottom:calc(100px + 2%);}

	/* Ruimte boven de icoon-lijst is de ondermarge van de Divi-tekstmodule:
	   2,75% van de rij = 5,82% van de kolom waarin hij staat. */
	.page-afrekensystemen .block-two-col__iconlist{margin-top:5.82%;}
}

/* Boven 1350px bevriest Divi die rijpadding op 27px. */
@media (min-width:1350px){
	.page-afrekensystemen .block-two-col.block--blue{padding-bottom:127px;}
}

/* ------------------------------------------------------------------ *
 * Tablet en telefoon — gestapeld; de rijpadding is dan 30px.
 * ------------------------------------------------------------------ */
@media (max-width:980px){
	.page-afrekensystemen .block-two-col.block--blue{padding-bottom:130px;}
	.page-afrekensystemen .block-two-col__iconlist{margin-top:30px;}
}

@media (max-width:767px){
	.page-afrekensystemen .block-two-col.block--blue{padding-bottom:80px;}

	/* Divi zet op telefoon een aparte koptekst zónder de regelafbreking na
	   "bij"; de kop breekt daar dus gewoon met de kolombreedte mee. */
	.page-afrekensystemen .td-main>.block:nth-child(5) .block-two-col__head h2{white-space:normal;}
}

/* Hero-kop volgens Divi (70px desktop / 60px tablet / 40px telefoon). */
@media (min-width:981px){
	.page-afrekensystemen .block-hero__text h1{font-size:70px;line-height:70px;}
}