/*
 * Departmental functions.
 *
 * Twelve statutory duties in one flat `<ul>` under an all-caps heading that
 * repeated the page title. Every item carried the same weight as every other
 * and ran the full prose measure, and there was no way to point at one of them
 * — which matters, because these are what the department is empowered to do.
 *
 * Every custom property carries a fallback. The plugin owns this markup
 * (ADR-001) and has to keep looking like itself under a theme that has never
 * heard of these tokens.
 */

.jmns-duties {
	margin-block-start: var(--wp--preset--spacing--40, 1.5rem);
}

/*
 * A 24rem track, which gives three columns at 1200px and one on a phone.
 * Twelve items in a single column is most of a screen of near-identical lines;
 * in three, the length of the list is legible at a glance, which is the thing a
 * functions page is for.
 *
 * The visible numeral is printed in the markup rather than drawn with a CSS
 * counter, so it can be styled and hidden from assistive technology while the
 * `<ol>` itself does the counting for a screen reader.
 */
.jmns-duties__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
	gap: var(--wp--preset--spacing--20, 0.5rem) var(--wp--preset--spacing--50, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jmns-duty {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30, 1rem);
	align-items: start;
	margin: 0;
	padding-block: var(--wp--preset--spacing--30, 1rem);
	border-block-start: 1px solid var(--wp--preset--color--border, #DCE4DF);
}

/*
 * The numeral is the affordance: it is what lets somebody say "fungsi 7".
 * Tabular figures so 1 and 11 occupy the same width and the text column starts
 * on one axis down the whole list.
 */
.jmns-duty__number {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--title-sm, 1.125rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
	text-align: end;
	color: var(--wp--preset--color--interactive, #245746);
}

.jmns-duty__text {
	line-height: 1.6;
	/* The functions are single sentences of very different lengths; balancing
	   stops the short ones leaving one word alone on a second line. */
	text-wrap: pretty;
}

/* -------------------------------------------------------------- mobile -- */

@media (max-width: 30rem) {
	/*
	 * The numeral column narrows but stays a column. Setting the number above
	 * the text would cost a line each for twelve items and lose the axis the
	 * list is read down.
	 */
	.jmns-duty {
		grid-template-columns: 1.75rem minmax(0, 1fr);
		gap: var(--wp--preset--spacing--20, 0.75rem);
	}

	.jmns-duty__number {
		font-size: var(--wp--preset--font-size--medium, 1rem);
	}
}