/*
 * Division pages.
 *
 * Fatwa, Falak, Maktabah and Khidmat Pengurusan, built to one template and
 * carrying one set of faults: a shouted copy of the page title, section
 * headings at h4 with no h3 above them, a spacer paragraph left by the editor,
 * and a committee chart with no alt text.
 *
 * 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-bahagian {
	margin-block-start: var(--wp--preset--spacing--40, 1.5rem);
}

/* ---------------------------------------------------------------- prose -- */

/*
 * A measure, not the page width. Falak's account of itself runs four
 * paragraphs of institutional history; at the full 1200px that is about 170
 * characters a line.
 *
 * 54ch and not 66: `ch` is the width of the digit zero and this font's zero is
 * 0.62em, so 66ch measures nearer 84 characters than 66.
 */
.jmns-bahagian__text {
	max-inline-size: 54ch;
	margin-block: 0 var(--wp--preset--spacing--30, 1rem);
	line-height: 1.7;
}

.jmns-bahagian__text:last-child {
	margin-block-end: 0;
}

/* The opening paragraph carries how the division came to exist. */
.jmns-bahagian__text--lede {
	max-inline-size: 46ch;
	color: var(--wp--preset--color--text-primary, #1F2925);
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
	line-height: 1.65;
}

/* -------------------------------------------------------------- section -- */

.jmns-bahagian__section {
	margin-block-start: var(--wp--preset--spacing--60, 2.5rem);
	padding-block-start: var(--wp--preset--spacing--50, 2rem);
	border-block-start: 1px solid var(--wp--preset--color--border, #DCE4DF);
}

.jmns-bahagian__heading {
	margin-block: 0 var(--wp--preset--spacing--30, 1rem);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--title-sm, 1.25rem);
	font-weight: 700;
	line-height: 1.3;
	text-wrap: balance;
}

/*
 * A 26rem track, which gives two columns at 1200px and one on a phone. Seven
 * functions in a single column is a tall thin list of near-identical lines;
 * two columns make the length of it legible at a glance.
 */
.jmns-bahagian__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
	gap: 0 var(--wp--preset--spacing--50, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

/*
 * The 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 — matching the Fungsi page, which lists the department's
 * functions the same way.
 */
.jmns-bahagian__number {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.6;
	text-align: end;
	color: var(--wp--preset--color--interactive, #245746);
}

.jmns-bahagian__body {
	line-height: 1.6;
	text-wrap: pretty;
}

/* --------------------------------------------------------------- chart -- */

/*
 * The chart is a document, so it is set as one: capped rather than stretched,
 * on the department's tint, and linked at full size because at 34rem the names
 * on it are not readable.
 */
.jmns-bahagian__chart {
	max-inline-size: 34rem;
	margin: var(--wp--preset--spacing--30, 1rem) 0 0;
}

.jmns-bahagian__chart-image {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border: 1px solid var(--wp--preset--color--border, #DCE4DF);
	border-radius: var(--r-input, 12px);
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
}

.jmns-bahagian__chart-link:hover .jmns-bahagian__chart-image,
.jmns-bahagian__chart-link:focus-visible .jmns-bahagian__chart-image {
	border-color: var(--wp--preset--color--border-strong, #6F8D7A);
}

.jmns-bahagian__chart-link:focus-visible {
	outline: 3px solid var(--wp--preset--color--interactive, #245746);
	outline-offset: 3px;
	border-radius: var(--r-card, 16px);
}

.jmns-bahagian__chart-note {
	margin-block-start: var(--wp--preset--spacing--20, 0.5rem);
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

/* ================================================== the two-column page == */

/*
 * The chart goes beside the introduction, not under it.
 *
 * Both of these pages are a column of prose down the left of a 1200px band
 * with nothing to its right: the account of the division measures 552px and
 * leaves 648px of empty page, and the committee chart below it leaves 656px
 * more. Two voids, one under the other, on the two pages that carry the
 * department's own history.
 *
 * The prose keeps its measure — 54 characters is right and widening it would
 * trade one problem for a worse one — so the space is filled rather than
 * consumed: the chart moves up into it.
 *
 * Placed rather than reordered. The chart's markup stays where the department
 * put it, after the list of functions, and only its position on screen
 * changes. That is safe here precisely because the list between them holds no
 * links: nothing can be tabbed to out of order, because there is nothing in it
 * to tab to.
 */
/*
 * 68rem, not 64. At 1024px the two columns leave the prose about 45 characters,
 * which is under the measure this page was set to and worse than the empty
 * space it was meant to fix. Below that they stack, which is what they did
 * before and is fine.
 */
@media (min-width: 68rem) {
	.jmns-bahagian:has(.jmns-bahagian__section--chart) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
		column-gap: var(--wp--preset--spacing--60, 2.5rem);
		align-items: start;
	}

	.jmns-bahagian__intro {
		grid-column: 1;
		grid-row: 1;
	}

	.jmns-bahagian__section--chart {
		grid-column: 2;
		grid-row: 1;
		/* It is the top of its own column, so it needs no rule above it. */
		margin-block-start: 0;
		padding-block-start: 0;
		border-block-start: 0;
	}

	/* Everything else keeps the whole width it already had. */
	.jmns-bahagian__section:not(.jmns-bahagian__section--chart) {
		grid-column: 1 / -1;
	}

	.jmns-bahagian__section--chart .jmns-bahagian__chart {
		max-inline-size: none;
	}
}