/* ---------------------------------------------------------------------------
 * Blok: Over het bedrijf. Klantlogo links, verticale deellijn, kop en
 * lopende tekst rechts op de lichte achtergrond. Maten uit het ontwerp
 * (casepagina 1920): linkerkolom 392px tot de lijn, logo 347px breed,
 * tekst 80px rechts van de lijn, kop 36/46, tekst 16/26.
 * ------------------------------------------------------------------------- */

.blok-over-bedrijf {
	padding-block: 60px;
}

.blok-over-bedrijf__kolommen--met-logo {
	display: grid;
	grid-template-columns: 392px minmax(0, 1fr);
	align-items: center;
}

.blok-over-bedrijf__logo {
	padding-right: 45px;
}

.blok-over-bedrijf__logo-afbeelding {
	width: 347px;
	height: auto;
}

/* Deellijn tussen logo en tekst; begint zoals in het ontwerp iets onder de
 * bovenkant van de kop en loopt door tot de onderkant van de tekst. */
.blok-over-bedrijf__inhoud {
	position: relative;
}

.blok-over-bedrijf__kolommen--met-logo .blok-over-bedrijf__inhoud {
	padding-left: 80px;
}

.blok-over-bedrijf__kolommen--met-logo .blok-over-bedrijf__inhoud::before {
	content: "";
	position: absolute;
	left: 0;
	top: 23px;
	bottom: 0;
	width: 1px;
	background: var(--c-grijs-3);
}

.blok-over-bedrijf__titel {
	margin: 0 0 16px;
	font-size: 36px;
	line-height: 46px;
}

.blok-over-bedrijf__tekst p {
	margin: 0 0 26px;
}

.blok-over-bedrijf__tekst p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
 * Tablet en mobiel: logo boven de tekst, de deellijn wordt horizontaal
 * onder het logo (geen mobiel ontwerp; consistent met de andere blokken).
 * ------------------------------------------------------------------------ */

@media (max-width: 1023px) {
	.blok-over-bedrijf__kolommen--met-logo {
		grid-template-columns: 1fr;
	}

	.blok-over-bedrijf__logo {
		padding: 0 0 24px;
		margin-bottom: 24px;
		border-bottom: 1px solid var(--c-grijs-3);
	}

	.blok-over-bedrijf__logo-afbeelding {
		width: 260px;
	}

	.blok-over-bedrijf__kolommen--met-logo .blok-over-bedrijf__inhoud {
		padding-left: 0;
	}

	.blok-over-bedrijf__kolommen--met-logo .blok-over-bedrijf__inhoud::before {
		content: none;
	}
}

@media (max-width: 767px) {
	.blok-over-bedrijf {
		padding-block: 40px;
	}

	.blok-over-bedrijf__logo {
		padding-bottom: 20px;
		margin-bottom: 20px;
	}

	.blok-over-bedrijf__logo-afbeelding {
		width: 200px;
	}

	.blok-over-bedrijf__titel {
		margin-bottom: 13px;
		font-size: 22px;
		line-height: 28px;
	}
}