/* ==========================================================================
   "Voor wie ik werk" — drie klanttypen als kaarten
   ========================================================================== */

.voorwie {
	background-color: var(--ms-sand-warm);
	border-radius: var(--ms-radius-lg);
	position: relative;
	overflow: hidden;
}

.voorwie__intro {
	max-width: 800px;
	margin-bottom: 80px;
}

.voorwie__intro h2 {
	color: var(--ms-brown);
}

.voorwie__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	position: relative;
}

.voorwie-card {
	background-color: var(--ms-sand);
	border-radius: var(--ms-radius-md);
	padding: 50px 40px;
	position: relative;
	box-shadow: var(--ms-shadow-md);
	transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
.voorwie-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--ms-shadow-lg);
}

/* Subtiele overlap / asymmetrie */
.voorwie-card:nth-child(1) { transform: translateY(20px); }
.voorwie-card:nth-child(2) { transform: translateY(-10px); }
.voorwie-card:nth-child(3) { transform: translateY(30px); }

.voorwie-card:nth-child(1):hover { transform: translateY(14px); }
.voorwie-card:nth-child(2):hover { transform: translateY(-16px); }
.voorwie-card:nth-child(3):hover { transform: translateY(24px); }

.voorwie-card__number {
	font-family: var(--ms-font-display);
	font-size: 80px;
	line-height: 1;
	color: var(--ms-terracotta);
	margin-bottom: 20px;
	opacity: 0.9;
}

.voorwie-card__title {
	font-family: var(--ms-font-display);
	font-size: 28px;
	line-height: 1.15;
	margin: 0 0 20px;
	color: var(--ms-blue);
}

.voorwie-card__body {
	font-size: 17px;
	line-height: 1.55;
	color: var(--ms-ink);
}

/* Decoratief streepje boven nummer, doet denken aan een hoogtelijn */
.voorwie-card::before {
	content: "";
	display: none;
	width: 60px;
	height: 2px;
	background-color: var(--ms-terracotta);
	margin-bottom: 30px;
	transition: width 0.3s ease-out;
}
.voorwie-card:hover::before {
	width: 100px;
}

.voorwie .button-container {
	margin-top: 50px;
}

/* ==========================================================================
   Mobiel — kaarten onder elkaar, sectie zonder achtergrond
   ========================================================================== */

@media (max-width: 900px) {
	.voorwie {
		background-color: transparent;
		margin-top: 0;
		border-radius: 0;
		overflow: visible;
	}

	.voorwie .layout-container {
		padding-left: 0;
		padding-right: 0;
	}

	.voorwie__intro {
		margin-bottom: 30px;
		padding: 0 var(--ms-section-padding-x);
	}

	/* Kaarten onder elkaar, full width binnen border */
	.voorwie__cards {
		display: flex;
		flex-direction: column;
		grid-template-columns: none;
		gap: 16px;
	}

	.voorwie-card,
	.voorwie-card:nth-child(1),
	.voorwie-card:nth-child(2),
	.voorwie-card:nth-child(3) {
		transform: none;
		padding: 30px 25px;
		width: 100%;
	}

	.voorwie-card:hover,
	.voorwie-card:nth-child(1):hover,
	.voorwie-card:nth-child(2):hover,
	.voorwie-card:nth-child(3):hover {
		transform: none;
	}

	.voorwie-card__number { font-size: 56px; margin-bottom: 12px; }
	.voorwie-card__title { font-size: 22px; margin-bottom: 15px; }
	.voorwie-card__body { font-size: 16px; }

	.voorwie .button-container {
		margin-top: 35px;
		padding: 0 var(--ms-section-padding-x);
	}
}