/* =============================================================================
   ECR — The Prague Declaration
   Phase 6. The site's own visual language: --ecr-* tokens, 24px group radius,
   the restrained shadow. Numbered principles in a two-column grid that folds
   to one on the phone.
   ========================================================================== */

.ecr-pd {
	--pd-primary: var(--ecr-primary, #1866A5);
	--pd-accent: var(--ecr-accent, #7BADDE);
	--pd-text: var(--ecr-text, #1E293B);
	--pd-border: var(--ecr-border, #E2E8F0);
	--pd-bg: var(--ecr-bg, #F8FAFC);
	--pd-white: var(--ecr-white, #FFFFFF);
	--pd-muted: #667085;

	padding: 72px 25px;
	background: var(--pd-bg);
	color: var(--pd-text);
}

.ecr-pd__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.ecr-pd__header {
	text-align: center;
	margin-bottom: 44px;
}

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

.ecr-pd .ecr-pd__title {
	margin: 0 0 18px;
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	line-height: 1.12;
	color: var(--pd-text);
}

.ecr-pd__intro {
	max-width: 780px;
	margin: 0 auto;
	color: var(--pd-muted);
	line-height: 1.65;
}

.ecr-pd__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	counter-reset: none;
}

.ecr-pd__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 0;
	padding: 22px 24px;
	list-style: none;
	background: var(--pd-white);
	border: 1px solid var(--pd-border);
	border-radius: 18px;
	box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
	min-width: 0;
}

.ecr-pd__num {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--pd-primary);
	color: var(--pd-white);
	font-weight: 700;
	font-size: .875rem;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.ecr-pd__text {
	min-width: 0;
	line-height: 1.6;
	color: var(--pd-text);
}

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

@media only screen and (max-width: 690px) {
	.ecr-pd { padding: 44px 18px; }
	.ecr-pd__list { grid-template-columns: minmax(0, 1fr); }
	.ecr-pd__item { padding: 18px 18px; gap: 12px; }
}

/* -----------------------------------------------------------------------------
   Phase 9 — the Group's own Prague Declaration poster, beside the heading.
   Two columns where there is room; the poster drops below the intro on
   narrower screens rather than shrinking the text.
   -------------------------------------------------------------------------- */

.ecr-pd__top--with-poster {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 2.5rem;
	align-items: start;
}

/* The header is centred when it spans the full width. Beside a poster it is
   one of two columns, so it reads better ranged left. */
.ecr-pd__top--with-poster .ecr-pd__header {
	text-align: left;
}

.ecr-pd__top--with-poster .ecr-pd__intro {
	margin-left: 0;
	margin-right: 0;
	max-width: 46ch;
}

.ecr-pd__poster {
	margin: 0;
	max-width: 320px;
	justify-self: end;
}

.ecr-pd__poster a {
	display: block;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 14px 40px rgba(17, 76, 125, .18);
	transition: transform .25s ease, box-shadow .25s ease;
}

.ecr-pd__poster a:hover,
.ecr-pd__poster a:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 20px 52px rgba(17, 76, 125, .24);
}

.ecr-pd__poster a:focus-visible {
	outline: 3px solid #FFD500;
	outline-offset: 3px;
}

.ecr-pd__poster-img {
	display: block;
	width: 100%;
	height: auto;
}

@media (prefers-reduced-motion: reduce) {
	.ecr-pd__poster a { transition: none; }
	.ecr-pd__poster a:hover,
	.ecr-pd__poster a:focus-visible { transform: none; }
}

@media (max-width: 900px) {
	.ecr-pd__top--with-poster {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.75rem;
	}
	.ecr-pd__poster {
		justify-self: start;
		max-width: 280px;
	}
}

/* ==========================================================================
   ECR — the Prague Declaration poster, rebuilt as HTML and CSS
   [ecr_prague_graphic] · inc/prague/prague.php

   THE MEASUREMENT BASIS
   Every number below is a percentage of the poster's own card, which on the
   supplied artwork (modifiche_PRAGUE_DECLARATION/prague graphic.png, a
   3508x2480 canvas) occupies (58,258)-(3451,2331) — so 3394 x 2074, aspect
   1.6365. Sampled from that file:

   All of these are percentages of that 3394px width, so they are the cqw
   values used below directly.

       card              #F3F7FC   radius 1.62   height 61.11 (aspect 1.6365)
       logo              square    7.51 wide     at 3.42, top 5.57
       illustration      45.55 wide (intrinsic aspect 1.5834), top 0.88
       "THE PRAGUE"      #6A6A6A   cap 2.80  width 24.25  left 2.95  top 33.24
       "DECLARATION"     #0E66A5   cap 3.68  width 35.65  left 3.21  top 37.24
       intro             near-black  line pitch 2.08  width 46.05  top 43.81
       number chip       #7CAEDE   2.89 square   column starts 55.07
       principle text    black     line pitch 1.60  left 59.16, ends 95.50
       first chip        top 5.66              last chip bottom 56.04

   The two title sizes were set by matching RENDERED WIDTH, then checked
   against cap height: 5.28cqw gives "DECLARATION" 35.1cqw against a target of
   35.65, and its cap height lands within 2% of the measured 3.68. The artwork
   uses a slightly narrower typeface than the site's, and those two independent
   targets agreeing is what says the substitution is close enough to keep the
   composition honest. There is no letter-spacing in the artwork — the
   per-character widths of the two lines track their cap heights exactly.

   #7CAEDE is the ECR accent (--ecr-accent, #7BADDE) to within one step of
   anti-aliasing, and #0E66A5 is ECR blue, so both come from the tokens rather
   than being re-typed as hex.

   HOW IT SCALES
   `.ecr-pg` is the query container and the card fills it, so `cqw` is 1% of
   the card's width and the whole composition is one drawing that resizes: at
   any width the proportions are the artwork's.

   The container is the WRAPPER and not the card itself on purpose — an element
   cannot query itself, so with `container-type` on the card its own padding
   and radius would have silently resolved against the viewport instead.

   TWO THINGS NEED !important, AND ONLY THESE
   Salient ships `.row .col img:not([srcset]) { width: auto }` and
   `.row .col img { max-width: 100% }` from its own inline stylesheet. Those
   are three-class selectors that outrank any single class here, so the three
   images in this component would be laid out by the theme's blanket image
   rules rather than by the composition. The overrides are limited to the
   geometry of those three images.

   Below 900px the composition stops being proportional on purpose — see the
   reflow block at the end. Holding 1.3cqw body copy at phone width would set
   the principles at about 5px.
   ========================================================================== */

.ecr-pg {
	container-type: inline-size;
	margin: 0;
	padding: 0;
	max-width: 100%;
}

/* Linked to as /who-we-are/#the-prague-declaration (Our History, 01/10/2026):
   land the card just below the condensed sticky header (85px + 20px), and
   below the admin bar too for a signed-in editor — the values the document
   pages use. */
.ecr-pg { scroll-margin-top: 105px; }
body.admin-bar .ecr-pg { scroll-margin-top: 137px; }

.ecr-pg__card {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	display: grid;
	/* 52.17 : 40.43 is where the artwork puts the split. */
	grid-template-columns: 52.17fr 40.43fr;

	background: #F3F7FC;
	border-radius: 1.62cqw;
	/* Top padding is where the ILLUSTRATION starts (0.88), not the logo — the
	   logo is placed over the illustration's transparent sky, as in the
	   artwork, so it cannot set the top of the box. Bottom padding is what
	   brings the card out at the artwork's 61.11cqw tall, i.e. aspect 1.6365. */
	padding: 0.88cqw 4.5cqw 3.86cqw 2.9cqw;
}

/* --- the Europe map, behind everything ----------------------------------- */

/* Anchored by its right edge, which is where the artwork puts it: the map runs
   off the top of the card and sits flush right. Height stays `auto` so the
   intrinsic 0.97 aspect can never be squashed. */
.ecr-pg .ecr-pg__map {
	position: absolute;
	z-index: 0;
	top: -4%;
	right: -1%;
	width: 61% !important;
	max-width: none !important;
	height: auto !important;
	margin: 0;
	pointer-events: none;
	user-select: none;
}

/* --- left column --------------------------------------------------------- */

.ecr-pg__left {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Taken out of the flow and laid over the illustration, which is how the
   artwork stacks them: the logo sits in the sky above the town hall's left
   wing, so it must not push the illustration or the title down. */
.ecr-pg .ecr-pg__logo {
	position: absolute;
	z-index: 2;
	top: 4.69cqw;
	left: 0.52cqw;
	display: block;
	width: 7.51cqw !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 !important;
}

.ecr-pg .ecr-pg__illustration {
	display: block;
	width: 45.55cqw !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 0 0 -0.04cqw !important;
}

/* 3.10cqw is the gap the artwork leaves between the illustration's ground
   line and the cap height of "THE PRAGUE"; line-height .95 is what puts
   "DECLARATION" 4.0cqw below it, which is the artwork's pitch. */
.ecr-pg .ecr-pg__title {
	margin: 3.1cqw 0 0;
	padding: 0;
	line-height: .95;
	text-transform: uppercase;
	font-family: inherit;
}

.ecr-pg__title-thin,
.ecr-pg__title-bold {
	display: block;
}

.ecr-pg__title-thin {
	color: #6A6A6A;
	font-weight: 600;
	font-size: 4.06cqw;
	letter-spacing: 0;
}

.ecr-pg__title-bold {
	color: var(--ecr-primary, #1866A5);
	font-weight: 800;
	font-size: 5.28cqw;
	letter-spacing: 0;
}

.ecr-pg .ecr-pg__intro {
	margin: 1.69cqw 0 0;
	/* The artwork's intro measures 46.05cqw and sets six lines. The site's
	   wider typeface fits slightly less per line at that measure but still
	   breaks into six, so the block keeps the artwork's shape. */
	max-width: 46.05cqw;
	color: #111418;
	font-weight: 600;
	font-size: 1.56cqw;
	line-height: 1.33;
}

/* --- the ten principles -------------------------------------------------- */

.ecr-pg .ecr-pg__list {
	position: relative;
	z-index: 1;
	list-style: none;
	margin: 0;
	/* 4.78cqw puts the first chip at the artwork's 5.66cqw from the card top,
	   allowing for the 0.88cqw the card is already padded by. */
	padding: 4.78cqw 0 0;
	display: flex;
	flex-direction: column;
	/* The artwork's item gaps vary between 0.9 and 2.3cqw — the ten blocks
	   were placed by hand, not on a grid. 1.5cqw is their mean, and it brings
	   the column out level with the left one. */
	gap: 1.5cqw;
	min-width: 0;
}

.ecr-pg .ecr-pg__item {
	display: grid;
	/* the chip, then the 1.2cqw gutter the artwork leaves before the text */
	grid-template-columns: 2.89cqw 1fr;
	gap: 1.2cqw;
	align-items: start;
	margin: 0;
	padding: 0;
	min-width: 0;
	list-style: none;
}

.ecr-pg__num {
	/* Always a square: the artwork's chips are 98 x 98 with sharp corners. */
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	width: 100%;
	background: var(--ecr-accent, #7BADDE);
	color: #FFFFFF;
	font-weight: 500;
	font-size: 1.62cqw;
	line-height: 1;
	/* so the 10 cannot widen the chip or wrap inside it */
	font-variant-numeric: tabular-nums;
}

.ecr-pg__text {
	color: #000000;
	font-weight: 500;
	font-size: 1.31cqw;
	line-height: 1.22;
	min-width: 0;
	overflow-wrap: break-word;
}

/* --- reflow: tablet and phone -------------------------------------------- */

/* Below 1100px the two columns become one and the type stops being a
   percentage of the card. Everything is still present — the logo, the
   illustration, the title, the intro and all ten principles — but at readable
   absolute sizes instead of a scale model of a landscape poster. The map
   becomes a background wash, because at one column there is no right-hand
   column to sit behind.

   WHY 1100 AND NOT 900
   The breakpoint is on the VIEWPORT but the composition scales with the CARD,
   and the card is much narrower than the window: at a 1024px viewport it
   measures 844px, which put the principles at 1.31cqw = 11px — proportionally
   perfect and too small to read. 1100px is the last viewport width at which
   the card is still wide enough (~940px, ~12.3px text) to hold the two-column
   composition; below it, one readable column is the better answer. */
@media only screen and (max-width: 1100px) {

	.ecr-pg__card {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
		padding: 26px 22px 30px;
		border-radius: 18px;
	}

	.ecr-pg .ecr-pg__map {
		top: auto;
		bottom: -4%;
		right: -20%;
		width: 112% !important;
		opacity: .5;
	}

	/* Back into the flow. On the desktop composition the logo is layered over
	   the illustration's sky, which needs absolute positioning; at one column
	   there is no sky to sit in — a card 343px wide puts `left: 0.52cqw` at
	   1.8px, inside the card's own 22px padding, so the logo hung to the left
	   of everything else on the page. Stacked above the illustration it lines
	   up with the title and the intro. */
	.ecr-pg .ecr-pg__logo {
		position: static;
		width: 62px !important;
		margin: 0 0 4px !important;
	}

	.ecr-pg .ecr-pg__illustration {
		width: 100% !important;
		max-width: 440px !important;
		margin: 6px 0 0 !important;
	}

	.ecr-pg .ecr-pg__title { margin-top: 18px; line-height: 1; }
	.ecr-pg__title-thin { font-size: clamp(1.55rem, 6.2vw, 2.4rem); letter-spacing: 0; }
	.ecr-pg__title-bold { font-size: clamp(1.95rem, 7.8vw, 3rem); letter-spacing: -.01em; }

	.ecr-pg .ecr-pg__intro {
		max-width: 62ch;
		margin-top: 13px;
		font-size: clamp(.9375rem, 2.6vw, 1.0625rem);
		line-height: 1.45;
	}

	.ecr-pg .ecr-pg__list { padding-top: 0; gap: 14px; }

	.ecr-pg .ecr-pg__item {
		/* A fixed 30px chip, not a percentage — at 390px wide a 2.89% chip
		   would be 11px and the numeral inside it unreadable. */
		grid-template-columns: 30px 1fr;
		gap: 12px;
	}

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

	.ecr-pg__text {
		font-size: clamp(.875rem, 2.4vw, 1rem);
		line-height: 1.4;
	}
}

/* -----------------------------------------------------------------------------
   PRAGUE POSTER — no grey outline (client feedback, September 2026)
   "Prague graphic — no grey outline". The outline is NOT a CSS border: it is a
   2px rgb(141,140,140) stroke drawn into the artwork itself — present in the
   client's own "modifiche_PRAGUE_DECLARATION/prague graphic.png" and in the
   uploaded prague-declaration.png (3404x2141) with all its sizes. Rather than
   repaint the client's artwork, the poster is clipped just inside that stroke.

   Measured on the 3404x2141 original: transparent margin L6 T35 R6 B32 px,
   stroke 2px. Clipping 3px inside the stroke:
     top    (35+3)/2141 = 1.775%     left/right (6+3)/3404 = 0.264%
     bottom (32+3)/2141 = 1.635%     radius 56px = 1.645% (x) / 2.616% (y)
   The radius was calibrated by masking the original and counting the stroke
   pixels left: at 40px the corner arcs survive, from 50px none do (only the
   drawing's own greys remain, constant for any larger radius); 56px adds a
   margin.
   Percentages, so every srcset size is clipped identically. The file, its
   attachment and its URL are untouched; deleting this rule restores it.
   -------------------------------------------------------------------------- */
img[src*="/uploads/2026/09/prague-declaration"] {
	clip-path: inset(1.775% 0.264% 1.635% 0.264% round 1.645% / 2.616%);
}

/* -----------------------------------------------------------------------------
   WHO WE ARE — space between the map and the Prague Declaration (30/09/2026)
   "Aumenta lo spazio verticale tra il blocco Prague Declaration e la mappa".
   Measured in Chrome before this rule: the WPBakery row holding the map ends
   at exactly the pixel where the row holding this card starts (0 px at 1440,
   1024, 768 and 390) — the stat boxes of the map's left column touched the
   card. The space is added ONCE, above this card, and only where it follows
   the map's row, so the Prague component elsewhere (a News article embeds it)
   and the page's top padding are unchanged. The map and the card themselves
   are not touched. Steps follow the site's breakpoints (1000 / 690 px).
   -------------------------------------------------------------------------- */
.wpb_row:has(.map_wrapper) + .wpb_row .ecr-pg {
	margin-top: 72px;
}

@media (max-width: 1000px) {
	.wpb_row:has(.map_wrapper) + .wpb_row .ecr-pg { margin-top: 56px; }
}

@media (max-width: 690px) {
	.wpb_row:has(.map_wrapper) + .wpb_row .ecr-pg { margin-top: 40px; }
}