/**
 * Executive profile pages - image crop policy and layout, 2026-11.
 *
 * All ten portraits are 300x370 (ratio 0.81). The sidebar was serving
 * WordPress's 150x150 hard crop, which cut heads off, and the hero portrait was
 * letterboxed with object-fit: contain. The template now serves the full file
 * and this layer does the cropping, with a face-biased focal point, so every
 * profile crops the same way regardless of the photo.
 */

/* ------------------------------------------------------------------- hero --- */

body.single-unoc_leader .unoc-executive-profile .unoc-profile-portrait {
	position: relative;
	aspect-ratio: 300 / 370;
	overflow: hidden;
	border-radius: 18px;
	background: #26272a;
}

body.single-unoc_leader .unoc-executive-profile .unoc-profile-portrait img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: 50% 14% !important;
	transition: transform 0.4s ease;
}

body.single-unoc_leader .unoc-executive-profile .unoc-profile-portrait:hover img {
	transform: scale(1.02);
}

/* A thin gold edge so the portrait reads as a framed plate. */
body.single-unoc_leader .unoc-executive-profile .unoc-profile-portrait::after {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px solid rgba(255, 200, 8, 0.55);
	border-radius: 10px;
	pointer-events: none;
}

/* ---------------------------------------------------------------- sidebar --- */

body.single-unoc_leader .unoc-executive-profile .unoc-profile-avatar {
	width: 66px;
	height: 66px;
	overflow: hidden;
	border-radius: 10px;
	background: #f1efe9;
	display: grid;
	place-items: center;
}

body.single-unoc_leader .unoc-executive-profile .unoc-profile-avatar img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: 50% 12% !important;
}

/* Active profile: gold spine and a warm ground. */
body.single-unoc_leader .unoc-executive-profile .unoc-profile-sidebar li a[aria-current="page"] {
	background: #fff9e8;
	box-shadow: inset 3px 0 0 #ffc808;
}

body.single-unoc_leader .unoc-executive-profile .unoc-profile-sidebar li a {
	transition: background 0.18s ease, box-shadow 0.18s ease;
}

body.single-unoc_leader .unoc-executive-profile .unoc-profile-sidebar li a:hover {
	background: #f7f5ef;
	box-shadow: inset 3px 0 0 rgba(255, 200, 8, 0.55);
}

/* --------------------------------------------------------------- typography --- */

body.single-unoc_leader .unoc-executive-profile .unoc-profile-copy {
	max-width: 68ch;
}

body.single-unoc_leader .unoc-executive-profile .unoc-profile-copy p {
	line-height: 1.7;
}

body.single-unoc_leader .unoc-executive-profile .unoc-profile-copy h2 {
	letter-spacing: -0.02em;
}

/* At narrow widths the portrait sits above the copy; keep it from dominating. */
@media (max-width: 760px) {
	body.single-unoc_leader .unoc-executive-profile .unoc-profile-portrait {
		max-width: 260px;
	}

	body.single-unoc_leader .unoc-executive-profile .unoc-profile-avatar {
		width: 56px;
		height: 56px;
	}
}

/* ------------------------------------------------------------ justified copy --- */

/* Justified body copy needs hyphenation to avoid rivers of white space; without
 * it the browser stretches word spacing and the paragraph looks gappy. Only the
 * long-form profile paragraphs are justified - headings, names, roles and the
 * sidebar stay ragged-right, where justification reads as a mistake. */
body.single-unoc_leader .unoc-executive-profile .unoc-profile-copy p {
	text-align: justify;
	text-justify: inter-word;
	hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	overflow-wrap: break-word;
}

/* A centred/left heading above justified paragraphs must stay left-aligned. */
body.single-unoc_leader .unoc-executive-profile .unoc-profile-copy h2,
body.single-unoc_leader .unoc-executive-profile .unoc-profile-copy h3 {
	text-align: left;
	hyphens: manual;
}