/* =============================================================================
   ECR — "Who we are" section pages
   Structure · Countries · Parties · Committees · Delegations

   Phase 6. Same visual language as Our People and Contact: the site-wide
   `--ecr-*` tokens, the 24px group radius, the 18px card radius, pill
   geometry, the restrained shadow and the 2px hover lift. Nothing new is
   introduced — no colour, no typeface, no radius that is not already in use.
   ========================================================================== */

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

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

/* --- header --------------------------------------------------------------- */

.ecr-st__header {
	text-align: center;
	margin-bottom: 46px;
}

/* THE INDEX PAGES OPEN TIGHTER.
   /countries/ and /parties/ are a header over a dense grid of small tiles, and
   46px + 12px + 15px between eyebrow, title, lede and the first tile read as
   four separate things rather than one block. The body pages keep the roomier
   rhythm above, because there the header is introducing long prose. */
.ecr-st--index .ecr-st__header {
	margin-bottom: 26px;
}

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

.ecr-st--index .ecr-st__eyebrow {
	margin-bottom: 6px;
}

.ecr-st .ecr-st__title {
	font-size: clamp(2.4rem, 4vw, 4rem);
	line-height: 1.1;
	margin: 0 0 15px;
	color: var(--st-text);
}

.ecr-st--index .ecr-st__title {
	margin-bottom: 8px;
}

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

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

/* --- role groups (Structure) --------------------------------------------- */

.ecr-st-group {
	margin-bottom: 50px;
}

.ecr-st-group:last-child {
	margin-bottom: 0;
}

.ecr-st-group__header {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding-bottom: 16px;
	border-bottom: 3px solid var(--st-primary);
	margin-bottom: 26px;
}

/* Three classes: Salient's heading rule matches `.row .col h2` and would
   otherwise win. Same cascade problem documented in our-people.css. */
.ecr-st .ecr-st-group .ecr-st-group__name {
	margin: 0;
	font-size: clamp(1.4rem, 2.2vw, 1.875rem);
	line-height: 1.15;
	color: var(--st-text);
}

.ecr-st-group__count {
	flex: 0 0 auto;
	padding: 3px 11px;
	border-radius: 999px;
	background: var(--st-tint);
	color: var(--st-primary);
	font-size: .8125rem;
	font-weight: 700;
}

/* --- MEP card ------------------------------------------------------------- */

.ecr-st-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 18px;
}

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

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

.ecr-st-mep__portrait {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--st-tint);
	border: 1px solid var(--st-border);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ecr-st-mep__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
	display: block;
}

.ecr-st-mep__initials {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .5px;
	color: var(--st-primary);
	line-height: 1;
}

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

.ecr-st-mep__name {
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.25;
	color: var(--st-text);
	overflow-wrap: anywhere;
}

.ecr-st-mep__role {
	font-size: .8125rem;
	line-height: 1.4;
	color: var(--st-primary);
	font-weight: 600;
}

.ecr-st-mep__origin {
	font-size: .8125rem;
	line-height: 1.4;
	color: var(--st-muted);
	overflow-wrap: anywhere;
}

/* --- term index (Countries / Parties) ------------------------------------- */

/* --- the map (/countries/ only) ------------------------------------------ */

/* The Group's existing Europe map, reused. The plugin sizes its own canvas
   from the width it is given and keeps its aspect ratio, so all this does is
   give it a width to be sized by, hold it off the tiles, and stop it being
   able to push the page sideways on a narrow screen. */
.ecr-st-map {
	/* Capped, and centred in the leftover space.

	   The plugin keeps the map's aspect ratio, and the europeHigh projection is
	   a tall one — it reaches from Svalbard to Cyprus, so most of the top and
	   bottom of the frame is sea. Given the full 1150px column it drew itself
	   1020px tall and the eighteen tiles fell below the fold on a laptop.
	   880px is the width at which the map reads at a glance and the tiles it
	   belongs with are still on screen with it.

	   The projection, the region data and the highlight colours are untouched:
	   this is the same map as /map/, only narrower. */
	width: 100%;
	max-width: 880px;
	margin: 0 auto 26px;
}

.ecr-st-map .ecr-map-embed {
	/* The plugin's canvas is absolutely positioned inside its own aspect-ratio
	   box; `contain` keeps a mid-load frame from spilling out of the section. */
	max-width: 100%;
	overflow: hidden;
	border-radius: var(--st-radius-card);
}

/* The plugin writes its own inline width/height on these; the only thing that
   must be asserted is that neither can exceed the column. */
.ecr-st-map .map_container,
.ecr-st-map .map_wrapper,
.ecr-st-map .map_box {
	max-width: 100%;
}

.ecr-st-map__caption {
	margin-top: 10px;
	text-align: center;
	font-size: .8125rem;
	color: var(--st-muted);
}

.ecr-st-index {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 14px;
}

/* EVERY COUNTRY TILE IS THE SAME SIZE.

   Width was already uniform: `auto-fill` keeps the empty tracks on the last
   row, so the two tiles on it are one track wide like all the others.

   HEIGHT was not. A tile is as tall as its contents, and "Czech Republic" is
   the one country name that wraps to two lines at four columns — so its whole
   grid ROW was ~7px taller than the rest and the grid stopped reading as a
   grid. The fix is a floor equal to the measured two-line case:

       18px + 18px padding        36.0
       2 x 24.4px name line       48.8
       ------------------------------
                                  84.8  ->  85px

   so a one-line tile (whose 46x31 flag is the tallest thing in it) and a
   two-line tile are the same height, and no country name has to be shortened
   to keep the grid straight.

   `align-items: center` on the tile then does the rest of what the brief asks
   for: with the height fixed, the flag, the name and the MEP count all sit on
   the tile's centre line whether the name takes one line or two, so those
   three land in the same place on all eighteen. */
.ecr-st--index-country .ecr-st-tile {
	min-height: 85px;
}

.ecr-st-tile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 18px 22px;
	background: var(--st-white);
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-card);
	box-shadow: var(--st-shadow);
	text-decoration: none;
	color: var(--st-text);
	font-weight: 700;
	line-height: 1.3;
	min-width: 0;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background-color .25s ease, color .25s ease;
}

.ecr-st-tile:hover,
.ecr-st-tile:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--st-shadow-hover);
	border-color: transparent;
	background: var(--st-primary);
	color: var(--st-white);
}

.ecr-st-tile__name {
	min-width: 0;
	overflow-wrap: anywhere;
}

.ecr-st-tile__count {
	flex: 0 0 auto;
	font-size: .75rem;
	font-weight: 700;
	color: var(--st-muted);
	white-space: nowrap;
}

.ecr-st-tile:hover .ecr-st-tile__count,
.ecr-st-tile:focus-visible .ecr-st-tile__count {
	color: var(--st-white);
}

/* --- bodies (Committees / Delegations) ------------------------------------ */

.ecr-st-bodies {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
	gap: 18px;
}

.ecr-st-body {
	display: flex;
	flex-direction: column;
	padding: 24px;
	background: var(--st-white);
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-card);
	box-shadow: var(--st-shadow);
	min-width: 0;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

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

.ecr-st-body__header {
	padding-bottom: 12px;
	border-bottom: 2px solid var(--st-tint);
	margin-bottom: 14px;
}

.ecr-st .ecr-st-body .ecr-st-body__name {
	margin: 0 0 6px;
	font-size: 1rem;
	line-height: 1.35;
	color: var(--st-text);
	overflow-wrap: anywhere;
}

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

.ecr-st-body__meps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ecr-st-body__meps li {
	margin: 0;
	list-style: none;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	font-size: .875rem;
	line-height: 1.45;
}

.ecr-st-body__meps a {
	color: var(--st-primary);
	font-weight: 600;
	text-decoration: none;
	min-width: 0;
	overflow-wrap: anywhere;
}

.ecr-st-body__meps a:hover,
.ecr-st-body__meps a:focus-visible {
	text-decoration: underline;
}

.ecr-st-body__role {
	flex: 0 0 auto;
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 700;
	color: var(--st-muted);
	white-space: nowrap;
}

.ecr-st-body__staff {
	margin: 16px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--st-border);
}

.ecr-st-body__staff a {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--st-bg);
	border: 1px solid var(--st-border);
	color: var(--st-primary);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.ecr-st-body__staff a:hover,
.ecr-st-body__staff a:focus-visible {
	background: var(--st-primary);
	border-color: var(--st-primary);
	color: var(--st-white);
}

/* --- responsive ----------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   TERM IDENTITY IMAGES — country flags and party logos
   ADDED 02/09/2026. The client has had all eighteen flags and twenty-three
   party logos in PROJECT_DOCS/immagini/ since the start of the project.

   One component, two shapes. A FLAG is a landscape rectangle with a hairline
   border, because several national flags have a white or near-white field and
   would otherwise dissolve into the card. A LOGO is contained inside a square
   so a tall emblem and a wide wordmark occupy the same slot and the grid does
   not jump between rows.
   -------------------------------------------------------------------------- */

.ecr-st-termimg {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
}

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

/* The flag on a country tile. 3:2 is the commonest national proportion; the
   others letterbox inside it rather than being stretched. */
.ecr-st-termimg--flag {
	width: 46px;
	height: 31px;
	border-radius: 3px;
	overflow: hidden;
	border: 1px solid var(--st-border);
	background: var(--st-white);
}

/* The logo on a party tile. */
.ecr-st-termimg--logo {
	width: 62px;
	height: 62px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--st-white);
	border: 1px solid var(--st-border);
	padding: 6px;
	box-sizing: border-box;
}

/* --- the party tile ------------------------------------------------------- */

/* Two destinations, so NOT a whole-tile link: the party name and the country
   are separate links. The tile keeps the border, radius and shadow of the
   country tile it sits beside, and loses only the hover lift, because a card
   that lifts without being clickable is a lie. */
.ecr-st-index--party {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.ecr-st-tile--party {
	align-items: flex-start;
	justify-content: flex-start;
	gap: 16px;
	font-weight: 400;
	cursor: default;
	/* `start`, not the grid default `stretch`: a card with a two-line party
	   name and no own-language subtitle was being stretched to the height of
	   the tallest card in its row, leaving 200px of empty white below it. */
	align-self: start;
}

.ecr-st-tile--party .ecr-st-tile__body {
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
}

.ecr-st-tile--party:hover,
.ecr-st-tile--party:focus-within {
	transform: none;
	background: var(--st-white);
	color: var(--st-text);
	box-shadow: var(--st-shadow-hover);
	border-color: var(--st-border);
}

.ecr-st-tile__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ecr-st .ecr-st-tile--party .ecr-st-tile__name {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

.ecr-st-tile--party .ecr-st-tile__name a {
	color: var(--st-text);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}

.ecr-st-tile--party .ecr-st-tile__name a:hover,
.ecr-st-tile--party .ecr-st-tile__name a:focus-visible {
	color: var(--st-primary);
	border-bottom-color: currentColor;
}

/* The party's name in its own language. Italic, because it is the same name
   again rather than a different fact — and quiet, so it cannot be mistaken for
   the canonical one. */
.ecr-st-tile__original {
	margin: 0;
	font-size: .8125rem;
	font-style: italic;
	line-height: 1.4;
	color: var(--st-muted);
	overflow-wrap: anywhere;
}

.ecr-st-tile__country {
	margin: 4px 0 0;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.ecr-st-tile__country a {
	color: var(--st-primary);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}

.ecr-st-tile__country a:hover,
.ecr-st-tile__country a:focus-visible {
	border-bottom-color: currentColor;
}

/* --- the country tile, now with a flag ------------------------------------ */

/* THE `:not()`s MATTER: every grid on this stylesheet carries `.ecr-st-index`,
   so without them this row-direction rule reaches the stacked tiles too.

   `--party`: it laid the party card's name, own-language name and country out
   side by side in three columns roughly 90px wide each and hyphenated every one
   of them ("Civic Democrati c Party").

   `--family`: same shape, same problem — it put the ECR Family name on the left
   and the domain on the right, which broke "www.ecrcor.eu" over two lines. The
   exclusion goes HERE rather than being overridden further down because
   `:not()` contributes its argument's specificity, making this selector 0-4-0;
   a rule scoped to the family grid could not outweigh it. */
.ecr-st-index .ecr-st-tile:not(.ecr-st-tile--party):not(.ecr-st-tile--family) .ecr-st-tile__body {
	flex: 1 1 auto;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

/* --- the body card (Committees / Delegations) ----------------------------- */

/* Now a whole-card link to the body's own page. The code sits above the name
   as an eyebrow, which is what lets the full official name be the heading
   without the identifier everyone actually says being lost. */
.ecr-st-body {
	text-decoration: none;
	color: var(--st-text);
	justify-content: space-between;
	gap: 14px;
}

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

.ecr-st-body:focus-visible {
	outline: 2px solid var(--st-primary);
	outline-offset: 3px;
}

.ecr-st-body--static {
	cursor: default;
}

.ecr-st-body--static:hover {
	transform: none;
	box-shadow: var(--st-shadow);
	border-color: var(--st-border);
}

.ecr-st-body__header {
	display: block;
}

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

.ecr-st .ecr-st-body .ecr-st-body__name {
	display: block;
	font-weight: 700;
}

.ecr-st-body:hover .ecr-st-body__name,
.ecr-st-body:focus-visible .ecr-st-body__name {
	color: var(--st-primary);
}

.ecr-st-body__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	margin-top: auto;
}

.ecr-st-body__staffcount {
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 700;
	color: var(--st-accent, #7BADDE);
	/* --st-accent is 2.37:1 on white and cannot carry small text. The muted
	   grey is 4.97:1 and is what actually paints; the accent is kept only as
	   the fallback for a token that is always defined. */
	color: var(--st-muted);
}

/* --- the Structure card, when it is not a link ---------------------------- */

/* Members are deliberately not linked FROM Structure, so the card must not
   behave as though they were: no lift, no pointer, no focus ring. Everything
   else about it is unchanged. */
.ecr-st-mep--static {
	cursor: default;
}

.ecr-st-mep--static:hover,
.ecr-st-mep--static:focus-within {
	transform: none;
	box-shadow: var(--st-shadow);
	border-color: var(--st-border);
}

.ecr-st-mep--static .ecr-st-mep__name {
	color: var(--st-text);
}

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

@media only screen and (max-width: 1000px) {
	.ecr-st { padding: 56px 22px; }
	.ecr-st__header { margin-bottom: 36px; }
	.ecr-st-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
	.ecr-st-bodies { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
}

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

	/* One column of party tiles at phone width; two would put the
	   original-language name on four lines. */
	.ecr-st-index--party { grid-template-columns: minmax(0, 1fr); }

	.ecr-st-termimg--logo { width: 52px; height: 52px; }

	.ecr-st-body { padding: 18px; }

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

	/* minmax(0,1fr) rather than 1fr so a long unbroken delegation name cannot
	   force horizontal overflow. */
	.ecr-st-grid,
	.ecr-st-index,
	.ecr-st-bodies {
		grid-template-columns: minmax(0, 1fr);
	}

	.ecr-st-body__meps li {
		flex-direction: column;
		gap: 0;
	}

	.ecr-st-body__role { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
	.ecr-st-mep, .ecr-st-tile, .ecr-st-body, .ecr-st-body__staff a { transition: none; }
	.ecr-st-mep:hover, .ecr-st-tile:hover, .ecr-st-body:hover { transform: none; }
}

/* -----------------------------------------------------------------------------
   ECR FAMILY — /ecr-family/

   The same tile as /parties/, with two differences that follow from the data:

   ONE DESTINATION, so the whole tile IS the link and it keeps the hover lift
   the party tile had to give up (a party tile has two links inside it — the
   party and its country — and a card that lifts without being clickable is a
   lie; this one is clickable).

   THREE ENTRIES, so the grid is capped at three columns rather than
   auto-filling: `auto-fill, minmax(300px, 1fr)` would put all three in one
   1200px row at ~390px each and leave the row looking like a fragment of a
   longer list.

   No logo exists for any of the three organisations on this installation, so
   these tiles currently render text only — inc/family/family.php omits the
   image box rather than framing a placeholder. If a logo is added later it
   picks up `.ecr-st-termimg--logo` above, unchanged.
   -------------------------------------------------------------------------- */

.ecr-st-index--family {
	/* Four blocks since September 2026 (The Local Leaders Network added):
	   one row of four on desktop, two by two below that. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ecr-st-tile--family {
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	font-weight: 400;
	min-height: 96px;
}

/* A name ABOVE its domain, exactly as the party tile is a name above its
   own-language name. The country tile's row-direction rule is excluded from
   `--family` at source (see the `:not()` note beside it), so this is a plain
   override and does not have to out-specify anything. */
.ecr-st-tile--family .ecr-st-tile__body {
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 4px;
}

.ecr-st .ecr-st-tile--family .ecr-st-tile__name {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

/* The domain, not a description: it is the one fact about the link that the
   name does not already carry, and it tells the reader they are leaving. */
.ecr-st-tile--family .ecr-st-tile__host {
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .04em;
	text-transform: lowercase;
	color: var(--st-primary);
	transition: color .25s ease;
	overflow-wrap: anywhere;
}

.ecr-st-tile--family:hover .ecr-st-tile__host,
.ecr-st-tile--family:focus-visible .ecr-st-tile__host {
	color: var(--st-white);
}

@media only screen and (max-width: 1099px) {
	.ecr-st-index--family { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media only screen and (max-width: 690px) {
	.ecr-st-index--family { grid-template-columns: minmax(0, 1fr); }
}

/* A page that is only a header (see ecr_st_sc_heading): the 80px bottom
   padding of a full section would leave a large empty band above the footer,
   and the header's own 46px bottom margin is not needed with nothing under
   it. Editor content follows in the normal flow below. */
.ecr-st--heading-only {
	padding-bottom: 0;
}

.ecr-st--heading-only .ecr-st__header {
	margin-bottom: 18px;
}

/* -----------------------------------------------------------------------------
   OPPORTUNITIES — Work with ECR Group · Tenders
   modifiche-sito.pdf p.4: title + description + date + uploaded document.
   Same ECR card language as everything else on this stylesheet.
   -------------------------------------------------------------------------- */

.ecr-opp-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.ecr-opp-item {
	padding: 26px 28px;
	background: var(--st-white);
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-card);
	box-shadow: var(--st-shadow);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

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

.ecr-opp-item__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.ecr-st .ecr-opp-item .ecr-opp-item__title {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--st-text);
	overflow-wrap: anywhere;
}

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

.ecr-opp-item__desc {
	margin: 0 0 10px;
	color: var(--st-muted);
	line-height: 1.6;
}

.ecr-opp-item__deadline {
	margin: 0 0 14px;
	font-size: .875rem;
	color: var(--st-text);
}

.ecr-opp-item__deadline span {
	display: inline-block;
	font-size: .625rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 700;
	color: var(--st-muted);
	margin-right: 8px;
}

.ecr-opp-item__actions {
	margin: 0;
}

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

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

.ecr-opp-btn__meta {
	font-weight: 600;
	opacity: .8;
	font-size: .75rem;
}

@media only screen and (max-width: 690px) {
	.ecr-opp-item { padding: 22px 20px; }
	.ecr-opp-btn { width: 100%; justify-content: center; }
}

/* =============================================================================
   COUNTRIES AND PARTIES — client feedback, September 2026
   PDF p.2: "No grey outline around the flags and around the party logos. Make
   party logos all the same size a bit bigger." Modifiche_sept 26.docx: the
   flags "to be used as they are - the thin grey line is already included, so
   you can leave them in a simple box with no outline on it"; the logos "look
   better on a square space, all centered, which gives them more space around;
   and then put the names underneath"; "Name of the party in English, Name in
   the original language and Country should be the same typo, same size - just
   the original language comes in grey ... Name of the Country in black and all
   caps."

   Layout only. The logo and flag FILES are the ones already installed; the
   client's new Flags / Party Logos folders were not retrievable (see the
   September 2026 report), and when they arrive they drop into the same boxes.
   ========================================================================== */

/* Flags: a plain box, no outline of our own. */
.ecr-st-termimg--flag {
	border: 0;
	border-radius: 0;
}

/* Parties: logo on top in a uniform square, names centred underneath. */
.ecr-st-index--party {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px;
}

.ecr-st-tile--party {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	padding: 22px 18px 24px;
	/* Every card in a row the same height, so the logos line up. */
	align-self: stretch;
}

.ecr-st-termimg--logo {
	width: 128px;
	height: 128px;
	padding: 10px;
	border: 0;
	border-radius: 0;
	background: var(--st-white);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* object-fit: contain keeps every logo's own proportions — nothing is cropped
   or stretched — and centres it in the square. */
.ecr-st-termimg--logo .ecr-st-termimg__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.ecr-st-tile--party .ecr-st-tile__body {
	align-items: center;
	width: 100%;
	gap: 4px;
}

/* One typeface, one size for the three lines. */
.ecr-st .ecr-st-tile--party .ecr-st-tile__name,
.ecr-st-tile--party .ecr-st-tile__original,
.ecr-st-tile--party .ecr-st-tile__country {
	font-family: inherit;
	font-size: .9375rem;
	line-height: 1.4;
	letter-spacing: 0;
	margin: 0;
	/* Salient gives every <p> 27px of bottom padding. */
	padding: 0;
}

.ecr-st-tile--party .ecr-st-tile__original {
	font-style: normal;
	color: var(--st-muted);
}

.ecr-st-tile--party .ecr-st-tile__country {
	margin-top: 2px;
	font-weight: 400;
	text-transform: uppercase;
}

.ecr-st-tile--party .ecr-st-tile__country a {
	color: var(--st-text);
}

.ecr-st-tile--party .ecr-st-tile__country a:hover,
.ecr-st-tile--party .ecr-st-tile__country a:focus-visible {
	color: var(--st-primary);
}

@media only screen and (max-width: 690px) {
	.ecr-st-index--party {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.ecr-st-termimg--logo {
		width: 104px;
		height: 104px;
		padding: 8px;
	}

	.ecr-st-tile--party {
		padding: 16px 12px 18px;
	}
}

@media only screen and (max-width: 419px) {
	.ecr-st-index--party {
		grid-template-columns: minmax(0, 1fr);
	}
}