/* ==========================================================================
   ECR — the three map counters
   [ecr_map_stats] · inc/map/map.php

   WHY THIS FILE EXISTS
   The brief asks that the counters on /map/ match the ones in the map block on
   /who-we-are/ EXACTLY. Rendering both from one shortcode got every property
   there — same element, same classes, same font-size, weight, colour,
   capitalisation and responsive steps — except line-height, which came out
   79.2px on /map/ and 86.4px on /who-we-are/.

   The cause was not in this theme. Salient generates
   `.nectar-split-heading.font_line_height_1-2 { line-height: 1.2 !important }`
   into a PER-PAGE inline stylesheet, and only for pages where it finds a
   stored [split_line_heading] shortcode to generate it for. /who-we-are/ still
   has five of those carrying the Group's prose, so it kept the rule; /map/'s
   only six were the counters, so once they became this shortcode that page had
   none and the rule was never emitted.

   Depending on that would mean the two pages could silently diverge again the
   next time someone edited either one. So the six elements get their
   line-height from here instead, on both pages, and the value is
   /who-we-are/'s 1.2 — the one the brief names as the source of truth, and the
   one the stored shortcodes asked for with `font_line_height_1-2`.

   `!important` matches the importance Salient's own rule carries, so the two
   agree rather than fighting; without it, Salient's would still win wherever
   it is emitted.
   ========================================================================== */

.nectar-split-heading.ecr-map-meps,
.nectar-split-heading.ecr-map-parties,
.nectar-split-heading.ecr-map-countries,
.nectar-split-heading.ecr-map-meps-label,
.nectar-split-heading.ecr-map-parties-label,
.nectar-split-heading.ecr-map-countries-label,
.nectar-split-heading.ecr-map-meps > p,
.nectar-split-heading.ecr-map-parties > p,
.nectar-split-heading.ecr-map-countries > p,
.nectar-split-heading.ecr-map-meps-label > h3,
.nectar-split-heading.ecr-map-parties-label > h3,
.nectar-split-heading.ecr-map-countries-label > h3 {
	line-height: 1.2 !important;
}

/* The figures carry `font_size_5vw font_size_tablet_12vw font_size_phone_16vw`
   and an inline `font-size: 5vw`, which is Salient's own responsive ladder and
   is left entirely alone — those three classes are what scale the numbers on
   tablet and phone, and they are generated from the class names rather than
   from the page's content, so unlike the line-height they are always present.
   Nothing else about the counters is styled here. */

/* ==========================================================================
   THE THREE NUMBERS AS TILES — client feedback, September 2026
   Reference: "numbers separate2.png" (the one of the three proposal images
   that reached the project): a 1:1 square in rgb(224,237,252), the figure in
   the ECR blue at a light weight, cap height ~42% of the square, the label
   underneath in rgb(87,87,86), regular. Sizes are in container units so the
   proportions hold at every width. The two other reference images were not
   retrievable; if they differ, only this block changes.
   ========================================================================== */

.ecr-map-stats {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	width: 100%;
	max-width: 240px;
}

.ecr-map-stat {
	container-type: inline-size;
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #E0EDFC;
	text-align: center;
	box-sizing: border-box;
	padding: 6%;
}

/* Salient prints the figure with an inline `font-size: 5vw` and its vw ladder
   classes; inside a tile the size must follow the tile, not the window. */
.ecr-map-stat .nectar-split-heading {
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
	font-size: inherit !important;
}

.ecr-map-stat .nectar-split-heading.ecr-map-meps > p,
.ecr-map-stat .nectar-split-heading.ecr-map-parties > p,
.ecr-map-stat .nectar-split-heading.ecr-map-countries > p {
	font-size: 58cqi !important;
	line-height: 1 !important;
	font-weight: 300 !important;
	color: #1866A5 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ecr-map-stat .nectar-split-heading.ecr-map-meps-label > h3,
.ecr-map-stat .nectar-split-heading.ecr-map-parties-label > h3,
.ecr-map-stat .nectar-split-heading.ecr-map-countries-label > h3 {
	font-size: 17cqi !important;
	line-height: 1.1 !important;
	font-weight: 400 !important;
	color: #575756 !important;
	margin: 4cqi 0 0 !important;
	padding: 0 !important;
}

/* Below the desktop layout the map column stacks under the figures: the three
   tiles go side by side. */
@media only screen and (max-width: 999px) {
	.ecr-map-stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		max-width: 560px;
		gap: 10px;
	}
}