/**
 * Component: Role grid (no pattern file; a utility class set for core list / group blocks)
 *
 * Depends on `.kd-icon-blob` from values-row.css (all pattern partials load site-wide).
 */

/* ── Role grid ────────────────────────────────────────────────────────────────
   A short list of labels (roles, service types) rendered as a centred
   multi-column grid instead of a single bullet column, so the list shares the
   centre line of a centred heading/intro above it and fills the measure.

   Add `kd-role-grid` to a core list block, or to a group whose children are
   `kd-role-item`s (each: an optional `kd-icon-blob` above a `kd-role-item__label`,
   see values-row.css). */
.kd-role-grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--kd-measure-reading);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--kd-space-md) var(--kd-space-lg);
	text-align: center;
}

.kd-role-grid > li,
.kd-role-item {
	margin: 0;
	padding-block: var(--kd-space-sm);
}

.kd-role-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kd-space-md);
}

/* Label colour is --kd-color-contrast, not primary: primary on white is below
   4.5:1 for this text size. */
.kd-role-item__label {
	margin: 0;
	font-family: var(--kd-font-heading);
	font-weight: var(--kd-fw-heading);
	color: var(--kd-color-contrast);
}

@media (max-width: 600px) {
	.kd-role-grid {
		grid-template-columns: 1fr;
	}
}