/* =============================================================================
   ECR — CO-PRESIDENTS
   Phase 5 · visual implementation

   THE ONE DELIBERATE DIVERGENCE ON THIS SITE.
   The client asked for this page to look "visually slightly different, maybe
   with a lighter or darker colour palette" while remaining clearly ECR
   (`sezione richieste da ECR.txt`). Blocker BL-08 records that the exact
   palette was never supplied and that the page should therefore ship on
   #1866A5 as a CSS-variable swap.

   That is what this file does. It uses the DARKER end of the existing ECR
   ramp — --ecr-primary-dark #114C7D as a deep field behind white type —
   rather than introducing a second palette. Every colour below still resolves
   to an --ecr-* token. Changing the four --cp-* declarations in the block
   immediately below re-themes the whole page if the client later supplies a
   specific palette; nothing else needs to be touched.

   Typography, radii, shadows and button language are the site's own, exactly
   as on the Staff directory.
   ========================================================================== */

.ecr-cp {
	--cp-primary: var(--ecr-primary, #1866A5);
	--cp-deep: var(--ecr-primary-dark, #114C7D);
	--cp-accent: var(--ecr-accent, #7BADDE);
	--cp-text: var(--ecr-text, #1E293B);
	--cp-border: var(--ecr-border, #E2E8F0);
	--cp-bg: var(--ecr-bg, #F8FAFC);
	--cp-white: var(--ecr-white, #FFFFFF);
	--cp-radius: var(--ecr-radius, 24px);
	--cp-shadow: 0 12px 40px rgba(0, 0, 0, .06);
	--cp-shadow-hover: var(--ecr-shadow-hover, 0 20px 60px rgba(15, 23, 42, .12));
	--cp-muted: #667085;

	/* On the deep field. Not a new hue — white and the existing accent at the
	   opacities needed to stay above 4.5:1 on #114C7D. */
	--cp-on-deep: #FFFFFF;
	--cp-on-deep-muted: #C7DCF1;

	max-width: 1200px;
	margin: 0 auto;
	padding: 80px 25px;
	color: var(--cp-text);
}

/* -----------------------------------------------------------------------------
   HEADER — the deep field that makes this page read as leadership
   -------------------------------------------------------------------------- */

.ecr-cp__header {
	text-align: center;
	background: var(--cp-deep);
	border-radius: var(--cp-radius);
	padding: 64px 40px;
	margin-bottom: 46px;
	box-shadow: var(--cp-shadow);
}

.ecr-cp__eyebrow {
	display: inline-block;
	font-size: .75rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	/* --cp-accent measures 3.77:1 on the deep field — below AA for 12px text.
	   The lighter on-deep tint is the same hue family and clears it. */
	color: var(--cp-on-deep-muted);
	font-weight: 700;
	margin-bottom: 12px;
}

.ecr-cp .ecr-cp__title {
	font-size: clamp(2.4rem, 4vw, 4rem);
	line-height: 1.1;
	margin: 0 0 15px;
	color: var(--cp-on-deep);
	/* weight inherited: 900 */
}

.ecr-cp__lede {
	max-width: 700px;
	margin: 0 auto;
	color: var(--cp-on-deep-muted);
}

.ecr-cp__empty {
	text-align: center;
	color: var(--cp-muted);
	padding: 40px 0;
}

/* -----------------------------------------------------------------------------
   PROFILE
   -------------------------------------------------------------------------- */

.ecr-cp__list {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.ecr-cp-profile {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 0;
	background: var(--cp-white);
	border-radius: var(--cp-radius);
	overflow: hidden;
	box-shadow: var(--cp-shadow);
	transition: box-shadow .3s ease;
}

.ecr-cp-profile:hover {
	box-shadow: var(--cp-shadow-hover);
}

/* The portrait sits on the deep field, so a missing photograph degrades to
   initials on brand colour rather than to a grey hole. */
.ecr-cp-profile__portrait {
	background: var(--cp-deep);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-height: 300px;
	padding: 0;
	overflow: hidden;

	/* The column hugs the portrait instead of stretching to the row height.

	   The sticky plate below was meant to keep the face beside whichever part
	   of the profile is being read, leaving the rest of the column as a brand
	   field. It never actually stuck: both this element and .ecr-cp-profile
	   set overflow:hidden, and an overflow-hidden ancestor disables
	   position:sticky. The result at 1440/1280 was a static portrait with a
	   solid navy slab running ~750px below it — the committee lists beside it
	   are long, so the column was very tall.

	   align-self:start ends the column at the portrait; the card's own white
	   shows below, which is ordinary card whitespace rather than a block of
	   unexplained navy. Card clipping, radius and the stacked layout below
	   1000px are all unaffected. */
	align-self: start;
}

/* A fixed 4:5 plate pinned to the top of the column, NOT an image stretched
   to fill it.

   Two earlier attempts were both wrong, and the measurements are why:
   filling by flex left the image at its intrinsic 280x350 with deep-blue
   letterbox bands above and below; forcing height:100% made object-fit cover
   crop a 240x300 headshot to 280x1095 — a 3x enlargement showing forehead to
   chin. The column is tall because the committee lists beside it are long,
   which is not a reason to enlarge a portrait.

   Sticky keeps the face beside whichever part of the profile is being read,
   and turns the remaining column into a deliberate brand field rather than
   dead space. Falls back to a normal top-aligned plate where sticky is
   unsupported. */
.ecr-cp .ecr-cp-profile__portrait .ecr-cp-profile__img {
	position: sticky;
	top: 0;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 18%;
	display: block;
}

/* Same plate geometry as a real portrait, so a Co-President without a
   photograph occupies exactly the same space as one with it. */
.ecr-cp-profile__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 5;
	position: sticky;
	top: 0;
	font-size: 3.5rem;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--cp-accent);
	line-height: 1;
}

.ecr-cp-profile__body {
	padding: 38px 40px;
	min-width: 0;
}

.ecr-cp-profile__head {
	padding-bottom: 20px;
	border-bottom: 3px solid var(--cp-primary);
	margin-bottom: 24px;
}

.ecr-cp .ecr-cp-profile__name {
	margin: 0;
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
	line-height: 1.15;
	color: var(--cp-text);
	overflow-wrap: anywhere;
	/* weight inherited: 900 */
}

/* RULE A — omitted entirely when the field is empty. */
.ecr-cp-profile__role {
	margin: 8px 0 0;
	color: var(--cp-primary);
	font-weight: 700;
	font-size: 1.0625rem;
}

.ecr-cp-profile__origin {
	margin: 6px 0 0;
	color: var(--cp-muted);
}

.ecr-cp-profile__bio {
	margin: 0;
	color: var(--cp-muted);
	line-height: 1.6;
}

/* --- blocks --------------------------------------------------------------- */

.ecr-cp-block {
	margin-bottom: 26px;
}

.ecr-cp-block:last-child {
	margin-bottom: 0;
}

/* Three classes: same cascade problem as the Staff page. Salient's heading
   rule matches `.row .col h3` (0,2,1) and would otherwise paint this block
   label at 30px. */
.ecr-cp .ecr-cp-block .ecr-cp-block__title {
	font-size: .75rem;
	line-height: 1.3;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	/* 2.37:1 on white as the accent — see the contrast note in our-people.css. */
	color: var(--cp-muted);
	margin: 0 0 12px;
}

.ecr-cp-resp {
	margin-bottom: 14px;
}

.ecr-cp-resp:last-child {
	margin-bottom: 0;
}

.ecr-cp .ecr-cp-resp__label {
	margin: 0 0 6px;
	font-size: .875rem;
	font-weight: 700;
	color: var(--cp-text);
}

.ecr-cp-resp__list {
	margin: 0;
	padding: 0 0 0 18px;
	list-style: disc;
	color: var(--cp-muted);
	line-height: 1.6;
}

.ecr-cp-resp__list li {
	margin: 0 0 2px;
}

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

/* Renders nothing today: the Chairmen's Office roster has not been supplied
   (BL-03). It reuses the Staff card component verbatim, so when the roster
   arrives the two pages stay visually identical with no further work. */
.ecr-cp-office {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}

/* --- news ----------------------------------------------------------------- */

.ecr-cp-news {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ecr-cp-news__item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--cp-border);
	margin: 0;
	list-style: none;
}

.ecr-cp-news__item:last-child {
	border-bottom: none;
}

.ecr-cp-news__item a {
	color: var(--cp-primary);
	font-weight: 600;
	text-decoration: none;
	min-width: 0;
}

.ecr-cp-news__item a:hover,
.ecr-cp-news__item a:focus-visible {
	text-decoration: underline;
}

.ecr-cp-news__date {
	flex: 0 0 auto;
	color: var(--cp-muted);
	font-size: .8125rem;
	white-space: nowrap;
}

/* --- actions -------------------------------------------------------------- */

.ecr-cp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ecr-cp-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	line-height: 1.4;
	padding: 11px 20px;
	border-radius: 999px;
	background: var(--cp-bg);
	border: 1px solid var(--cp-border);
	color: var(--cp-primary);
	font-size: .875rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.ecr-cp-btn:hover,
.ecr-cp-btn:focus-visible {
	background: var(--cp-primary);
	border-color: var(--cp-primary);
	color: var(--cp-white);
}

.ecr-cp-btn--primary {
	background: var(--cp-deep);
	border-color: var(--cp-deep);
	color: var(--cp-white);
}

.ecr-cp-btn--primary:hover,
.ecr-cp-btn--primary:focus-visible {
	background: var(--cp-primary);
	border-color: var(--cp-primary);
	color: var(--cp-white);
}

.ecr-cp-btn--quiet {
	background: var(--cp-white);
	color: var(--cp-muted);
}

/* -----------------------------------------------------------------------------
   RESPONSIVE — Salient's own breakpoints
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1300px) {
	.ecr-cp {
		padding: 64px 25px;
	}

	.ecr-cp-profile {
		grid-template-columns: 240px minmax(0, 1fr);
	}
}

@media only screen and (max-width: 1000px) {
	.ecr-cp {
		padding: 56px 22px;
	}

	.ecr-cp__header {
		padding: 48px 28px;
		margin-bottom: 36px;
	}

	/* The portrait goes full-width above the text rather than shrinking to a
	   stamp: at 200px the official photograph stops being a portrait. */
	.ecr-cp-profile {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Stacked above the text: a banner crop, and sticky is switched off
	   because there is no tall column left for it to track. */
	.ecr-cp-profile__portrait {
		min-height: 0;
	}

	.ecr-cp .ecr-cp-profile__portrait .ecr-cp-profile__img,
	.ecr-cp-profile__initials {
		position: static;
		aspect-ratio: 16 / 9;
		object-position: center 22%;
	}

	.ecr-cp-profile__body {
		padding: 30px 28px;
	}
}

@media only screen and (max-width: 690px) {
	.ecr-cp {
		padding: 40px 18px;
	}

	.ecr-cp__header {
		padding: 38px 20px;
	}

	.ecr-cp .ecr-cp-profile__portrait .ecr-cp-profile__img,
	.ecr-cp-profile__initials {
		aspect-ratio: 4 / 3;
	}

	.ecr-cp-profile__body {
		padding: 24px 20px;
	}

	.ecr-cp-profile__initials {
		font-size: 2.75rem;
	}

	.ecr-cp-news__item {
		flex-direction: column;
		gap: 2px;
	}

	/* Full-width tap targets on the phone. */
	.ecr-cp-btn {
		flex: 1 1 auto;
		justify-content: center;
	}

	.ecr-cp-office {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ecr-cp-profile,
	.ecr-cp-btn {
		transition: none;
	}
}

/* -----------------------------------------------------------------------------
   CHAIRMEN'S OFFICE
   Rendered once below both Co-Chair profiles. The cards are the Our People
   staff card verbatim, so the two pages stay visually identical and anyone the
   client adds to the `chairmens-office` term appears here with no new code.
   The section is omitted entirely when the term is empty.
   -------------------------------------------------------------------------- */

.ecr-cp-office-section {
	margin-top: 46px;
}

.ecr-cp-office-section__header {
	padding-bottom: 18px;
	border-bottom: 3px solid var(--cp-primary);
	margin-bottom: 26px;
}

.ecr-cp .ecr-cp-office-section .ecr-cp-office-section__title {
	margin: 0 0 8px;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1.15;
	color: var(--cp-text);
}

.ecr-cp-office-section__lede {
	margin: 0;
	color: var(--cp-muted);
}

/* The staff card ships its own tokens under `.ecr-op`; inside this page it is
   rendered outside that scope, so the aliases it expects are provided here.
   Values are identical to css/our-people.css — nothing new is introduced. */
.ecr-cp-office .ecr-op-card,
.ecr-cp-office {
	--op-primary: var(--ecr-primary, #1866A5);
	--op-primary-dark: var(--ecr-primary-dark, #114C7D);
	--op-accent: var(--ecr-accent, #7BADDE);
	--op-text: var(--ecr-text, #1E293B);
	--op-border: var(--ecr-border, #E2E8F0);
	--op-bg: var(--ecr-bg, #F8FAFC);
	--op-white: var(--ecr-white, #FFFFFF);
	--op-radius-card: 18px;
	--op-shadow-card: 0 2px 10px rgba(15, 23, 42, .04);
	--op-shadow-hover: var(--ecr-shadow-hover, 0 20px 60px rgba(15, 23, 42, .12));
	--op-muted: #667085;
	--op-tint: #EFF6FF;
}