/*
 * Appointed officers.
 *
 * A register of statutory ICT posts and who holds them, not a gallery. The page
 * was an alternating stack — shouting office name, portrait, person, post — with
 * the two portraits set at whatever size their files happened to be.
 *
 * 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-appointments {
	margin-block-start: var(--wp--preset--spacing--40, 1rem);
}

/*
 * `min(100%, 26rem)` so the track can never be wider than its container — a
 * bare `minmax(26rem, 1fr)` overflows the page below 26rem.
 *
 * 26rem, wider than the leadership page's 20rem, because these cards are wide
 * rather than tall: an office name across the top and a row beneath it. Two
 * offices sit side by side above 56rem and stack below.
 */
.jmns-appointments__list {
	display: grid;
	/*
	 * One column, always.
	 *
	 * Two put the department's two appointments side by side as a pair of
	 * dashboard tiles, and there are only ever a handful of these — a row that
	 * runs the measure reads as an official listing, which is what the page is.
	 * Capped at 1000px so it does not stretch on a wide screen.
	 */
	grid-template-columns: minmax(0, 1fr);
	max-inline-size: 62.5rem;
	gap: var(--wp--preset--spacing--60, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

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

/*
 * Two panels, not one padded box: the office on a tinted head, its holder on
 * white below. The first cut set both in the same white card with the office
 * name at 1.125rem — smaller than the page title, and the office is the subject
 * of the page, not the person and not the heading above it.
 */
.jmns-appointment {
	display: flex;
	flex-direction: column;
	/* Stretches every card in a row to the tallest, so the officers' rows line
	   up even when one office name wraps to two lines and the other does not. */
	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. Matches the leadership cards.
	 */
	/*
	 * A light boundary rather than a strong one. With the cards side by side the
	 * border was doing the separating; in a single column the space between rows
	 * does that, and #6F8D7A at full strength made two rows read as two panels
	 * bolted to the page.
	 *
	 * `border` rather than the #DDE6E1 that stood here: the two are a step
	 * apart, and a stated hex is invisible to a colour scheme, so on the dark
	 * scheme this card kept a near-white edge on a near-black ground.
	 */
	border: 1px solid var(--wp--preset--color--border, #DCE4DF);
	border-radius: 12px;
	background-color: var(--wp--preset--color--surface, #fff);
}

/* --------------------------------------------------------------- office -- */

/*
 * The heading is the office, and one heading can name two of them — the same
 * officer is both CDO and CIO. Stacked as separate lines so two appointments
 * never read as one long title.
 */
.jmns-appointment__office {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 0.5rem);
	/* Fills the head even when the other card names two offices and this one
	   names a single office on a single line. */
	flex: 0 0 auto;
	justify-content: center;
	margin: 0;
	/*
	 * No tinted head. A filled block was carrying two lines of text and half the
	 * card's height with them, which is a lot of colour for a page that lists
	 * two appointments. The rule under it is enough of a division, and each
	 * office already carries its own accent bar.
	 */
	padding: var(--wp--preset--spacing--60, 2rem) var(--wp--preset--spacing--60, 2rem) var(--wp--preset--spacing--40, 1rem);
	border-block-end: 1px solid rgb(var(--jmns-primary-rgb, 36 87 70) / 0.1);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	font-weight: 700;
	line-height: 1.25;
	text-wrap: balance;
}

/*
 * Each office carries a rule of its own, so a card holding two of them reads as
 * two appointments rather than as a title that happens to wrap. A bullet was
 * the first attempt and read as a list marker the editor had left in.
 */
.jmns-appointment__role {
	position: relative;
	padding-inline-start: var(--wp--preset--spacing--30, 0.75rem);
}

.jmns-appointment__role::before {
	content: "";
	position: absolute;
	inset-block: 0.15em 0.15em;
	inset-inline-start: 0;
	inline-size: 3px;
	border-radius: var(--r-pill, 999px);
	background-color: var(--wp--preset--color--interactive, #245746);
}

/* --------------------------------------------------------------- holder -- */

.jmns-appointment__holder {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50, 1.5rem);
	/* 24-32px, and the same inset as the office above it, so the portrait and
	   the office name start on one line down the card. */
	padding: var(--wp--preset--spacing--50, 1.5rem) var(--wp--preset--spacing--60, 2rem)
		var(--wp--preset--spacing--60, 2rem);
}

/*
 * The frame clips; the photograph overhangs it.
 *
 * 6.5rem, and no larger. The two photographs are 1080x1080 and 239x249 — the
 * second a screenshot crop with no generated size above `thumbnail`. At the 4/5
 * portrait frame the leadership page uses it would be upscaled about twice over
 * and sit next to a studio photograph looking broken. 6.5rem is 104px, which
 * the weaker file still covers at 2x device pixel ratio.
 *
 * The photograph is set a quarter taller than the frame and pinned to its top,
 * so the bottom fifth — the orange band across the foot of the department's
 * portrait cards — falls outside and is clipped. Sizing the image to the frame
 * instead does nothing at all: both sources are square, and a square image in a
 * square box has no overflow for `object-position` to move.
 */
.jmns-appointment__frame {
	flex: 0 0 auto;
	display: block;
	inline-size: 6.5rem;
	block-size: 6.5rem;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border, #DCE4DF);
	border-radius: var(--r-pill, 999px);
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
}

.jmns-appointment__photo {
	display: block;
	inline-size: 100%;
	block-size: 125%;
	object-fit: cover;
	object-position: 50% 0;
}

/*
 * The placeholder is a shape, not a message, and has nothing to crop — it fills
 * the frame exactly. It is `aria-hidden` in the markup: "no photograph on file"
 * is a fact about the media library, not about the appointment, and a screen
 * reader should not hear it.
 */
.jmns-appointment__photo--none {
	block-size: 100%;
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
}

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

/* 19px: the officer is the second subject of the card and was set at body size,
   a point under the position's own label and level with everything else. */
.jmns-appointment__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
	/* Honorifics run long and must break rather than widen the card. */
	overflow-wrap: anywhere;
}

.jmns-appointment__position {
	margin-block: var(--wp--preset--spacing--10, 0.25rem) 0;
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: 0.9375rem;
	line-height: 1.45;
}

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

@media (max-width: 30rem) {
	/*
	 * The photograph shrinks rather than the card stacking. At 320px a 6.5rem
	 * avatar plus a gap leaves about 150px for an honorific name, which breaks
	 * it over five lines.
	 */
	.jmns-appointment__frame {
		inline-size: 5rem;
		block-size: 5rem;
	}

	.jmns-appointment__office,
	.jmns-appointment__holder {
		padding: var(--wp--preset--spacing--30, 1rem);
	}
}