/* Home traject card (spec §4.10). Hover: shadow-lg over 150ms, photo scale 1.05 over 500ms; no lift. */
.traject-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-4xl);
	border: 1px solid var(--color-gray-100);
	background-color: var(--color-white);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--duration-fast) var(--ease-default);
}
.traject-card:hover { box-shadow: var(--shadow-lg); }
.traject-card__media { aspect-ratio: 16 / 10; overflow: hidden; border-start-start-radius: var(--radius-4xl); border-start-end-radius: var(--radius-4xl); }
.traject-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-image) var(--ease-default); }
.traject-card:hover .traject-card__img { transform: scale(1.05); }
.traject-card__body { padding: calc(var(--spacing) * 6); }
.traject-card__badge {
	display: flex;
	align-items: center;
	gap: calc(var(--spacing) * 2);
	font-size: var(--text-sm);
	line-height: var(--text-sm-lh);
	font-weight: var(--font-weight-medium);
	margin-bottom: calc(var(--spacing) * 2);
}
.traject-card__title { font-size: var(--text-xl); line-height: var(--text-xl-lh); font-weight: var(--font-weight-bold); color: var(--color-brand-dark); margin-bottom: calc(var(--spacing) * 2); }
.traject-card__text { font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--color-gray-600); margin-bottom: calc(var(--spacing) * 4); }
/*
 * Meta row. Approved fix (T2 brief): the live row squeezed "1-2 uur per week" into a four-line column next to icons shrunk
 * to 3–10px. Here the icons keep their 16px, the duration never breaks, and the audience text wraps onto its own row as a
 * whole item once fewer than 14rem are left beside the duration, so each item reads on one or two lines.
 */
.traject-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
	font-size: var(--text-sm);
	line-height: var(--text-sm-lh);
	color: var(--color-gray-500);
}
.traject-card__meta-item { display: flex; align-items: center; gap: calc(var(--spacing) * 1); }
.traject-card__meta-item .icon { flex-shrink: 0; }
.traject-card__meta-item--duration { white-space: nowrap; }
.traject-card__meta-item--audience { flex: 1 1 14rem; min-width: 0; align-items: flex-start; }
.traject-card__meta-item--audience .icon { margin-top: 2px; } /* first line, not centred between two */
/* "Meer over <traject>" (per-intent pages plan): the Info card's "Lees meer" spacing, mt 16 under the meta row. */
.traject-card__more { margin-top: calc(var(--spacing) * 4); }