/*
 * EU1144 Campaign — INDEX DEVICES.
 *
 * The four components that carry every "one thing leads to another" moment on
 * the site: the explore link, the typographic index, the ledger and the
 * continue marker. Loaded on EVERY route, because the campaign gateway uses
 * three of them and every inner route uses all four.
 *
 * These exist to make one failure mode impossible. The standard way a portal
 * degrades is that every index becomes a card grid: a background fill, padding
 * on four sides, a border or a shadow, a thumbnail, a chevron and a "Learn
 * more" pill. NOTHING HERE CAN BECOME THAT, because none of these components
 * has a container. They are rules and type on the page ground.
 *
 * House rules, enforced here and not by convention:
 *   - zero background fills on any row
 *   - zero radius, zero shadow (globally reset in base.css)
 *   - hairlines only
 *   - the row's TITLE is the only link; never the whole row
 *   - a marker colour appears only on an element <=4px in its constrained
 *     dimension, and never as the only carrier of meaning
 */

/* ------------------------------------------------------- the explore link -- */

/*
 * The site's only onward-link device. It carries the DESTINATION'S OWN NAME,
 * never "Learn more", "Read more", "Discover more" or "View all" — those are
 * the phrases that make an index read as a template rather than as a document.
 *
 * A text link, not a button. core/button and core/buttons are deliberately
 * absent from the editor allowlist so a pill CTA cannot be added by hand.
 */
.eu-explore {
	margin: var(--wp--preset--spacing--32, 32px) 0 0;
	font-family: var(--wp--preset--font-family--text, inherit);
	font-size: var(--wp--preset--font-size--eyebrow, 0.8125rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.eu-explore a {
	color: var(--eu-ink);
	text-decoration-line: underline;
	text-decoration-color: var(--eu-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
	/* >=44px target without a box: padding on the inline element, not a fill. */
	display: inline-block;
	padding-block: 12px;
}

.eu-explore a:hover,
.eu-explore a:focus-visible {
	text-decoration-thickness: 2px;
}

.eu-section--dark .eu-explore a,
.eu-plate--dark .eu-explore a {
	color: var(--eu-page);
}

/* The marker sits before the label as a 4px rule, never as a bullet or icon. */
.eu-explore--marker a::before {
	content: "";
	display: inline-block;
	inline-size: 24px;
	block-size: 4px;
	margin-inline-end: 12px;
	vertical-align: 0.2em;
	background-color: var(--eu-marker, var(--eu-accent));
}

/* -------------------------------------------------- the typographic index -- */

.eu-index__wrap {
	margin-block-start: var(--wp--preset--spacing--64, 64px);
}

.eu-index__heading {
	margin-block-end: var(--wp--preset--spacing--24, 24px);
}

.eu-index {
	border-top: 1px solid var(--eu-hair-strong);
}

.eu-index__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--4, 4px) var(--wp--preset--spacing--24, 24px);
	align-items: baseline;
	border-bottom: 1px solid var(--eu-hair-strong);
	padding-block: var(--wp--preset--spacing--16, 16px);
	/* 72px minimum below 1024px; 88px at and above it. */
	min-block-size: 72px;
	align-content: center;
}

/* The 4px marker. 64px long, and it is the only place this hue appears here. */
.eu-index__marker {
	display: block;
	inline-size: 64px;
	block-size: 4px;
	background-color: var(--eu-marker, var(--eu-accent));
	grid-column: 1;
}

.eu-index__name {
	margin: 0;
	grid-column: 1;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: var(--wp--preset--font-size--h3, 1.25rem);
	font-weight: 500;
	line-height: 1.25;
	max-width: none;
}

.eu-index__name a {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	/* The tap target is the TITLE, not the row: a whole-row link produces an
	   unusable accessible name. */
	display: inline-block;
	min-block-size: 44px;
	padding-block: 10px;
}

.eu-index__name a:hover,
.eu-index__name a:focus-visible {
	text-decoration-color: var(--eu-accent);
}

.eu-index__standfirst {
	margin: 0;
	grid-column: 1;
	font-size: var(--wp--preset--font-size--body, 1.0625rem);
	line-height: 1.5;
	max-width: 52ch;
}

/* The approved seasonality span, drawn from the same array as the calendar. */
.eu-index__meta {
	margin: 0;
	grid-column: 1;
	font-family: var(--wp--preset--font-family--text, inherit);
	font-size: var(--wp--preset--font-size--eyebrow, 0.8125rem);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.75;
}

@media (min-width: 1024px) {
	.eu-index__row {
		grid-template-columns: 64px minmax(0, 14rem) minmax(0, 1fr) auto;
		gap: var(--wp--preset--spacing--24, 24px) var(--wp--preset--spacing--32, 32px);
		align-items: center;
		min-block-size: 88px;
	}

	.eu-index__marker {
		grid-column: 1;
	}

	.eu-index__name {
		grid-column: 2;
	}

	.eu-index__standfirst {
		grid-column: 3;
	}

	.eu-index__meta {
		grid-column: 4;
		text-align: end;
		white-space: nowrap;
	}
}

/* ---------------------------------------------------------- the ledger ---- */

.eu-ledger__heading {
	margin-block-end: var(--wp--preset--spacing--24, 24px);
}

.eu-ledger .wp-block-post-template,
.eu-ledger__rows {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--eu-hair-strong);
	gap: 0;
}

.eu-ledger .wp-block-post-template > li {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--8, 8px) var(--wp--preset--spacing--32, 32px);
	align-content: center;
	border-bottom: 1px solid var(--eu-hair-strong);
	padding-block: var(--wp--preset--spacing--24, 24px);
	/* 72px minimum on narrow viewports; ~120px at and above 1024px. */
	min-block-size: 72px;
	margin: 0;
}

/*
 * The hanging column: the day numeral above the month and year. FIXED at 88px
 * and never content-driven, so it reserves its own space and a two-digit day
 * cannot shift the row.
 */
.eu-ledger__hang {
	grid-column: 1;
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: var(--wp--preset--spacing--8, 8px);
}

.eu-ledger__day {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: var(--wp--preset--font-size--h3, 1.25rem);
	font-weight: 500;
	line-height: 1;
	/*
	 * INK, never the accent. A large numeral in --accent measures 2.60:1 on
	 * --page, which fails even the 3:1 large-text threshold.
	 */
	color: var(--eu-ink);
	margin: 0;
}

.eu-ledger__when {
	font-family: var(--wp--preset--font-family--text, inherit);
	font-size: var(--wp--preset--font-size--eyebrow, 0.8125rem);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0;
	opacity: 0.75;
}

.eu-ledger__body {
	grid-column: 1;
}

/*
 * The category is carried HERE and nowhere else. No colour coding, no badge, no
 * coloured left border: with four categories and five product markers already
 * in play, a fifth colour system would breach the palette ceiling.
 */
.eu-ledger__cat {
	font-family: var(--wp--preset--font-family--text, inherit);
	font-size: var(--wp--preset--font-size--eyebrow, 0.8125rem);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 var(--wp--preset--spacing--8, 8px);
	opacity: 0.75;
}

.eu-ledger__cat a {
	color: inherit;
	text-decoration: none;
}

.eu-ledger__title {
	margin: 0 0 var(--wp--preset--spacing--8, 8px);
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: var(--wp--preset--font-size--h3, 1.25rem);
	font-weight: 500;
	line-height: 1.25;
	max-width: 44ch;
}

.eu-ledger__title a {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	display: inline-block;
	min-block-size: 44px;
	padding-block: 8px;
}

.eu-ledger__title a:hover,
.eu-ledger__title a:focus-visible {
	text-decoration-color: var(--eu-accent);
}

.eu-ledger__standfirst {
	margin: 0;
	font-size: var(--wp--preset--font-size--body, 1.0625rem);
	line-height: 1.5;
	/* One line of standfirst. Never a full excerpt block. */
	max-width: 68ch;
}

.eu-ledger__standfirst p {
	margin: 0;
}

/*
 * The thumbnail column is RESERVED WHETHER OR NOT A THUMBNAIL EXISTS, so a
 * mixed archive cannot shift row to row. Dropped entirely below 768px.
 */
.eu-ledger__thumb {
	display: none;
	grid-column: 3;
	margin: 0;
}

.eu-ledger__thumb img {
	display: block;
	inline-size: 200px;
	block-size: 133px;
	object-fit: cover;
}

@media (min-width: 768px) {
	.eu-ledger .wp-block-post-template > li {
		grid-template-columns: 88px minmax(0, 1fr) 200px;
		align-items: start;
		min-block-size: 120px;
	}

	.eu-ledger__hang {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--4, 4px);
	}

	.eu-ledger__day {
		font-size: var(--wp--preset--font-size--h3, 1.75rem);
	}

	.eu-ledger__body {
		grid-column: 2;
	}

	.eu-ledger__thumb {
		display: block;
	}
}

/* An undated ledger hangs a marker and a name instead of a date. */
.eu-ledger--undated .eu-ledger__hang {
	flex-direction: column;
	align-items: flex-start;
}

/* -------------------------------------------------- the forthcoming strip -- */

/*
 * The archive's one forward-looking object, and what turns a news list into a
 * PROGRAMME. Present only when future-dated items exist and absent entirely
 * otherwise — no editor decision required, it appears and disappears from the
 * dates alone.
 */
.eu-forthcoming__heading {
	margin-block-end: var(--wp--preset--spacing--16, 16px);
}

.eu-forthcoming .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--eu-hair-strong);
	gap: 0;
}

.eu-forthcoming .wp-block-post-template > li {
	margin: 0;
	border-bottom: 1px solid var(--eu-hair-strong);
}

.eu-forthcoming__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--4, 4px) var(--wp--preset--spacing--32, 32px);
	padding-block: var(--wp--preset--spacing--12, 12px);
	align-items: baseline;
}

.eu-forthcoming__when {
	margin: 0;
	font-family: var(--wp--preset--font-family--text, inherit);
	font-size: var(--wp--preset--font-size--eyebrow, 0.8125rem);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.eu-forthcoming__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: var(--wp--preset--font-size--lead, 1.1875rem);
	font-weight: 500;
	line-height: 1.3;
}

.eu-forthcoming__title a {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-underline-offset: 4px;
	display: inline-block;
	min-block-size: 44px;
	padding-block: 10px;
}

.eu-forthcoming__title a:hover,
.eu-forthcoming__title a:focus-visible {
	text-decoration-color: var(--eu-accent);
}

.eu-forthcoming__cat {
	margin: 0;
	font-family: var(--wp--preset--font-family--text, inherit);
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	opacity: 0.75;
}

.eu-forthcoming__cat a {
	color: inherit;
	text-decoration: none;
}

@media (min-width: 768px) {
	.eu-forthcoming__row {
		grid-template-columns: 10rem minmax(0, 1fr) 12rem;
		align-items: center;
	}
}

/* -------------------------------------------------- the continue marker ---- */

/*
 * It replaces every "related posts" card block on the site, and on the product
 * pages it gives the portal's most important content set a SPINE: five leaves
 * hanging off a dropdown become a readable sequence in the campaign's own
 * approved order. It introduces no new component — it is the index row with a
 * label above the name — and every value in it is approved copy.
 */
.eu-continue {
	border-top: 1px solid var(--eu-hair-strong);
}

.eu-continue__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--4, 4px) var(--wp--preset--spacing--32, 32px);
	border-bottom: 1px solid var(--eu-hair-strong);
	padding-block: var(--wp--preset--spacing--24, 24px);
	min-block-size: 72px;
	align-content: center;
}

.eu-continue__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--text, inherit);
	font-size: var(--wp--preset--font-size--eyebrow, 0.8125rem);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.75;
}

.eu-continue__marker {
	display: block;
	inline-size: 64px;
	block-size: 4px;
	background-color: var(--eu-marker, var(--eu-accent));
}

.eu-continue__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: var(--wp--preset--font-size--h3, 1.25rem);
	font-weight: 500;
	line-height: 1.25;
	max-width: none;
}

.eu-continue__title a {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	display: inline-block;
	min-block-size: 44px;
	padding-block: 10px;
}

.eu-continue__title a:hover,
.eu-continue__title a:focus-visible {
	text-decoration-color: var(--eu-accent);
}

.eu-continue__standfirst {
	margin: 0;
	font-size: var(--wp--preset--font-size--body, 1.0625rem);
	line-height: 1.5;
	max-width: 52ch;
}

@media (min-width: 768px) {
	.eu-continue__row {
		grid-template-columns: 10rem 64px minmax(0, 1fr);
		align-items: center;
		gap: var(--wp--preset--spacing--32, 32px);
	}

	.eu-continue__row > .eu-continue__label {
		grid-column: 1;
		grid-row: 1;
	}

	.eu-continue__marker {
		grid-column: 2;
		grid-row: 1;
	}

	.eu-continue__title {
		grid-column: 3;
		grid-row: 1;
	}

	.eu-continue__standfirst {
		grid-column: 3;
		grid-row: 2;
	}
}

.eu-section--dark .eu-continue,
.eu-section--dark .eu-continue__row,
.eu-section--dark .eu-index,
.eu-section--dark .eu-index__row {
	border-color: color-mix(in srgb, var(--eu-page) 14%, transparent);
}