/* Dark page head (prototype: Projecten, Blog, Offerte "Intro") */
.eba-tk__binnen { max-width: var(--eba-max); margin: 0 auto; padding: var(--eba-pad-d) var(--eba-goot); display: grid; gap: 16px; }
.eba-tk__intro { margin: 0; font-size: 1.125rem; color: var(--eba-op-donker); max-width: 640px; text-wrap: pretty; }

/*
 * With a background photo (class eba-kopfoto, template-parts/kop-beeld.php; also the legal pages and projects):
 * dark from the left behind the text, transparent to the right. The gradient follows the text
 * column (--eba-max, centred) instead of the window width, so wide and narrow screens look alike.
 */
.eba-kopfoto { position: relative; isolation: isolate; overflow: hidden; }
.eba-kopfoto > :not(.eba-kopfoto__beeld):not(.eba-kopfoto__verloop) { position: relative; }
.eba-kopfoto__beeld { position: absolute; inset: 0; }
.eba-kopfoto__verloop {
	--l: calc(max(0px, 50% - var(--eba-max) / 2) + var(--eba-goot)); /* left edge of the text */
	position: absolute; inset: 0;
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--eba-donker) 94%, transparent) 0,
		color-mix(in srgb, var(--eba-donker) 90%, transparent) calc(var(--l) + 580px),
		color-mix(in srgb, var(--eba-donker) 60%, transparent) calc(var(--l) + 800px),
		color-mix(in srgb, var(--eba-donker) 20%, transparent) calc(var(--l) + 1000px),
		color-mix(in srgb, var(--eba-donker) 0%, transparent) calc(var(--l) + 1180px));
}
/* Text stays in the dark part */
.eba-kopfoto .eba-tk__binnen > *,
.eba-kopfoto .eba-pd-kop__binnen > *,
.eba-kopfoto .eba-jk__binnen > :not(.eba-jk__tabs) { max-width: 660px; }

/* Phones: the photo as a strip at the top that fades into the dark head, text below it */
@media (max-width: 47.999em) {
	.eba-kopfoto { padding-top: 9.5rem; }
	.eba-kopfoto__beeld { bottom: auto; height: 14.5rem; }
	.eba-kopfoto__verloop {
		background: linear-gradient(180deg,
			color-mix(in srgb, var(--eba-donker) 8%, transparent) 0,
			color-mix(in srgb, var(--eba-donker) 22%, transparent) 5.5rem,
			color-mix(in srgb, var(--eba-donker) 82%, transparent) 9.5rem,
			var(--eba-donker) 13.5rem);
	}
	.eba-kopfoto .eba-tk__binnen,
	.eba-kopfoto .eba-pd-kop__binnen,
	.eba-kopfoto .eba-jk__binnen { padding-top: 0.25rem; }
}