/*
 * The department's objectives.
 *
 * The source is an ordered list of seven items, each opening with a bold clause
 * that runs on into its explanation. Rendered plainly that is a numbered list
 * out of a document: seven paragraphs, a small grey digit beside each, and no
 * way to scan what the seven actually are.
 *
 * The clause becomes a heading, the remainder becomes its reason, and the
 * number becomes large enough to hold the pair together. Nothing else — no
 * cards, no icons, no rules the eye has to climb over. The page earns its
 * character from numbering, typography and space, which is all an institution
 * stating its purpose should need.
 *
 * Every custom property carries a fallback: the plugin owns this markup
 * (ADR-001) and has to look like itself under a theme that has never heard of
 * these tokens.
 */

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

/*
 * The sentence the page opens with. Closer to the title than to the list, so it
 * reads as the heading's line rather than as an unnumbered eighth objective.
 */
.jmns-objektif__intro {
	max-inline-size: 45rem;
	margin-block: 0 var(--wp--preset--spacing--70, 2.5rem);
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	line-height: 1.6;
}

/*
 * One column at 900px.
 *
 * Two would use more of a desktop and cost the thing the page is for: seven
 * objectives read as a sequence, and a sequence that runs down two columns is
 * read in the wrong order by anybody who scans before they read.
 */
.jmns-objektif__list {
	max-inline-size: 56.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

/*
 * Number in the margin, objective beside it.
 *
 * Below 34rem the number goes above instead: at 342px a 4rem margin column
 * leaves 240px of measure, and an objective title is not a caption.
 */
.jmns-objektif__item {
	display: grid;
	gap: 0.25rem;
	padding-block: var(--wp--preset--spacing--60, 2rem);
	border-block-start: 1px solid rgb(var(--jmns-primary-rgb, 36 87 70) / 0.1);
}

.jmns-objektif__item:first-child {
	padding-block-start: 0;
	border-block-start: 0;
}

@media (min-width: 34rem) {
	.jmns-objektif__item {
		grid-template-columns: 4.5rem minmax(0, 1fr);
		gap: 0 var(--wp--preset--spacing--50, 1.5rem);
	}
}

/*
 * 36px, and quiet.
 *
 * The number anchors the objective and must not outrank it, so it is set in the
 * department's green at a weight below the heading's and on a line that puts its
 * cap-height level with the title's. `tabular-nums` because 01 through 07 sit
 * in a column and should share one width.
 */
.jmns-objektif__number {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 1.15;
	/* `border-strong` is this palette's mid-tone green and #6F8F82 was within a
	   step of it, so the number now follows the scheme instead of staying sage
	   on a dark ground. */
	color: var(--wp--preset--color--border-strong, #6F8D7A);
	font-variant-numeric: tabular-nums;
}

.jmns-objektif__body {
	min-inline-size: 0;
}

/*
 * The objective itself. 18px against the description's 16 and the number's 36 —
 * three ranks, each clearly a step from the last, which is what the bold clause
 * inside a paragraph could never be.
 */
.jmns-objektif__title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
}

.jmns-objektif__text {
	max-inline-size: 42rem;
	margin-block: var(--wp--preset--spacing--20, 0.5rem) 0;
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	line-height: 1.6;
}

@media (max-width: 34rem) {
	/* 30px: still the anchor, but a phone has no margin column to put it in. */
	.jmns-objektif__number {
		font-size: 1.875rem;
	}

	.jmns-objektif__title {
		font-size: 1.0625rem;
	}
}