/*
 * Senior leadership.
 *
 * Six people, one under the other at the full reading measure, was 6,040px of
 * document at 1280 and 5,730px on a phone. They are six cards in a grid here,
 * and the whole department's leadership fits on one screen.
 *
 * Every custom property carries a fallback. The plugin owns this page's markup
 * (ADR-001) and has to keep looking like itself under a theme that has never
 * heard of these tokens.
 */

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

/*
 * `auto-fit` rather than `auto-fill`: with six cards and a 1200px measure the
 * two behave the same until the last row, where `auto-fill` would hold empty
 * tracks open and leave the final card stranded at a third of the width.
 *
 * `min(100%, 20rem)` because a bare `minmax(20rem, 1fr)` overflows any
 * container narrower than 20rem — at 320px the track is wider than the page.
 *
 * 20rem and not less: six people divide into three columns and two even rows.
 * A 17rem track fits four across the 1200px measure, which put four officers in
 * the first row and left the second one two-thirds empty.
 */
.jmns-leadership__list {
	display: grid;
	/*
	 * Capped so three 20rem tracks do not stretch to 389px each across the full
	 * 1200px measure. The cards keep their three-and-three shape and the
	 * portraits come down with the track.
	 */
	max-inline-size: 62rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: var(--wp--preset--spacing--40, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jmns-leadership__item {
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------------- card -- */

.jmns-leader {
	display: flex;
	flex-direction: column;
	/* Stretches every card in a row to the tallest, so the frames align. */
	block-size: 100%;
	overflow: hidden;
	/*
	 * `border-strong` rather than the hairline `border`: at 1px, #DCE4DF is
	 * 1.30:1 against the surface and #6F8D7A is 3.64:1, which is what SC 1.4.11
	 * asks of a boundary. The cards carry no controls, so the border is not
	 * load-bearing — but a low-vision reader should still be able to see where
	 * one officer ends and the next begins.
	 */
	border: 1px solid var(--wp--preset--color--border-strong, #6F8D7A);
	border-radius: var(--r-card, 16px);
	background-color: var(--wp--preset--color--surface, #fff);
}

/* -------------------------------------------------------------- photo -- */

/*
 * A fixed frame for portraits that are not the same shape. Four are 1080x1080
 * and two are 413x591, which stepped the column 680, 680, 680, 591, 680, 599.
 *
 * 4/5 sits between the two source ratios, so neither is cropped hard: the
 * squares lose 10% from each side, where these portraits carry nothing but
 * white, and the tall ones lose about 12% of their height.
 */
.jmns-leader__frame {
	/*
	 * 1/1, not 4/5. At 4/5 the frame was 387x484 inside a 389x643 card — 75% of
	 * every card was photograph, which reads as a portrait gallery rather than as
	 * a list of who runs the department. A square keeps the head and shoulders
	 * these sources are composed around and gives the name and grade room.
	 */
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
}

/*
 * `block-size: 100%` has to beat the theme's `img { block-size: auto }`, which
 * is 0-0-1 to this rule's 0-1-0 — a class outranks a bare element, so this
 * wins. Verified in the browser rather than assumed (ADR-052).
 */
/*
 * A fifth taller than the frame, pinned to its top.
 *
 * `object-position` alone could not do this. The sources are a mix of 1:1 and
 * 0.699 ratios, so in a square frame `cover` crops the tall ones and leaves the
 * square ones untouched — and the orange band across the foot of the
 * department's portrait cards landed as a heavy bar on some officers and not at
 * all on others. Overhanging the frame by a fixed amount crops every portrait
 * by the same fraction of itself, whatever shape it started as.
 */
.jmns-leader__photo {
	display: block;
	inline-size: 100%;
	block-size: 120%;
	/* `cover` keeps faces the same size across cards; `fill` would stretch. */
	object-fit: cover;
	object-position: 50% 0;
}

/* The one officer whose portrait never arrived in the migration. */
.jmns-leader__photo--none {
	display: grid;
	place-items: center;
	color: var(--wp--preset--color--text-disabled, #A2ADA5);
}

.jmns-leader__photo--none svg {
	inline-size: 38%;
	block-size: auto;
	fill: currentColor;
	opacity: 0.55;
}

/* --------------------------------------------------------------- text -- */

.jmns-leader__body {
	display: flex;
	flex-direction: column;
	/*
	 * Grows into whatever the card has left after the frame. Without this the
	 * body is only as tall as its own text, the auto margin below has no slack
	 * to absorb, and the grade pills sit at six different heights across a row
	 * that is otherwise squared off.
	 */
	flex: 1;
	/*
	 * `gap` rather than margins on the children, so it also sets the *minimum*
	 * air above the grade pill — that one is pushed to the bottom of the card
	 * with an auto margin, and an auto margin contributes nothing when the card
	 * has no slack left to distribute.
	 */
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--40, 1rem);
}

/*
 * The person leads. These were one heading with the office welded on after a
 * `<br>`, so a name and a job title read as a single string.
 *
 * `margin-block: 0` is the declaration ADR-052 is about: the theme's heading
 * rhythm reaches into components dropped into `.entry-content`. It is in
 * `:where()` there, so this single class takes it — checked, not assumed.
 */
.jmns-leader__name {
	margin-block: 0;
	color: var(--wp--preset--color--text-primary, #1F2925);
	font-size: var(--wp--preset--font-size--large, 1.125rem);
	font-weight: 700;
	line-height: 1.25;
	/* "Y.A.D. Dato' Setia Dr. Haji Anhar bin Haji Opir" in a 20rem track. */
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

/*
 * The office. Second, and set as prose rather than as a label, because for the
 * two office-holders it is the longest and most important line on the card.
 * #5E6D63 on #FFFFFF is 5.46:1.
 */
.jmns-leader__role {
	margin-block: 0;
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.45;
	text-wrap: pretty;
}

/*
 * The civil-service grade. Third, and tinted rather than merely smaller: at
 * 0.75rem it would otherwise read as a continuation of the sentence above it,
 * and it is a different kind of fact. #5E6D63 on #EAF1EC is 4.76:1.
 *
 * `margin-block-start: auto` pins it to the bottom of the card, so the grades
 * line up across a row whose roles run to different lengths.
 */
.jmns-leader__grade {
	align-self: flex-start;
	margin-block: auto 0;
	padding: 0.2rem 0.6rem;
	border-radius: var(--r-pill, 999px);
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: var(--wp--preset--font-size--caption, 0.75rem);
	line-height: 1.4;
	/* "Penolong Pegawai Tadbir Kanan N7" is two lines in a phone-width card;
	   balanced, it splits evenly instead of stranding one word. */
	text-wrap: balance;
}

/* ------------------------------------------------------------- phones -- */

/*
 * One column below 40rem. The card goes side-by-side there rather than
 * stacking: a full-width 4/5 portrait in a 342px card is 428px tall, so six
 * of them would put the page back where it started.
 */
@media (max-width: 39.999rem) {

	/*
	 * `flex-start`, not `stretch`. Stretching the frame to the card's height
	 * would make every portrait a different shape again — the card is as tall
	 * as its text, and the Mufti's title runs to three lines where a division
	 * head's runs to one.
	 *
	 * Which leaves the portrait shorter than the card by however much the text
	 * overruns it — 1px on one card and 9px on the next. Bled to the card's
	 * edge that reads as a rendering fault, so at this width the portrait is
	 * inset and rounded instead: a thumbnail beside the text, which is also the
	 * shape the staff directory uses for the same job.
	 */
	.jmns-leader {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--30, 0.75rem);
		padding: var(--wp--preset--spacing--30, 0.75rem);
	}

	.jmns-leader__frame {
		flex: none;
		inline-size: 30%;
		min-inline-size: 92px;
		max-inline-size: 124px;
		border-radius: var(--r-input, 12px);
	}

	.jmns-leader__body {
		min-inline-size: 0;
		padding: 0;
	}

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