/* =============================================================================
   ECR — MEMBERS (MEPs)
   Native implementation · replaces the Directorist frontend

   DESIGN CONTRACT
   Skin       : identical to Our People. Every colour, radius, shadow, pill
                geometry and hover in this file resolves to the same `--ecr-*`
                custom properties that exist site-wide in `custom_css`
                post 6314, through the same local-alias pattern that
                css/our-people.css uses. Nothing here invents a palette, a
                typeface, a radius or a shadow.
   Structure  : the client's own MEP page layout document
                (PROJECT_DOCS/meps/MEP page layout.pdf) — a two-column
                directory card grid, and a profile whose name box sits to the
                RIGHT of the portrait.

   TOKENS INHERITED, NOT REDECLARED
       --ecr-primary #1866A5 · --ecr-primary-dark #114C7D · --ecr-accent #7BADDE
       --ecr-text #1E293B · --ecr-border #E2E8F0 · --ecr-bg #F8FAFC
       --ecr-radius 24px · --ecr-shadow · --ecr-shadow-hover

   TYPOGRAPHY: no font-family and almost no font-weight is declared here, for
   the same reason as Our People — the site's real face is proxima-nova applied
   through theme mods, and inheriting rather than declaring is what guarantees
   this section tracks the site if that typography changes.

   CONTRAST: --ecr-accent (#7BADDE) is 2.37:1 on white and CANNOT carry label
   text. Labels use --mep-muted (#667085, 4.97:1) and eyebrows use
   --mep-primary (#1866A5, 6.03:1), exactly as Our People resolved the same
   problem.

   Breakpoints are Salient's own: 1300 small desktop · 1000 tablet · 690 phone.
   ========================================================================== */

.ecr-mep {
	--mep-primary: var(--ecr-primary, #1866A5);
	--mep-primary-dark: var(--ecr-primary-dark, #114C7D);
	--mep-accent: var(--ecr-accent, #7BADDE);
	--mep-text: var(--ecr-text, #1E293B);
	--mep-border: var(--ecr-border, #E2E8F0);
	--mep-bg: var(--ecr-bg, #F8FAFC);
	--mep-white: var(--ecr-white, #FFFFFF);
	--mep-radius: var(--ecr-radius, 24px);
	--mep-radius-card: 18px;
	--mep-radius-input: 16px;
	--mep-shadow: var(--ecr-shadow, 0 12px 40px rgba(15, 23, 42, .08));
	--mep-shadow-hover: var(--ecr-shadow-hover, 0 20px 60px rgba(15, 23, 42, .12));
	--mep-shadow-card: 0 2px 10px rgba(15, 23, 42, .04);
	--mep-shadow-group: 0 12px 40px rgba(0, 0, 0, .06);
	--mep-muted: #667085;
	--mep-tint: #EFF6FF;

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

/* -----------------------------------------------------------------------------
   HEADER — the same block as Our People, to the pixel
   -------------------------------------------------------------------------- */

.ecr-mep__header {
	text-align: center;
	margin-bottom: 34px;
}

.ecr-mep__eyebrow {
	display: inline-block;
	font-size: .75rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--mep-primary);
	font-weight: 700;
	margin-bottom: 12px;
}

.ecr-mep .ecr-mep__title {
	font-size: clamp(2.2rem, 3.6vw, 3.6rem);
	line-height: 1.1;
	margin: 0 0 15px;
	color: var(--mep-text);
	/* weight inherited: 900 */
}

.ecr-mep__lede {
	max-width: 720px;
	margin: 0 auto;
	color: var(--mep-muted);
}

.ecr-mep__searchform {
	position: relative;
	display: flex;
	align-items: center;
	margin: 30px auto 0;
	width: 100%;
	max-width: 700px;
	background: var(--mep-white);
	border-radius: var(--mep-radius-input);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
	padding: 6px 6px 6px 0;
}

.ecr-mep__search {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	border: none;
	background: transparent;
	padding: 0 8px 0 24px;
	font-size: 16px;
	color: var(--mep-text);
	-webkit-appearance: none;
	appearance: none;
}

.ecr-mep__search::-webkit-search-cancel-button { cursor: pointer; }

.ecr-mep__search:focus,
.ecr-mep__search:focus-visible { outline: none; }

.ecr-mep__searchform:focus-within {
	outline: 2px solid var(--mep-primary);
	outline-offset: 2px;
}

.ecr-mep__searchbtn {
	flex: 0 0 auto;
	border: none;
	cursor: pointer;
	height: 46px;
	padding: 0 26px;
	border-radius: 999px;
	background: var(--mep-primary);
	color: var(--mep-white);
	font-weight: 700;
	font-size: .9375rem;
	transition: background-color .25s ease;
}

.ecr-mep__searchbtn:hover,
.ecr-mep__searchbtn:focus-visible { background: var(--mep-primary-dark); }

/* -----------------------------------------------------------------------------
   FILTER BAR

   Five <details> disclosures. `<details>` rather than a scripted dropdown
   because it is keyboard-operable and screen-reader-announced for free, and
   because the options inside are plain links to server-answered URLs — so the
   whole bar works with JavaScript off.
   -------------------------------------------------------------------------- */

.ecr-mep-filters {
	background: var(--mep-white);
	border-radius: var(--mep-radius);
	box-shadow: var(--mep-shadow-group);
	padding: 14px;
	margin-bottom: 26px;
}

.ecr-mep-filters__row {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
}

.ecr-mep-facet {
	position: relative;
	min-width: 0;
}

.ecr-mep-facet__summary {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 14px;
	border-radius: 14px;
	background: var(--mep-bg);
	cursor: pointer;
	list-style: none;
	line-height: 1.3;
	transition: background-color .2s ease, color .2s ease;
}

/* Safari and Chrome each need their own marker reset. */
.ecr-mep-facet__summary::-webkit-details-marker { display: none; }
.ecr-mep-facet__summary::marker { content: ''; }

.ecr-mep-facet__summary:hover,
.ecr-mep-facet[open] > .ecr-mep-facet__summary {
	background: var(--mep-tint);
}

.ecr-mep-facet__summary:focus-visible {
	outline: 2px solid var(--mep-primary);
	outline-offset: 2px;
}

.ecr-mep-facet__label {
	flex: 0 0 auto;
	font-size: .625rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 700;
	color: var(--mep-muted);
}

.ecr-mep-facet__value {
	flex: 1 1 auto;
	min-width: 0;
	font-size: .8125rem;
	font-weight: 700;
	color: var(--mep-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ecr-mep-facet.is-active .ecr-mep-facet__value { color: var(--mep-primary); }

.ecr-mep-facet__caret {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--mep-muted);
	border-bottom: 2px solid var(--mep-muted);
	transform: rotate(45deg) translateY(-2px);
	transition: transform .2s ease;
}

.ecr-mep-facet[open] .ecr-mep-facet__caret {
	transform: rotate(-135deg) translateY(-2px);
}

.ecr-mep-facet__panel {
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	min-width: 240px;
	max-height: 340px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--mep-white);
	border: 1px solid var(--mep-border);
	border-radius: 14px;
	box-shadow: var(--mep-shadow);
	padding: 6px;
}

.ecr-mep-facet__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ecr-mep-facet__list li {
	margin: 0;
	list-style: none;
}

.ecr-mep-facet__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 11px;
	border-radius: 10px;
	color: var(--mep-text);
	text-decoration: none;
	font-size: .8125rem;
	line-height: 1.4;
	transition: background-color .15s ease, color .15s ease;
}

.ecr-mep-facet__option:hover,
.ecr-mep-facet__option:focus-visible {
	background: var(--mep-primary);
	color: var(--mep-white);
}

.ecr-mep-facet__option.is-selected {
	background: var(--mep-tint);
	color: var(--mep-primary);
	font-weight: 700;
}

.ecr-mep-facet__option--clear {
	color: var(--mep-muted);
	font-weight: 700;
}

.ecr-mep-facet__name { min-width: 0; }

.ecr-mep-facet__count {
	flex: 0 0 auto;
	font-size: .6875rem;
	font-weight: 700;
	color: var(--mep-muted);
	background: var(--mep-bg);
	border-radius: 999px;
	padding: 2px 8px;
}

.ecr-mep-facet__option:hover .ecr-mep-facet__count,
.ecr-mep-facet__option:focus-visible .ecr-mep-facet__count {
	background: rgba(255, 255, 255, .2);
	color: var(--mep-white);
}

/* --- the active-filter row ------------------------------------------------ */

.ecr-mep-filters__active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 12px 4px 2px;
}

.ecr-mep-filters__activelabel {
	font-size: .625rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 700;
	color: var(--mep-muted);
}

.ecr-mep-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px;
	border-radius: 999px;
	background: var(--mep-primary);
	color: var(--mep-white);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color .2s ease;
}

.ecr-mep-pill:hover,
.ecr-mep-pill:focus-visible {
	background: var(--mep-primary-dark);
	color: var(--mep-white);
}

.ecr-mep-pill--unknown { background: var(--mep-muted); }

.ecr-mep-pill__x {
	font-size: 1rem;
	line-height: 1;
	opacity: .8;
}

/* -----------------------------------------------------------------------------
   RESULT BAR
   -------------------------------------------------------------------------- */

.ecr-mep__resultbar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding: 0 0 16px;
	border-bottom: 3px solid var(--mep-primary);
	margin-bottom: 26px;
}

.ecr-mep__count {
	margin: 0;
	font-weight: 700;
	color: var(--mep-text);
}

.ecr-mep__countof {
	font-weight: 600;
	color: var(--mep-muted);
}

.ecr-mep .ecr-mep__resulttitle {
	margin: 0;
	font-size: clamp(1.2rem, 2vw, 1.6rem);
	line-height: 1.2;
	color: var(--mep-primary);
	text-align: right;
}

/* -----------------------------------------------------------------------------
   CARD GRID

   Two columns at desktop, which is the layout the client's document draws.
   auto-fill + minmax so the same declaration serves every width down to the
   tablet breakpoint.
   -------------------------------------------------------------------------- */

.ecr-mep-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
	gap: 20px;
	align-items: stretch;
}

/* -----------------------------------------------------------------------------
   MEMBER CARD

   Portrait-led, because a Member has a photograph and the client's layout
   document leads with it — that is the one structural difference from the Our
   People card, whose people have no photographs and whose identity is a name
   and a job title. Everything else (radius, border, shadow, 2px hover lift) is
   the Our People card.
   -------------------------------------------------------------------------- */

.ecr-mep-card {
	display: grid;
	grid-template-columns: 168px minmax(0, 1fr);
	background: var(--mep-white);
	border: 1px solid var(--mep-border);
	border-radius: var(--mep-radius-card);
	box-shadow: var(--mep-shadow-card);
	overflow: hidden;
	align-items: stretch;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
	min-width: 0;
}

.ecr-mep-card:hover,
.ecr-mep-card:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--mep-shadow-hover);
	border-color: transparent;
}

.ecr-mep-card[hidden] { display: none; }

/* THE PORTRAIT PLATE, AND THE TWO WAYS OF GETTING IT WRONG
   The card is a two-column grid whose height is set by whichever column is
   taller, and the two columns are rarely the same height: the supplied
   portraits are all 4:5, while the text column varies with how many facts a
   Member has.

     Fixing the plate at 4:5 leaves a WHITE STRIP under it on a tall card,
     which is exactly the wasted space the client asked to be removed.

     Stretching the IMAGE to fill a tall plate — object-fit: cover on an
     absolutely-positioned image — crops the portrait to a close-up of a face.
     Measured on the Co-Chairs' profile with four assistants: an 800px box
     beside a 360px column zoomed the head past the crop of the client's own
     reference document.

   So the PLATE stretches and the IMAGE does not. The plate is a flex box in
   the pale blue the chips use, full card height; the image sits inside it at
   its natural 4:5 and is centred, so any extra height reads as the plate it
   is rather than as a gap. The client's reference crop is preserved at every
   card height. */
.ecr-mep-card__portrait,
.ecr-mep-profile__portrait,
.ecr-mep-mini__portrait,
.ecr-mep-organizer__portrait {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--mep-tint);
}

.ecr-mep-card__portrait {
	height: 100%;
	min-height: 210px; /* 4:5 of the 168px column, for the shortest card */
}

.ecr-mep-portrait__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: top center;
}

/* The photo fallback. Two of the 81 Members have no portrait, and it is a
   client asset gap, not a design state — so this is quiet rather than
   decorative. #7B93B8 is --mep-primary lightened to sit on the pale plate at
   3.4:1, which is above the 3:1 WCAG minimum for large text (this is 35px). */
.ecr-mep-portrait__initials {
	font-size: 2.2rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: #7B93B8;
}

.ecr-mep-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px;
	min-width: 0;
}

.ecr-mep .ecr-mep-card__name {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.25;
	color: var(--mep-text);
	overflow-wrap: anywhere;
	/* weight inherited: 900 */
}

.ecr-mep-card__name a {
	color: inherit;
	text-decoration: none;
}

.ecr-mep-card__name a:hover,
.ecr-mep-card__name a:focus-visible {
	color: var(--mep-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* RULE A — never rendered when the Member holds no Group role. */
.ecr-mep-card__role {
	margin: 0;
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 700;
	line-height: 1.4;
	color: var(--mep-primary);
}

/* --- the three icon rows -------------------------------------------------- */

.ecr-mep-card__facts {
	margin: 6px 0 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: .8125rem;
	line-height: 1.5;
}

.ecr-mep-fact {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
}

.ecr-mep-fact__icon {
	flex: 0 0 auto;
	margin: 0;
	display: inline-flex;
	color: var(--mep-muted);
	padding-top: 2px;
}

.ecr-mep-fact__val {
	margin: 0;
	min-width: 0;
	color: var(--mep-muted);
	overflow-wrap: anywhere;
}

.ecr-mep-fact__val a {
	color: var(--mep-text);
	text-decoration: none;
}

.ecr-mep-fact__val a:hover,
.ecr-mep-fact__val a:focus-visible {
	color: var(--mep-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ecr-mep-icon { display: block; }

/* -----------------------------------------------------------------------------
   CHIPS — the Our People chip, unchanged
   -------------------------------------------------------------------------- */

.ecr-mep-chips { min-width: 0; }

.ecr-mep-chips__label {
	display: block;
	line-height: 1.4;
	font-size: .625rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 700;
	color: var(--mep-muted);
	margin-bottom: 6px;
}

.ecr-mep-chips__set {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ecr-mep-chip {
	display: inline-block;
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	line-height: 1.4;
	color: var(--mep-primary);
	background: var(--mep-tint);
	border: 1px solid transparent;
	padding: 4px 11px;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.ecr-mep-chip:hover,
.ecr-mep-chip:focus-visible {
	background: var(--mep-primary);
	color: var(--mep-white);
}

/* -----------------------------------------------------------------------------
   BUTTONS — the Our People button, unchanged
   -------------------------------------------------------------------------- */

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

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

.ecr-mep-btn--ghost { background: var(--mep-white); }

/* -----------------------------------------------------------------------------
   EMPTY STATE
   -------------------------------------------------------------------------- */

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

.ecr-mep-empty__lead {
	margin: 0 0 14px;
	font-weight: 700;
	color: var(--mep-text);
}

.ecr-mep-empty__hints {
	list-style: none;
	margin: 0 auto 20px;
	padding: 0;
	max-width: 620px;
}

.ecr-mep-empty__hints li {
	margin: 0 0 8px;
	list-style: none;
	line-height: 1.55;
	color: var(--mep-muted);
}

.ecr-mep-empty__hints a {
	color: var(--mep-primary);
	font-weight: 600;
}

.ecr-mep-empty__actions { margin: 0; }

.ecr-mep__noresults {
	margin: 30px 0 0;
	text-align: center;
	color: var(--mep-muted);
}

.ecr-mep__noresults[hidden] { display: none; }

.ecr-mep__noresults-more {
	display: inline-block;
	margin-left: .35em;
	color: var(--mep-primary);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =============================================================================
   THE MEMBER PROFILE

   Built to PROJECT_DOCS/meps/MEP page layout.pdf p.2.

   THE CLIENT'S ACTUAL COMPLAINT, AND THE FIX
   "Sistemare il box del nome dei MEPs in modo che sia a dx e non ci sia troppo
    spazio + icone."

   The Directorist page put the name in a full-width h1 ABOVE a 740×580 image
   slider, then listed each field as a label/value row down one column. So the
   name was nowhere near the portrait, the slider reserved gallery space that
   no Member has more than one image for, and every fact spent a row on a label the icon
   beside it already said.

   Here the header is a two-column grid: the portrait on the left at a fixed
   360px, the info box on the right filling the rest. `align-items: start`
   makes the box start at the portrait's top edge, and the box's own content
   sets its height — which is what removes the empty space. Below the tablet
   breakpoint the two stack, portrait first.
   ========================================================================== */

.ecr-mep--profile { padding-top: 46px; }

.ecr-mep-profile__back {
	margin-bottom: 22px;
	font-size: .8125rem;
	font-weight: 700;
}

.ecr-mep-profile__back a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--mep-primary);
	text-decoration: none;
	padding: 6px 0;
}

.ecr-mep-profile__back a:hover,
.ecr-mep-profile__back a:focus-visible { text-decoration: underline; }

.ecr-mep-profile__header {
	display: grid;
	grid-template-columns: 360px minmax(0, 1fr);
	gap: 0;
	background: var(--mep-white);
	border: 1px solid var(--mep-border);
	border-radius: var(--mep-radius);
	box-shadow: var(--mep-shadow-group);
	overflow: hidden;
}

/* `align-items: start` on the grid would leave the portrait at its minimum and
   the box floating beside a white gap. `stretch` — the default, restated here
   because it is load-bearing — is what makes the two columns end level, which
   is the layout the client's document draws. */
.ecr-mep-profile__header { align-items: stretch; }

.ecr-mep-profile__portrait {
	height: 100%;
	min-height: 450px; /* 4:5 of the 360px column */
}

.ecr-mep-profile__portrait .ecr-mep-portrait__initials { font-size: 4rem; }

/* --- the info box -------------------------------------------------------- */

.ecr-mep-info {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 36px 40px 34px;
	min-width: 0;
}

.ecr-mep .ecr-mep-info__name {
	margin: 0;
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	line-height: 1.08;
	text-transform: uppercase;
	letter-spacing: -.01em;
	color: var(--mep-text);
	overflow-wrap: anywhere;
	/* weight inherited: 900 — the layout document sets the name in extrabold */
}

.ecr-mep-info__roles {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ecr-mep-info__role {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.35;
	color: var(--mep-muted);
}

.ecr-mep-info__rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 6px;
}

.ecr-mep-info__row {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
	font-size: .9375rem;
	line-height: 1.5;
}

.ecr-mep-info__icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--mep-text);
	padding-top: 1px;
}

.ecr-mep-info__value {
	min-width: 0;
	color: var(--mep-muted);
	overflow-wrap: anywhere;
}

.ecr-mep-info__value a {
	color: var(--mep-text);
	text-decoration: none;
}

.ecr-mep-info__value a:hover,
.ecr-mep-info__value a:focus-visible {
	color: var(--mep-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ecr-mep-office { display: inline-block; margin-right: 12px; white-space: nowrap; }

.ecr-mep-office b {
	color: var(--mep-primary);
	font-weight: 700;
	letter-spacing: .04em;
	margin-right: 2px;
}

/* --- SOCIAL INFO and ASSISTANTS, both inside the same box ---------------- */

.ecr-mep-panel {
	margin-top: 6px;
	padding-top: 18px;
	border-top: 1px solid var(--mep-border);
}

.ecr-mep .ecr-mep-panel__title {
	margin: 0 0 12px;
	font-size: .8125rem;
	line-height: 1.3;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--mep-primary);
}

.ecr-mep-socials {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ecr-mep-socials li { margin: 0; list-style: none; }

/* The chip the client's supplied icons are drawn on, moved into CSS so it can
   take a hover and a focus ring. 44px is the WCAG 2.2 comfortable target. */
.ecr-mep-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #EDEDED;
	color: #4A4A4F;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.ecr-mep-social:hover,
.ecr-mep-social:focus-visible {
	background: var(--mep-primary);
	color: var(--mep-white);
	transform: translateY(-1px);
}

.ecr-mep-social:focus-visible {
	outline: 2px solid var(--mep-primary);
	outline-offset: 2px;
}

/* --- the assistants block ------------------------------------------------ */

.ecr-mep-assistants {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ecr-mep-assistant {
	list-style: none;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px 14px;
	background: var(--mep-bg);
	border-radius: 12px;
	font-size: .875rem;
	line-height: 1.45;
}

.ecr-mep-assistant__name {
	font-weight: 700;
	color: var(--mep-text);
}

.ecr-mep-assistant__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	color: var(--mep-muted);
}

.ecr-mep-assistant__row a {
	color: var(--mep-text);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.ecr-mep-assistant__row a:hover,
.ecr-mep-assistant__row a:focus-visible {
	color: var(--mep-primary);
	text-decoration: underline;
}

.ecr-mep-assistant__officelabel {
	font-size: .625rem;
	text-transform: uppercase;
	letter-spacing: .09em;
	font-weight: 700;
	color: var(--mep-muted);
}

/* -----------------------------------------------------------------------------
   PARLIAMENT ROLES
   -------------------------------------------------------------------------- */

.ecr-mep .ecr-mep-roles__title {
	margin: 54px 0 24px;
	font-size: clamp(1.4rem, 2.2vw, 1.9rem);
	line-height: 1.15;
	color: var(--mep-text);
	padding-bottom: 14px;
	border-bottom: 3px solid var(--mep-primary);
}

.ecr-mep-roles__groups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 34px;
}

.ecr-mep .ecr-mep-rolegroup__title {
	margin: 0 0 18px;
	font-size: .8125rem;
	line-height: 1.3;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--mep-muted);
}

.ecr-mep-role { margin-bottom: 22px; }
.ecr-mep-role:last-child { margin-bottom: 0; }

/* Three classes, not two, and the section class in front. Salient's heading
   rule includes `.row .col h4` and this page renders inside exactly that
   markup, so a shorter selector loses the cascade and the label paints at the
   theme's size. Same reason Our People carries `.ecr-op .ecr-op-unit
   .ecr-op-unit__name`. */
.ecr-mep .ecr-mep-role .ecr-mep-role__label {
	margin: 0 0 8px;
	font-size: .8125rem;
	line-height: 1.3;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--mep-primary);
}

.ecr-mep-role__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ecr-mep-role__list li {
	list-style: none;
	margin: 0 0 5px;
	padding-left: 0;
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--mep-muted);
}

.ecr-mep-role__list a {
	color: var(--mep-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}

.ecr-mep-role__list a:hover,
.ecr-mep-role__list a:focus-visible {
	color: var(--mep-primary);
	border-bottom-color: currentColor;
}

/* -----------------------------------------------------------------------------
   BIOGRAPHY · VIDEO · SUPPORT TEAM · RELATED
   -------------------------------------------------------------------------- */

.ecr-mep-bio__body {
	max-width: 780px;
	color: var(--mep-text);
	line-height: 1.7;
}

.ecr-mep-video__embed { max-width: 780px; }

.ecr-mep-video__embed iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: var(--mep-radius-card);
}

.ecr-mep-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 10px;
}

.ecr-mep-related__list li { list-style: none; margin: 0; }

.ecr-mep-related__list a {
	display: block;
	padding: 14px 18px;
	background: var(--mep-white);
	border: 1px solid var(--mep-border);
	border-radius: 14px;
	color: var(--mep-text);
	text-decoration: none;
	font-weight: 600;
	line-height: 1.4;
	transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.ecr-mep-related__list a:hover,
.ecr-mep-related__list a:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--mep-shadow-hover);
	border-color: transparent;
	color: var(--mep-primary);
}

/* =============================================================================
   THE MEMBER STRIP — campaigns, events, and the event Organizers block
   ========================================================================== */

.ecr-mep-strip,
.ecr-mep-organizers {
	--mep-primary: var(--ecr-primary, #1866A5);
	--mep-primary-dark: var(--ecr-primary-dark, #114C7D);
	--mep-text: var(--ecr-text, #1E293B);
	--mep-border: var(--ecr-border, #E2E8F0);
	--mep-bg: var(--ecr-bg, #F8FAFC);
	--mep-white: var(--ecr-white, #FFFFFF);
	--mep-tint: #EFF6FF;
	--mep-muted: #667085;
	--mep-shadow-hover: var(--ecr-shadow-hover, 0 20px 60px rgba(15, 23, 42, .12));
	margin: 34px 0;
	color: var(--mep-text);
}

.ecr-mep-strip__title {
	margin: 0 0 18px;
	font-size: .8125rem;
	line-height: 1.3;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--mep-primary);
	padding-bottom: 12px;
	border-bottom: 2px solid var(--mep-border);
}

.ecr-mep-strip__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 18px;
}

.ecr-mep-strip__item { list-style: none; margin: 0; min-width: 0; }

.ecr-mep-mini {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-decoration: none;
	color: var(--mep-text);
}

.ecr-mep-mini__portrait {
	border-radius: 14px;
	transition: box-shadow .25s ease, transform .25s ease;
}

.ecr-mep-mini:hover .ecr-mep-mini__portrait,
.ecr-mep-mini:focus-visible .ecr-mep-mini__portrait {
	transform: translateY(-2px);
	box-shadow: var(--mep-shadow-hover);
}

.ecr-mep-mini__name {
	font-weight: 700;
	font-size: .875rem;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.ecr-mep-mini:hover .ecr-mep-mini__name,
.ecr-mep-mini:focus-visible .ecr-mep-mini__name { color: var(--mep-primary); }

.ecr-mep-mini__origin {
	font-size: .75rem;
	line-height: 1.4;
	color: var(--mep-muted);
}

/* --- the event Organizers block ------------------------------------------ */

.ecr-mep-organizers__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ecr-mep-organizer {
	list-style: none;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 14px;
}

.ecr-mep-organizer__portrait {
	flex: 0 0 auto;
	width: 64px;
	border-radius: 10px;
}

.ecr-mep-organizer__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ecr-mep-organizer__name {
	font-weight: 700;
	color: var(--mep-text);
	text-decoration: none;
	line-height: 1.3;
}

.ecr-mep-organizer__name:hover,
.ecr-mep-organizer__name:focus-visible { color: var(--mep-primary); }

.ecr-mep-organizer__meta,
.ecr-mep-organizers__parties {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	font-size: .8125rem;
	line-height: 1.45;
	color: var(--mep-muted);
	margin: 0;
}

.ecr-mep-organizer__key {
	font-size: .625rem;
	text-transform: uppercase;
	letter-spacing: .09em;
	font-weight: 700;
	color: var(--mep-muted);
}

.ecr-mep-organizer__meta a,
.ecr-mep-organizers__parties a {
	color: var(--mep-text);
	text-decoration: none;
}

.ecr-mep-organizer__meta a:hover,
.ecr-mep-organizers__parties a:hover { color: var(--mep-primary); text-decoration: underline; }

/* =============================================================================
   TERM ARCHIVE ADDITIONS
   ADDED 02/09/2026. The five term archives — country, party, Group role,
   committee, delegation — share one component, and three of them earn an extra
   block: a country lists its parties, a party shows its logo and its own-language
   name, and a committee or delegation shows the Group team covering it.
   ========================================================================== */

/* --- the hero flag / logo in an archive header ---------------------------- */

.ecr-mep--archive .ecr-st-termimg--hero {
	display: block;
	margin: 0 auto 18px;
	line-height: 0;
}

/* A flag is a landscape rectangle with a hairline border, because several
   national flags have a white field and would otherwise dissolve into the
   page. A logo is contained in a square so a tall emblem and a wide wordmark
   take the same room. */
.ecr-mep--archive-country .ecr-st-termimg--hero {
	width: 108px;
	height: 72px;
	border: 1px solid var(--mep-border);
	border-radius: 5px;
	overflow: hidden;
	background: var(--mep-white);
}

.ecr-mep--archive-party .ecr-st-termimg--hero {
	width: 108px;
	height: 108px;
	border: 1px solid var(--mep-border);
	border-radius: 18px;
	overflow: hidden;
	background: var(--mep-white);
	padding: 10px;
	box-sizing: border-box;
}

.ecr-mep--archive .ecr-st-termimg--hero .ecr-st-termimg__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* --- the short code under a committee / delegation title ------------------ */

.ecr-mep__code {
	margin: 4px 0 0;
	font-size: .8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--mep-primary);
}

/* --- a party's name in its own language ----------------------------------- */

.ecr-mep__original {
	margin: 6px 0 0;
	font-size: 1.0625rem;
	font-style: italic;
	line-height: 1.4;
	color: var(--mep-muted);
}

/* --- the parties represented in a country --------------------------------- */

.ecr-mep-parties {
	margin: 0 0 34px;
}

.ecr-mep .ecr-mep-parties__title {
	margin: 0 0 16px;
	font-size: .8125rem;
	line-height: 1.3;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--mep-muted);
}

.ecr-mep-parties__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
}

.ecr-mep-parties__list li {
	list-style: none;
	margin: 0;
	min-width: 0;
}

.ecr-mep-partycard {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: var(--mep-white);
	border: 1px solid var(--mep-border);
	border-radius: 14px;
	text-decoration: none;
	color: var(--mep-text);
	min-width: 0;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.ecr-mep-partycard:hover,
.ecr-mep-partycard:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--mep-shadow-hover);
	border-color: transparent;
}

.ecr-mep-partycard .ecr-st-termimg--inline {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--mep-white);
	border: 1px solid var(--mep-border);
	padding: 4px;
	box-sizing: border-box;
	line-height: 0;
}

.ecr-mep-partycard .ecr-st-termimg__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ecr-mep-partycard__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ecr-mep-partycard__name {
	font-weight: 700;
	font-size: .9375rem;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.ecr-mep-partycard:hover .ecr-mep-partycard__name,
.ecr-mep-partycard:focus-visible .ecr-mep-partycard__name {
	color: var(--mep-primary);
}

.ecr-mep-partycard__original {
	font-size: .75rem;
	font-style: italic;
	line-height: 1.4;
	color: var(--mep-muted);
	overflow-wrap: anywhere;
}

/* --- the Group team covering a committee or delegation -------------------- */

.ecr-mep-bodystaff {
	margin-top: 8px;
}

.ecr-mep-bodystaff__more {
	margin: 22px 0 0;
}

/* --- the Member profile's eyebrow ----------------------------------------- */

.ecr-mep-info__eyebrow {
	display: block;
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .14em;
	line-height: 1.3;
	color: var(--mep-primary);
	margin-bottom: 10px;
}

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

@media only screen and (max-width: 1300px) {

	.ecr-mep { padding: 64px 25px; }

	.ecr-mep-profile__header { grid-template-columns: 320px minmax(0, 1fr); }

	.ecr-mep-info { padding: 30px 32px 28px; }
}

@media only screen and (max-width: 1000px) {

	.ecr-mep { padding: 56px 22px; }

	.ecr-mep__header { margin-bottom: 28px; }

	/* Five facets do not fit on a tablet; three then two reads better than a
	   horizontal scroller. */
	.ecr-mep-filters__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.ecr-mep-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }

	.ecr-mep-card { grid-template-columns: 140px minmax(0, 1fr); }

	.ecr-mep-card__portrait { min-height: 175px; }

	.ecr-mep-card__body { padding: 16px 18px; }

	/* Portrait above the box below the tablet breakpoint. The portrait is
	   capped and centred rather than stretched: a 4:5 studio portrait at full
	   tablet width would be over 700px tall. */
	.ecr-mep-profile__header { grid-template-columns: minmax(0, 1fr); }

	.ecr-mep-profile__portrait {
		max-width: 340px;
		width: 100%;
		height: auto;
		min-height: 0;
		margin: 22px auto 0;
		border-radius: var(--mep-radius-card);
	}

	.ecr-mep-info { padding: 26px 26px 30px; text-align: left; }

	.ecr-mep-roles__groups { grid-template-columns: minmax(0, 1fr); gap: 26px; }

	.ecr-mep .ecr-mep__resulttitle { text-align: left; }

	/* WCAG 2.2 target size: a 13px inline link is an 18px hit box. Vertical
	   padding on the inline element is what actually grows it — line-height
	   grows the LINE box and leaves the target alone. Invisible, because the
	   link has no background or border. */
	.ecr-mep-fact__val { line-height: 1.8; }
	.ecr-mep-fact__val a { padding: 3px 0; }
	.ecr-mep-role__list li { line-height: 1.75; }
	.ecr-mep-role__list a { padding: 3px 0; }
}

@media only screen and (max-width: 690px) {

	.ecr-mep { padding: 40px 18px; }

	/* One party per row at phone width. */
	.ecr-mep-parties__list { grid-template-columns: minmax(0, 1fr); }

	.ecr-mep--archive-country .ecr-st-termimg--hero { width: 84px; height: 56px; }
	.ecr-mep--archive-party .ecr-st-termimg--hero { width: 84px; height: 84px; }

	.ecr-mep__original { font-size: .9375rem; }

	.ecr-mep--profile { padding-top: 28px; }

	.ecr-mep-filters { padding: 10px; margin-bottom: 20px; }

	/* Two columns of facets at phone width; one would make a five-item stack
	   taller than the viewport before the first card. */
	.ecr-mep-filters__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* The panel escapes its 1/2-width column, so it is pinned to the bar. */
	.ecr-mep-facet__panel {
		left: 0;
		right: auto;
		width: calc(100vw - 56px);
		max-width: 340px;
	}

	.ecr-mep__searchform { flex-wrap: wrap; padding: 8px; gap: 8px; }
	.ecr-mep__search { flex: 1 0 100%; padding: 0 12px; }
	.ecr-mep__searchbtn { flex: 1 0 100%; }

	.ecr-mep__resultbar { align-items: flex-start; flex-direction: column; gap: 10px; }

	/* minmax(0,1fr) rather than 1fr, so a long unbroken string — an e-mail
	   address — cannot force horizontal overflow. */
	.ecr-mep-grid { grid-template-columns: minmax(0, 1fr); }

	/* The card stays two-column at phone width, with a narrower plate. Stacking
	   it would make each card ~520px tall and the grid unscannable. */
	.ecr-mep-card { grid-template-columns: 112px minmax(0, 1fr); }

	.ecr-mep-card__body { padding: 14px 15px; gap: 6px; }
	.ecr-mep .ecr-mep-card__name { font-size: 1rem; }
	.ecr-mep-card__facts { font-size: .75rem; gap: 6px; }

	.ecr-mep-info { padding: 22px 20px 26px; }
	.ecr-mep .ecr-mep-info__name { font-size: 1.6rem; }
	.ecr-mep-info__role { font-size: .9375rem; }
	.ecr-mep-info__row { gap: 12px; font-size: .875rem; }

	.ecr-mep-profile__portrait { max-width: 260px; }

	/* The two-column card at 112px needs a proportionally shorter plate. */
	.ecr-mep-card__portrait { min-height: 140px; }

	.ecr-mep-strip__list { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; }

	.ecr-mep-btn { justify-content: center; padding: 11px 16px; }
}

@media (prefers-reduced-motion: reduce) {

	.ecr-mep-card,
	.ecr-mep-chip,
	.ecr-mep-btn,
	.ecr-mep-pill,
	.ecr-mep-social,
	.ecr-mep-facet__option,
	.ecr-mep-mini__portrait,
	.ecr-mep-related__list a {
		transition: none;
	}

	.ecr-mep-card:hover,
	.ecr-mep-card:focus-within,
	.ecr-mep-social:hover,
	.ecr-mep-mini:hover .ecr-mep-mini__portrait,
	.ecr-mep-related__list a:hover {
		transform: none;
	}
}

/* Print: the profile is the page worth printing, and its portrait plate and
   card shadows are ink nobody asked for. */
@media print {

	.ecr-mep-filters,
	.ecr-mep-profile__back,
	.ecr-mep__searchform { display: none; }

	.ecr-mep-profile__header {
		box-shadow: none;
		border-color: #999;
		break-inside: avoid;
	}
}

/* Party header — country, website and X.
   --------------------------------------------------------------------------
   Added for the party detail pages. Scoped entirely to `.ecr-mep__partymeta`,
   so nothing outside the party header can be affected. Colours and the icon
   size come from the tokens the rest of this file already uses. */

.ecr-mep__partymeta {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 22px;
}

.ecr-mep__partymeta-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: .95rem;
	line-height: 1.4;
	color: var(--mep-muted);
}

.ecr-mep__partymeta-item .ecr-mep-icon {
	flex: 0 0 auto;
	color: var(--mep-primary);
}

.ecr-mep__partymeta-item a {
	color: var(--mep-primary);
	font-weight: 700;
	text-decoration: none;
}

.ecr-mep__partymeta-item a:hover,
.ecr-mep__partymeta-item a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 690px) {
	.ecr-mep__partymeta {
		gap: 8px 16px;
	}

	.ecr-mep__partymeta-item {
		font-size: .9rem;
	}
}