/* Betaaloplossingen — pagina-specifieke afwijkingen t.o.v. de gedeelde blok-CSS.
   Wordt alleen op /betaaloplossingen/ geladen (body.page-betaaloplossingen).
   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 grijze band  ·  5 Koppeling met uw kassasysteem

   Divi-secties en -rijen van deze pagina:
     1 hero     marge 50/50  · padding 4%/4%   · rij 2%/2%
     2 blauw    marge 0      · padding 100/100 · rij 0/2%
     3 wit      marge 30/30  · padding 4%/0    · rij 0/2%
     4 grijs    marge 0      · padding 100/100 · rij 0/2%
     5 wit      marge 0      · padding 71px/4% · rij 0/2%                    */

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

/* De icoon-lijst sluit de kolom af; Divi geeft de laatste module geen marge. */
.page-betaaloplossingen .block-text-image__iconlist{margin-bottom:0;}

/* Grijze band ("Uw persoonlijke IT-partner"). In Divi is dit dezelfde sectie
   als de blauwe band — 100px padding, goot 2, kop van 50px — alleen staat de
   kop hier zwart (header_2_text_color #000000). De gedeelde blok-CSS kent
   alleen de blauwe variant; op andere pagina's is een grijze twee-koloms
   sectie smaller met een kop van 40px, dus dit blijft paginagebonden. */
.page-betaaloplossingen .block-two-col.block--grey{padding:100px 0;}
.page-betaaloplossingen .block-two-col.block--grey .block-two-col__inner{column-gap:3%;}
.page-betaaloplossingen .block-two-col.block--grey h2{color:#000;font-size:50px;line-height:60px;}

@media (max-width:980px){
	.page-betaaloplossingen .block-two-col.block--grey .block-two-col__inner{gap:47px;}
}
@media (max-width:767px){
	.page-betaaloplossingen .block-two-col.block--grey{padding:50px 0;}
	.page-betaaloplossingen .block-two-col.block--grey h2{font-size:35px;line-height:42px;}
	.page-betaaloplossingen .block-two-col.block--grey .block-two-col__inner{gap:40px;}
}

/* ------------------------------------------------------------------ *
 * Desktop — verticaal ritme
 * Divi rekent de sectie- (4%) en rijpadding (2%) in procenten van de
 * containerbreedte; onder elke rij staat die 2% extra. De sectiemarges
 * klappen samen tussen buren.
 * ------------------------------------------------------------------ */
@media (min-width:981px){
	.page-betaaloplossingen .block-hero{padding:6% 0;margin-bottom:50px;}
	.page-betaaloplossingen .block-two-col.block--blue,
	.page-betaaloplossingen .block-two-col.block--grey{padding-bottom:calc(100px + 2%);}
	.page-betaaloplossingen .td-main>.block:nth-child(3){padding:4% 0 2%;margin:30px 0;}
	.page-betaaloplossingen .td-main>.block:nth-child(5){padding:71px 0 6%;}

	/* Divi's goot is een percentage van de rij, geen vast aantal pixels:
	   goot 3 = 5,5% (hero en tekst+afbeelding), goot 2 = 3% (de banden). */
	.page-betaaloplossingen .block-hero__inner,
	.page-betaaloplossingen .block-text-image__inner{gap:5.5%;}

	/* Ruimte onder de tekst rekent Divi ook in procenten van de rij:
	   2,75% bij de tekst+afbeelding-blokken, 1,5% boven de icoon-lijst in
	   een band. Omgerekend naar de kolom waarin ze staan: 5,82% resp. 3,09%. */
	.page-betaaloplossingen .block-text-image__body{margin-bottom:5.82%;}
	.page-betaaloplossingen .block-two-col__iconlist{margin-top:3.09%;}
}

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

/* ------------------------------------------------------------------ *
 * Tablet en telefoon — gestapeld
 * Divi zet hier vaste waarden: sectiepadding 50px, rijpadding 30px en
 * 30px tussen de gestapelde kolommen en modules.
 * ------------------------------------------------------------------ */
@media (max-width:980px){
	.page-betaaloplossingen .block-hero{padding:80px 0;margin-bottom:50px;}
	.page-betaaloplossingen .block-hero__inner,
	.page-betaaloplossingen .block-text-image__inner{gap:30px;}

	.page-betaaloplossingen .block-two-col.block--blue,
	.page-betaaloplossingen .block-two-col.block--grey{padding-bottom:130px;}
	.page-betaaloplossingen .td-main>.block:nth-child(3){padding:50px 0 30px;margin:0;}
	.page-betaaloplossingen .td-main>.block:nth-child(5){padding:0 0 80px;}

	.page-betaaloplossingen .block-text-image__body{margin-bottom:30px;}
	.page-betaaloplossingen .block-two-col__iconlist{margin-top:30px;}
}

/* Telefoon: de banden krimpen naar 50px sectiepadding (+30px rijpadding). */
@media (max-width:767px){
	.page-betaaloplossingen .block-two-col.block--blue,
	.page-betaaloplossingen .block-two-col.block--grey{padding-bottom:80px;}
}

/* Deze rij heeft in Divi geen telefoon-afwijking: de kop blijft 50px. */
@media (max-width:767px){
	.page-betaaloplossingen .td-main>.block:nth-child(5) .block-text-image__text h2{font-size:50px;line-height:60px;}
}

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