/* ---------------------------------------------------------------------------
 * Blok: Softwarepartner. Links watermerk + kop + tekst + knop, rechts een
 * 2x2 raster van witte icoonkaarten. Maten uit het Figma-ontwerp (1920/390).
 * ------------------------------------------------------------------------- */

.blok-software-partner {
	position: relative;
	padding: 116px 0 100px; /* 116px boven zodat het watermerk (top -116px) binnen het blok valt, zoals in het ontwerp */
	background: var(--c-grijs-1);
	overflow: hidden;
}

.blok-software-partner__raster {
	position: relative;
	display: grid;
	grid-template-columns: 367px minmax(0, 1fr);
	column-gap: 77px;
	align-items: center;
}

/* Vink-watermerk linksboven, deels buiten de wrapper (ontwerp: 133px links van de contentrand). */
.blok-software-partner__watermerk {
	position: absolute;
	top: -116px;
	left: -133px;
	width: 290px;
	height: 268px;
	color: var(--c-blauw);
	pointer-events: none;
}

.blok-software-partner__watermerk svg {
	width: 100%;
	height: 100%;
}

.blok-software-partner__intro {
	position: relative;
	z-index: 1;
}

.blok-software-partner__titel {
	margin: 0 0 16px;
	font-size: 36px;
	line-height: 44px;
}

.blok-software-partner__tekst {
	margin: 0 0 25px;
}

/* Kaartenraster rechts: 2 kolommen, ontwerp-gaps 40px horizontaal en 26px verticaal. */
.blok-software-partner__kaarten {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.blok-software-partner__kaart {
	display: flex;
	align-items: center;
	gap: 37px;
	min-height: 168px;
	padding: 24px 30px 24px 36px;
	background: var(--c-wit);
	border-radius: 20px;
	box-shadow: 5px 5px 12.5px rgb(0 0 0 / 5%);
}

.blok-software-partner__kaart-icoon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 71px;
	width: 71px;
	height: 71px;
	border-radius: var(--radius);
	background: var(--c-blauw);
}

.blok-software-partner__kaart-icoon .icoon {
	display: flex;
}

.blok-software-partner__kaart-icoon svg {
	width: 45px;
	height: 45px;
}

.blok-software-partner__kaart-titel {
	margin: 0 0 7px;
	font-size: 18px;
	line-height: 1.2;
}

.blok-software-partner__kaart-tekst {
	margin: 0;
	font-size: 16px;
	line-height: 26px;
}

/* Tablet: kolommen onder elkaar, kaarten nog naast elkaar. */
@media (max-width: 1200px) {
	.blok-software-partner__raster {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 56px;
	}

	.blok-software-partner__intro {
		max-width: 560px;
	}
}

/* Mobiel (ontwerp 390): alles gestapeld, kaarten horizontaal met kleiner icoon. */
@media (max-width: 767px) {
	.blok-software-partner {
		padding: 60px 0;
	}

	.blok-software-partner__raster {
		row-gap: 48px;
	}

	.blok-software-partner__watermerk {
		top: -59px;
		left: -20px;
		width: 111px;
		height: 102px;
	}

	.blok-software-partner__titel {
		font-size: 22px;
		line-height: 28px;
		margin-bottom: 10px;
	}

	.blok-software-partner__tekst {
		margin-bottom: 20px;
		color: var(--c-grijs-4);
	}

	.blok-software-partner__kaarten {
		grid-template-columns: minmax(0, 1fr);
		gap: 13px;
	}

	.blok-software-partner__kaart {
		align-items: flex-start;
		gap: 20px;
		min-height: 0;
		padding: 24px 20px;
		border-radius: 15px;
	}

	.blok-software-partner__kaart-icoon {
		flex-basis: 47px;
		width: 47px;
		height: 47px;
		border-radius: 6.5px;
	}

	.blok-software-partner__kaart-icoon svg {
		width: 30px;
		height: 30px;
	}

	.blok-software-partner__kaart-titel {
		font-size: 16px;
		margin-bottom: 5px;
	}

	.blok-software-partner__kaart-tekst {
		font-size: 14px;
		line-height: 24px;
	}
}