/*
 * C4E Forum refreshed theme layer.
 * Global tokens live in theme.json; this file covers composed Gutenberg patterns.
 */

:root {
	--c4e-ink: var(--wp--preset--color--contrast, #0b1720);
	--c4e-muted: var(--wp--preset--color--muted, #53616d);
	--c4e-cyan: var(--wp--preset--color--accent-1, #10aee5);
	--c4e-navy: var(--wp--preset--color--accent-2, #002b49);
	--c4e-pale: var(--wp--preset--color--accent-3, #eef8fd);
	--c4e-border: var(--wp--preset--color--accent-4, #cfeaf6);
	--c4e-coral: var(--wp--preset--color--accent-5, #f1643f);
	--c4e-soft-coral: var(--wp--preset--color--accent-6, #fff1ec);
	/* C4E Champion Award sub-brand — warm golden yellow + site navy for text
	   (mirrors the award poster). The bright yellow is for fills/chips/bars only;
	   small text on white uses --c4e-champion-deep, which clears AA (≈5.9:1). */
	--c4e-champion: var(--wp--preset--color--champion, #f5ce46);
	--c4e-champion-soft: var(--wp--preset--color--champion-soft, #fdf4d3);
	--c4e-champion-deep: #8a5a00;
	--c4e-max-wide: var(--wp--style--global--wide-size, 1120px);
	--c4e-radius: 4px;

	/* Motion system — one vocabulary the whole site inherits. */
	--c4e-dur-fast: 0.18s;
	--c4e-dur: 0.32s;
	--c4e-dur-slow: 0.6s;
	--c4e-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--c4e-lift: 0 12px 30px rgba(0, 43, 73, 0.12);
}

body {
	color: var(--c4e-ink);
	background: #fff;
	text-rendering: optimizeLegibility;
}

.wp-site-blocks {
	background: #fff;
}

.wp-block-post-content > * + * {
	margin-block-start: 1.5rem;
}

.wp-block-post-content > .alignfull + .alignfull {
	margin-block-start: 0;
}

a {
	text-underline-offset: 0.18em;
}

/* The editor's inline "Highlight" format emits a <mark> element, which every
   browser gives a default yellow background. Here it's used only to recolour
   text (e.g. the homepage "Not Your Average Conference" heading uses
   <mark class="has-accent-1-color">), so suppress that default highlight.
   An author who deliberately picks a highlight colour still gets it: the
   editor writes that background inline, and inline styles override this rule. */
mark {
	background-color: transparent;
}

.wp-element-button,
.wp-block-button__link {
	border-radius: var(--c4e-radius);
	box-shadow: none;
	transition: background-color var(--c4e-dur-fast) var(--c4e-ease), border-color var(--c4e-dur-fast) var(--c4e-ease), color var(--c4e-dur-fast) var(--c4e-ease), transform var(--c4e-dur-fast) var(--c4e-ease);
}

.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button .wp-block-button__link.has-background.has-accent-3-background-color {
	border: 1px solid var(--c4e-border);
	color: var(--c4e-navy);
}

/* Primary CTA: white on navy (14.6:1), hover flips to navy on cyan (5.7:1).
   The old navy-on-cyan read muddy and its darkened hover failed AA (4.46:1). */
.c4e-button-primary .wp-block-button__link,
.wp-block-button.c4e-button-primary .wp-block-button__link {
	background: var(--c4e-navy);
	color: #fff;
}

.c4e-button-primary .wp-block-button__link:hover,
.c4e-button-primary .wp-block-button__link:focus-visible,
.wp-block-button.c4e-button-primary .wp-block-button__link:hover,
.wp-block-button.c4e-button-primary .wp-block-button__link:focus-visible {
	background: var(--c4e-cyan);
	color: var(--c4e-navy);
	transform: translateY(-1px);
}

/* The header "Subscribe" CTA is the one button kept deliberately coral (it
   also uses .c4e-button-primary, now light blue). The selector carries an
   extra .wp-block-button class (specificity 0,4,0) so it always wins over both
   the base .c4e-button-primary rule AND any body-scoped re-skin — e.g. the
   Champion Award pages recolour .c4e-button-primary to yellow, and Subscribe
   must stay coral on those pages too. */
.c4e-header .c4e-header__cta .wp-block-button .wp-block-button__link {
	background: var(--c4e-coral);
	color: #fff;
}

.c4e-header .c4e-header__cta .wp-block-button .wp-block-button__link:hover,
.c4e-header .c4e-header__cta .wp-block-button .wp-block-button__link:focus-visible {
	background: color-mix(in srgb, var(--c4e-coral) 86%, #000);
	color: #fff;
	transform: translateY(-1px);
}

.c4e-button-secondary .wp-block-button__link,
.wp-block-button.c4e-button-secondary .wp-block-button__link {
	background: var(--c4e-pale);
	border: 1px solid var(--c4e-border);
	color: var(--c4e-navy);
}

.c4e-button-secondary .wp-block-button__link:hover,
.wp-block-button.c4e-button-secondary .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--c4e-pale) 86%, var(--c4e-cyan));
	border-color: var(--c4e-cyan);
	color: var(--c4e-navy);
}

.c4e-section {
	padding-block: clamp(3rem, 6vw, 6rem);
}

.c4e-section--narrow {
	max-width: 820px;
}

.c4e-eyebrow {
	color: var(--c4e-cyan);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Forum-2025 retrospective page (5677) folds the homepage `.c4e-home` bands in
   mid-page; their headings use `.c4e-home h2` (max 2rem). The surrounding
   event-page wrappers fall back to the larger theme.json h2 (x-large, up to
   2.5rem), so two heading sizes clashed on one page. Match the event-page
   headings to the smaller band size ("C4E Forum 2025 in numbers") for one
   consistent h2 scale. Font metrics only — NOT the `.c4e-home` margin reset,
   which would collapse the intro's multi-paragraph spacing. */
.c4e-forum-2025 h2,
.c4e-forum-2025-partners h2,
.c4e-forum-2018 h2,
.c4e-webinar-2020 h2,
.c4e-webinar-2020-partners h2,
.c4e-forum-2023 h2,
.c4e-forum-2023-partners h2,
.c4e-forum-2021 h2,
.c4e-forum-2021-partners h2,
.c4e-forum-2016 h2,
.c4e-workshop h2,
.c4e-plenaries h2,
.c4e-panels h2,
.c4e-knowledge h2,
.c4e-poster h2,
.c4e-preconf h2,
.c4e-venue h2,
.c4e-inforeg h2 {
	font-size: clamp(1.55rem, 2.2vw, 2rem);
	line-height: 1.15;
}

/* Header */
.c4e-header {
	border-bottom: 1px solid rgba(207, 234, 246, 0.9);
	box-shadow: 0 1px 0 rgba(11, 23, 32, 0.02);
	position: sticky;
	top: 0;
	z-index: 20;
	transition: box-shadow var(--c4e-dur) var(--c4e-ease);
}

.c4e-header.is-stuck {
	box-shadow: 0 6px 24px rgba(0, 43, 73, 0.1);
}

.c4e-header .c4e-header__bar {
	gap: clamp(1rem, 3vw, 2.5rem);
	min-height: 70px;
}

.c4e-header .custom-logo,
.c4e-footer .custom-logo {
	display: block;
	height: auto;
}

.c4e-header .wp-block-site-logo {
	flex: 0 0 auto;
}

.c4e-header .wp-block-navigation {
	color: var(--c4e-ink);
	font-family: var(--wp--preset--font-family--open-sans);
	font-size: 0.82rem;
	font-weight: 600;
}

.c4e-header .wp-block-navigation-item__content {
	color: var(--c4e-ink);
	text-decoration: none;
}

.c4e-header .wp-block-navigation-item__content:hover,
.c4e-header .wp-block-navigation-item__content:focus-visible {
	color: var(--c4e-cyan);
}

.c4e-header .wp-block-navigation__submenu-container {
	border: 1px solid var(--c4e-border);
	border-radius: var(--c4e-radius);
	box-shadow: 0 14px 35px rgba(0, 43, 73, 0.12);
	padding: 0.45rem;
}

/* Align nested submenus with the top of the parent container */
.c4e-header .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child {
	position: static;
}
.c4e-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	top: -1px !important; /* Align perfectly with the border */
	left: 100% !important;
	right: auto !important;
}


.c4e-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 0.7rem;
}

.c4e-header .wp-block-button__link {
	white-space: nowrap;
}

/* Event page hero pattern */
.c4e-hero-page {
	min-height: clamp(390px, 48vw, 520px);
	position: relative;
}

.c4e-hero-page .wp-block-cover__background {
	opacity: 0.45;
}

/* When content-position is set, core makes the cover a flex row pinned to the
   start and forces `margin:0` on the inner box (so margin-auto can't centre
   it). Instead, centre the capped (max wide-size) box via the cover's own
   justify-content — three classes to outweigh core's `.is-position-*` rule —
   so the hero title lands on the same content grid as the page below it.
   flex-basis keeps the box full width before max-width caps it. */
.c4e-hero-page.wp-block-cover.has-custom-content-position {
	justify-content: center;
}

.c4e-hero-page.wp-block-cover .wp-block-cover__inner-container {
	flex-basis: 100%;
	max-width: var(--c4e-max-wide);
	padding-inline: var(--wp--preset--spacing--30, 1.5rem);
	width: 100%;
}

.c4e-hero-page h1 {
	color: #fff;
	font-weight: 400;
	max-width: 720px;
}

.c4e-hero-page p {
	color: #fff;
	max-width: 760px;
}

/* Pills sit inside .c4e-hero-page, so the white hero-paragraph colour above
   (0,1,1) would otherwise win over the pill rule (0,1,0) and make the pill
   text invisible on its white chip. Restore navy with a 2-class selector. */
.c4e-hero-page .c4e-hero-pills > * {
	color: #fff;
}

.c4e-hero-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

.c4e-hero-pill,
.c4e-hero-pills > * {
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	padding: 0.5rem 0.9rem;
	text-transform: none;
}

/* Cards and panels */
.c4e-card-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 4-up variant for evenly splitting four items (e.g. the programme-element
   links). The ≤920 / ≤700 breakpoints below still collapse it to 2-up then
   1-up, so only the desktop column count differs from the 3-up default. */
.c4e-card-grid--cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Auto-fit variant: items flow to fill the row regardless of count (4, 5, …),
   so no orphan card. The ≤920 / ≤700 breakpoints below still cap it. */
.c4e-card-grid--auto {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.c4e-card,
.c4e-panel {
	background: #fff;
	border: 1px solid var(--c4e-border);
	border-radius: var(--c4e-radius);
	box-shadow: none;
}


.c4e-card {
	padding: clamp(1.15rem, 2.5vw, 1.65rem);
}

.c4e-card > :first-child,
.c4e-panel > :first-child {
	margin-block-start: 0;
}

.c4e-card > :last-child,
.c4e-panel > :last-child {
	margin-block-end: 0;
}

.c4e-card h2,
.c4e-card h3,
.c4e-card h4 {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	margin-block-end: 0.45rem;
}

.c4e-card p {
	color: var(--c4e-muted);
	font-size: 0.92rem;
	line-height: 1.55;
}

.c4e-card--accent-cyan,
.c4e-card--accent-coral {
	background: #fff;
	border: 1px solid var(--c4e-border);
}

.c4e-card--accent-cyan h2,
.c4e-card--accent-cyan h3,
.c4e-card--accent-cyan h4,
.c4e-card--accent-cyan h2 a,
.c4e-card--accent-cyan h3 a,
.c4e-card--accent-cyan h4 a,
.c4e-card--accent-coral h2,
.c4e-card--accent-coral h3,
.c4e-card--accent-coral h4,
.c4e-card--accent-coral h2 a,
.c4e-card--accent-coral h3 a,
.c4e-card--accent-coral h4 a {
	color: var(--c4e-cyan);
	text-decoration: none;
}

.c4e-panel {
	padding: clamp(1.4rem, 3vw, 2rem);
}

.c4e-panel--pale {
	background: var(--c4e-pale);
	border-color: transparent;
}

.wp-block-quote {
	border-left: none !important;
}

.c4e-panel--dark {
	align-items: center;
	background: var(--c4e-navy);
	border-color: var(--c4e-navy);
	color: #fff;
	display: flex;
	gap: 1.5rem;
	justify-content: space-between;
}

.c4e-panel--dark h2,
.c4e-panel--dark h3,
.c4e-panel--dark p {
	color: #fff;
}

.c4e-panel--dark p {
	opacity: 0.82;
}

/* A navy primary button would vanish on the navy panel, so here it stays
   cyan (navy text 5.7:1) and hovers to white (14.6:1). */
.c4e-panel--dark .c4e-button-primary .wp-block-button__link {
	background: var(--c4e-cyan);
	color: var(--c4e-navy);
}

.c4e-panel--dark .c4e-button-primary .wp-block-button__link:hover,
.c4e-panel--dark .c4e-button-primary .wp-block-button__link:focus-visible {
	background: #fff;
	color: var(--c4e-navy);
}

.c4e-topic-list {
	counter-reset: c4e-topic;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The circle is positioned absolutely (not a flex item) so the text after it
   flows as normal inline content. A flex row here would split "<strong>…</strong>
   rest" into separate flex items and the gap would open up between them. */
.c4e-topic-list li {
	margin-block: 1rem;
	padding-inline-start: 1.5rem;
	position: relative;
}

.c4e-topic-list li::before {
	color: var(--c4e-cyan);
	content: "—";
	font-size: 1.1rem;
	font-weight: 800;
	line-height: 1.55;
	position: absolute;
	inset-inline-start: 0;
	top: 0;
}

/* Programme schedule */
.c4e-schedule {
	border-bottom: 1px solid var(--c4e-border);
	color: var(--c4e-ink);
	font-size: 0.9rem;
	overflow-x: auto;
}

.c4e-schedule__tabs {
	background: #f1f4f7;
	border-radius: 99px;
	display: inline-flex;
	gap: 0.35rem;
	margin-bottom: 2.5rem;
	padding: 0.4rem;
}

.c4e-schedule__tab {
	background: transparent;
	border: none;
	border-radius: 99px;
	color: var(--c4e-muted);
	font-size: 0.82rem;
	font-weight: 700;
	padding: 0.75rem 1.4rem;
	text-transform: uppercase;
	transition: background-color var(--c4e-dur-fast), color var(--c4e-dur-fast), box-shadow var(--c4e-dur-fast);
}

.c4e-schedule__tab.is-active {
	background: #fff;
	color: var(--c4e-navy);
	box-shadow: 0 2px 8px rgba(11, 23, 32, 0.08);
}

.c4e-schedule__grid {
	border-left: 1px solid var(--c4e-border);
	border-right: 1px solid var(--c4e-border);
	min-width: 680px;
}

.c4e-schedule__row {
	border-top: 1px solid var(--c4e-border);
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	min-height: 3.5rem;
}

.c4e-schedule__time {
	border-right: 1px solid var(--c4e-border);
	color: var(--c4e-navy);
	font-size: 0.88rem;
	font-weight: 600;
	padding: 1rem;
}

.c4e-schedule__slot {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
}

/* Parallel sessions share the slot as equal columns in one row — so a 5th
   tile sits beside the others instead of dropping below on its own. The
   schedule wrapper scrolls horizontally on narrow screens (min-width above),
   so the columns just get narrower rather than wrapping into an orphan. */
.c4e-schedule__event {
	align-self: stretch;
	background: var(--c4e-pale);
	border-radius: 12px;
	color: var(--c4e-ink);
	flex: 1 1 0;
	line-height: 1.3;
	min-width: 0;
	padding: 1rem 1.15rem;
	transition: transform var(--c4e-dur) var(--c4e-ease), box-shadow var(--c4e-dur) var(--c4e-ease);
}

.c4e-schedule__event:hover {
	box-shadow: 0 4px 12px rgba(11, 23, 32, 0.06);
	transform: translateY(-2px);
}

.c4e-schedule__event strong {
	display: block;
	font-size: 0.86rem;
	font-weight: 500;
}

.c4e-schedule__label {
	color: var(--c4e-cyan);
	display: block;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.2;
	margin-block-end: 0.35rem;
	text-transform: uppercase;
}

.c4e-schedule__event--social {
	background: color-mix(in srgb, var(--c4e-cyan) 12%, #fff);
}

.c4e-schedule__event--social .c4e-schedule__label {
	color: var(--c4e-cyan);
}

/* Feature tier (plenaries, Knowledge Hub, award ceremony) — navy accent, so
   the conference-wide highlights read apart from the many parallel sessions. */
.c4e-schedule__event--feature {
	background: color-mix(in srgb, var(--c4e-navy) 6%, #fff);
}

.c4e-schedule__event--feature .c4e-schedule__label {
	color: var(--c4e-navy);
}

/* Breaks / meals / arrivals: quiet, no box. */
.c4e-schedule__note {
	color: var(--c4e-muted);
	font-style: italic;
}

/* Tab interaction. The day grids stack visible by default (no-JS / no
   IntersectionObserver still shows the whole schedule); once JS sets the
   `.c4e-motion` flag in <head>, only the active day shows and the tabs switch. */
.c4e-schedule__tab {
	cursor: pointer;
}

.c4e-schedule__tab:hover,
.c4e-schedule__tab:focus-visible {
	color: var(--c4e-navy);
}

.c4e-motion .c4e-schedule__grid:not(.is-active) {
	display: none;
}

/* Detailed variant (Renovation workshop 2017, page 1148). Unlike the Programme
   page's equal-height parallel-session columns, this schedule is single-track:
   each slot holds one tile that carries a session title plus speaker sub-lines
   or a small sub-programme list. Tiles are content-driven, so don't stretch
   them, give the title a touch more weight, and quiet the speaker/sub-text. */
.c4e-schedule--detailed .c4e-schedule__event {
	align-self: start;
}

.c4e-schedule--detailed .c4e-schedule__title strong {
	font-size: 0.95rem;
	font-weight: 600;
}

.c4e-schedule--detailed .c4e-schedule__by {
	color: var(--c4e-muted);
	font-size: 0.8rem;
	margin-block-start: 0.25rem;
}

.c4e-schedule--detailed .c4e-schedule__event ul {
	margin: 0.4rem 0 0;
	padding-inline-start: 1.1rem;
}

.c4e-schedule--detailed .c4e-schedule__event li {
	color: var(--c4e-muted);
	font-size: 0.82rem;
	margin-block: 0.25rem;
}

.c4e-schedule--detailed .c4e-schedule__event li strong {
	color: var(--c4e-ink);
}

/* Partners — logo wall.
   A grid of white cards, one per partner logo. The source logos are wildly
   different shapes/resolutions, so each cell is a fixed-padding flex box and
   the image is normalised to one optical height (object-fit:contain keeps the
   aspect ratio). Same border/radius/hover-lift vocabulary as .c4e-card. */
.c4e-logo-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.c4e-logo-grid .wp-block-image {
	align-items: center;
	background: #fff;
	border: 1px solid var(--c4e-border);
	border-radius: var(--c4e-radius);
	display: flex;
	justify-content: center;
	margin: 0;
	padding: clamp(1.4rem, 3vw, 2.25rem);
	transition: transform var(--c4e-dur) var(--c4e-ease), box-shadow var(--c4e-dur) var(--c4e-ease);
}

.c4e-logo-grid .wp-block-image:hover {
	box-shadow: var(--c4e-lift);
	transform: translateY(-4px);
}

.c4e-logo-grid .wp-block-image a {
	align-items: center;
	display: flex;
	justify-content: center;
	width: 100%;
}

.c4e-logo-grid .wp-block-image img {
	height: auto;
	max-height: 64px;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

@media (max-width: 600px) {
	.c4e-logo-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Organisers — edition rows + people grid.
   Edition row: a wide 2-col layout pairing each edition's narrative with the
   partner logo(s)/photo (the media column stacks 1–2 images, centred, capped at
   their natural size so brand marks aren't upscaled). People grid: static
   portrait cards that replace the retired speaker-CPT grid — image + name +
   role, no links. Both reuse the card border/radius/hover vocabulary and
   collapse on narrow screens. */
/* Edition/organiser row — a wide 2-col grid pairing narrative with logo(s)/
   photo. Shared by the Organisers page AND the homepage's Renovate Europe block,
   so the base rule stays visually neutral (no divider, centred like before). */
.c4e-org-edition {
	align-items: center;
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: minmax(0, 1fr) minmax(240px, 0.8fr);
}

/* Organisers page only: top-align each edition so every heading + logo/photo
   starts on the same line (the centred base made the text start lower or higher
   depending on how tall the media column was), and rule a bold cyan divider
   above each edition so the national organisers read as clearly separated
   blocks. Scoped to .c4e-organisers so the homepage's Renovate Europe block,
   which reuses .c4e-org-edition, is left untouched. */
.c4e-organisers .c4e-org-edition {
	align-items: start;
	border-top: 3px solid var(--c4e-cyan);
	padding-top: clamp(2rem, 4vw, 3.5rem);
}

/* Upcoming edition: text only (no media column yet), so let it span the row
   instead of leaving an empty right-hand column. */
.c4e-organisers .c4e-org-edition--upcoming {
	grid-template-columns: minmax(0, 1fr);
}

.c4e-organisers .c4e-org-edition--upcoming > .wp-block-group {
	max-width: 46rem;
}

/* REC logo sitting under the intro line — capped so the brand mark stays a
   modest, centred size rather than filling the content width. */
.c4e-org-rec-logo img {
	height: auto;
	max-width: min(320px, 100%);
}

.c4e-org-edition__media {
	display: grid;
	gap: 1.25rem;
	justify-items: center;
}

.c4e-org-edition__media .wp-block-image {
	margin: 0;
	text-align: center;
	width: 100%;
}

.c4e-org-edition__media img {
	border-radius: var(--c4e-radius);
	height: auto;
	margin-inline: auto;
	max-width: 100%;
}

/* Logo panel for editions with several partners (2027): the co-organiser's
   mark on top, then a row of supporting partners. Logos are height-capped so
   wide and square marks read at a similar visual weight. */
.c4e-org-logos {
	background: #fff;
	border: 1px solid var(--c4e-border);
	border-radius: var(--c4e-radius);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.c4e-org-logos .c4e-org-logos__label {
	color: var(--c4e-muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	margin: 0;
	text-align: center;
	text-transform: uppercase;
}

.c4e-org-logos .c4e-org-logos__label:not(:first-child) {
	border-top: 1px solid var(--c4e-border);
	padding-top: 1.25rem;
	width: 100%;
}

.c4e-org-logos img {
	border-radius: 0;
}

.c4e-org-logos .c4e-org-logos__lead img {
	width: min(231px, 100%);
}

.c4e-org-logos__row {
	align-items: center;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 100%;
}

.c4e-org-logos__row img {
	max-height: 64px;
	object-fit: contain;
	width: auto;
}

.c4e-people-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.c4e-person {
	background: #fff;
	border: 1px solid var(--c4e-border);
	border-radius: var(--c4e-radius);
	overflow: hidden;
	text-align: center;
	transition: transform var(--c4e-dur) var(--c4e-ease), box-shadow var(--c4e-dur) var(--c4e-ease);
}

.c4e-person:hover {
	box-shadow: var(--c4e-lift);
	transform: translateY(-4px);
}

.c4e-person .wp-block-image {
	margin: 0;
}

.c4e-person img {
	aspect-ratio: 1 / 1;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.c4e-person__body {
	padding: 1rem 1.1rem 1.2rem;
}

.c4e-person__name {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}

.c4e-person__role {
	color: var(--c4e-muted);
	font-size: 0.85rem;
	line-height: 1.45;
	margin: 0.35rem 0 0;
}

/* C4E Champion Award */
.c4e-award-card {
	overflow: hidden;
	padding: 0;
}

.c4e-award-editions.c4e-card-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.c4e-award-card .wp-block-image {
	margin: 0;
	overflow: hidden;
}

.c4e-award-card .wp-block-image img {
	aspect-ratio: 1.48;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.c4e-award-card__body {
	padding: clamp(1.15rem, 2.5vw, 1.65rem);
}

.c4e-award-card__body > :first-child {
	margin-block-start: 0;
}

.c4e-award-card__body > :last-child {
	margin-block-end: 0;
}

.c4e-award-logo-strip {
	align-items: center;
	background: var(--c4e-pale);
	border: 1px solid var(--c4e-border);
	border-radius: var(--c4e-radius);
	display: grid;
	gap: clamp(1.25rem, 4vw, 2.5rem);
	grid-template-columns: minmax(180px, 0.5fr) minmax(0, 1fr);
	padding: clamp(1.4rem, 3vw, 2rem);
}

.c4e-award-logo-strip .wp-block-image {
	margin: 0;
}

.c4e-award-logo-strip img {
	display: block;
	height: auto;
	max-height: 130px;
	object-fit: contain;
	width: auto;
}

/* C4E Champions 2025 */
.c4e-champion-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.c4e-champion-card {
	overflow: hidden;
	padding: 0;
}

.c4e-champion-card--featured {
	grid-column: 1 / -1;
}

.c4e-champion-card .wp-block-image {
	align-items: center;
	background: #fff;
	display: flex;
	justify-content: center;
	margin: 0;
	overflow: hidden;
	padding: clamp(1.25rem, 3vw, 2rem);
}

.c4e-champion-card img {
	aspect-ratio: 1 / 1;
	display: block;
	height: auto;
	object-fit: cover;
	object-position: center top;
	width: min(50%, 220px);
}

.c4e-champion-card--featured {
	display: grid;
	grid-template-columns: minmax(240px, 0.42fr) minmax(0, 1fr);
}

.c4e-champion-card--featured img {
	height: auto;
	width: min(82%, 220px);
}

.c4e-champion-card--team img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.c4e-champion-card__body {
	padding: clamp(1.15rem, 2.5vw, 1.65rem);
}

.c4e-champion-card__body > :first-child {
	margin-block-start: 0;
}

.c4e-champion-card__body > :last-child {
	margin-block-end: 0;
}

.c4e-champion-card__role {
	color: var(--c4e-muted);
	font-size: 0.88rem;
	font-weight: 700;
	line-height: 1.45;
}

/* C4E Champion Award 2023 */
.c4e-award-2023-nominees {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.c4e-award-2023-nominee {
	overflow: hidden;
	padding: 0;
}

.c4e-award-2023-nominee .wp-block-image {
	margin: 0;
}

.c4e-award-2023-nominee img {
	aspect-ratio: 1 / 1;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.c4e-award-2023-nominee__body {
	padding: clamp(1rem, 2.25vw, 1.35rem);
}

.c4e-award-2023-nominee__body > :first-child {
	margin-block-start: 0;
}

.c4e-award-2023-nominee__body > :last-child {
	margin-block-end: 0;
}

@media (max-width: 700px) {
	.c4e-award-editions.c4e-card-grid {
		grid-template-columns: 1fr;
	}

	.c4e-award-logo-strip {
		grid-template-columns: 1fr;
	}

	.c4e-champion-grid,
	.c4e-champion-card--featured,
	.c4e-award-2023-nominees {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 781px) {
	.c4e-org-edition {
		grid-template-columns: 1fr;
	}

	.c4e-people-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.c4e-people-grid {
		grid-template-columns: 1fr;
	}
}

/* Homepage rebuild */
.c4e-home {
	background: #fff;
	color: var(--c4e-ink);
}

.c4e-home-section {
	padding-block: clamp(1.9rem, 3.6vw, 3.2rem);
}

/* Each section supplies its own vertical rhythm via padding-block. Drop the
   group block-gap between sections so the padding doesn't compound into
   oversized gaps and the colour bands sit flush against one another. */
.c4e-home > * {
	margin-block: 0;
}

.c4e-home-inner {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: 1180px;
	padding-inline: clamp(1.25rem, 4vw, 2rem);
	width: 100%;
}

.c4e-home-hero {
	line-height: 0;
	margin: 0;
}

.c4e-home-hero img {
	display: block;
	height: auto;
	width: 100%;
}

.c4e-home-intro {
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.4rem);
	grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
}

.c4e-home-intro img,
.c4e-home-feature img,
.c4e-home-card img,
.c4e-home-gallery img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.c4e-home-intro__media {
	aspect-ratio: 1.36;
	overflow: hidden;
}

/* Designed banner with baked-in text/logo: show it whole, never crop. */
.c4e-home-intro__media--banner {
	align-self: center;
	aspect-ratio: auto;
}

.c4e-home-intro .c4e-home-intro__media--banner img {
	height: auto;
	object-fit: contain;
}

.c4e-home-intro:has(.c4e-home-intro__media--banner) > .wp-block-column:first-child {
	align-self: center;
}

.c4e-home-kicker {
	color: var(--c4e-cyan);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	margin: 0 0 0.65rem;
	text-transform: uppercase;
}

.c4e-home h1,
.c4e-home h2,
.c4e-home h3,
.c4e-home p {
	margin-block-start: 0;
}

.c4e-home h1 {
	font-size: clamp(2.3rem, 5vw, 4.4rem);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 0.98;
	margin-block-end: 1rem;
}

.c4e-home h2 {
	font-size: clamp(1.55rem, 2.2vw, 2rem);
	font-weight: 500;
	line-height: 1.15;
	margin-block-end: 0.85rem;
}

.c4e-home h3 {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.32;
	margin-block-end: 0.4rem;
}

.c4e-home p {
	line-height: 1.58;
}

.c4e-home-lede {
	font-size: 1.15rem;
	line-height: 1.55;
}

/* Restore vertical rhythm between the stacked intro paragraphs
   (the global `.c4e-home p { margin-block-start: 0 }` rule above
   collapses the gap between the lede, the description and the CTA). */
.c4e-home-intro p + p {
	margin-block-start: 0.9rem;
}

/* Wide banner variant: the landscape banner is much shorter than a photo,
   so give it more width and tone the text down to keep the row balanced. */
@media (min-width: 861px) {
	/* Core columns are flex (body .is-layout-flex beats the grid above),
	   so size the columns via flex, not grid-template-columns. */
	.c4e-home-intro:has(.c4e-home-intro__media--banner) {
		align-items: center;
	}

	.c4e-home-intro:has(.c4e-home-intro__media--banner) > .wp-block-column:first-child {
		flex: 1.7 1 0;
	}

	.c4e-home-intro:has(.c4e-home-intro__media--banner) > .wp-block-column:last-child {
		flex: 1 1 0;
		min-width: 260px;
	}
}

.c4e-home-intro:has(.c4e-home-intro__media--banner) h1 {
	font-size: clamp(2rem, 3.2vw, 3rem);
	line-height: 1.05;
	margin-block-end: 0.85rem;
}

.c4e-home-intro:has(.c4e-home-intro__media--banner) .c4e-home-lede {
	font-size: 1.05rem;
}

.c4e-home-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin-block-start: 1.25rem;
}

/* Style only the link, never the .wp-block-button wrapper, otherwise the
   background and padding are applied twice (a coral box inside a coral box)
   and the button looks heavily over-padded. */
.c4e-home-button .wp-block-button__link {
	background: var(--c4e-navy);
	border-radius: var(--c4e-radius);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.2;
	padding: 0.62rem 1.1rem;
	text-decoration: none;
}

.c4e-home-button .wp-block-button__link:hover,
.c4e-home-button .wp-block-button__link:focus-visible {
	background: var(--c4e-cyan);
	color: var(--c4e-navy);
	transform: translateY(-1px);
}

.c4e-home-button--secondary .wp-block-button__link {
	background: var(--c4e-pale);
	border: 1px solid var(--c4e-border);
	color: var(--c4e-navy);
}

.c4e-home-button--secondary .wp-block-button__link:hover,
.c4e-home-button--secondary .wp-block-button__link:focus-visible {
	background: color-mix(in srgb, var(--c4e-pale) 86%, var(--c4e-cyan));
	color: var(--c4e-navy);
}

.c4e-home-stats {
	background: var(--c4e-navy);
	color: #fff;
}

.c4e-home-stats h2 {
	color: #fff;
	margin-block-end: 1.4rem;
}

.c4e-home-stat-grid,
.wp-block-columns.c4e-home-stat-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.c4e-home-stat {
	border-left: 1px solid rgba(255, 255, 255, 0.15);
	padding-left: 1rem;
}

.c4e-home-stat .wp-block-heading,
.c4e-home-stat strong {
	color: #fff;
	display: block;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(1.65rem, 3vw, 2.15rem);
	font-weight: 600;
	line-height: 1;
	margin: 0;
}

.c4e-home-stat p,
.c4e-home-stat span {
	color: #fff;
	display: block;
	font-size: 0.9rem;
	line-height: 1.25;
	margin: 0;
	margin-block-start: 0.35rem;
	opacity: 0.9;
}

.c4e-home-feature {
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.4rem);
	grid-template-columns: minmax(0, 1fr) minmax(280px, 0.92fr);
}

.c4e-home-feature__media {
	aspect-ratio: 1.48;
	overflow: hidden;
}

.c4e-home-section-head {
	align-items: end;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	margin-block-end: 1.35rem;
}

.c4e-home-section-head h2 {
	margin-block-end: 0.2rem;
}

.c4e-home-section-head p {
	color: var(--c4e-muted);
	font-size: 0.9rem;
	margin: 0;
}

.c4e-home-text-link {
	color: var(--c4e-ink);
	font-size: 0.82rem;
	font-weight: 700;
	white-space: nowrap;
}

.c4e-home-card-grid,
.wp-block-columns.c4e-home-card-grid {
	display: grid;
	gap: 1.35rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.c4e-home-card,
.wp-block-group.c4e-home-card {
	background: #fff;
	border: 1px solid rgba(207, 234, 246, 0.85);
	border-radius: var(--c4e-radius);
	overflow: hidden;
}

.c4e-home-card img {
	aspect-ratio: 1.48;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.c4e-home-card__body {
	padding: 0.95rem 1rem 1.1rem;
}

.c4e-home-card__body h3 a {
	color: var(--c4e-ink);
	text-decoration: none;
}

.c4e-home-card__body p {
	color: var(--c4e-muted);
	font-size: 0.76rem;
	line-height: 1.35;
	margin-block-start: 0.65rem;
}

.c4e-home-card__body > :last-child {
	margin-block-end: 0;
}

.c4e-home-card time {
	color: var(--c4e-muted);
	display: block;
	font-size: 0.76rem;
	margin-block-start: 0.65rem;
}

.c4e-home-latest-posts {
	display: grid;
	gap: 1.35rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	padding: 0;
}

.c4e-home-latest-posts li {
	border: 1px solid rgba(207, 234, 246, 0.85);
	border-radius: var(--c4e-radius);
	overflow: hidden;
}

.c4e-home-latest-posts .wp-block-latest-posts__featured-image {
	margin: 0;
}

.c4e-home-latest-posts .wp-block-latest-posts__featured-image img {
	aspect-ratio: 1.48;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.c4e-home-latest-posts > li > a {
	color: var(--c4e-ink);
	display: block;
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.35;
	padding: 0.95rem 1rem 0;
	text-decoration: none;
}

.c4e-home-latest-posts time {
	color: var(--c4e-muted);
	display: block;
	font-size: 0.76rem;
	padding: 0.65rem 1rem 1.1rem;
}

.c4e-home-divider {
	border-top: 1px solid rgba(207, 234, 246, 0.9);
	margin-block: 2.8rem 0;
}

.c4e-home-gallery {
	display: grid;
	gap: 1.35rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.c4e-home-gallery figure {
	margin: 0;
}

.c4e-home-gallery img {
	aspect-ratio: 1.55;
	height: auto;
}

.c4e-home-slider-rail {
	align-items: center;
	display: grid;
	gap: 1rem;
	grid-template-columns: 2rem 1fr 2rem;
}

.c4e-home-arrow {
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--c4e-navy);
	display: flex;
	font-size: 1.7rem;
	height: 2rem;
	justify-content: center;
	padding: 0;
	width: 2rem;
}

.c4e-home-dots {
	display: flex;
	gap: 0.35rem;
	justify-content: center;
	margin-block-start: 1rem;
}

.c4e-home-dots span {
	background: rgba(0, 43, 73, 0.25);
	border-radius: 999px;
	display: block;
	height: 0.32rem;
	width: 0.32rem;
}

.c4e-home-dots span:first-child {
	background: var(--c4e-navy);
}

.c4e-home-video-space {
	min-height: 15rem;
}

/* "Previous edition" retrospective band — wraps the 2025 lead-in, the photo
   gallery and the interview moments in one pale block so they read as a single
   group set apart from the 2027-forward sections. Matches the newsletter band's
   pale treatment (same --c4e-pale token). The wrapper itself is not a reveal
   target, so the tint shows immediately while the inner blocks animate in. */
.c4e-home-2025-band {
	background: var(--c4e-pale);
}

/* The band holds three c4e-home-section children, each of which already supplies
   its own padding-block. Drop the group block-gap between them (mirrors the
   .c4e-home > * reset) so the inner padding doesn't compound into oversized gaps. */
.c4e-home-2025-band > * {
	margin-block: 0;
}

.c4e-home-interviews {
	padding-block-start: clamp(1.6rem, 4vw, 3.4rem);
}

.c4e-home-video-card .wp-block-image {
	margin: 0;
	position: relative;
}

/* The link is inline by default, so its line box adds a few px of strut below
   the image — which made the figure taller than the 16:9 player and caused a
   jump on click. Block + line-height:0 collapses it so both states match. */
.c4e-home-video-card .wp-block-image a {
	display: block;
	line-height: 0;
}

.c4e-home-video-card .wp-block-image a::after {
	align-items: center;
	background: rgba(16, 174, 229, 0.92);
	border-radius: 999px;
	color: var(--c4e-navy);
	content: "▶";
	display: flex;
	font-size: 0.6rem;
	height: 1.35rem;
	justify-content: center;
	left: 50%;
	line-height: 1;
	padding-left: 0.08rem;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 1.35rem;
}

/* Match the thumbnail to the 16:9 player below so clicking to play causes no
   dimension shift. (cover crops the letterbox bars on YouTube's 4:3 hqdefault.) */
.c4e-home-video-card .wp-block-image img {
	aspect-ratio: 16 / 9;
}

/* The live player swapped in by c4e-video.js when a thumbnail is clicked.
   Holds a 16:9 box so the YouTube iframe plays in place of the thumbnail. */
.c4e-video-embed {
	aspect-ratio: 16 / 9;
	position: relative;
	width: 100%;
}

.c4e-video-embed iframe {
	border: 0;
	height: 100%;
	inset: 0;
	position: absolute;
	width: 100%;
}

.c4e-home-quotes {
	background: var(--c4e-navy);
	color: #fff;
}

.c4e-home-quotes h2 {
	color: #fff;
	margin-block-end: 0.65rem;
}

.c4e-home-quotes h2 span {
	color: var(--c4e-cyan);
	display: block;
}

.c4e-home-quotes p {
	color: #fff;
}

.c4e-home-quotes__grid {
	align-items: center;
	display: grid;
	gap: clamp(1.6rem, 4vw, 3rem);
	grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1fr);
}

/* Flatten the two column wrappers so all four quotes become direct grid items
   of one 2x2 grid. Equal columns + equal (1fr) rows force every box to the
   same dimensions regardless of how much text it holds; column auto-flow keeps
   the original left-column / right-column reading order. Scoped under
   .c4e-home-quotes so the grid display beats core's `body .is-layout-flex`. */
.c4e-home-quotes .c4e-home-quote-grid {
	display: grid;
	gap: 1rem;
	grid-auto-flow: column;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, 1fr);
}

.c4e-home-quotes .c4e-home-quote-grid .wp-block-column {
	display: contents;
}

.c4e-home-quote {
	align-items: center;
	background: var(--c4e-cyan);
	border-radius: 6px;
	color: var(--c4e-navy);
	display: flex;
	margin: 0;
	min-height: 6.5rem;
	padding: 1.5rem 1.6rem;
}

.c4e-home-quote p {
	color: var(--c4e-navy);
	font-family: var(--wp--preset--font-family--open-sans);
	font-size: 1rem;
	font-style: normal;
	font-weight: 500;
	line-height: 1.5;
	margin: 0;
}

@media (max-width: 860px) {
	.c4e-home-intro,
	.c4e-home-feature,
	.c4e-home-quotes__grid {
		grid-template-columns: 1fr;
	}

	.c4e-home-stat-grid,
	.c4e-home-card-grid,
	.c4e-home-latest-posts,
	.c4e-home-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.c4e-home-section-head {
		align-items: flex-start;
		flex-direction: column;
	}

	.c4e-home-stat-grid,
	.c4e-home-card-grid,
	.c4e-home-latest-posts,
	.c4e-home-gallery {
		grid-template-columns: 1fr;
	}

	.c4e-home-quotes .c4e-home-quote-grid {
		grid-auto-flow: row;
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}

	.c4e-home-slider-rail {
		grid-template-columns: 1fr;
	}

	.c4e-home-arrow {
		display: none;
	}
}

/* Footer */
.c4e-footer {
	border-top: 1px solid var(--c4e-border);
	color: var(--c4e-ink);
}

.c4e-footer h2,
.c4e-footer h3 {
	color: var(--c4e-ink);
	font-size: 1rem;
	font-weight: 700;
}

.c4e-footer p,
.c4e-footer .wp-block-navigation-item__content {
	color: var(--c4e-muted);
}

.c4e-footer a {
	text-decoration: none;
}

.c4e-footer a:not(.wp-block-button__link):hover {
	color: var(--c4e-cyan);
}

.c4e-footer__social a {
	align-items: center;
	background: var(--c4e-cyan);
	border-radius: 999px;
	color: var(--c4e-navy);
	display: inline-flex;
	height: 1.55rem;
	justify-content: center;
	width: 1.55rem;
}

.c4e-footer__bottom {
	border-top: 1px solid var(--c4e-border);
	color: var(--c4e-muted);
}

/* Newsletter call-to-action band (moved out of the footer onto the home page).
   Pale background so it reads as its own section between the navy quotes band
   above and the white footer below. */
.c4e-home-newsletter {
	background: var(--c4e-pale);
	text-align: center;
}

.c4e-home-newsletter h2 {
	margin-block-end: 0.55rem;
}

.c4e-home-newsletter > .c4e-home-inner > p {
	color: var(--c4e-muted);
	margin-block-end: 1.4rem;
	margin-inline: auto;
	max-width: 46ch;
}

/* Compact 2-up form with the button on its own line below:
     row 1   First Name | Surname
     row 2   Email      | Country
     row 3   Subscribe
   Kept narrow so the pale band reads as generous space around it. */
.c4e-home-newsletter .sib_signup_form {
	margin-inline: auto;
	max-width: 600px;
}

/* Hide the wrapper that only holds the form's hidden inputs. */
.c4e-home-newsletter .sib_signup_form > p {
	display: none;
}

.c4e-home-newsletter .sib_signup_box_inside_1 {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
}

/* Status message / invisible captcha stay on their own full-width line. */
.c4e-home-newsletter .sib_msg_disp,
.c4e-home-newsletter #sib_captcha_invisible {
	flex: 1 1 100%;
	margin: 0;
}

/* Each visible field takes half the row. */
.c4e-home-newsletter .sib_signup_box_inside_1 > p,
.c4e-home-newsletter .sib-COUNTRY-area input[type="text"] {
	flex: 1 1 calc(50% - 0.3rem);
	margin: 0;
	text-align: left;
}

/* Flatten the last field's paragraph so the country input and the submit
   button become independent flex items (lets the button drop to its own row). */
.c4e-home-newsletter p.sib-COUNTRY-area {
	display: contents;
}

/* Field order: First Name, Surname, Email, Country, then the button. */
.c4e-home-newsletter p.sib-FIRSTNAME-area { order: 1; }
.c4e-home-newsletter p.sib-NAME-area { order: 2; }
.c4e-home-newsletter p.sib-email-area { order: 3; }
.c4e-home-newsletter .sib-COUNTRY-area input[type="text"] { order: 4; }

.c4e-home-newsletter input[type="email"],
.c4e-home-newsletter input[type="text"] {
	background: #fff;
	border: 1px solid var(--c4e-border);
	border-radius: var(--c4e-radius);
	box-sizing: border-box;
	display: block;
	font-size: 0.9rem;
	line-height: 1.2;
	padding: 0.7rem 0.8rem;
	width: 100%;
}

.c4e-home-newsletter input[type="submit"],
.c4e-home-newsletter button[type="submit"] {
	background: var(--c4e-coral);
	border: 0;
	border-radius: var(--c4e-radius);
	color: #fff;
	cursor: pointer;
	flex: 0 0 auto;
	font-weight: 700;
	margin-block-start: 0.3rem;
	min-width: 200px;
	order: 5;
	padding: 0.74rem 1.6rem;
	white-space: nowrap;
}

/* Contact page reuses the same Brevo form (id=1), but inside a
   .c4e-contact-newsletter panel instead of the home band. The form's own
   injected <style> builds the 2-col grid, yet its
   `.sib_signup_box_inside_1 > p { margin:0 }` reset is HTML-escaped (`&gt;`) and
   so never parses — the field paragraphs keep their default block margins and
   the rows sprawl. The home form only looks tight because the rule above
   re-zeroes those margins; mirror that here so the Contact form is just as
   compact (the grid gap of 14px then sets the spacing on both). */
.c4e-contact-newsletter .sib_signup_box_inside_1 > p {
	margin: 0;
}

/* Brevo's invisible reCAPTCHA injects Google's badge inside the submit
   paragraph with inline `position:fixed; right:-186px`. The home form sits in a
   .c4e-reveal wrapper whose transform/will-change turns it into the containing
   block for fixed children, so the badge hangs 186px off the form's right edge
   and forces horizontal scroll on narrow viewports. The badge is hidden instead
   (Google allows visibility:hidden — not display:none — provided the text
   disclosure below is shown). It's pinned inside the submit paragraph so the
   invisible box can't widen the page (!important beats Google's inline styles). */
.sib_signup_form .sib-submit-area {
	position: relative;
}

.sib_signup_form .grecaptcha-badge {
	bottom: 0 !important;
	left: 0;
	position: absolute !important;
	right: auto !important;
	visibility: hidden;
}

/* The required reCAPTCHA text disclosure, appended to the Brevo form's HTML
   (Brevo → Forms → form 1). Last grid row, under the button. */
.sib_signup_box_inside_1 > p.sib-recaptcha-notice {
	color: var(--c4e-muted);
	font-size: 0.78rem;
	grid-column: 1 / -1;
	line-height: 1.5;
	order: 7;
	text-align: center;
}

.sib_signup_box_inside_1 > p.sib-recaptcha-notice a {
	color: inherit;
	text-decoration: underline;
}

@media (max-width: 920px) {
	.c4e-header .c4e-header__bar {
		align-items: center;
	}

	.c4e-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.c4e-panel--dark {
		align-items: flex-start;
		flex-direction: column;
	}

	/* Schedule: stack instead of scrolling sideways. The time becomes a header
	   over its events, the parallel-session tiles go full width one per row,
	   and the day tabs wrap — so everything fits the viewport, no scrollbar. */
	.c4e-schedule {
		overflow-x: visible;
	}

	.c4e-schedule__tabs,
	.c4e-schedule__grid {
		min-width: 0;
	}

	.c4e-schedule__tabs {
		flex-wrap: wrap;
	}

	.c4e-schedule__row {
		grid-template-columns: 1fr;
	}

	.c4e-schedule__time {
		border-right: 0;
		padding: 0.85rem 1rem 0;
	}

	.c4e-schedule__slot {
		flex-wrap: wrap;
	}

	.c4e-schedule__event {
		flex-basis: 100%;
	}
}

@media (max-width: 700px) {
	.c4e-header .wp-block-site-logo {
		max-width: 75px;
	}

	.c4e-header .c4e-header__bar {
		min-height: 68px;
	}

	.c4e-card-grid {
		grid-template-columns: 1fr;
	}

	.c4e-hero-page {
		min-height: 360px;
	}
}

/* Footer: keep it compact when columns would otherwise stack into one long
   strip. Switch the native columns block to a 2-up grid, then a single column
   on the narrowest screens. Scoped with `.c4e-footer` so it outweighs core's
   `body .is-layout-flex`; flex-basis is ignored once the container is a grid. */
@media (max-width: 781px) {
	.c4e-footer .wp-block-columns {
		display: grid;
		gap: 1.75rem 2rem;
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 480px) {
	.c4e-footer .wp-block-columns {
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
   Mobile & tablet navigation
   The header menu is the core Navigation block (overlayMenu:"mobile").
   Two small-screen problems we correct here:
     1. Core only swaps to the hamburger below 600px, so tablets render the
        full horizontal menu — 7 top-level items + Subscribe wrap onto
        several lines and the logo looks detached.
     2. When the overlay opens, core force-shows every submenu expanded, so
        the panel becomes a ~35-link scroll (Past editions alone is 18).
   Fixes: (a) extend the hamburger up to tablet widths, (b) collapse the
   overlay submenus into an accordion using the chevron toggle buttons the
   block already renders (wired to the Interactivity API) so parent links
   stay tappable, (c) left-align and enlarge tap targets.
   Selectors are prefixed with .c4e-header so they outweigh core's block
   styles (see the footer note above re: specificity).
   ===================================================================== */

/* (a) Show the hamburger on portrait tablets and down. Re-hide the inline
   menu and re-show the toggle across 600–959px, overriding the
   min-width:600px rules in wp-includes/blocks/navigation/style.css.
   Landscape tablets (>=960px) keep the horizontal menu. */
@media (min-width: 600px) and (max-width: 959px) {
	.c4e-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.c4e-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* Keep the hamburger icon legible on the white bar. */
.c4e-header .wp-block-navigation__responsive-container-open {
	color: var(--c4e-navy);
}

/* (b) + (c) Overlay refinements — apply across the whole hamburger range.
   These are all gated on .is-menu-open, so they never touch the inline
   menu shown at >=960px. */
@media (max-width: 959px) {
	/* Left-align the stacked column (core inherits the nav's "justify
	   right", which reads oddly in a vertical list). */
	.c4e-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.c4e-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.c4e-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list,
	.c4e-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		align-items: flex-start;
	}

	/* Parent rows keep label + chevron side by side; the submenu drops to
	   its own full-width line below. */
	.c4e-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
	}

	/* Collapse every submenu by default... */
	.c4e-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
		display: none;
		flex-basis: 100%;
		min-width: 0;
		padding: 0.25rem 0 0.25rem 1rem;
	}

	/* ...and reveal it only while its chevron toggle is expanded. */
	.c4e-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		display: flex;
	}

	/* Nested levels indent a little further as they open. */
	.c4e-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		padding-left: 1.5rem;
	}

	/* Bring back the chevron (core hides it in the overlay) and give it a
	   real 44px tap target so it can drive the accordion. */
	.c4e-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		margin-left: 0.35rem;
		color: inherit;
	}

	/* Comfortable, easy-to-hit rows. */
	.c4e-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-size: 1.1rem;
		padding-top: 0.45rem;
		padding-bottom: 0.45rem;
	}
}

/* =====================================================================
   Motion system — prototyped on the home rebuild (6322), built as
   reusable site-wide primitives. Tokens live in :root above.
   - Card / image hover feedback
   - Scroll-reveal utilities (.c4e-reveal / .c4e-reveal-group)
   - Smooth in-page scrolling that clears the sticky header
   - Cross-page View Transitions (progressive enhancement)
   - prefers-reduced-motion kill-switch
   ===================================================================== */

/* Smooth anchor jumps; scroll-padding clears the sticky header. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

/* Card hover lift + image zoom. Cards already clip overflow, so the zoom is
   contained. Reusable on the inner-page card component (.c4e-card) too. */
.c4e-home-card,
.c4e-home-latest-posts li {
	transition: transform var(--c4e-dur) var(--c4e-ease), box-shadow var(--c4e-dur) var(--c4e-ease);
}

.c4e-home-card:hover,
.c4e-home-latest-posts li:hover {
	transform: translateY(-4px);
	box-shadow: var(--c4e-lift);
}

.c4e-home-card img,
.c4e-home-gallery img {
	transition: transform var(--c4e-dur-slow) var(--c4e-ease);
}

.c4e-home-card:hover img {
	transform: scale(1.045);
}

/* Gallery: clip + round each figure so the hover zoom stays inside. */
.c4e-home-gallery figure {
	border-radius: var(--c4e-radius);
	overflow: hidden;
}

.c4e-home-gallery figure:hover img {
	transform: scale(1.05);
}

/* Cross-page view transitions (Chromium + Safari 18; others navigate normally). */
@view-transition {
	navigation: auto;
}

/* Scroll-reveal. Hidden state applies ONLY when JS is active (.c4e-motion on
   <html>) AND the user allows motion — so no-JS / reduced-motion visitors are
   never left with invisible content. Scoped under .c4e-motion (two classes) so
   it clears core's `body .is-layout-flex` specificity for grid children. */
@media (prefers-reduced-motion: no-preference) {
	.c4e-motion .c4e-reveal,
	.c4e-motion .c4e-reveal-group > * {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity var(--c4e-dur-slow) var(--c4e-ease), transform var(--c4e-dur-slow) var(--c4e-ease);
		transition-delay: calc(var(--c4e-i, 0) * 90ms);
		will-change: opacity, transform;
	}

	.c4e-motion .c4e-reveal.is-visible,
	.c4e-motion .c4e-reveal-group > .is-visible {
		opacity: 1;
		transform: none;
	}
}

/* Respect users who ask for less motion: neutralise transitions/animations. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* =====================================================================
   News archive (page 990 / /news/).
   The listing is a core Query Loop of dynamic blocks (post-template /
   featured-image / date / title / excerpt / pagination). Only the card
   chrome, grid and pagination chrome live here — same border / radius /
   hover-lift vocabulary as .c4e-card, so it reads as one system.
   ===================================================================== */
.c4e-news-filters {
	margin-block: clamp(1.5rem, 3vw, 2.25rem);
}

.c4e-news-filter__buttons,
.c4e-news-filters .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
}

.c4e-news-filter__button,
.c4e-news-filters .wp-block-button__link {
	appearance: none;
	background: #fff;
	border: 1px solid var(--c4e-border);
	border-radius: 5px;
	color: var(--c4e-navy);
	cursor: pointer;
	font-size: 0.82rem;
	font-weight: 650;
	line-height: 1.3;
	padding: 0.55rem 0.9rem;
	transition: background-color var(--c4e-dur) var(--c4e-ease), border-color var(--c4e-dur) var(--c4e-ease), color var(--c4e-dur) var(--c4e-ease);
}

.c4e-news-filter__button:hover {
	background: var(--c4e-pale);
	border-color: var(--c4e-navy);
}

.c4e-news-filter__button[aria-pressed="true"] {
	background: var(--c4e-navy);
	border-color: var(--c4e-navy);
	color: #fff;
}

.c4e-news-filter__button:focus-visible {
	outline: 3px solid var(--c4e-navy);
	outline-offset: 2px;
}

.c4e-news-filters.is-loading .c4e-news-filter__button[aria-pressed="true"] {
	cursor: progress;
}

.c4e-news[aria-busy="true"] .wp-block-post-template {
	opacity: 0.55;
}

.c4e-news-filter__empty {
	color: var(--c4e-muted);
	grid-column: 1 / -1;
	padding-block: 1rem;
}

.c4e-news .wp-block-post-template {
	display: grid;
	gap: 1.35rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.c4e-news .wp-block-post {
	background: #fff;
	border: 1px solid var(--c4e-border);
	border-radius: var(--c4e-radius);
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	transition: transform var(--c4e-dur) var(--c4e-ease), box-shadow var(--c4e-dur) var(--c4e-ease);
}

.c4e-news .wp-block-post:hover {
	box-shadow: var(--c4e-lift);
	transform: translateY(-4px);
}

.c4e-news .wp-block-post-featured-image {
	margin: 0;
}

.c4e-news .wp-block-post-featured-image img {
	aspect-ratio: 1.5;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
	transition: transform var(--c4e-dur-slow) var(--c4e-ease);
}

.c4e-news .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.045);
}

.c4e-news-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.45rem;
	padding: clamp(1rem, 2.5vw, 1.4rem);
}

.c4e-news-card__body .wp-block-post-date {
	color: var(--c4e-muted);
	font-size: 0.76rem;
	margin: 0;
}

.c4e-news-card__body .wp-block-post-title {
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}

.c4e-news-card__body .wp-block-post-title a {
	color: var(--c4e-ink);
	text-decoration: none;
}

.c4e-news-card__body .wp-block-post-title a:hover,
.c4e-news-card__body .wp-block-post-title a:focus-visible {
	color: var(--c4e-cyan);
}

.c4e-news-card__body .wp-block-post-excerpt {
	margin: 0;
}

.c4e-news-card__body .wp-block-post-excerpt p,
.c4e-news-card__body .wp-block-post-excerpt__excerpt {
	color: var(--c4e-muted);
	font-size: 0.9rem;
	line-height: 1.55;
	margin: 0;
}

.c4e-news-card__body .wp-block-post-excerpt__more-link {
	color: var(--c4e-cyan);
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
}

/* Pagination: centred, navy links with a cyan current page. */
.c4e-news .wp-block-query-pagination {
	gap: 0.35rem 0.6rem;
	margin-top: clamp(2rem, 4vw, 3rem);
}

.c4e-news .wp-block-query-pagination[hidden] {
	display: none !important;
}

.c4e-news .wp-block-query-pagination .page-numbers,
.c4e-news .wp-block-query-pagination a {
	color: var(--c4e-navy);
	text-decoration: none;
}

.c4e-news .wp-block-query-pagination .page-numbers.current {
	color: var(--c4e-cyan);
	font-weight: 700;
}

.c4e-news .wp-block-query-pagination a:hover,
.c4e-news .wp-block-query-pagination a:focus-visible {
	color: var(--c4e-cyan);
}

@media (max-width: 920px) {
	.c4e-news .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.c4e-news .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
   Single post — news / blog article (templates/single.html)
   Imported posts carry no featured image, so the article header is a
   full-width navy masthead (not an image cover). Title + date sit on the
   same content grid as the body below, reusing the c4e accent system so a
   single article reads like the rest of the refreshed site.
   ===================================================================== */
.c4e-post-hero {
	background-color: var(--c4e-navy);
	border-bottom: 3px solid var(--c4e-cyan);
	padding-block: clamp(2.75rem, 6vw, 4.75rem);
}

.c4e-post-hero__eyebrow {
	margin: 0 0 1rem;
}

.c4e-post-hero__eyebrow a {
	color: var(--c4e-cyan);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
}

.c4e-post-hero__eyebrow a:hover,
.c4e-post-hero__eyebrow a:focus-visible {
	color: #fff;
}

.c4e-post-hero .wp-block-post-title {
	color: #fff;
	font-weight: 400;
	margin: 0;
	max-width: 900px;
}

.c4e-post-hero__date {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	margin: 1.1rem 0 0;
}

/* Editorial body — readable measure inherited from theme.json contentSize. */
.c4e-post-body {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.c4e-post-body .wp-block-post-content {
	font-size: 1.02rem;
}

/* Imported bodies carry inline-aligned, fixed-width images; keep them inside
   the narrower article column. */
.c4e-post-body .wp-block-post-content img {
	height: auto;
	max-width: 100%;
}

/* Tag row — only rendered when the post actually has tags. */
.c4e-post-tags {
	border-top: 1px solid var(--c4e-border);
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: 1.5rem;
}

.c4e-post-tags:not(:has(.wp-block-post-terms a)) {
	display: none;
}

.c4e-post-tags .wp-block-post-terms a {
	background: var(--c4e-pale);
	border: 1px solid var(--c4e-border);
	border-radius: 999px;
	color: var(--c4e-navy);
	display: inline-block;
	font-size: 0.78rem;
	margin: 0 0.4rem 0.4rem 0;
	padding: 0.3rem 0.85rem;
	text-decoration: none;
	transition: background-color var(--c4e-dur-fast) var(--c4e-ease), border-color var(--c4e-dur-fast) var(--c4e-ease), color var(--c4e-dur-fast) var(--c4e-ease);
}

.c4e-post-tags .wp-block-post-terms a:hover,
.c4e-post-tags .wp-block-post-terms a:focus-visible {
	background: var(--c4e-cyan);
	border-color: var(--c4e-cyan);
	color: #fff;
}

/* "More news & insights" — pale full-bleed band below the article, reusing the
   .c4e-news card grid so related posts match the News listing page. The current
   post is filtered out server-side (see functions.php). */
.c4e-related {
	background-color: var(--c4e-pale);
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-block: clamp(2.75rem, 6vw, 5rem);
}

.c4e-related__title {
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}


/* Programme page download block spacing */
.c4e-programme-dl .wp-block-buttons {
	margin-top: 1.5rem;
}

/* About page image wrapping & sizing */
.c4e-about .wp-block-image.alignleft,
.c4e-about .wp-block-image.alignright {
	width: clamp(400px, 55%, 700px);
}

.c4e-about .wp-block-image.alignleft {
	margin: 0 2.5rem 1rem 0;
}

.c4e-about .wp-block-image.alignright {
	margin: 0 0 1rem 2.5rem;
}

@media (max-width: 781px) {
	.c4e-about .wp-block-image.alignleft,
	.c4e-about .wp-block-image.alignright {
		float: none;
		width: 100%;
		margin: 0 0 1.5rem 0;
	}
}


/* =====================================================================
   Contact page — styles the reused Contact Form 7 form (#898) so the
   plugin's bare inputs match the brand, plus the open contact-details
   column beside it. Mirrors the .c4e-home-newsletter input system.
   Reusable: drop a [contact-form-7] inside any .c4e-contact-form block.
   ===================================================================== */
.c4e-contact-form .wpcf7-form > p {
	margin-block: 0 1rem;
}

.c4e-contact-form .wpcf7-form > p:last-of-type {
	margin-block-end: 0;
}

.c4e-contact-form label {
	color: var(--c4e-navy);
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.5;
}

.c4e-contact-form input[type="text"],
.c4e-contact-form input[type="email"],
.c4e-contact-form textarea {
	background: #fff;
	border: 1px solid var(--c4e-border);
	border-radius: var(--c4e-radius);
	box-sizing: border-box;
	color: var(--c4e-ink);
	font-family: inherit;
	font-size: 0.95rem;
	line-height: 1.4;
	margin-block-start: 0.35rem;
	padding: 0.7rem 0.8rem;
	width: 100%;
}

.c4e-contact-form textarea {
	min-height: 150px;
	resize: vertical;
}

.c4e-contact-form input[type="text"]:focus,
.c4e-contact-form input[type="email"]:focus,
.c4e-contact-form textarea:focus {
	border-color: var(--c4e-cyan);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--c4e-cyan) 25%, transparent);
	outline: none;
}

.c4e-contact-form input[type="submit"] {
	background: var(--c4e-cyan);
	border: 0;
	border-radius: var(--c4e-radius);
	color: var(--c4e-navy);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	margin-block-start: 0.3rem;
	padding: 0.74rem 1.8rem;
	transition: background var(--c4e-dur-fast) var(--c4e-ease), transform var(--c4e-dur-fast) var(--c4e-ease);
}

.c4e-contact-form input[type="submit"]:hover {
	background: color-mix(in srgb, var(--c4e-cyan) 88%, #000);
	transform: translateY(-1px);
}

/* CF7 validation / status feedback. */
.c4e-contact-form .wpcf7-response-output {
	border-radius: var(--c4e-radius);
	font-size: 0.9rem;
	margin: 1rem 0 0;
	padding: 0.6rem 0.9rem;
}

.c4e-contact-form .wpcf7-not-valid-tip {
	color: #b3261e;
	font-size: 0.85rem;
}

.c4e-contact-form .wpcf7-form.sent .wpcf7-response-output {
	border: 1px solid #2e7d32;
	color: #2e7d32;
}

/* Contact-details column (open text beside the form card). */
.c4e-contact-details h3 {
	color: var(--c4e-navy);
	font-size: 1.05rem;
	margin-block-end: 0.2rem;
}

/* Plain links only — exclude button links, which carry their own light-blue
   background + navy text from theme.json. Without :not(), this rule (0,1,1)
   beats the theme.json button colour (0,1,0) and tints button text light blue,
   making it vanish against the light-blue button (e.g. the Contact page's
   "See sponsorship opportunities" button). Same reason on .c4e-legal below. */
.c4e-contact-details a:not(.wp-block-button__link) {
	color: var(--c4e-cyan);
}


/* =====================================================================
   Legal / utility pages (Privacy Policy, Terms, Code of conduct …).
   Reuse the navy .c4e-post-hero masthead with a plain page heading, and
   give the long-form body comfortable section spacing. Reusable.
   ===================================================================== */
.c4e-post-hero .wp-block-heading {
	color: #fff;
	font-weight: 400;
	margin: 0;
	max-width: 900px;
}

.c4e-legal h2 {
	font-size: 1.4rem;
	margin-block: 2.25rem 0.5rem;
}

.c4e-legal :where(p, ul, ol) {
	margin-block: 0 1rem;
}

.c4e-legal li {
	margin-block: 0 0.4rem;
}

.c4e-legal a:not(.wp-block-button__link) {
	color: var(--c4e-cyan);
}


/* =====================================================================
   Panel sessions 2025 (page 5776). The 22 panel sessions are grouped by
   time slot (.c4e-slot) and each is a native core/details accordion
   (.c4e-session) — the modern replacement for the retired wptabs plugin.
   Reusable; first use of core/details on the site.
   ===================================================================== */
.c4e-slot {
	margin-block-start: 2.6rem;
}

.c4e-slot__time {
	border-block-end: 2px solid var(--c4e-border);
	color: var(--c4e-navy);
	margin-block-end: 1rem;
	padding-block-end: 0.5rem;
}

/* one accordion per session */
.c4e-session.wp-block-details {
	background: #fff;
	border: 1px solid var(--c4e-border);
	border-radius: var(--c4e-radius);
	margin-block: 0.55rem 0;
	transition: border-color var(--c4e-dur-fast) var(--c4e-ease),
		box-shadow var(--c4e-dur-fast) var(--c4e-ease);
}

.c4e-session.wp-block-details:hover {
	border-color: var(--c4e-cyan);
}

.c4e-session[open] {
	border-color: var(--c4e-cyan);
	box-shadow: var(--c4e-lift);
}

.c4e-session > summary {
	align-items: center;
	color: var(--c4e-navy);
	cursor: pointer;
	display: flex;
	font-weight: 600;
	gap: 0.9rem;
	line-height: 1.3;
	list-style: none;
	padding: 1.15rem clamp(1.4rem, 2.5vw, 2.1rem);
}

.c4e-session > summary::-webkit-details-marker {
	display: none; /* Safari: hide the native triangle */
}

/* custom chevron, rotates down when open */
.c4e-session > summary::after {
	border-bottom: 2px solid var(--c4e-cyan);
	border-right: 2px solid var(--c4e-cyan);
	content: "";
	flex: 0 0 auto;
	height: 0.62rem;
	margin-inline-start: auto;
	transform: rotate(45deg);
	transition: transform var(--c4e-dur-fast) var(--c4e-ease);
	width: 0.62rem;
}

.c4e-session[open] > summary::after {
	transform: rotate(225deg);
}

.c4e-session > summary:hover {
	background: var(--c4e-pale);
}

.c4e-session[open] > summary {
	border-block-end: 1px solid var(--c4e-border);
}

/* disclosed body: inset from the card edge, comfortable measure */
.c4e-session > :not(summary) {
	padding-inline: clamp(1.4rem, 2.5vw, 2.1rem);
}

.c4e-session > summary + * {
	margin-block-start: 1.3rem;
}

.c4e-session > :last-child {
	padding-block-end: 1.9rem;
}

/* Tighten the vertical rhythm inside the body. Core's flow block-gap puts the
   same big gap between every block, so the short meta lines (room / panel leader
   / format / "Speakers:") drift far apart. Cluster them, let a label hug the
   list it introduces, and give the description clear air after a list. */
.c4e-session > :not(summary) + :not(summary) {
	margin-block-start: 0.8rem;
}

.c4e-session > p + :where(ul, ol).wp-block-list {
	margin-block-start: 0.4rem; /* "Speakers:" / "Presentations:" hug their list */
}

.c4e-session > :where(ul, ol).wp-block-list + p {
	margin-block-start: 1.25rem; /* the teaser/description, set apart from the list */
}

.c4e-session :where(p, li) {
	line-height: 1.55;
}

.c4e-session li {
	margin-block: 0.25rem 0;
}

.c4e-session__room {
	color: var(--c4e-muted);
	font-size: 0.92rem;
}

/* printed-programme overview image */
.c4e-programme-overview img {
	border: 1px solid var(--c4e-border);
	border-radius: var(--c4e-radius);
}

/* ==========================================================================
   Heyzine flip-book embeds — post-conference booklet (6222) & brochure (6130).
   Responsive framed box; the flip-book iframe fills it. Reused by both pages.
   ========================================================================== */
.c4e-flipbook {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	border: 1px solid var(--c4e-border);
	border-radius: var(--c4e-radius);
	overflow: hidden;
	background: var(--c4e-pale);
}

.c4e-flipbook iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 600px) {
	.c4e-flipbook {
		aspect-ratio: 3 / 4;
	}
}

/* ==========================================================================
   C4E Champion Award branding
   The Champion Award is a distinct sub-brand: warm golden yellow with the
   site navy for text (mirrors the award poster). This section re-skins the
   award's default cyan accents to yellow. The scope hook `.c4e-champion-brand`
   is added:
     - as a BODY class on the three award pages (5932, 6137, 4623) via the
       body_class filter in functions.php — so the hero, which sits outside the
       page's content wrapper, is covered too;
     - as a block className on the "Champion Award" mentions embedded in other
       pages (front page 6322, Forum 2025 page 5677).
   Every rule is further qualified by an award/content class, so the body-level
   hook can never bleed into the shared header/footer.
   ========================================================================== */

/* Eyebrow → yellow chip with navy text (hero + section level). */
.c4e-champion-brand .c4e-eyebrow {
	background: var(--c4e-champion);
	border-radius: 999px;
	color: var(--c4e-navy);
	display: block;
	font-size: 0.68rem;
	max-width: 100%;
	padding: 0.3rem 0.75rem;
	width: fit-content;
}

.c4e-champion-brand .c4e-eyebrow.has-text-align-center {
	margin-inline: auto;
}

/* Inside cards the eyebrow is a long role/country label and there are many of
   them, so keep those as plain deep-gold text — stacked pills would be noisy. */
.c4e-champion-brand .c4e-champion-card__body .c4e-eyebrow,
.c4e-champion-brand .c4e-award-card__body .c4e-eyebrow,
.c4e-champion-brand .c4e-award-2023-nominee__body .c4e-eyebrow {
	background: none;
	border-radius: 0;
	color: var(--c4e-champion-deep);
	display: block;
	padding: 0;
	width: auto;
}

/* Every award/champion card gets a thin yellow frame all round; the names,
   which default to cyan via .c4e-card--accent-*, read navy for legibility. */
.c4e-champion-brand .c4e-champion-card,
.c4e-champion-brand .c4e-award-card,
.c4e-champion-brand .c4e-award-2023-nominee {
	border: 2px solid var(--c4e-champion);
}

.c4e-champion-brand .c4e-card--accent-cyan h2,
.c4e-champion-brand .c4e-card--accent-cyan h3,
.c4e-champion-brand .c4e-card--accent-cyan h4,
.c4e-champion-brand .c4e-card--accent-cyan h2 a,
.c4e-champion-brand .c4e-card--accent-cyan h3 a,
.c4e-champion-brand .c4e-card--accent-cyan h4 a,
.c4e-champion-brand .c4e-card--accent-coral h2,
.c4e-champion-brand .c4e-card--accent-coral h3,
.c4e-champion-brand .c4e-card--accent-coral h4,
.c4e-champion-brand .c4e-card--accent-coral h2 a,
.c4e-champion-brand .c4e-card--accent-coral h3 a,
.c4e-champion-brand .c4e-card--accent-coral h4 a {
	color: var(--c4e-navy);
}

/* Featured champion → a soft cream tint inside the same yellow frame, so the
   regional champion still reads as the standout without the loud solid fill.
   A slim navy divider separates the portrait from the text (a quiet nod to
   the award poster). Text keeps its default card colours on the light tint. */
.c4e-champion-brand .c4e-champion-card--featured {
	background: var(--c4e-champion-soft);
}

.c4e-champion-brand .c4e-champion-card--featured .wp-block-image {
	background: transparent;
}

.c4e-champion-brand .c4e-champion-card--featured .c4e-champion-card__body {
	border-left: 2px solid var(--c4e-navy);
}

/* Pale info panels and the award logo strip → soft yellow tint. */
.c4e-champion-brand .c4e-panel--pale,
.c4e-champion-brand .c4e-award-logo-strip {
	background: var(--c4e-champion-soft);
	border-color: transparent;
}

/* List markers on the award pages → deep gold (were cyan). */
.c4e-champion-brand .c4e-topic-list li::before {
	color: var(--c4e-champion-deep);
}

/* Primary CTA (award pages) and the home-style CTA (embedded mentions) →
   champion yellow with navy text. */
.c4e-champion-brand .c4e-button-primary .wp-block-button__link,
.c4e-champion-brand .c4e-home-button .wp-block-button__link {
	background: var(--c4e-champion);
	color: var(--c4e-navy);
}

.c4e-champion-brand .c4e-button-primary .wp-block-button__link:hover,
.c4e-champion-brand .c4e-button-primary .wp-block-button__link:focus-visible,
.c4e-champion-brand .c4e-home-button .wp-block-button__link:hover,
.c4e-champion-brand .c4e-home-button .wp-block-button__link:focus-visible {
	background: color-mix(in srgb, var(--c4e-champion) 86%, #000);
	color: var(--c4e-navy);
	transform: translateY(-1px);
}

/* Secondary CTA → soft-yellow fill with a gold border. */
.c4e-champion-brand .c4e-button-secondary .wp-block-button__link {
	background: var(--c4e-champion-soft);
	border-color: color-mix(in srgb, var(--c4e-champion) 55%, #fff);
	color: var(--c4e-navy);
}

.c4e-champion-brand .c4e-button-secondary .wp-block-button__link:hover,
.c4e-champion-brand .c4e-button-secondary .wp-block-button__link:focus-visible {
	background: color-mix(in srgb, var(--c4e-champion-soft) 78%, var(--c4e-champion));
	border-color: var(--c4e-champion);
	color: var(--c4e-navy);
}

/* Champion Award mention embedded in another page (front page 6322, Forum
   2025 5677): a short yellow kicker bar above the heading marks it as the
   award sub-brand inline. Scoped to `.c4e-champion-brand.wp-block-columns`
   (the class sits on the columns block itself) so it never fires on the award
   pages, where `.c4e-champion-brand` lives on <body>. */
.c4e-champion-brand.wp-block-columns .wp-block-column > .wp-block-heading:first-child::before {
	background: var(--c4e-champion);
	border-radius: 999px;
	content: "";
	display: block;
	height: 4px;
	margin-block-end: 0.9rem;
	width: 2.75rem;
}