/* Blok: Sectoren-grid — rij van 6 kaarten (256×195): icoon + label. Bredere band. */
.block-sectoren { background: var(--amazing-footer); padding-block: 40px 72px; }
.block-sectoren__inner { max-width: calc(var(--amazing-sectoren) + 80px); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
.block-sectoren__title { font-size: clamp(28px, 2.2vw, 40px); margin-bottom: 34px; }
/* Gecentreerde rij kaarten (256×195), wrap op smallere schermen — zoals in het ontwerp. */
.block-sectoren__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}
.block-sectoren__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex: 1 1 200px;
	max-width: 256px;
	aspect-ratio: 256 / 195;
	background: var(--amazing-bg);
	color: #fff;
	text-align: center;
	padding: 16px;
	transition: background-color .2s;
}
/* Hover = alleen kleurverandering (kaart goud, icoon/label wit), zoals in het ontwerp. */
.block-sectoren__card:hover { background: var(--amazing-accent); }
/* Icoon via CSS-mask: het silhouet krijgt zijn kleur van background-color, dus
   standaard accent (#89816a) en wit zodra de kaart gehoverd wordt. */
.block-sectoren__icon {
	width: 70px; height: 70px;
	background-color: var(--amazing-accent);
	-webkit-mask: var(--sector-icon) center / contain no-repeat;
	        mask: var(--sector-icon) center / contain no-repeat;
	transition: background-color .2s;
}
.block-sectoren__card:hover .block-sectoren__icon { background-color: #fff; }
.block-sectoren__label { font-family: var(--amazing-font-body); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; }

/* Sector-/dienstpagina's (niet de homepage): omgekeerde band-tinten + gecentreerde kop,
   zoals het ontwerp voor "Voor deze sectoren werken wij ook" op deze pagina's toont. */
body:not(.home) .block-sectoren { background: var(--amazing-bg); }
body:not(.home) .block-sectoren__card { background: var(--amazing-footer); }
/* Hover moet de omgekeerde-tint-regel (zelfde specificiteit) overrulen → goud. */
body:not(.home) .block-sectoren__card:hover { background: var(--amazing-accent); }
body:not(.home) .block-sectoren__title { text-align: center; }

@media (max-width: 520px) { .block-sectoren__card { flex-basis: 140px; } }