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

   Blokvolgorde in .td-main:
     1 hero  ·  2 blauwe band  ·  3 Samenwerkingsverbanden (grijs)
     4 Wij helpen u graag  ·  5 blauwe band                                    */

/* ------------------------------------------------------------------ *
 * Grijze band "Samenwerkingsverbanden met vaste leveranciers".
 * In Divi is dit dezelfde opzet als een blauwe band — kop 50px, tekst 15px,
 * goot 2 (3%) — maar dan op #F7F8FA met een blauwe kop. Op desktop staan de
 * kolommen omgedraaid (tekst links, kop rechts); gestapeld komt de kop weer
 * bovenaan. Dat omdraaien regelt .block-two-col--reverse.
 * ------------------------------------------------------------------ */
.page-hardware .block-two-col--reverse h2{font-size:50px;line-height:60px;}

@media (min-width:981px){
	/* Sectie 100px boven/onder; Divi zet onder de rij nog 2% van de rijbreedte. */
	.page-hardware .block-two-col--reverse{padding:100px 0;padding-bottom:calc(100px + 2%);}
	.page-hardware .block-two-col--reverse .block-two-col__inner{column-gap:3%;}
	/* De icoon-lijst staat 1,5% van de rij onder de tekst; omgerekend naar de
	   kolom waarin hij staat (48,5% van de rij) is dat 3,09%. */
	.page-hardware .block-two-col--reverse .block-two-col__iconlist{margin-top:3.09%;}
}

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

/* Tablet: gestapeld, kop bovenaan. Divi houdt 30px tussen de kolommen en onder
   de rij; de kop neemt daar nog 17px eigen ruimte in (10px kop-padding + 7px
   modulemarge), dus 47px tussen kop en tekst. */
@media (max-width:980px){
	.page-hardware .block-two-col--reverse{padding:100px 0 130px;}
	.page-hardware .block-two-col--reverse .block-two-col__inner{gap:47px;}
	.page-hardware .block-two-col--reverse .block-two-col__iconlist{margin-top:30px;}
}

/* Telefoon: kleinere sectie en kop; de kop heeft hier geen eigen ondermarge. */
@media (max-width:767px){
	.page-hardware .block-two-col--reverse{padding:50px 0 80px;}
	.page-hardware .block-two-col--reverse h2{font-size:35px;line-height:42px;}
	.page-hardware .block-two-col--reverse .block-two-col__inner{gap:40px;}
}

/* Hero-kop volgens Divi (60px desktop / 50px tablet / 35px telefoon). */
@media (min-width:981px){
	.page-hardware .block-hero__text h1{font-size:60px;line-height:60px;}
}
@media (max-width:980px){
	.page-hardware .block-hero__text h1{font-size:50px;line-height:50px;}
}
@media (max-width:767px){
	.page-hardware .block-hero__text h1{font-size:35px;line-height:35px;}
}