/* =============================================================================
   ECR — Achievements / Priorities: letter photograph, cover art, section index

   Loaded only on /achievements-2019-2024/ and /priorities/, and depends on
   css/documents.css for the `--doc-*` tokens the download band already
   defines. Nothing here is global and nothing restyles the approved prose.
   ========================================================================== */

/* --- the letter and its photograph, side by side -------------------------- */

/* Two columns on desktop: the letter carries the page, so it takes about two
   thirds and the photograph about a third. `align-items: flex-start` tops the
   two off together and — crucially — stops the flex default `stretch` from
   pulling the photograph down to the letter's height. */
.ecr-docp-letter {
	display: flex;
	align-items: flex-start;
	gap: 2.5rem;
	margin: 0 0 2rem;
}

.ecr-docp-letter__text {
	flex: 1 1 auto;
	min-width: 0;
}

/* The letter's own last paragraph already carries a bottom margin; this stops
   a double gap before whatever follows. */
.ecr-docp-letter__text > :last-child { margin-bottom: 0; }

/* 31% of the row, capped so it never becomes a banner on a very wide screen.
   `flex-shrink: 0` keeps it from being squeezed by a long unbroken line in the
   letter.

   THE CAP IS 390px, NOT 320px. The brief asks for roughly 65-70% letter and
   30-35% photograph. At the 1245px content width a 320px cap resolved to 25.7%
   — under the range — because the cap, not the percentage, was deciding the
   width. 390px lets the 31% stand at normal desktop widths (1245px -> 386px
   photo, 66% letter) and still stops it growing without limit.

   NOTHING IS UPSCALED: both letter photographs are 800px wide at source
   (800x761 and 800x800), so 390px is well within the original and stays sharp
   even on a 2x display. */
.ecr-docp-letter__figure {
	flex: 0 0 31%;
	max-width: 390px;
	margin: 0;
}

/* `height: auto` against the explicit width is what preserves the photograph's
   own proportions — it is never stretched to match the letter. */
.ecr-docp-letter__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

/* --- the section index ---------------------------------------------------- */

.ecr-docp-index {
	--docp-primary: var(--ecr-primary, #1866A5);
	--docp-border: var(--ecr-border, #E2E8F0);
	--docp-muted: #667085;

	box-sizing: border-box;
	margin: 0 0 2.5rem;
	padding: 1.25rem 1.5rem;
	background: #F8FAFC;
	border: 1px solid var(--docp-border);
	border-radius: 15px;
}

.ecr-docp-index__summary {
	display: flex;
	align-items: baseline;
	gap: .6rem;
	flex-wrap: wrap;
	cursor: pointer;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--docp-primary);
}

.ecr-docp-index__summary::-webkit-details-marker { display: none; }

/* Own marker, so the control reads as a control on both open and closed. */
.ecr-docp-index__summary::after {
	content: "";
	width: .5rem;
	height: .5rem;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
}

.ecr-docp-index__details[open] > .ecr-docp-index__summary::after {
	transform: rotate(-135deg);
}

/* Two columns of links at desktop: fifteen section titles in one column is a
   very long list before the prose starts. */
.ecr-docp-index__list {
	margin: 1rem 0 0;
	padding: 0 0 0 1.4rem;
	columns: 2;
	column-gap: 2.5rem;
	font-size: .9375rem;
	line-height: 1.45;
}

.ecr-docp-index__list li {
	margin: 0 0 .5rem;
	break-inside: avoid;
}

.ecr-docp-index__list a {
	color: var(--ecr-text, #1E293B);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}

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

/* --- landing under the fixed header -------------------------------------- */

/* Salient's header is fixed, so an anchor jump would otherwise put the
   heading underneath it. `scroll-margin-top` is the modern, script-free fix
   and it also applies to keyboard focus, not just the click. The value is the
   header height plus the top bar plus a little air. */
.ecr-docp-h2,
.ecr-doc,
.ecr-docp-index {
	/* The condensed header (85px) + 20px, the value the index script
	   (ecr_docp_anchor_script) measures; this is what applies without
	   JavaScript and to a URL opened with the #anchor. */
	scroll-margin-top: 105px;
}

/* A signed-in editor also has the admin bar fixed above the header: 32px,
   46px between 601 and 782px, and not fixed below 601px. */
body.admin-bar .ecr-docp-h2,
body.admin-bar .ecr-doc,
body.admin-bar .ecr-docp-index { scroll-margin-top: 137px; }

@media only screen and (max-width: 782px) {
	body.admin-bar .ecr-docp-h2,
	body.admin-bar .ecr-doc,
	body.admin-bar .ecr-docp-index { scroll-margin-top: 150px; }
}

@media only screen and (max-width: 600px) {
	body.admin-bar .ecr-docp-h2,
	body.admin-bar .ecr-doc,
	body.admin-bar .ecr-docp-index { scroll-margin-top: 105px; }
}

/* --- one cover beside the download heading -------------------------------- */

.ecr-doc__header {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
}

.ecr-doc__headertext { min-width: 0; }

/* 100px sits inside the 80-110px the brief asks for. `flex-shrink: 0` holds
   it at that width, and `height: auto` keeps the cover's own proportions. */
.ecr-doc__headercover {
	flex: 0 0 100px;
	max-width: 100px;
}

.ecr-doc__headercoverimg {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 1px 6px rgba(15, 23, 42, .18);
}

/* --- the download cards, now that they hold no image --------------------- */

/* Without a cover the card is three short lines, so the generous padding and
   the tall preview slot are no longer earning their space. Tightened here
   rather than in css/documents.css so the change is scoped to these two
   pages. The tap target stays comfortable: ~88px tall on a phone. */
.ecr-doc .ecr-doc-card {
	padding: .95rem 1.15rem;
	gap: .15rem;
}

.ecr-doc .ecr-doc-grid { gap: .7rem; }

.ecr-doc .ecr-doc-card__cue { padding-top: .5rem; }

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

@media (max-width: 900px) {
	.ecr-docp-index__list { columns: 1; }
}

/* One column below 900px: the letter would be too narrow beside a 32% image.
   Source order already gives letter-then-photo, so nothing is reordered. */
@media (max-width: 900px) {
	.ecr-docp-letter {
		display: block;
		margin-bottom: 1.75rem;
	}
	.ecr-docp-letter__figure {
		max-width: 300px;
		margin: 1.5rem auto 0;   /* compact and centred, not a full screen */
	}
}

@media (max-width: 690px) {
	.ecr-docp-index {
		padding: 1rem 1.1rem;
		margin-bottom: 2rem;
	}
	.ecr-docp-index__list { font-size: .875rem; }
	.ecr-docp-letter__figure { max-width: 260px; }

	/* The heading stacks so the title is not squeezed beside the cover. */
	.ecr-doc__header {
		gap: 1rem;
		align-items: center;
	}
	.ecr-doc__headercover { flex-basis: 78px; max-width: 78px; }
}

@media (prefers-reduced-motion: reduce) {
	.ecr-docp-index__summary::after,
	.ecr-docp-index__list a { transition: none; }
}

/* =============================================================================
   CLIENT FEEDBACK, SEPTEMBER 2026 — Achievements and Priorities
   "The current structure is fine!" — nothing is moved; only sizes, widths and
   the Priorities subtitles change.
   ========================================================================== */

/* "Make smaller the 'language download' blocks - put all languages in one
   row. If needed make text smaller." Six compact cards in one row where the
   width allows; three, then two, below that — never forced into one line on a
   phone. Every language and every link is unchanged. */
.ecr-doc-grid {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: .6rem;
}

.ecr-doc-card {
	padding: .7rem .85rem;
	border-radius: 12px;
	gap: .1rem;
}

.ecr-doc-card__lang {
	font-size: .9375rem;
}

.ecr-doc-card__meta {
	font-size: .75rem;
}

.ecr-doc-card__cue {
	padding-top: 4px !important;
	font-size: .75rem;
}

@media (max-width: 1099px) {
	.ecr-doc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.ecr-doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
}

/* "Make body text block narrower! it is way too long to read. Put big margins
   left and right." The long text sat in the full 1245px column (~130
   characters a line). The sections and the "On this page" index now share an
   820px reading column, centred; the download band and the letter with its
   photograph keep their width. */
.container.main-content > .row > p,
.container.main-content > .row > h2,
.container.main-content > .row > h3,
.container.main-content > .row > h5,
.container.main-content > .row > ul,
.container.main-content > .row > ol,
.container.main-content > .row > blockquote,
.container.main-content > .row > .ecr-docp-index {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}

/* Section headings: ordinary bold, not extra bold (feedback "titles"). */
.ecr-docp-h2 {
	font-weight: 700 !important;
	color: #444444;
}

/* "Put all blue subtitles on the 'priorities' (there are on the existing
   website)": the <h5> subtitles restored from ecrgroup.eu/priorities by the
   September 2026 migration. */
h5.ecr-docp-sub {
	color: var(--ecr-primary, #1866A5);
	font-size: 1.25rem;
	line-height: 1.35;
	font-weight: 600;
	margin: 1.6rem auto .6rem;
	letter-spacing: 0;
	text-transform: none;
}

/* The client's bold words in the index entries. */
.ecr-docp-index__list a strong {
	font-weight: 700;
}

/* The same bold segments on the section headings (client feedback, 29
   September 2026). On a heading that carries them the rest of the line drops
   to regular, as in the index, so the emphasis is visible; headings without a
   segment keep the plain bold above. */
.ecr-docp-h2.ecr-docp-h2--emph {
	font-weight: 400 !important;
}

.ecr-docp-h2.ecr-docp-h2--emph strong {
	font-weight: 700;
	color: inherit;
}