/**
 * Partners and stakeholders - editorial pass, 2026-11.
 *
 * The page's weight is the partner directory: eleven cards carrying logos,
 * categories and one-line mandates. They were plain blocks with no states, and
 * the value-chain band below them had no relationship to the rest of the site.
 * This layer gives the directory a card system, lifts the stats, and closes the
 * cream band with the brand rule.
 *
 * Copy and markup untouched; scoped to body.page-id-150.
 */

/* ------------------------------------------------------------ partner cards --- */

body.page-id-150 .unoc-ref-partner {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	min-height: 250px !important;
	padding: 26px 24px 22px !important;
	border: 1px solid #e7e4de !important;
	border-radius: 16px !important;
	background: #ffffff !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* A gold hairline that turns red on hover: the only chrome on the card. */
body.page-id-150 .unoc-ref-partner::before {
	content: "" !important;
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: #ffc808;
	border-radius: 16px 16px 0 0;
	transition: background 0.2s ease;
}

body.page-id-150 .unoc-ref-partner:hover {
	transform: translateY(-5px);
	border-color: #e10032 !important;
	box-shadow: 0 22px 44px rgba(20, 20, 22, 0.14);
}

body.page-id-150 .unoc-ref-partner:hover::before {
	background: #e10032;
}

/* Logo shelf: a consistent height so the names line up across the grid. */
body.page-id-150 .unoc-ref-partner-logo {
	display: flex !important;
	align-items: center !important;
	height: 66px !important;
	margin: 0 0 18px !important;
	padding-bottom: 16px;
	border-bottom: 1px solid #ece9e3;
}

body.page-id-150 .unoc-ref-partner-logo img {
	max-height: 46px !important;
	width: auto !important;
	object-fit: contain !important;
	transition: transform 0.25s ease;
}

body.page-id-150 .unoc-ref-partner:hover .unoc-ref-partner-logo img {
	transform: scale(1.04);
}

body.page-id-150 .unoc-ref-partner > span {
	font-size: 9.5px !important;
	font-weight: 800 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase;
	color: #b8002b !important;
}

body.page-id-150 .unoc-ref-partner h3 {
	margin: 10px 0 8px !important;
	font-size: 20px !important;
	line-height: 1.2 !important;
}

body.page-id-150 .unoc-ref-partner p {
	margin: 0 !important;
	font-size: 13.5px !important;
	line-height: 1.55 !important;
	color: #56535a !important;
}

/* ------------------------------------------------------------------- stats --- */

body.page-id-150 .unoc-ref-stats-grid strong {
	font-size: clamp(1.85rem, 2.5vw, 2.35rem) !important;
	letter-spacing: -0.035em !important;
	line-height: 1 !important;
}

body.page-id-150 .unoc-ref-stats-grid span {
	text-transform: uppercase;
	letter-spacing: 0.11em;
	font-size: 10px !important;
	line-height: 1.5 !important;
}

/* ----------------------------------------------------------------- filters --- */

body.page-id-150 .unoc-ref-filter button {
	transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

body.page-id-150 .unoc-ref-filter button.is-active {
	box-shadow: inset 0 -3px 0 #ffc808;
}

body.page-id-150 .unoc-ref-filter button:not(.is-active):hover {
	box-shadow: inset 0 -3px 0 rgba(255, 200, 8, 0.5);
}

/* ------------------------------------------------------------- value chain --- */

body.page-id-150 .unoc-ref-chain {
	position: relative;
}

/* Same brand closure used on the other redesigned pages. */
body.page-id-150 .unoc-ref-chain::before {
	content: "" !important;
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, #000 0 33%, #ffc808 33% 66%, #e10032 66% 100%);
}

body.page-id-150 .unoc-ref-chain-grid article {
	transition: transform 0.2s ease, background 0.2s ease;
	background: transparent;
}

body.page-id-150 .unoc-ref-chain-grid article:hover {
	transform: translateY(-3px);
	background: #ffffff;
}

body.page-id-150 .unoc-ref-chain-grid article b {
	transition: color 0.2s ease;
}

body.page-id-150 .unoc-ref-chain-grid article:hover b {
	color: #e10032 !important;
}

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

@media (max-width: 760px) {
	body.page-id-150 .unoc-ref-partner {
		min-height: 0 !important;
	}

	body.page-id-150 .unoc-ref-partner-logo {
		height: 56px !important;
	}

	body.page-id-150 .unoc-ref-partner-logo img {
		max-height: 38px !important;
	}
}

/* The value-chain band's heading was inheriting body size (16px) and its
 * numerals were painted almost the same cream as the ground. */
body.page-id-150 .unoc-ref-chain .unoc-ref-section-head h2 {
	font-size: clamp(2rem, 3.3vw, 2.9rem) !important;
	font-weight: 500 !important;
	line-height: 1.08 !important;
	letter-spacing: -0.03em !important;
	max-width: 520px;
}

body.page-id-150 .unoc-ref-chain-grid article b {
	color: rgba(65, 64, 66, 0.16) !important;
	font-size: 40px !important;
	font-weight: 700 !important;
	letter-spacing: -0.04em;
	line-height: 1 !important;
	display: block;
	margin-bottom: 14px;
}

/* The intro heading sat much smaller than every other section heading. */
body.page-id-150 .unoc-ref-intro h2 {
	font-size: clamp(1.9rem, 3vw, 2.7rem) !important;
	font-weight: 500 !important;
	line-height: 1.1 !important;
	letter-spacing: -0.03em !important;
}

body.page-id-150 .unoc-ref-intro p {
	max-width: 52ch;
}