/*
 * Mufti profile.
 *
 * The page was six elements stacked in a column — eyebrow, name, honorific,
 * portrait, heading, prose — with the portrait sitting between the man's name
 * and the text about him, so nothing on the page grouped his identity together.
 *
 * One card now: the portrait beside everything written about him.
 */

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

/*
 * The card runs the full width `alignwide` gives it, so the portrait sits on
 * the right content edge and the page h1, the name and the biography share the
 * left one. The measure is held on the prose itself rather than on the card, so
 * the space between the two columns is the gap — the text never widens past
 * what is readable no matter how wide the window gets.
 */
.jmns-profile__card {
	display: grid;
	/*
	 * The portrait is a 1202x2179 cutout — a tall, narrow studio shot. Given a
	 * column of its own it stands beside the name at a readable size instead of
	 * running the full measure of the page, which at 1200px made it nearly a
	 * metre of face.
	 *
	 * Text column first. The page's own h1 sits at the content edge directly
	 * above this, and with the portrait on the left the man's name started 264px
	 * in — the title and the name he is titled with did not share a column.
	 */
	grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
	gap: var(--wp--preset--spacing--50, 2rem);
	align-items: start;
}

/*
 * Placed rather than ordered. The portrait stays first in the markup — where it
 * belongs on a phone, above the name — and only its column moves. That is safe
 * to do here and nowhere else in this stylesheet: the figure has `alt=""` and
 * nothing focusable in it, so there is no reading order and no tab order to put
 * out of step with what is on screen (SC 1.3.2, SC 2.4.3).
 */
.jmns-profile__portrait {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	/*
	 * Follows the reader down the biography. The prose is taller than the
	 * portrait, so without this the face scrolls away in the first screen and
	 * the rest of the page is text about a man you can no longer see.
	 */
	position: sticky;
	inset-block-start: var(--wp--preset--spacing--60, 2rem);
	/* Own stacking context, so the plinth below can sit behind the portrait
	   without falling behind the page itself. */
	isolation: isolate;
}

/*
 * The plinth he stands on.
 *
 * The source is a transparent PNG cutout — alpha 127 on every edge — and his
 * robe runs to the bottom of the frame. The first cut of this page framed it
 * like a photograph: a bordered card with `background-color: surface` painted
 * behind it, which put a white rectangle behind a cutout and threw away the
 * one thing that makes the asset good. Standing him on a tint block instead
 * lets him break the top of it, which a boxed photograph cannot do.
 */
.jmns-profile__portrait::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block: 16% 0;
	/* Wider than he is, so the block reads as ground rather than as a panel
	   he has been pasted onto. */
	inset-inline: -7%;
	border-radius: var(--r-card, 16px);
	background-image: linear-gradient(
		180deg,
		var(--wp--preset--color--surface-tint, #EAF1EC) 0%,
		var(--wp--preset--color--border, #DCE4DF) 100%
	);
}

.jmns-profile__photo {
	display: block;
	inline-size: 100%;
	block-size: auto;
	/*
	 * The true ratio of the source, 1202x2179. Reserved before the image
	 * arrives: this is the LCP element and a late-sizing portrait is the
	 * classic source of layout shift.
	 */
	aspect-ratio: 1202 / 2179;
	/*
	 * `drop-shadow`, not `box-shadow`. It follows the alpha channel, so the
	 * shadow is cast by the man and not by a rectangle around him — the whole
	 * reason to keep the cutout. Kept soft and low: this is a government
	 * portrait, not a product shot.
	 */
	filter: drop-shadow(0 12px 18px rgb(var(--jmns-shade-rgb, 38 51 42) / 0.18));
}

.jmns-profile__body {
	grid-column: 1;
	grid-row: 1;
	min-inline-size: 0;
}

/*
 * The name leads. It was an h2 between two h6 lines, so the two smallest
 * elements on the page bracketed the one thing anybody came to read.
 */
.jmns-profile__name {
	margin-block: 0 var(--wp--preset--spacing--20, 0.5rem);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2rem);
	font-weight: 700;
	line-height: 1.15;
	/* A long honorific name should break where it must rather than widen the
	   grid column it sits in. */
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.jmns-profile__honorific {
	margin: 0;
	color: var(--wp--preset--color--interactive, #245746);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	font-weight: 600;
	line-height: 1.4;
}

/* --------------------------------------------------------------- about -- */

/*
 * A rule rather than a gap. The name, the honorific and the biography are all
 * left-aligned text in the same column, so without a line the section heading
 * reads as a fourth line of the identity block.
 */
.jmns-profile__about {
	/* The same measure as the prose, so the rule ends where the text it
	   introduces ends rather than running past it to the column edge. */
	max-inline-size: 62ch;
	margin-block-start: var(--wp--preset--spacing--50, 2rem);
	padding-block-start: var(--wp--preset--spacing--50, 2rem);
	border-block-start: 1px solid var(--wp--preset--color--border, #DCE4DF);
}

/*
 * Set as a label, not a title. It introduces prose that is already obviously
 * about the man named above it; at heading size it competed with his name.
 */
.jmns-profile__about-title {
	margin-block: 0 var(--wp--preset--spacing--30, 0.75rem);
	color: var(--wp--preset--color--interactive, #245746);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * A measure, not a column width. The biography ran the full 1200px of the page,
 * which is roughly 170 characters a line — about twice what anyone can track
 * back to the start of without losing the line.
 */
.jmns-profile__text {
	max-inline-size: 62ch;
	margin-block: 0 var(--wp--preset--spacing--30, 0.75rem);
	line-height: 1.75;
}

/* The opening paragraph carries the summary, so it is set as a standfirst. */
.jmns-profile__text--lede {
	font-size: var(--wp--preset--font-size--medium, 1rem);
	color: var(--wp--preset--color--text-primary, #1F2925);
}

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

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

@media (max-width: 48rem) {
	/*
	 * The portrait goes above the name rather than beside it. Side by side at
	 * this width leaves the name about twelve characters wide, which breaks an
	 * honorific over five lines.
	 */
	.jmns-profile__card {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--30, 0.75rem);
		justify-items: center;
	}

	/*
	 * The explicit placement above has to be undone, not just overridden by a
	 * one-column template: `grid-column: 2` in a single-column grid does not
	 * fall back to column 1, it creates a second column and puts the portrait
	 * in it. Both items return to flow, which stacks them in markup order —
	 * portrait, then name — which is why the portrait is first in the markup.
	 */
	.jmns-profile__portrait,
	.jmns-profile__body {
		grid-column: auto;
		grid-row: auto;
	}

	.jmns-profile__portrait {
		/*
		 * `relative`, not `static`. Sticky is for reading beside the portrait —
		 * stacked, it would pin the face over the biography as you scroll past
		 * it — but the plinth is absolutely positioned against this figure, and
		 * `static` hands it to whichever ancestor is positioned instead. It
		 * escaped the figure entirely and pushed 27px of horizontal scroll onto
		 * the page at 390px.
		 */
		position: relative;
		/*
		 * The sticky offset above has to be cleared with the sticky. `relative`
		 * honours `inset-block-start`, and unlike sticky it does not reflow
		 * anything around it — so the 2rem left over from the desktop rule
		 * pushed the portrait 32px down over the top line of the man's name.
		 */
		inset-block-start: auto;
		inline-size: min(72%, 15rem);
	}

	/*
	 * Centred identity, left-aligned prose. Centring the name under the
	 * portrait keeps the two as one unit; centring the biography would give
	 * every paragraph a ragged left edge to find on each line.
	 */
	.jmns-profile__name,
	.jmns-profile__honorific {
		text-align: center;
	}

	.jmns-profile__body {
		inline-size: 100%;
	}
}

/* -------------------------------------------------------------- motion -- */

@media (prefers-reduced-motion: reduce) {
	/* Sticky is not animation, but it is unrequested movement against the
	   scroll, which is the thing this preference is asking to be spared.
	   `relative` rather than `static`, so the plinth stays contained, and the
	   offset cleared with it — `relative` would apply it as a 32px shift. */
	.jmns-profile__portrait {
		position: relative;
		inset-block-start: auto;
	}
}