/* =============================================================================
   ECR — Our History (/our-history/), 01/10/2026

   The page is ordinary WPBakery content: one Row per block, the text in Text
   Blocks, so the client edits, duplicates and reorders it in the builder.
   This file only lays those rows out. Every rule is scoped to the row class
   `ecr-history` (Row → Extra Class Name), so no other page can be touched,
   and a row the client duplicates carries the class — and the styling — with
   it. Loaded only on a page whose content uses that class
   (inc/history/history.php).

     ecr-history ecr-history--head    the shared "Who we are" heading (H1)
     ecr-history ecr-history--intro   "A Different Vision for Europe"
     ecr-history ecr-history--step    one year of the timeline: 1/4 + 3/4
     ecr-history ecr-history--close   the two closing sections

   THE TIMELINE is a rail: the left column holds the year, the right column
   the text, with the line and the dot drawn in the gap between them — never
   under a word. Both are pure decoration (pseudo-elements), and the year in
   the left column repeats the year the text already names, so it is marked
   aria-hidden in the content and a screen reader reads each year once.
   No JavaScript; nothing is hidden or animated.
   ========================================================================== */

.wpb_row.ecr-history {
	--oh-primary: var(--ecr-primary, #1866A5);
	--oh-primary-dark: var(--ecr-primary-dark, #114C7D);
	--oh-line: #D5E1EC;
	--oh-max: 1000px;      /* rail + gap + a ~776px reading column */
	--oh-rail: 168px;      /* the year column */
	--oh-gap: 56px;        /* the line runs down the middle of this */
	--oh-step: 44px;       /* between two years */
	--oh-dot: 14px;
	--oh-year-lh: 36px;    /* the dot sits on the year's first line */
	margin-bottom: 0;
}

.wpb_row.ecr-history--intro,
.wpb_row.ecr-history--step,
.wpb_row.ecr-history--close {
	max-width: var(--oh-max);
	margin-left: auto;
	margin-right: auto;
}

/* Text blocks: no stray bottom margin from WPBakery, Salient's paragraph
   rhythm kept. */
.wpb_row.ecr-history .wpb_text_column {
	margin-bottom: 0;
}

.wpb_row.ecr-history .wpb_text_column > :last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

/* --- headings --------------------------------------------------------------- */

.wpb_row.ecr-history h2 {
	margin: 0 0 18px;
	padding: 0;
	font-size: 34px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--oh-primary);
}

.wpb_row.ecr-history h3 {
	margin: 4px 0 12px;
	padding: 0;
	font-size: 20px;
	line-height: 28px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--oh-primary);
}

/* The client's bold, as in the Word file — the same ink as on Achievements. */
.wpb_row.ecr-history strong {
	font-weight: 700;
	color: var(--ecr-text, #1E293B);
}

.wpb_row.ecr-history .wpb_text_column a {
	color: var(--oh-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.wpb_row.ecr-history .wpb_text_column a:hover {
	color: var(--oh-primary-dark);
}

.wpb_row.ecr-history .wpb_text_column a:focus-visible {
	outline: 2px solid var(--oh-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* --- introduction and closing sections ---------------------------------------- */

/* Their text starts on the same left edge as the timeline's text. */
.wpb_row.ecr-history--intro,
.wpb_row.ecr-history--close {
	padding-left: calc(var(--oh-rail) + var(--oh-gap)) !important; /* beats WPBakery's inline row padding */
}

.wpb_row.ecr-history--intro {
	padding-top: 8px !important;
	padding-bottom: 48px !important;
}

.wpb_row.ecr-history--close {
	padding-top: 8px !important;
	padding-bottom: 40px !important;
}

/* The step before the first closing section ends on its dot; give the
   section the same air the introduction has above the timeline. */
.wpb_row.ecr-history--step + .wpb_row.ecr-history--close {
	padding-top: 12px !important;
}

/* The last block before the footer. */
.wpb_row.ecr-history:last-child {
	padding-bottom: 64px !important;
}

/* --- the timeline --------------------------------------------------------------- */

.wpb_row.ecr-history--step {
	position: relative;
	padding-top: 0 !important;
	padding-bottom: var(--oh-step) !important;
}

.wpb_row.ecr-history--step > .row_col_wrap_12 {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
}

.wpb_row.ecr-history--step > .row_col_wrap_12 > .wpb_column {
	float: none;
	margin: 0 !important;
}

.wpb_row.ecr-history--step > .row_col_wrap_12 > .wpb_column:first-child {
	flex: 0 0 var(--oh-rail);
	width: var(--oh-rail) !important;
}

.wpb_row.ecr-history--step > .row_col_wrap_12 > .wpb_column:last-child {
	flex: 1 1 auto;
	width: auto !important;
	min-width: 0;
	margin-left: var(--oh-gap) !important;
}

/* The year: whatever the left column holds, so a new Text Block there needs
   no class. */
.wpb_row.ecr-history--step > .row_col_wrap_12 > .wpb_column:first-child p {
	margin: 0;
	padding: 0;
	font-size: 28px;
	line-height: var(--oh-year-lh);
	font-weight: 700;
	color: var(--oh-primary);
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap; /* "2011–2012" stays one label */
}

/* A step that opens with a paragraph (2005, 2006): its first line on the
   year's line. */
.wpb_row.ecr-history--step > .row_col_wrap_12 > .wpb_column:last-child .wpb_text_column > p:first-child {
	margin-top: 2px;
}

/* The line, in the middle of the gap; the dot on the year. */
.wpb_row.ecr-history--step::before,
.wpb_row.ecr-history--step::after {
	content: "";
	display: block; /* Salient's row clearfix makes it a zero-height table */
	position: absolute;
	pointer-events: none;
}

.wpb_row.ecr-history--step::before {
	left: calc(var(--oh-rail) + var(--oh-gap) / 2 - 1px);
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--oh-line);
}

.wpb_row.ecr-history--step::after {
	left: calc(var(--oh-rail) + var(--oh-gap) / 2 - var(--oh-dot) / 2);
	top: calc(var(--oh-year-lh) / 2 - var(--oh-dot) / 2);
	width: var(--oh-dot);
	height: var(--oh-dot);
	box-sizing: border-box;
	border: 3px solid var(--oh-primary);
	border-radius: 50%;
	background: #fff;
}

/* The line starts at the first dot and stops at the last one. */
.wpb_row:not(.ecr-history--step) + .wpb_row.ecr-history--step::before {
	top: calc(var(--oh-year-lh) / 2);
}

.wpb_row.ecr-history--step:not(:has(+ .wpb_row.ecr-history--step))::before {
	bottom: auto;
	height: calc(var(--oh-year-lh) / 2);
}

.wpb_row:not(.ecr-history--step) + .wpb_row.ecr-history--step:not(:has(+ .wpb_row.ecr-history--step))::before {
	display: none; /* a timeline of one year has no line */
}

/* --- tablet ------------------------------------------------------------------------- */

@media only screen and (max-width: 999px) {
	.wpb_row.ecr-history {
		--oh-rail: 140px;
		--oh-gap: 44px;
		--oh-step: 40px;
		--oh-year-lh: 32px;
	}

	.wpb_row.ecr-history h2 { font-size: 28px; }

	.wpb_row.ecr-history--step > .row_col_wrap_12 > .wpb_column:first-child p {
		font-size: 24px;
	}
}

/* --- phone: one column, in reading order — year, then its text ---------------------- */

@media only screen and (max-width: 690px) {
	.wpb_row.ecr-history {
		--oh-gap: 32px;        /* the rail is now the left edge */
		--oh-step: 32px;
		--oh-year-lh: 30px;
	}

	.wpb_row.ecr-history h2 { font-size: 24px; margin-bottom: 14px; }
	.wpb_row.ecr-history h3 { font-size: 18px; line-height: 26px; margin-top: 2px; }

	.wpb_row.ecr-history--intro,
	.wpb_row.ecr-history--close {
		padding-left: 0 !important;
	}

	.wpb_row.ecr-history--intro { padding-bottom: 36px !important; }

	.wpb_row.ecr-history--step > .row_col_wrap_12 {
		flex-direction: column;
		padding-left: var(--oh-gap);
	}

	.wpb_row.ecr-history--step > .row_col_wrap_12 > .wpb_column:first-child,
	.wpb_row.ecr-history--step > .row_col_wrap_12 > .wpb_column:last-child {
		flex: 0 0 auto;
		width: 100% !important;
		margin-left: 0 !important;
	}

	.wpb_row.ecr-history--step > .row_col_wrap_12 > .wpb_column:first-child p {
		font-size: 22px;
		text-align: left;
		margin-bottom: 6px;
	}

	.wpb_row.ecr-history--step::before {
		left: calc(var(--oh-dot) / 2 - 1px);
	}

	.wpb_row.ecr-history--step::after {
		left: 0;
	}
}