/* Blok: Icoon-grid (gescopet op .block-icon-grid). */
/* Divi rekent zijn rij-/sectiepadding in procenten van de vensterbreedte
   (2% per rijzijde, bevroren boven 1350px, vast 30px onder 980px). Vaste px
   klopten alleen bij 1440; hieronder dus vw met dezelfde bevriezing. */
.block-icon-grid{background:var(--td-bg-alt);padding:20px 0 4vw;}
.block-icon-grid__heading{
	text-align:center;color:var(--td-blue);
	font-size:40px;line-height:48px;
	/* 2% rijpadding boven, en eronder 10px koppadding + 2×2% rijpadding. */
	padding-top:2vw;margin:0 0 calc(10px + 4vw);
}
.block-icon-grid__grid{
	list-style:none;margin:0;padding:0;
	display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
	/* Kolomafstand = Divi-goot 3 = 5,5% van de rij (63,36px bij 1440, maar
	   45px bij 1024 — vast gezet werden de tegels op laptops te smal). */
	row-gap:4vw;column-gap:5.5%;
}
.block-icon-grid__tile{text-align:center;}
.block-icon-grid__tile a{
	/* Divi: 14px tussen icoon en label (module-marge), niet 32px. */
	display:flex;flex-direction:column;align-items:center;gap:14px;
	color:#000;
	transition:transform .3s ease;
}
.block-icon-grid__tile img{width:94px;height:94px;object-fit:contain;}
.block-icon-grid__tile span{
	/* Het label vult de kolom; overflow-wrap is enkel een vangnet — tussen 981
	   en 1349px zorgt de regel verderop dat het woord past (zie daar). */
	display:block;width:100%;overflow-wrap:break-word;
	font-family:var(--td-font-btn);font-size:16px;line-height:23.8px;color:#000;font-weight:500;
}
/* Hover: hele tegel (icoon + label) naar 110% — zoals de Divi-kolom-transform. */
.block-icon-grid__tile a:hover{transform:scale(1.1);}
@media (prefers-reduced-motion:reduce){
	.block-icon-grid__tile a{transition:none;}
	.block-icon-grid__tile a:hover{transform:none;}
}

/* ------------------------------------------------------------------------- *
 * Liggende tablet en kleine laptop (981-1349px): zes kolommen zijn hier
 * smaller dan de langste labels. Divi hakt die woorden middenin door
 * ("Werkplekbeh/eer", "Betaaloplossi/ngen") - dat nemen we bewust niet over.
 * Twee ingrepen houden ieder woord heel zonder het raster te verzetten:
 * het label mag 10px de kolomgoot in lopen (die is hier minstens 43px breed,
 * dus labels raken elkaar niet), en het schaalt mee met het venster tot het
 * vanaf ~1200px weer op de volle 16px staat.
 * ------------------------------------------------------------------------- */
@media (min-width:981px) and (max-width:1400px){
	.block-icon-grid__tile span{width:calc(100% + 20px);margin-inline:-10px;}
}
@media (min-width:981px) and (max-width:1349px){
	.block-icon-grid__tile span{font-size:min(1.33vw,16px);line-height:1.4875;}
}

@media (min-width:1350px){
	/* Boven 1350px bevriest Divi de procenten op de 1350px-waarden. */
	.block-icon-grid{padding-bottom:54px;}
	.block-icon-grid__heading{padding-top:27px;margin-bottom:64px;}
	.block-icon-grid__grid{row-gap:54px;}
}

@media (max-width:980px){
	.block-icon-grid{padding-bottom:50px;}
	.block-icon-grid .td-container{width:80%;}
	.block-icon-grid__heading{font-size:30px;line-height:36px;padding-top:30px;margin-bottom:70px;}
	.block-icon-grid__grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:34px;row-gap:30px;}
	/* Divi houdt drie rijen van zes tegels aan; tussen die rijen komt 30px
	   extra (de rijpadding), binnen een rij alleen de kolommarge van 30px. */
	.block-icon-grid__tile:nth-child(6n+1):not(:first-child){margin-top:30px;}
}
@media (max-width:767px){
	.block-icon-grid__heading{font-size:25px;line-height:30px;margin:0 0 50px;}
	.block-icon-grid__grid{grid-template-columns:repeat(2,1fr);column-gap:15px;row-gap:32px;}
	.block-icon-grid__tile{min-height:190px;}
	.block-icon-grid__tile img{width:74px;height:74px;}
	.block-icon-grid__tile a{gap:24px;}
}

/* ------------------------------------------------------------------------- *
 * Telefoon (≤767px): geen raster maar per categorie een carrousel met twee
 * tegels tegelijk (Divi Supreme "card carousel": 2 per beeld, 15px ertussen,
 * doorlopend, elke 3 seconden een tegel verder). Gemeten op de live site:
 * tegel 149px breed, icoon 74px met 20px ruimte onder, label 14px/14px,
 * categorietitel 16px Proxima Nova Bold met 30px eronder, 30px tussen de
 * groepen en 30px boven de eerste.
 * ------------------------------------------------------------------------- */
.block-icon-grid__mobile{display:none;}

@media (max-width:767px){
	.block-icon-grid{padding:20px 0 50px;}
	.block-icon-grid--has-groups .block-icon-grid__grid{display:none;}
	.block-icon-grid--has-groups .block-icon-grid__mobile{display:block;padding:30px 0;}
	/* Divi: 30px rijpadding onder de kop + 10px koppadding + 30px rijpadding
	   boven de eerste categorie. */
	.block-icon-grid--has-groups .block-icon-grid__heading{margin:0 0 40px;padding-top:30px;}

	.block-icon-grid__group + .block-icon-grid__group{margin-top:30px;}
	.block-icon-grid__cat{
		margin:0 0 30px;text-align:center;
		font-family:var(--td-font-head);font-weight:500;font-size:16px;line-height:1.5;color:#000;
	}
	.td-cards{overflow:hidden;}
	.td-cards__track{display:flex;gap:15px;will-change:transform;}
	/* De kaart heeft onder het label nog 30px ruimte (kaartpadding in Divi). */
	.td-cards__slide{flex:0 0 calc((100% - 15px) / 2);padding-bottom:30px;}
	.td-cards__slide a{display:block;color:#000;text-decoration:none;}
	.td-cards__slide img{width:74px;height:auto;margin:0 auto;}
	.td-cards__slide h4{
		margin:20px 0 0;text-align:center;
		/* Live: "Proxima Nova" 500 (dus niet de Bold-snede van de categorietitel). */
		font-family:var(--td-font-btn);font-weight:500;font-size:14px;line-height:14px;color:#000;
	}
}