/* ==========================================================================
   Avenues — block / classic content layer.

   Loaded only on pages rendered by the theme's page.php (see
   avenues_blocks_assets() in functions.php), i.e. pages whose body is editor
   block content rather than an avenues-content plugin template.

   Everything is scoped to .entry-content, so plugin templates, the homepage
   template and the site chrome are untouched. Tokens come from theme.css.

   Order:
     1. universal   — applies to every block-content page
     2. bands       — .av-band sections (the shared page pattern)
     3. components  — opt-in classes a page's content can ask for
   ========================================================================== */

/* =========================================================== 1. universal = */

/* ---- media -------------------------------------------------------------- */
/* A 1024px or square asset dropped into a page must never eat a screenful on
   its own. Cap by height, let width follow, and keep it centred. Component
   rules further down (.av-tile, .av-team, .av-duo, .av-split) are more
   specific and opt out of this cap where a fixed ratio is wanted instead. */
.entry-content figure.wp-block-image > img,
.entry-content figure.wp-block-image > a > img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 300px;
	margin-inline: auto;
	border-radius: var(--radius-md);
}
@media (min-width: 900px) {
	.entry-content figure.wp-block-image > img,
	.entry-content figure.wp-block-image > a > img { max-height: 340px; }
}
.entry-content figure.wp-block-image { margin-inline: auto; text-align: center; }
.entry-content figure.wp-block-image figcaption { font-size: var(--fs-sm); color: var(--text-muted); }

/* The Doctify review carousel ships an inline min-height of 700px and renders
   nothing at all until cookie consent, so it leaves an empty screenful in the
   middle of the page. An inline style can only be beaten by !important; this
   is deliberately scoped to that one third-party widget. */
.entry-content iframe[src*="doctify.com"] {
	min-height: 0 !important;
	height: 260px;
}

.entry-content img,
.entry-content iframe,
.entry-content table { max-width: 100%; }

/* ---- lists -------------------------------------------------------------- */
/* Pasted documents (policies, T&Cs) arrive as dozens of one-item lists. The
   default 24px block gap between each turns a page into five screens. */
.entry-content ul.wp-block-list + ul.wp-block-list,
.entry-content ul.wp-block-list + ol.wp-block-list,
.entry-content ol.wp-block-list + ul.wp-block-list,
.entry-content ol.wp-block-list + ol.wp-block-list { margin-block-start: 0; }
.entry-content p + ul.wp-block-list,
.entry-content p + ol.wp-block-list { margin-block-start: var(--space-2); }
.entry-content li { margin-bottom: 0; }
.entry-content li + li { margin-top: var(--space-1); }

/* ---- plain document pages ---------------------------------------------- */
/* A page with no banded sections is a document: give the prose a wider column
   than the 720px reading measure so a policy does not run on forever. */
.entry-content:not(:has(.av-band)) > * { max-width: min(100%, 1000px); }

/* =============================================================== 2. bands = */

/* Tighten the gaps *inside* a band so a section reads as one composition
   instead of a stack of loose blocks. */
.entry-content .av-band > * + * { margin-block-start: var(--space-4); }
.entry-content .av-band > h2 + p,
.entry-content .av-band > h3 + p,
.entry-content .av-band > p + p { margin-block-start: var(--space-3); }

/* Measure: long prose never runs wider than a comfortable line. */
.entry-content .av-band > p,
.entry-content .av-band > ol.wp-block-list,
.entry-content .av-band > ul.wp-block-list { max-width: var(--measure); }

/* Core's constrained layout centres every band child with
   `margin-inline: auto !important`, which leaves a capped paragraph floating
   in the middle of a section whose headings start at the left edge. This is
   the one rule that has to answer !important with !important, and it is
   limited to the prose blocks of a non-hero band. */
.entry-content .av-band:not(.av-hero) > p,
.entry-content .av-band:not(.av-hero) > ol.wp-block-list,
.entry-content .av-band:not(.av-hero) > ul.wp-block-list {
	margin-inline: max(0px, (100% - var(--wp--style--global--content-size, 720px)) / 2) auto !important;
}

/* Eyebrow. The shared content pattern on these pages is a short kicker
   heading immediately followed by the real section heading. Demote the kicker
   rather than let two equal-weight H2s fight each other. */
.entry-content .av-band > h2:first-child:has(+ h2),
.entry-content .av-split > h2:first-of-type:has(+ h2),
.entry-content .av-tile > h2:first-of-type:has(+ h2) {
	font-family: var(--font-body);
	font-size: var(--fs-overline);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-overline);
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--green-400);
}
.entry-content .av-band > h2:first-child:has(+ h2) + h2,
.entry-content .av-split > h2:first-of-type:has(+ h2) + h2,
.entry-content .av-tile > h2:first-of-type:has(+ h2) + h2 { margin-block-start: var(--space-1); }

/* ---- hero band ---------------------------------------------------------- */
.entry-content > .av-hero { text-align: center; }
.entry-content > .av-hero > * + * { margin-block-start: var(--space-3); }
.entry-content > .av-hero h1,
.entry-content > .av-hero h2 { max-width: 24ch; margin-inline: auto; }
.entry-content > .av-hero > p { max-width: 56ch; margin-inline: auto; }
.entry-content > .av-hero .wp-block-buttons { justify-content: center; }
/* A bulleted list inside a centred hero reads as ragged markers; run it as a
   centred block of lines instead. */
.entry-content > .av-hero ul.wp-block-list,
.entry-content > .av-hero ol.wp-block-list {
	list-style: none;
	padding-left: 0;
	max-width: 62ch;
	margin-inline: auto;
}

/* Hero artwork: a poster is capped like any other image; an SVG brand mark
   has a tiny intrinsic size (49x43) and would otherwise sit in the corner
   looking like a stray fragment, so give it a deliberate size instead. */
.entry-content > .av-hero figure.wp-block-image > img[src$=".svg"],
.entry-content > .av-hero figure.wp-block-image > a > img[src$=".svg"] {
	height: 56px;
	width: auto;
	max-height: none;
}
@media (min-width: 900px) {
	.entry-content > .av-hero figure.wp-block-image > img[src$=".svg"],
	.entry-content > .av-hero figure.wp-block-image > a > img[src$=".svg"] { height: 72px; }
}

/* A hero on a dark band carries the brand colours on the type. */
.entry-content > .av-hero.has-grey-600-background-color,
.entry-content > .av-hero.has-grey-900-background-color { color: var(--brand-white); }
.entry-content > .av-hero.has-grey-600-background-color h1,
.entry-content > .av-hero.has-grey-600-background-color h2,
.entry-content > .av-hero.has-grey-900-background-color h1,
.entry-content > .av-hero.has-grey-900-background-color h2 { color: var(--brand-sun); }
.entry-content > .av-hero.has-grey-600-background-color p,
.entry-content > .av-hero.has-grey-900-background-color p { color: var(--brand-white); }

/* ========================================================== 3. components = */

/* ---- .av-split : copy beside one supporting image ----------------------- */
/* The image is first in the DOM and floats out of the flow on desktop, so the
   copy sets beside it instead of under it. */
.entry-content .av-split { text-align: left; }
.entry-content .av-split > * + * { margin-block-start: var(--space-4); }
.entry-content .av-split::after { content: ""; display: block; clear: both; }

@media (min-width: 900px) {
	.entry-content .av-split > figure.wp-block-image {
		float: right;
		width: 44%;
		margin: 0 0 var(--space-5) var(--space-7);
	}
	.entry-content .av-split > figure.wp-block-image > img {
		width: 100%;
		max-height: none;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		border-radius: var(--radius-lg);
	}
	.entry-content .av-split > p,
	.entry-content .av-split > ul,
	.entry-content .av-split > ol { max-width: none; }
}

/* ---- .av-duo : two banners side by side --------------------------------- */
.entry-content .av-duo { display: grid; gap: var(--space-4); }
@media (min-width: 720px) {
	.entry-content .av-duo { grid-template-columns: 1fr 1fr; align-items: center; }
}
.entry-content .av-duo > figure.wp-block-image { margin: 0; }
/* Promo banners carry type inside the artwork, so they are never cropped —
   only capped and allowed to keep their own ratio. */
.entry-content .av-duo > figure.wp-block-image > img {
	width: 100%;
	height: auto;
	max-height: 300px;
	object-fit: contain;
	border-radius: var(--radius-lg);
}

/* ---- .av-cols : short lists in columns ---------------------------------- */
.entry-content .av-cols { display: grid; gap: 0 var(--space-6); }
@media (min-width: 600px) { .entry-content .av-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .entry-content .av-cols { grid-template-columns: repeat(3, 1fr); } }
.entry-content .av-cols > ul.wp-block-list,
.entry-content .av-cols > ol.wp-block-list { margin: 0; max-width: none; }

/* ---- .av-inline-lists : link/contact lists that read as a row ----------- */
.entry-content .av-inline-lists { text-align: center; }
.entry-content .av-inline-lists ul.wp-block-list {
	list-style: none;
	padding-left: 0;
	margin-inline: auto;
	max-width: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2) var(--space-5);
}
.entry-content .av-inline-lists li { margin-bottom: 0; }

/* ---- .av-team : a staff wall, not a column of portraits ---------------- */
.entry-content .av-team.wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: var(--space-2);
	margin-block-start: var(--space-5);
}
@media (min-width: 600px) {
	.entry-content .av-team.wp-block-gallery { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}
/* Core sizes gallery items with `width: calc(33.33% - ...)` behind a
   `:not(#individual-image)` ID hack. Matching that hack is how a theme is
   meant to beat it without reaching for !important. */
.entry-content .av-team.wp-block-gallery > figure.wp-block-image:not(#individual-image) {
	margin: 0;
	width: 100%;
	max-width: none;
	flex: none;
}
.entry-content .av-team.wp-block-gallery figure.wp-block-image > img {
	width: 100%;
	max-width: none;
	max-height: none;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: center 22%;
	border-radius: var(--radius-sm);
}

/* ---- .av-tiles / .av-tile : repeating units as a card grid -------------- */
.entry-content .av-tiles {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
	margin-block-start: var(--space-5);
}
@media (min-width: 620px) { .entry-content .av-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .entry-content .av-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .entry-content .av-tiles { grid-template-columns: repeat(4, 1fr); } }
/* Compact link tiles are small enough to sit two-up on a phone. */
@media (min-width: 380px) {
	.entry-content .av-tiles.av-tiles-compact { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
}
@media (min-width: 620px) {
	.entry-content .av-tiles.av-tiles-compact { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

.entry-content .av-tile {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
	text-align: left;
	background: var(--brand-white);
	border: 1px solid var(--grey-100);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xs);
}
.entry-content .av-tile > * { margin-block: 0; max-width: none; }

/* The artwork always leads the card, whatever its place in the source order. */
.entry-content .av-tile > figure.wp-block-image { order: -1; margin: 0; }
.entry-content .av-tile > figure.wp-block-image > img,
.entry-content .av-tile > figure.wp-block-image > a > img {
	width: 100%;
	max-height: none;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--radius-md);
}
.entry-content .av-tiles-compact .av-tile > figure.wp-block-image > img,
.entry-content .av-tiles-compact .av-tile > figure.wp-block-image > a > img { aspect-ratio: 4 / 3; }

.entry-content .av-tile > h3 { font-size: var(--fs-h3); color: var(--green-600); }
.entry-content .av-tile > h2 { font-size: var(--fs-h4); }
.entry-content .av-tile > p { font-size: var(--fs-sm); }
.entry-content .av-tile > p > strong:only-child {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	color: var(--text-heading);
}
.entry-content .av-tile > .wp-block-buttons { margin-block-start: auto; padding-block-start: var(--space-2); }
.entry-content .av-tile .wp-block-button__link { font-size: var(--fs-sm); }

/* ---- .av-card : the existing pillar/feature card pattern ---------------- */
/* Its images arrive at their natural size (often 1:1 at 500px or more), which
   makes a three-card row taller than the copy it carries. */
.entry-content .av-card > figure.wp-block-image { margin-block: 0 var(--space-3); }
.entry-content .av-card > figure.wp-block-image > img,
.entry-content .av-card > figure.wp-block-image > a > img {
	width: 100%;
	max-height: none;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-md);
}

/* A grey-50 band would leave white cards floating on a near-white field. */
.entry-content .has-grey-50-background-color .av-tile { border-color: var(--grey-300); }

/* ================================================= 4. campaign pages = */
/* These pages were migrated from Elementor canvas templates, where each
   section was a row of columns. The import flattened every row into a linear
   run of sibling blocks, so a four-across feature row became four stacked
   screenfuls. The components below put the rows back.

   Measured against the live equivalents at 1440px, the flattening — not the
   booking widgets — is where the height went: on /40-event/ the panel of
   three doctors was 1,633px against live's 417px, while the LeadConnector
   iframe was 855px against 810px. */

/* ---- .av-tri : a flat run of N x (media, title, copy) -> N columns ------ */
/* Source order is figure, title, copy, figure, title, copy ... so filling the
   grid column-first with three rows reassembles the original row, and the
   three rows keep the titles and copy aligned across the columns. */
.entry-content .av-tri {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	grid-template-rows: auto auto 1fr;
	gap: var(--space-2) var(--space-5);
	align-items: start;
	text-align: center;
}
.entry-content .av-tri > * {
	margin-block: 0;
	max-width: none;
}
.entry-content .av-tri > figure.wp-block-image { margin: 0 0 var(--space-2); }
.entry-content .av-tri > figure.wp-block-image > img,
.entry-content .av-tri > figure.wp-block-image > a > img {
	width: 100%;
	height: auto;
	max-height: 150px;
	object-fit: contain;
}
/* The first paragraph of each triplet is the unit's title. */
.entry-content .av-tri > p:nth-child(3n + 2) {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: var(--fw-semibold);
	color: var(--green-600);
}
.entry-content .av-tri > p:nth-child(3n),
.entry-content .av-tri > h3:nth-child(3n) { font-size: var(--fs-sm); color: var(--text-muted); }
.entry-content .av-tri > h3 { font-size: var(--fs-h4); }
.entry-content .av-tri > h3:nth-child(3n + 2) { color: var(--green-600); }

/* Portraits are cropped square so a panel of people reads as one row. */
.entry-content .av-tri-people > figure.wp-block-image > img,
.entry-content .av-tri-people > figure.wp-block-image > a > img {
	aspect-ratio: 1;
	max-height: none;
	object-fit: cover;
	object-position: center 20%;
	border-radius: var(--radius-lg);
}

/* Below the two-column breakpoint the grid has to go back to a stack, and
   auto-flow column would otherwise keep one tall column per unit. */
@media (max-width: 899px) {
	.entry-content .av-tri { grid-auto-flow: row; grid-template-rows: none; grid-auto-columns: auto; gap: var(--space-2); }
	.entry-content .av-tri > figure.wp-block-image { margin-top: var(--space-5); }
	.entry-content .av-tri > figure.wp-block-image:first-child { margin-top: 0; }
	.entry-content .av-tri > figure.wp-block-image > img { max-height: 120px; }
}

/* ---- .av-quad : a flat run of N x (media, title, copy, button) ---------- */
.entry-content .av-quad {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	grid-template-rows: auto auto 1fr auto;
	gap: var(--space-2) var(--space-4);
	align-items: start;
	text-align: center;
}
.entry-content .av-quad > * { margin-block: 0; max-width: none; }
.entry-content .av-quad > figure.wp-block-image { margin: 0; }
.entry-content .av-quad > figure.wp-block-image > img,
.entry-content .av-quad > figure.wp-block-image > a > img {
	width: 100%;
	height: auto;
	max-height: 160px;
	object-fit: contain;
}
.entry-content .av-quad > p:nth-child(4n + 2) {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: var(--fw-semibold);
	color: var(--green-600);
}
.entry-content .av-quad > p:nth-child(4n + 3) { font-size: var(--fs-sm); color: var(--text-muted); }
.entry-content .av-quad > .wp-block-buttons { justify-content: center; }
@media (max-width: 899px) {
	.entry-content .av-quad { grid-auto-flow: row; grid-template-rows: none; grid-auto-columns: auto; }
	.entry-content .av-quad > figure.wp-block-image { margin-top: var(--space-5); }
	.entry-content .av-quad > figure.wp-block-image:first-child { margin-top: 0; }
}

/* ---- .av-logo-row : a run of badges / partner marks --------------------- */
/* Four 1024px logos stacked at the universal 300px cap is 1,200px of page for
   what the source design ran as a single strip. */
.entry-content .av-logo-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-4) var(--space-6);
}
.entry-content .av-logo-row > figure.wp-block-image { margin: 0; flex: 0 1 auto; }
.entry-content .av-logo-row > figure.wp-block-image > img,
.entry-content .av-logo-row > figure.wp-block-image > a > img {
	max-height: 96px;
	width: auto;
	object-fit: contain;
}

/* ---- .av-sitefoot : the footer these canvas pages carry in content ------ */
/* On live these pages use an Elementor canvas template, which renders no site
   footer, so a footer was built into the page body. The theme renders a real
   site footer as well, so the in-content one is redundant; it is kept here
   (it is the client's content) but laid out as the row it was designed as
   rather than a 1,024px stack. */
.entry-content .av-sitefoot { text-align: left; }
@media (min-width: 900px) {
	.entry-content .av-sitefoot {
		display: grid;
		grid-template-columns: 1.1fr 1fr 1.3fr 1.4fr;
		gap: var(--space-6);
		align-items: start;
	}
}
.entry-content .av-sitefoot > * { margin-block: 0; max-width: none; }
.entry-content .av-sitefoot .av-foot-col > * + * { margin-block-start: var(--space-2); }
.entry-content .av-sitefoot h4 { font-size: var(--fs-h5, 1rem); margin: 0 0 var(--space-2); }
.entry-content .av-sitefoot ul.wp-block-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
	max-width: none;
	font-size: var(--fs-sm);
}
.entry-content .av-sitefoot li + li { margin-top: var(--space-1); }
.entry-content .av-sitefoot figure.wp-block-image { margin: 0 0 var(--space-3); text-align: left; }
.entry-content .av-sitefoot figure.wp-block-image > img {
	max-height: 56px;
	width: auto;
	margin-inline: 0;
}
/* The map is decoration at this size; live runs it about 200px tall. */
.entry-content .av-sitefoot .av-embed,
.entry-content .av-sitefoot iframe { height: 200px; min-height: 0; }
@media (max-width: 899px) {
	.entry-content .av-sitefoot .av-foot-col + .av-foot-col { margin-block-start: var(--space-5); }
}

/* ---- lone heading bands ------------------------------------------------- */
/* A band holding nothing but a section heading pays a full band's padding top
   and bottom for one line of type. */
.entry-content .av-band-head { padding-block-end: 0; }
.entry-content .av-band-head + .av-band { padding-block-start: var(--space-5); }

/* ---- a columns block carrying a single card ---------------------------- */
/* .av-swipe is a flex row, so one card stretches to the full 1,200px band and
   its 4:3 .av-card image renders about 1,166x875. Measured on
   /transfer-of-care/ that one block was 1,151px against live's 231px. A lone
   card is a call to action, not a row: run it as a horizontal media card. */
@media (min-width: 900px) {
	/* A grid cannot do this: the text is a run of sibling blocks, not one element, so the image
	   either occupies a single row (leaving the heading and link stranded in opposite corners)
	   or spans invented rows that push it to the bottom. Floating it lets the copy run beside
	   the image and close up underneath it, which is what a media card is. */
	.entry-content .av-swipe > .wp-block-column:only-child {
		display: block;
		text-align: left;
	}
	.entry-content .av-swipe > .wp-block-column:only-child::after {
		content: "";
		display: block;
		clear: both;
	}
	.entry-content .av-swipe > .wp-block-column:only-child > figure.wp-block-image {
		float: left;
		width: 300px;
		margin: 0 var(--space-5) var(--space-3) 0;
	}
	.entry-content .av-swipe > .wp-block-column:only-child > figure.wp-block-image > img,
	.entry-content .av-swipe > .wp-block-column:only-child > figure.wp-block-image > a > img {
		width: 100%;
		max-height: 220px;
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}
	.entry-content .av-swipe > .wp-block-column:only-child > :first-child { margin-block-start: 0; }
	.entry-content .av-swipe > .wp-block-column:only-child > * + *:not(figure) { margin-block-start: var(--space-2); }
}

/* ---- pasted policy documents ------------------------------------------- */
/* Section 1 zeroes the gap *before* a list that follows another list, but each
   list still carries its own 16px bottom margin, and nothing collapses it.
   Across the ~80 one-item lists of /privacy-policy/ that was 1,244px of gap
   against 245px on live. */
.entry-content ul.wp-block-list:has(+ ul.wp-block-list),
.entry-content ul.wp-block-list:has(+ ol.wp-block-list),
.entry-content ol.wp-block-list:has(+ ul.wp-block-list),
.entry-content ol.wp-block-list:has(+ ol.wp-block-list) { margin-block-end: 0; }

/* ---- hero posters ------------------------------------------------------- */
/* A campaign hero often carries a poster and a title lock-up as two separate
   images; at the universal 300px cap those two alone are a screenful. */
.entry-content > .av-hero.av-hero-poster figure.wp-block-image > img,
.entry-content > .av-hero.av-hero-poster figure.wp-block-image > a > img { max-height: 180px; }
@media (min-width: 900px) {
	.entry-content > .av-hero.av-hero-poster figure.wp-block-image > img,
	.entry-content > .av-hero.av-hero-poster figure.wp-block-image > a > img { max-height: 200px; }
}

/* ---- .av-pairs : a flat run of N x (label, body) -> N columns ----------- */
/* Same flattening as .av-tri, two blocks per unit: a stat chart and its
   caption, a sub-heading and its list, a portrait and a name. */
.entry-content .av-pairs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	grid-template-rows: auto 1fr;
	gap: var(--space-2) var(--space-6);
	align-items: start;
}
.entry-content .av-pairs > * { margin-block: 0; max-width: none; }
.entry-content .av-pairs > p:nth-child(2n + 1) {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: var(--fw-semibold);
	color: var(--green-600);
}
.entry-content .av-pairs ul.wp-block-list,
.entry-content .av-pairs ol.wp-block-list { margin: 0; max-width: none; font-size: var(--fs-sm); }
.entry-content .av-pairs > figure.wp-block-image { margin: 0; }
.entry-content .av-pairs .wp-block-table { margin: 0; }

/* Portraits with a name under them. */
.entry-content .av-pairs-people { text-align: center; }
.entry-content .av-pairs-people > figure.wp-block-image > img,
.entry-content .av-pairs-people > figure.wp-block-image > a > img {
	width: 100%;
	max-height: none;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: center 20%;
	border-radius: var(--radius-lg);
}
.entry-content .av-pairs-people > p:nth-child(2n) {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: var(--fw-semibold);
	color: var(--green-600);
}
@media (max-width: 899px) {
	.entry-content .av-pairs { grid-auto-flow: row; grid-template-rows: none; grid-auto-columns: auto; gap: var(--space-2); }
	.entry-content .av-pairs > figure.wp-block-image,
	.entry-content .av-pairs > .wp-block-table { margin-top: var(--space-5); }
	.entry-content .av-pairs > :first-child { margin-top: 0; }
}

/* ---- .av-photo-row : a run of supporting photographs ------------------- */
.entry-content .av-photo-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--space-3);
}
.entry-content .av-photo-row > figure.wp-block-image { margin: 0; }
.entry-content .av-photo-row > figure.wp-block-image > img,
.entry-content .av-photo-row > figure.wp-block-image > a > img {
	width: 100%;
	max-height: none;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-md);
}

/* ---- .av-media-split : one image beside the whole of a section --------- */
/* Unlike .av-split this does not float, so a grid or list in the copy column
   cannot collide with the image. */
@media (min-width: 900px) {
	.entry-content .av-media-split {
		display: grid;
		grid-template-columns: 36% 1fr;
		gap: var(--space-7);
		align-items: center;
	}
	.entry-content .av-media-split > * { margin-block: 0; max-width: none; }
	.entry-content .av-media-split > figure.wp-block-image { margin: 0; }
	.entry-content .av-media-split > figure.wp-block-image > img,
	.entry-content .av-media-split > figure.wp-block-image > a > img {
		width: 100%;
		max-height: none;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		border-radius: var(--radius-lg);
	}
	.entry-content .av-side-copy > * + * { margin-block-start: var(--space-3); }
	.entry-content .av-side-copy > :first-child { margin-block-start: 0; }
}

/* Compact link tiles carry a caption and a button, so a shallower crop keeps
   a nine-tile wall to two rows rather than three. */
.entry-content .av-tiles-compact .av-tile { padding: var(--space-3); gap: var(--space-1); }
.entry-content .av-tiles-compact .av-tile > figure.wp-block-image > img,
.entry-content .av-tiles-compact .av-tile > figure.wp-block-image > a > img { aspect-ratio: 16 / 10; }
.entry-content .av-tiles-compact .av-tile > p { font-size: var(--fs-sm); }

/* A lone card nested inside a stat column is already in a narrow track, so the
   horizontal media-card treatment above must not apply to it. */
@media (min-width: 900px) {
	.entry-content .av-pairs .av-swipe > .wp-block-column:only-child {
		display: block;
		text-align: center;
	}
}

/* ---- final tuning against the live pages ------------------------------- */
/* Hero artwork on a campaign page is a supporting mark, not a billboard: the
   universal 340px cap still let a single poster own half the fold. */
@media (min-width: 900px) {
	.entry-content > .av-hero figure.wp-block-image > img,
	.entry-content > .av-hero figure.wp-block-image > a > img { max-height: 240px; }
	.entry-content > .av-hero.av-hero-poster figure.wp-block-image > img,
	.entry-content > .av-hero.av-hero-poster figure.wp-block-image > a > img { max-height: 170px; }
}
/* A square crop across a full-width track makes each portrait as tall as the
   column is wide; three of them were a screenful on their own. */
.entry-content .av-tri-people > figure.wp-block-image > img,
.entry-content .av-tri-people > figure.wp-block-image > a > img,
.entry-content .av-pairs-people > figure.wp-block-image > img,
.entry-content .av-pairs-people > figure.wp-block-image > a > img { max-height: 260px; }

/* A band holding only a map: no room needed above and below for a heading that is not there.
   Kept on the campaign pages after the duplicated footer was removed. */
.entry-content .av-band-tight{padding-block:.75rem}
.entry-content .av-band-tight iframe{display:block;border-radius:12px}

/* Anything with an id can be a jump target, and the header is sticky: without this the heading
   a button jumps to lands underneath it. 66px header plus a little breathing room. */
.entry-content [id]{scroll-margin-top:86px}

/* Success-rate figures as rings.
   Each figure used to appear twice: a bare two-row data table, then a card repeating the
   percentage. The two rows are the two halves of the same number, so they are drawn as one
   ring and the raw values sit underneath as small print, which is what they are. */
/* .av-pairs normally flows in columns with two rows, for label/body pairs. A run of rings is
   one block each, so that turned four of them into two columns; flow them as rows instead. */
.entry-content .av-pairs:has(.av-stat),
.entry-content .av-stats-grid{
	display:grid !important;gap:26px 20px;margin:0;
	grid-auto-flow:row !important;
	grid-template-rows:auto !important;
	grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)) !important
}
.entry-content .av-stat{margin:0;display:grid;gap:12px;justify-items:center;text-align:center}
/* The ring is drawn on a pseudo-element so the mask that cuts its hole does not also erase the
   number: a mask on the container clips every descendant, which left an empty circle. */
.entry-content .av-ring{
	--size:132px;--thick:13px;
	position:relative;width:var(--size);height:var(--size);display:grid;place-items:center
}
.entry-content .av-ring::before{
	content:"";position:absolute;inset:0;border-radius:50%;
	background:conic-gradient(var(--brand-sun,#FCD841) calc(var(--pct)*1%), color-mix(in srgb, var(--green-600,#3D5641) 15%, transparent) 0);
	-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - var(--thick)),#000 calc(100% - var(--thick)));
	mask:radial-gradient(farthest-side,#0000 calc(100% - var(--thick)),#000 calc(100% - var(--thick)))
}
.entry-content .av-ring-value{
	position:relative;z-index:1;
	font-family:var(--font-display,inherit);font-weight:700;font-size:1.875rem;
	color:var(--green-600,#3D5641);line-height:1
}
.entry-content .av-stat figcaption{display:grid;gap:8px;max-width:30ch}
.entry-content .av-stat-label{font-size:.9375rem;line-height:1.45;color:var(--ink-2,#4D5A50);margin:0}
.entry-content .av-stat-data{
	display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin:0;
	font-size:.75rem;color:var(--ink-3,#7A867C)
}
.entry-content .av-stat-data > div{display:flex;gap:5px}
.entry-content .av-stat-data dt{margin:0}
.entry-content .av-stat-data dd{margin:0;font-weight:600;color:var(--ink-2,#4D5A50)}
.entry-content .av-stat-data dt::after{content:""}
@media (prefers-reduced-motion:no-preference){
	.entry-content .av-ring{transition:background .4s ease}
}

/* Tables on block pages get the same treatment as the ones in the templates (.tbl): a header
   band, quiet row rules, comfortable padding, and a scroll container on narrow screens. Before
   this they rendered as a bare grid of thin borders, which is why /success/ read as a different
   site from the rest. */
.entry-content .wp-block-table{margin-block:var(--space-5);overflow-x:auto}
.entry-content .wp-block-table table{
	border-collapse:collapse;width:100%;min-width:520px;font-size:.875rem;border:0
}
.entry-content .wp-block-table th,
.entry-content .wp-block-table td{
	padding:10px 14px;text-align:left;border:0;border-bottom:1px solid var(--grey-100,#E2E7E1)
}
.entry-content .wp-block-table thead th,
.entry-content .wp-block-table tbody tr:first-child th{
	background:var(--grey-50,#F4F6F3);font-family:var(--font-display);font-size:.78rem;
	letter-spacing:.08em;text-transform:uppercase;color:var(--grey-600,#5A6B5C);font-weight:700
}
.entry-content .wp-block-table tbody tr:last-child td{border-bottom:0}
.entry-content .wp-block-table tbody tr:hover{background:var(--grey-50,#F7F9F6)}
/* Our own figures are the point of a comparison table, so they are the ones that stand out.
   Which cells those are is decided in inc/tables.php by the header that says "Avenues" — a
   column in one of these tables and a row in the other, so no nth-child rule can find them. */
.entry-content .wp-block-table td.av-us{font-weight:700;color:var(--green-600,#3D5641)}
.entry-content .wp-block-table th.av-us{color:var(--green-600,#3D5641)}

/* Long methodology notes fold, exactly as they do on the treatment pages: present, one click
   away, and not a wall of small text under a set of figures. */
.entry-content details.av-method{margin-block:var(--space-4);max-width:var(--wp--style--global--content-size,720px)}
.entry-content details.av-method > summary{
	cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.45em;
	font-size:.8125rem;font-weight:600;color:var(--green-600,#3D5641);padding:.35em 0
}
.entry-content details.av-method > summary::-webkit-details-marker{display:none}
.entry-content details.av-method > summary::before{
	content:"";width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
	transform:rotate(-45deg);transition:transform .15s ease
}
.entry-content details.av-method[open] > summary::before{transform:rotate(45deg)}
.entry-content details.av-method > summary:hover{text-decoration:underline}
.entry-content details.av-method > summary:focus-visible{outline:3px solid var(--brand-sun);outline-offset:3px}
.entry-content details.av-method p{font-size:.78rem;line-height:1.55;color:var(--ink-3,#7A867C);margin-block:.5em}
.entry-content details:not([open]) > *:not(summary){display:none}


/* A band saved as a flow group (rather than a constrained one) gets no content column from
   WordPress, so its heading, prose and tables ran edge to edge while the bands around them sat
   in a 720px column — the main reason /success/ read as misaligned. Same column for both. */
.entry-content .av-band.is-layout-flow > :not(.alignfull):not(.alignwide):not(.av-band) {
	max-width: var(--wp--style--global--content-size, 720px);
	margin-inline: auto;
}
.entry-content .av-band.is-layout-flow > p,
.entry-content .av-band.is-layout-flow > ol.wp-block-list,
.entry-content .av-band.is-layout-flow > ul.wp-block-list { max-width: var(--measure); }


/* Exactly four rings: auto-fit puts three on one row and strands the fourth. Two and two reads
   as one set, and gives the long captions room. */
@media (min-width:600px){
	.entry-content .av-pairs:has(.av-stat):has(> :nth-child(4)):not(:has(> :nth-child(5))),
	.entry-content .av-stats-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))){
		grid-template-columns:repeat(2,minmax(0,1fr)) !important
	}
}
/* One ring per row on a phone: two-up leaves 161px per figure, and these captions are a full
   sentence each. */
@media (max-width:599px){
	.entry-content .av-pairs:has(.av-stat),
	.entry-content .av-stats-grid{grid-template-columns:minmax(0,1fr) !important}
}


/* WordPress core puts a 3px near-black rule under a table head. The site's own tables (.tbl)
   separate the head with the grey band alone, so match them. */
.entry-content .wp-block-table thead{border-bottom:0}
.entry-content .wp-block-table thead th{border-bottom:1px solid var(--grey-200,#D6DDD6)}


/* ---------- Band backgrounds run the full width of the screen ----------
   A band is a "wide" group, so its colour used to stop at the content width and read as a
   box floating on white. The colour now continues to both screen edges (border-image
   outset paints beyond the box without widening the page or causing sideways scroll),
   while the content inside stays aligned with the rest of the page. */
.entry-content .av-band.has-sun-background-color { --av-band-bg: var(--wp--preset--color--sun); }
.entry-content .av-band.has-sun-50-background-color { --av-band-bg: var(--wp--preset--color--sun-50); }
.entry-content .av-band.has-green-lotus-background-color { --av-band-bg: var(--wp--preset--color--green-lotus); }
.entry-content .av-band.has-deep-green-background-color { --av-band-bg: var(--wp--preset--color--deep-green); }
.entry-content .av-band.has-green-50-background-color { --av-band-bg: var(--wp--preset--color--green-50); }
.entry-content .av-band.has-ember-background-color { --av-band-bg: var(--wp--preset--color--ember); }
.entry-content .av-band.has-price-red-background-color { --av-band-bg: var(--wp--preset--color--price-red); }
.entry-content .av-band.has-brand-white-background-color { --av-band-bg: var(--wp--preset--color--brand-white); }
.entry-content .av-band.has-white-background-color { --av-band-bg: var(--wp--preset--color--white); }
.entry-content .av-band.has-grey-50-background-color { --av-band-bg: var(--wp--preset--color--grey-50); }
.entry-content .av-band.has-grey-100-background-color { --av-band-bg: var(--wp--preset--color--grey-100); }
.entry-content .av-band.has-grey-300-background-color { --av-band-bg: var(--wp--preset--color--grey-300); }
.entry-content .av-band.has-grey-600-background-color { --av-band-bg: var(--wp--preset--color--grey-600); }
.entry-content .av-band.has-grey-700-background-color { --av-band-bg: var(--wp--preset--color--grey-700); }
.entry-content .av-band.has-grey-900-background-color { --av-band-bg: var(--wp--preset--color--grey-900); }
.entry-content .av-band.has-background {
	border-image: linear-gradient(var(--av-band-bg, transparent) 0 0) fill 0 / / 0 100vmax;
	border-radius: 0;
}