/*
 * Related documents, at the foot of a ruling.
 *
 * A list, not cards. The page above it is a long read and the reader has just
 * finished; three bordered boxes would announce a new section competing for
 * attention, where what is wanted is a quiet offer of somewhere to go next.
 * Same reasoning as the Berita rows on the homepage — a hairline between items
 * is the oldest way to show a short sequence.
 */

.jmns-related {
	margin-block-start: var(--wp--preset--spacing--70, 4rem);
	padding-block-start: var(--wp--preset--spacing--40, 1.5rem);
	border-block-start: 2px solid var(--wp--preset--color--border, #DCE4DF);
}

.jmns-related__title {
	margin-block: 0 var(--wp--preset--spacing--30, 1rem);
	font-family: var(--wp--preset--font-family--heading, inherit);
	/* A step under a section heading: this closes the page rather than opening
	   a new part of it. */
	font-size: var(--wp--preset--font-size--title-sm, 1.375rem);
	font-weight: 700;
}

.jmns-related__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jmns-related__item + .jmns-related__item {
	border-block-start: 1px solid var(--wp--preset--color--divider, #E4EAE6);
}

.jmns-related__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.35rem var(--wp--preset--spacing--30, 1rem);
	/* 44px of target for a whole row, per the brief's mobile guidance. */
	min-block-size: 44px;
	padding-block: var(--wp--preset--spacing--20, 0.75rem);
	color: var(--wp--preset--color--text-primary, #1F2925);
	text-decoration: none;
}

.jmns-related__name {
	flex: 1 1 20rem;
	/* The measure the body copy uses, so a long ruling title wraps to two
	   lines rather than running the width of the page. */
	max-inline-size: 52ch;
	font-weight: 600;
	line-height: 1.4;
}

.jmns-related__link:hover .jmns-related__name {
	color: var(--wp--preset--color--interactive, #245746);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.jmns-related__date {
	flex: 0 0 auto;
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: var(--wp--preset--font-size--caption, 0.8125rem);
	font-variant-numeric: tabular-nums;
}