/*
 * Traject page intro (single-traject.php, new; docs/plans/2026-09-28-per-intent-pages.md). Built from the Diensten card's
 * construction and the site tokens, larger for a page: body 18/28 gray-700 (the page-hero lead scale on white),
 * "Voor wie?" = diensten-card__for (gray-50, radius 12, p 16, label 12 uppercase tracking-wide gray-500), facts =
 * diensten-card__meta (14/20 gray-500, orange 16px icons; the badge icon in the traject colour, as on the home card),
 * photo = the card photo (radius 16, 16:10 → 4:3 from 1024, shadow-lg). Columns 7/5 from 1024, gap 48.
 */
.dienst-intro__layout { display: grid; gap: calc(var(--spacing) * 10); }
@media (min-width: 64rem) {
	/* start, not center: with the client's longer texts a centred photo floated halfway down the body column. */
	.dienst-intro__layout { grid-template-columns: 7fr 5fr; gap: calc(var(--spacing) * 12); align-items: start; }
}
.dienst-intro__body { font-size: var(--text-lg); line-height: var(--text-lg-lh); color: var(--color-gray-700); }
/* Headings, lists, links and spacing inside the body: .prose (prose.css). */
.dienst-intro__for { margin-top: calc(var(--spacing) * 6); padding: calc(var(--spacing) * 4); border-radius: var(--radius-xl); background-color: var(--color-gray-50); }
@media (min-width: 40rem) { .dienst-intro__for { padding: calc(var(--spacing) * 5); } }
.dienst-intro__for-label {
	margin-bottom: calc(var(--spacing) * 1);
	font-size: var(--text-xs);
	line-height: var(--text-xs-lh);
	font-weight: var(--font-weight-medium);
	color: var(--color-gray-500);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}
.dienst-intro__for-text { font-size: var(--text-base); line-height: var(--text-base-lh); color: var(--color-gray-700); }
.dienst-intro__facts {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--spacing) * 3) calc(var(--spacing) * 5);
	margin-block: calc(var(--spacing) * 6);
	font-size: var(--text-sm);
	line-height: var(--text-sm-lh);
	color: var(--color-gray-500);
}
.dienst-intro__fact { display: inline-flex; align-items: center; gap: calc(var(--spacing) * 1.5); }
.dienst-intro__fact .icon { color: var(--fact-color, var(--color-brand-orange)); }
.dienst-intro__media { overflow: hidden; border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); }
.dienst-intro__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 64rem) { .dienst-intro__img { aspect-ratio: 4 / 3; } }

/* The contact form card, centred, at most 672 wide (--container-2xl, the section-head text measure). */
.dienst-contact__inner { max-width: var(--container-2xl); margin-inline: auto; }
/* Right after the CTA band, whose section already ends with its own bottom padding: no second gap above the form. */
.dienst-contact { padding-top: 0; }