/*
 * Info article page body (single-info_article.php, new; docs/plans/2026-09-28-per-intent-pages.md). The Info card's media
 * construction at page size: radius 16, the bottom-up black/0.6 shade, the orange badge top/inline-start 16 (12/16 medium,
 * icon 20); height 192 at 375 (the card's 640 height), 16:9 from 640. Text 18/28 gray-700 (the traject page body), one
 * 768px column (--container-3xl), centred.
 */
.artikel-body__inner { max-width: var(--container-3xl); margin-inline: auto; }
.artikel-body__media {
	position: relative;
	height: calc(var(--spacing) * 48);
	margin-bottom: calc(var(--spacing) * 8);
	overflow: hidden;
	border-radius: var(--radius-2xl);
	background-color: var(--color-gray-100);
}
@media (min-width: 40rem) { .artikel-body__media { height: auto; aspect-ratio: 16 / 9; } }
.artikel-body__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.artikel-body__shade { position: absolute; inset: 0; background-image: linear-gradient(to top, color-mix(in srgb, var(--color-black) 60%, transparent), transparent); }
.artikel-body__badge {
	position: absolute;
	top: calc(var(--spacing) * 4);
	inset-inline-start: calc(var(--spacing) * 4);
	display: inline-flex;
	align-items: center;
	gap: calc(var(--spacing) * 1.5);
	padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
	border-radius: var(--radius-full);
	background-color: var(--color-brand-orange);
	color: var(--color-white);
	font-size: var(--text-xs);
	line-height: var(--text-xs-lh);
	font-weight: var(--font-weight-medium);
}
.artikel-body__content { 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). */
.artikel-body__traject { margin-top: calc(var(--spacing) * 8); }

/* "Meer over <category>": most categories have two articles, so the other one is often alone; from 768 (two columns)
   centre it at the same card width instead of leaving the right column empty. */
@media (min-width: 48rem) {
	.artikel-more .info-grid > .info-card:only-child { grid-column: 1 / -1; justify-self: center; width: calc((100% - calc(var(--spacing) * 6)) / 2); }
}