/* ---------------------------------------------------------------------------
 * 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-block: var(--blok-pt) var(--blok-pb);
	background: var(--c-grijs-1);
	/* Alleen horizontaal afsnijden: het watermerk steekt boven de inhoud uit
	 * en mag bij een aansluitend blok in dezelfde kleur over de rand vallen. */
	overflow-x: clip;
}

.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;
}

/* WYSIWYG-alinea's binnen de tekst: geen extra marges, witregel tussen alinea's. */
.blok-software-partner__tekst p {
	margin: 0;
}

.blok-software-partner__tekst p + p {
	margin-top: 26px;
}

/* Meerdere knoppen naast elkaar: kleine tussenruimte, ook als de tweede
 * knop naar een nieuwe regel omslaat (dan zonder inspringing). */
.blok-software-partner__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

/* 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;
}

/* WYSIWYG-alinea's op de kaart: geen extra marges door wpautop. */
.blok-software-partner__kaart-tekst p {
	margin: 0;
}

.blok-software-partner__kaart-tekst p + p {
	margin-top: 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__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;
	}
}

/* ---------------------------------------------------------------------------
 * Donkere variant (casepagina's, Figma 147:9619 "Wat Zoho Desk opleverde"):
 * donkerblauw vlak, kaarten in een subtiele witte waas (wit 2% op het
 * donkerblauw), icoontegels wit 10% met blauw icoon, witte tekst. Het
 * watermerk staat er groter (390x360) en verder linksboven.
 * ------------------------------------------------------------------------- */

.blok-software-partner--donker {
	background: var(--c-donkerblauw);
	color: var(--c-wit);
}

.blok-software-partner--donker .blok-software-partner__watermerk {
	top: -140px;
	left: -150px;
	width: 390px;
	height: 360px;
}

.blok-software-partner--donker .blok-software-partner__titel,
.blok-software-partner--donker .blok-software-partner__kaart-titel {
	color: var(--c-wit);
}

.blok-software-partner--donker .blok-software-partner__tekst,
.blok-software-partner--donker .blok-software-partner__kaart-tekst {
	color: var(--c-wit);
}

.blok-software-partner--donker .blok-software-partner__kaart {
	background: rgb(255 255 255 / 2%); /* wit 2% op donkerblauw, uit het ontwerp */
	box-shadow: none;
}

.blok-software-partner--donker .blok-software-partner__kaart-icoon {
	background: rgb(255 255 255 / 10%); /* wit 10%, uit het ontwerp */
}

/* De lijniconen zijn in de bron wit; op de donkere kaart kleuren ze blauw. */
.blok-software-partner--donker .blok-software-partner__kaart-icoon svg [fill="white"] {
	fill: var(--c-blauw);
}

.blok-software-partner--donker .blok-software-partner__kaart.kaart-hover:hover {
	background: rgb(255 255 255 / 5%);
	box-shadow: 0 12px 24px rgb(0 0 0 / 25%);
}

@media (max-width: 767px) {

	.blok-software-partner--donker .blok-software-partner__watermerk {
		top: -35px;
		left: -20px;
		width: 148px;
		height: 137px;
	}
}

/* Premium hover: lift via .kaart-hover, schaduw verdiept, icoon groeit mee. */
.blok-software-partner__kaart.kaart-hover:hover {
	box-shadow: 5px 8px 16px rgb(0 0 0 / 9%);
}

@media (prefers-reduced-motion: no-preference) {
	.blok-software-partner__kaart-icoon {
		transition: scale var(--dur-kort) var(--ease-out);
	}

	.blok-software-partner__kaart:hover .blok-software-partner__kaart-icoon {
		scale: 1.08;
	}
}