/**
 * Basuto Insights — design repair, 6 October 2026.
 *
 * ONE source, TWO delivery routes. This file is:
 *   - enqueued by the plugin after insights.css (file release), and
 *   - the verbatim body of the appended block in the `custom_css` record
 *     (native release, which is what ships now).
 * Keeping it a separate file is what stops the two routes drifting apart.
 * insights.css itself is byte-identical to 1.0.2 and is NOT touched, so
 * rolling the native records back leaves a working 1.0.2 behind.
 *
 * EVERY rule is scoped under `.bi-r2`, the class the saved templates put on
 * their MAIN wrapper. That is not decoration: Additional CSS is emitted
 * inside `global-styles-inline-css` (style block 21 of 26 in the staging head),
 * while `basuto-insights-css` is block 26. Custom CSS therefore loads *before*
 * the plugin stylesheet and loses every specificity tie to it. `.bi-r2 .ed-card`
 * (0,2,0) beats `.ed-card` (0,1,0) regardless of order, so the repair holds
 * whichever route delivered it.
 *
 * Nothing here selects the site header, the footer, /about/, or any element
 * outside `.bi-r2`.
 *
 * Numbers come from measuring the approved mockups in a browser
 * (qa/approved/geometry.json), not from reading their stylesheets.
 * Breakpoints: 980 / 760 / 620 / 380, as the approved hub uses.
 */

.bi-r2 {
	/* The approved palette. `--bi-hairline` is the mockups' warm sand
	   #E8E2D3; insights.css 1.0.2 used a pale teal #B8E0DA, which drew every
	   card edge and section rule in the wrong colour family. */
	--bi-cream: var(--wp--preset--color--cream, #FBF8F1);
	--bi-teal-deep: var(--wp--preset--color--gold, #0E5C5C);
	--bi-teal: var(--wp--preset--color--teal-hover, #237676);
	--bi-ink: var(--wp--preset--color--charcoal, #1F2421);
	--bi-terracotta: var(--wp--preset--color--terracotta, #A04E2C);
	--bi-hairline: #E8E2D3;
	--bi-ink-soft: #5A615C;
	--bi-warm-white: #F5EFE2;
	--bi-teal-whisper: #E8F2EF;

	/* The approved article trio. Their sum is the shell that both the article
	   head and the article body are centred on, which is what puts the H1 and
	   the body text on one left edge. Staging's own contentSize is 900px and
	   was capping the columns block at 900, giving a 573px reading column. */
	--bi-measure: 660px;
	--bi-rail: 300px;
	--bi-gutter: 64px;
	--bi-reading-shell: 1024px; /* 660 + 64 + 300 */
	--bi-wide: 1180px;

	/* The wrapper itself is a flow child of .wp-site-blocks, so it picked up
	   the same 20px blockGap and opened the page with a pale-teal band under
	   the site header. (The larger reserved strip above that is the theme's
	   own fixed-header offset, `.wp-site-blocks { padding-top: 95px }`, which
	   every page on the site carries and which is out of scope here.) */
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ------------------------------------------------------------------ *
 * 1. Section seams
 *
 * The global blockGap rule that gives every flow child a margin-block-start of
 * 20px put a 20px gap between every full-bleed section. The page background
 * is #E8F2EF, so each gap rendered as a pale-teal stripe across the page and
 * the approved "title → tabs → photographs" run became four floating slabs.
 * The approved sequence is continuous: surfaces change, the flow does not break.
 * ------------------------------------------------------------------ */

.bi-r2 .full-bleed-section {
	margin-block-start: 0;
	margin-block-end: 0;
}

.bi-r2 .hub-masthead-inner,
.bi-r2 .topicnav-scroll,
.bi-r2 .spread-grid,
.bi-r2 .latest-head,
.bi-r2 .latest-meta,
.bi-r2 .next-step,
.bi-r2 .ed-grid-wrap,
.bi-r2 .article-head-inner,
.bi-r2 .article-columns,
.bi-r2 .related-reading .wp-block-query,
.bi-r2 .cta-band .wp-block-heading {
	margin-block-start: 0;
}

/* ------------------------------------------------------------------ *
 * 2. Shared furniture
 * ------------------------------------------------------------------ */

.bi-r2 .kicker,
.bi-r2 .eyebrow {
	margin: 0 0 9px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bi-ink-soft);
}

/* Headline links inherit the theme's terracotta anchor colour, so every card
   title, lead title and supporting title rendered terracotta and bold where
   the approved design is deep teal at normal weight. Both the heading and its
   anchor are set, because the colour lands on whichever carries the text. */
.bi-r2 .hub-title,
.bi-r2 .lead-title,
.bi-r2 .lead-title a,
.bi-r2 .side-title,
.bi-r2 .side-title a,
.bi-r2 .ed-card-title,
.bi-r2 .ed-card-title a,
.bi-r2 .article-title,
.bi-r2 .latest-head h2,
.bi-r2 .related-reading .wp-block-query h2 {
	color: var(--bi-teal-deep);
	font-weight: 400;
	text-decoration: none;
}

.bi-r2 .lead-title a:hover,
.bi-r2 .lead-title a:focus-visible,
.bi-r2 .side-title a:hover,
.bi-r2 .side-title a:focus-visible,
.bi-r2 .ed-card-title a:hover,
.bi-r2 .ed-card-title a:focus-visible {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * 3. Hub masthead — compact, cream, continuous with the tabs below it
 * ------------------------------------------------------------------ */

.bi-r2 .hub-masthead {
	background-color: var(--bi-cream);
	border-bottom: 1px solid var(--bi-hairline);
}

.bi-r2 .hub-masthead-inner {
	max-width: var(--bi-wide);
	margin-inline: auto;
	gap: 4px 40px;
}

/* Left to the theme the hub H1 rendered at 58px/69.6px, making the masthead
   142px tall against the approved 78px and pushing the whole editorial spread
   below the fold. */
.bi-r2 .hub-title {
	margin: 0;
	padding-left: 15px;
	border-left: 4px solid var(--bi-terracotta);
	font-size: clamp(28px, 3.3vw, 40px);
	line-height: 1.05;
	letter-spacing: -0.015em;
}

.bi-r2 .hub-intro {
	flex: 0 1 48ch;
	max-width: 48ch;
	margin: 0;
	font-size: clamp(15px, 1.25vw, 17px);
	font-weight: 300;
	line-height: 1.5;
	color: var(--bi-ink-soft);
}

/* ------------------------------------------------------------------ *
 * 4. Topic navigation — section tabs, not filter pills
 * ------------------------------------------------------------------ */

.bi-r2 .topicnav {
	background-color: #fff;
	border-bottom: 1px solid var(--bi-hairline);
}

.bi-r2 .topicnav-scroll {
	max-width: var(--bi-wide);
	margin-inline: auto;
}

.bi-r2 ul.topicnav-list {
	gap: 2px;
	padding: 0;
}

.bi-r2 .topicnav-list li {
	font-size: 12px;
	font-weight: 400;
	color: var(--bi-ink-soft);
}

.bi-r2 .topicnav-list a {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	padding: 13px 14px 11px;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	background: transparent;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--bi-teal-deep);
	text-decoration: none;
}

.bi-r2 .topicnav-list a:hover,
.bi-r2 .topicnav-list a:focus-visible {
	border-color: transparent;
	border-bottom-color: var(--bi-hairline);
	background: var(--bi-teal-whisper);
}

.bi-r2 .topicnav-list a.is-current,
.bi-r2 .topicnav-list a[aria-current="true"] {
	border-bottom-color: var(--bi-terracotta);
	background: var(--bi-teal-whisper);
	color: var(--bi-teal-deep);
	font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * 5. Editorial spread
 * ------------------------------------------------------------------ */

.bi-r2 .spread {
	background-color: #fff;
}

.bi-r2 .spread .wp-block-columns {
	max-width: var(--bi-wide);
	margin-inline: auto;
}

.bi-r2 .lead-media img {
	max-height: 260px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: 50% 35%;
	background: var(--bi-warm-white);
}

.bi-r2 .lead-title {
	margin: 10px 0;
	font-size: clamp(26px, 2.45vw, 32px);
	line-height: 1.12;
	letter-spacing: -0.012em;
}

.bi-r2 .lead-standfirst {
	max-width: 54ch;
	margin: 0 0 10px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--bi-ink-soft);
}

.bi-r2 .side-media img {
	max-height: 160px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 35%;
	background: var(--bi-warm-white);
}

/* 22px, as approved. At 1.0.2's 18px the supporting headlines matched the grid
   card titles, so the spread lost its middle tier. */
.bi-r2 .side-title {
	margin: 8px 0 7px;
	font-size: 22px;
	line-height: 1.24;
}

/* ------------------------------------------------------------------ *
 * 6. Latest articles — cream surface, white cards
 * ------------------------------------------------------------------ */

.bi-r2 .latest-hub {
	background-color: var(--bi-cream);
	border-top: 1px solid var(--bi-hairline);
}

.bi-r2 .latest-head {
	gap: 10px 24px;
	padding-top: 0;
	padding-bottom: 11px;
	margin-bottom: 12px;
	border-top: 0;
	border-bottom: 2px solid var(--bi-teal-deep);
}

.bi-r2 .latest-head h2 {
	min-width: 0;
	margin: 0;
	font-size: 26px;
}

.bi-r2 .latest-tools {
	gap: 8px;
}

.bi-r2 .latest-tools .wp-block-search__input {
	border: 1px solid var(--bi-hairline);
	border-radius: 99px;
	padding: 9px 15px;
	font-size: 15px;
	background: #fff;
}

/* A card, not a bare stack. In 1.0.2 `.ed-card` had no surface, no edge and no
   inset: the photograph sat flush on the section background with the title,
   excerpt and date running to the same edge 12px beneath it. */
.bi-r2 .ed-card {
	background: #fff;
	border: 1px solid var(--bi-hairline);
	border-radius: 12px;
}

.bi-r2 .ed-card-media img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: 50% 35%;
	background: var(--bi-warm-white);
	border-radius: 11px 11px 0 0;
}

.bi-r2 .ed-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 15px 18px 18px;
	border-top: 3px solid var(--bi-teal-deep);
}

.bi-r2 .ed-card-title {
	margin: 0 0 8px;
	font-size: 19px;
	line-height: 1.3;
}

.bi-r2 .ed-card-excerpt {
	margin: 0 0 13px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--bi-ink-soft);
}

.bi-r2 .ed-card-foot {
	margin-top: auto;
	font-size: 13px;
}

.bi-r2 .empty-state {
	padding: 30px;
	border: 1px dashed var(--bi-hairline);
	border-radius: 12px;
	background: var(--bi-cream);
	text-align: center;
}

/* ------------------------------------------------------------------ *
 * 7. Article head — one left edge with the body, hairline seam
 * ------------------------------------------------------------------ */

.bi-r2 .article-head {
	background-color: #fff;
	border-bottom: 1px solid var(--bi-hairline);
}

/* Both the head's content and the columns block sit on the same 1024px shell,
   centred. Margins stay `auto`, so nothing fights the `!important` in the
   global constrained rule — only `max-width` is overridden. */
.bi-r2 .article-head-inner,
.bi-r2 .article-columns {
	max-width: var(--bi-reading-shell);
	margin-inline: auto;
}

.bi-r2 .article-breadcrumb,
.bi-r2 .article-head-inner .kicker,
.bi-r2 .article-title,
.bi-r2 .article-standfirst,
.bi-r2 .article-meta,
.bi-r2 .review-strip {
	margin-inline: 0;
}

.bi-r2 .article-breadcrumb {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--bi-ink-soft);
}

.bi-r2 .article-breadcrumb a {
	color: var(--bi-teal-deep);
	text-decoration: none;
}

.bi-r2 .article-breadcrumb a:hover,
.bi-r2 .article-breadcrumb a:focus-visible {
	text-decoration: underline;
}

.bi-r2 .article-title {
	max-width: var(--bi-measure);
	margin: 0 0 18px;
	font-size: clamp(33px, 4.6vw, 50px);
	line-height: 1.1;
	letter-spacing: -0.012em;
}

.bi-r2 .article-standfirst {
	max-width: var(--bi-measure);
	margin: 0 0 26px;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--bi-ink-soft);
}

.bi-r2 .article-meta {
	max-width: var(--bi-reading-shell);
	margin: 0;
	padding-top: 20px;
	border-top: 1px solid var(--bi-hairline);
	gap: 6px 14px;
	font-size: 14px;
	color: var(--bi-ink-soft);
}

.bi-r2 .review-strip {
	margin: 18px 0 0;
	padding: 10px 14px;
	border-left: 3px solid var(--bi-teal-deep);
	background: var(--bi-cream);
	font-size: 14px;
}

/* ------------------------------------------------------------------ *
 * 8. Article body — the approved reading spec
 * ------------------------------------------------------------------ */

.bi-r2 .article-shell {
	background-color: #fff;
}

.bi-r2 .article-columns {
	gap: var(--bi-gutter);
}

.bi-r2 .article-main {
	min-width: 0;
	background: #fff;
}

.bi-r2 .article-main .wp-block-post-content {
	font-size: 18px;
	line-height: 1.75;
}

.bi-r2 .article-main .wp-block-post-content p {
	margin: 0 0 1.25em;
	font-size: 18px;
	line-height: 1.75;
}

/* 29px at normal weight, as approved. The theme's own h2 is bold and scales to
   35.2px at 1440, which against 18px body in a 660px column reads as a banner
   rather than as a section heading. */
.bi-r2 .article-main .wp-block-post-content h2 {
	margin: 54px 0 18px;
	font-size: 29px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--bi-teal-deep);
}

.bi-r2 .article-main .wp-block-post-content h3 {
	margin: 34px 0 10px;
	font-size: 21px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--bi-teal-deep);
}

.bi-r2 .article-main .wp-block-post-content ul,
.bi-r2 .article-main .wp-block-post-content ol {
	margin: 0 0 1.5em;
	padding-left: 1.3em;
	font-size: 18px;
	line-height: 1.75;
}

.bi-r2 .article-main .wp-block-post-content li {
	margin-bottom: 0.6em;
}

.bi-r2 .article-main .wp-block-post-content li:last-child {
	margin-bottom: 0;
}

/* ---- At a glance: the approved facts panel ----
   Styles a native core/group the article body carries (class `bi-facts`), so
   the first four facts read as a panel rather than as four bare bullets. No
   raw HTML and no new block type: a group, a heading and a core list. */
.bi-r2 .article-main .wp-block-post-content .bi-facts {
	max-width: var(--bi-measure);
	margin: 0 0 40px;
	padding: 24px 26px;
	border: 1px solid var(--bi-hairline);
	border-top: 4px solid var(--bi-teal-deep);
	border-radius: 12px;
	background: var(--bi-cream);
}

.bi-r2 .article-main .wp-block-post-content h2.bi-facts-title,
.bi-r2 .article-main .wp-block-post-content .bi-facts h2 {
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--bi-teal-deep);
}

.bi-r2 .article-main .wp-block-post-content .bi-facts ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16.5px;
	line-height: 1.6;
}

.bi-r2 .article-main .wp-block-post-content .bi-facts li {
	position: relative;
	margin: 0 0 12px;
	padding-left: 24px;
	color: var(--bi-ink);
}

.bi-r2 .article-main .wp-block-post-content .bi-facts li:last-child {
	margin-bottom: 0;
}

.bi-r2 .article-main .wp-block-post-content .bi-facts li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--bi-terracotta);
}

/* ---- in-body photographs ----
   Scoped to `bi-article-photo`, the class the two editorial photographs carry —
   never to every core/image in the body. An author portrait or any other image
   an editor adds keeps its natural shape instead of being forced to 3:2 and
   full measure width. */
.bi-r2 .article-main .wp-block-post-content .bi-article-photo {
	max-width: var(--bi-measure);
	margin: 34px 0 38px;
}

.bi-r2 .article-main .wp-block-post-content .bi-article-photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: 50% 32%;
	border-radius: 12px;
	background: var(--bi-warm-white);
}

.bi-r2 .article-main .wp-block-post-content .bi-article-photo figcaption {
	margin: 10px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--bi-ink-soft);
}

/* ---- optional per-post author card ----
   There is no binding for a portrait, so an automatic one would need new PHP
   that this release cannot deploy. This styles an honest per-post native
   pattern instead: a group an editor pastes at the end of a body once identity
   is confirmed, holding a real profile photograph and a short role line. The
   portrait keeps a square crop and a fixed small size; it is NOT subject to the
   editorial-photo rules above. */
.bi-r2 .article-main .wp-block-post-content .bi-author-card {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	max-width: var(--bi-measure);
	margin: 40px 0 0;
	padding: 20px 22px;
	border: 1px solid var(--bi-hairline);
	border-radius: 12px;
	background: var(--bi-cream);
}

.bi-r2 .article-main .wp-block-post-content .bi-author-card .wp-block-image {
	flex: 0 0 auto;
	width: 72px;
	margin: 0;
}

.bi-r2 .article-main .wp-block-post-content .bi-author-card img {
	width: 72px;
	height: 72px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: 50% 25%;
	border-radius: 50%;
}

.bi-r2 .article-main .wp-block-post-content .bi-author-card p {
	margin: 0 0 4px;
	font-size: 15px;
	line-height: 1.5;
}

.bi-r2 .article-main .wp-block-post-content .bi-author-card p:last-child {
	margin-bottom: 0;
	color: var(--bi-ink-soft);
}

/* ---- native core/details as the approved FAQ item ---- */
.bi-r2 .article-main .wp-block-post-content .wp-block-details {
	margin: 0 0 12px;
	border: 1px solid var(--bi-teal-deep);
	border-radius: 8px;
	background: #fff;
}

.bi-r2 .article-main .wp-block-post-content .wp-block-details summary {
	position: relative;
	padding: 20px 52px 20px 22px;
	list-style: none;
	cursor: pointer;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--bi-teal-deep);
}

.bi-r2 .article-main .wp-block-post-content .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.bi-r2 .article-main .wp-block-post-content .wp-block-details summary::after {
	content: "";
	position: absolute;
	top: 27px;
	right: 24px;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--bi-teal-deep);
	border-bottom: 2px solid var(--bi-teal-deep);
	transform: rotate(45deg);
}

.bi-r2 .article-main .wp-block-post-content .wp-block-details[open] summary::after {
	transform: rotate(-135deg) translateY(4px);
}

.bi-r2 .article-main .wp-block-post-content .wp-block-details p {
	margin: 0 22px 20px;
	font-size: 17px;
	line-height: 1.6;
}

@media (prefers-reduced-motion: no-preference) {
	.bi-r2 .article-main .wp-block-post-content .wp-block-details summary::after {
		transition: transform 0.15s ease;
	}
}

/* ---- the body's own Sources section ----
   Matched on the editorial anchor contract, not on position, so an article
   carrying its sources in the body gets the same panel treatment as the
   meta-driven panel. */
.bi-r2 .article-main .wp-block-post-content h2#sources-h {
	margin-top: 54px;
	padding-top: 24px;
	border-top: 1px solid var(--bi-hairline);
	font-size: 22px;
}

.bi-r2 .article-main .wp-block-post-content h2#sources-h + ul {
	font-size: 15px;
	line-height: 1.6;
}

.bi-r2 .article-main .wp-block-post-content h2#sources-h + ul li {
	margin-bottom: 0.5em;
}

/* ------------------------------------------------------------------ *
 * 9. The rail — genuinely sticky, contained locally
 *
 * The fixed header occupies 0-137px and never retracts (measured at scrollY 0,
 * 400, 800, 1600 and 2600), so the rail is pinned at 157px: the header's
 * measured bottom plus the same 20px breathing space the anchors use.
 *
 * Sticky needs one local unblock. The theme sets
 * `.full-bleed-section { overflow: hidden !important }` site-wide, and
 * `.article-shell` is a full-bleed section, so it became the rail's sticky
 * containing block and never scrolled. The override below is scoped to
 * `.bi-r2 .article-shell` — the Insights article body and nothing else; every
 * other full-bleed section on the site keeps the theme's clipping. An earlier
 * comment called this a global change; that was wrong.
 *
 * Height safety without a nested scrollbar on the whole column: the rail is a
 * flex column capped to the viewport, and only the contents LIST is allowed to
 * shrink and scroll. The booking card and related services keep their natural
 * height, so the CTA is on screen at 900px and at 720px. Sticky stops at the
 * bottom of `.article-columns`, so the rail is contained before the footer
 * without any extra rule.
 * ------------------------------------------------------------------ */

/* Two ancestors had to be unblocked, not one.
 *
 * (a) `.full-bleed-section { overflow: hidden !important }` — the theme's
 *     clipping on the article body, overridden locally below for
 *     `.bi-r2 .article-shell` only. Every other full-bleed section on the site
 *     keeps the theme's rule (asserted).
 *
 * (b) `body { overflow-x: hidden; overflow-y: auto }` — this makes BODY a
 *     scroll container, so a sticky descendant resolves against body's
 *     scrollport, which never scrolls (the document scroller is `html`). This
 *     was the real reason sticky stayed inert after (a); measured by trying (a)
 *     alone and seeing the rail still track the page 1:1.
 *
 *     `overflow-x: clip` clips exactly as `hidden` did but does NOT create a
 *     scroll container, so sticky works and horizontal clipping is preserved.
 *     It is scoped to `body.single-post`, the class WordPress puts on article
 *     pages only — the hub, About, service pages, header and footer never match
 *     it. This is the one selector in this file outside `.bi-r2`; it cannot be
 *     scoped under `.bi-r2` because the element to fix is the body itself.
 */
body.single-post:has(main.bi-r2) {
	/* `!important` is required: the theme sets
	   `html, body { overflow-x: hidden !important }`. Only `body` is overridden
	   here; `html` keeps the theme's rule, and body alone is enough (verified by
	   toggling each). `:has(main.bi-r2)` narrows it again: it applies only to an
	   article page actually rendering the Insights template, so a standard post
	   on some other template would be untouched. */
	overflow-x: clip !important;
	overflow-y: visible !important;
}

.bi-r2 .article-shell {
	overflow: visible !important;
}

.bi-r2 .article-rail {
	min-width: 0;
}

@media (min-width: 981px) {
	.bi-r2 .article-rail {
		position: sticky;
		top: 157px;
		align-self: flex-start;
		display: flex;
		flex-direction: column;
		max-height: calc(100vh - 177px);
	}

	/* Only this box may shrink; the others keep their intrinsic height. */
	.bi-r2 .article-rail .toc-rail {
		display: flex;
		flex-direction: column;
		flex: 0 1 auto;
		min-height: 0;
	}

	/* The contents list is the only shrinkable item, and with related services
	   moved out of the rail and the CTA compacted there is room for it: at 720
	   the rail budget is 543px against a ~160px CTA. A hard `min-height` was
	   tried and removed — it pushed the CTA past the capped rail instead of
	   letting the list absorb the shortfall. Usable height is asserted by
	   counting fully visible entries, not by a magic number. */
	.bi-r2 .article-rail .toc-rail .toc-list {
		flex: 0 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.bi-r2 .article-rail .basuto-price-card,
	.bi-r2 .article-rail .related-services {
		flex: 0 0 auto;
	}
}

.bi-r2 .toc-rail {
	position: static;
}

.bi-r2 .rail-box {
	margin-bottom: 18px;
	padding: 18px 20px;
	border: 1px solid var(--bi-hairline);
	border-radius: 12px;
	background: #fff;
}

.bi-r2 .rail-box:last-child {
	margin-bottom: 0;
}

/* `.basuto-price-card` is a theme class the booking box reuses for the site's
   own card treatment. The theme also caps it at `max-width: calc(100% - 80px)`,
   which inside a 287px rail rendered a 207px box indented 40px from both rail
   edges — narrower than, and misaligned with, the contents box above it. */
.bi-r2 .article-rail .rail-box.basuto-price-card {
	max-width: none;
	width: 100%;
	border-color: var(--bi-hairline);
}

/* ---- contents ----
   Calm dark links on the cream panel with a teal top rule and fine separators.
   The generated list is an ordered list; its decimal markers and the theme's
   terracotta underlined anchors were the "orange underlined list on white". */
.bi-r2 .toc {
	border-top: 3px solid var(--bi-teal-deep);
	background: var(--bi-cream);
}

.bi-r2 .toc .eyebrow {
	margin: 0 0 8px;
}

.bi-r2 .toc-list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.bi-r2 .toc-list li {
	margin: 0;
	padding: 7px 0;
	border-top: 1px solid var(--bi-hairline);
	font-size: 14.5px;
	line-height: 1.4;
	list-style: none;
}

.bi-r2 .toc-list li:first-child {
	border-top: 0;
	padding-top: 0;
}

.bi-r2 .toc-list li:last-child {
	padding-bottom: 0;
}

.bi-r2 .toc-list .toc-level-3 {
	padding-left: 14px;
	font-size: 13.5px;
}

.bi-r2 .toc-list a {
	color: var(--bi-ink);
	font-weight: 400;
	text-decoration: none;
}

.bi-r2 .toc-list a:hover,
.bi-r2 .toc-list a:focus-visible {
	color: var(--bi-teal-deep);
	text-decoration: underline;
}

/* ---- compact booking card ----
   The long intro sentence is gone from the template; what remains is a heading
   and the two controls. Targets stay at least 44px so the card is still a
   comfortable tap/click target at the smaller height. */
/* Budget: 32 padding + 24 eyebrow + 44 + 6 + 44 = 150px. The controls are
   pinned to exactly 44px — the minimum comfortable target — rather than left to
   the theme's padding, which rendered them 48 and 50 and pushed the card to
   194px. Text is flex-centred so a fixed height does not clip it. */
.bi-r2 .article-rail .basuto-price-card {
	padding: 16px 18px;
}

.bi-r2 .article-rail .basuto-price-card .eyebrow {
	margin-bottom: 6px;
}

.bi-r2 .article-rail .basuto-price-card .wp-block-buttons {
	gap: 6px;
}

.bi-r2 .article-rail .basuto-price-card .wp-block-button {
	width: 100%;
}

.bi-r2 .article-rail .basuto-price-card .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 44px;
	min-height: 44px;
	padding: 0 14px;
	text-align: center;
}

/* ---- related services, now in the reading column ----
   Moved out of the sticky rail so the rail carries only the contents list and
   the booking CTA. The query, its blocks and its links are unchanged; only the
   position and the surface differ. */
.bi-r2 .article-main .related-services {
	margin-top: 40px;
}

.bi-r2 .article-main .related-services .service-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
}

.bi-r2 .article-main .related-services .service-link {
	margin: 0;
	padding: 8px 14px;
	border: 1px solid var(--bi-hairline);
	border-top: 1px solid var(--bi-hairline);
	border-radius: 99px;
	background: var(--bi-cream);
	font-size: 15px;
	line-height: 1.35;
}

/* ---- article credits: author and medical review ----
   Built from the fields that already exist, so it is correct by construction:
   with nothing entered it reads as pending rather than inventing a byline or a
   review date. Distinct from the compact top byline, which stays. */
.bi-r2 .article-credits {
	max-width: var(--bi-measure);
	margin: 44px 0 0;
	padding: 22px 24px;
	border: 1px solid var(--bi-hairline);
	border-top: 4px solid var(--bi-teal-deep);
	border-radius: 12px;
	background: #fff;
}

.bi-r2 .article-credits .credits-author {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--bi-teal-deep);
}

.bi-r2 .article-credits .credits-review {
	margin: 0;
	padding-top: 10px;
	border-top: 1px solid var(--bi-hairline);
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--bi-ink-soft);
}

.bi-r2 .article-credits .credits-updated {
	margin: 6px 0 0;
	font-size: 13.5px;
	color: var(--bi-ink-soft);
}

/* ---- related services ----
   The query prints each service page's full SEO title ("Private GP | £160
   Consultations | Basuto"). Shortening it needs a plugin change, which this
   release cannot deploy, so the label is made readable instead of rewritten:
   smaller, tighter, calm teal, wrapping cleanly in a 300px rail. */
.bi-r2 .related-services .service-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bi-r2 .related-services .service-link {
	margin: 0;
	padding: 8px 0;
	border-top: 1px solid var(--bi-hairline);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.35;
}

.bi-r2 .related-services .service-link:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.bi-r2 .related-services .service-link a {
	color: var(--bi-teal-deep);
	text-decoration: none;
	overflow-wrap: break-word;
}

.bi-r2 .related-services .service-link a:hover,
.bi-r2 .related-services .service-link a:focus-visible {
	text-decoration: underline;
}

/* A contents link scrolls its heading to the top of the viewport, which puts it
   under the fixed header. scroll-margin-top moves the landing point down by the
   header's measured height plus the same 20px breathing space the rail uses. */
.bi-r2 .article-main .wp-block-post-content h2,
.bi-r2 .article-main .wp-block-post-content h3,
.bi-r2 .article-main .wp-block-post-content .bi-facts {
	scroll-margin-top: 157px;
}

/* ------------------------------------------------------------------ *
 * 10. Sources panel and related reading
 * ------------------------------------------------------------------ */

.bi-r2 .panel {
	max-width: var(--bi-measure);
	margin: 40px 0;
	padding: 24px 26px;
	border: 1px solid var(--bi-hairline);
	border-radius: 12px;
	background: #fff;
}

.bi-r2 .panel h2 {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 400;
	color: var(--bi-teal-deep);
}

.bi-r2 .sources-list {
	margin: 0;
	padding-left: 1.2em;
	font-size: 15px;
	line-height: 1.6;
}

.bi-r2 .sources-list li {
	margin: 0 0 8px;
}

.bi-r2 .sources-list li:last-child {
	margin-bottom: 0;
}

.bi-r2 .related-reading {
	background-color: var(--bi-cream);
	border-top: 1px solid var(--bi-hairline);
}

.bi-r2 .related-reading .wp-block-query h2 {
	max-width: var(--bi-wide);
	margin: 0 auto 24px;
	font-size: 26px;
	font-weight: 400;
	color: var(--bi-teal-deep);
}

/* ------------------------------------------------------------------ *
 * 11. Focus visibility
 * ------------------------------------------------------------------ */

.bi-r2 .topicnav-list a:focus-visible,
.bi-r2 .toc-list a:focus-visible,
.bi-r2 .sources-list a:focus-visible,
.bi-r2 .ed-card-title a:focus-visible,
.bi-r2 .side-title a:focus-visible,
.bi-r2 .lead-title a:focus-visible,
.bi-r2 .service-link a:focus-visible,
.bi-r2 .next-step a:focus-visible,
.bi-r2 .article-breadcrumb a:focus-visible,
.bi-r2 .wp-block-details summary:focus-visible {
	outline: 3px solid var(--bi-terracotta);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * 12. Breakpoints
 * ------------------------------------------------------------------ */

@media (max-width: 980px) {
	.bi-r2 .spread .lead-media img {
		max-height: min(46vh, 380px);
	}

	.bi-r2 .side-media img {
		max-height: 200px;
	}

	/* Two across from here down, as the approved hub does. 1.0.2 held the
	   template's three columns until 760, so a 768px tablet rendered three
	   229px cards with 153px photographs — the most cramped state on any
	   supported viewport. */
	.bi-r2 .ed-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* Stacked, the reading column is the whole shell and `wp:post-content`'s
	   own constrained layout centres the body on the 660px measure inside it,
	   so the head must be centred on the same 660px or the H1 sits 34px to the
	   left of the text it heads. Approved geometry at 768 is 660@54 for both. */
	.bi-r2 .article-head-inner {
		max-width: var(--bi-measure);
	}

	/* The rail's boxes belong on the body's measure, not on whatever width the
	   wrapped flex line resolves to (measured at 505px in a 728px column). */
	.bi-r2 .article-rail {
		width: 100%;
		max-width: var(--bi-measure);
		margin-inline: auto;
	}
}

@media (max-width: 760px) {
	.bi-r2 .ed-grid {
		grid-template-columns: 1fr !important;
		gap: 22px;
	}

	.bi-r2 .hub-intro {
		flex: 1 1 100%;
	}

	.bi-r2 .latest-head {
		align-items: flex-start;
	}

	.bi-r2 .latest-tools {
		width: 100%;
	}

	.bi-r2 .article-main .wp-block-post-content,
	.bi-r2 .article-main .wp-block-post-content p,
	.bi-r2 .article-main .wp-block-post-content ul,
	.bi-r2 .article-main .wp-block-post-content ol {
		font-size: 17px;
	}

	.bi-r2 .article-main .wp-block-post-content h2 {
		margin-top: 42px;
		font-size: 25px;
	}

	.bi-r2 .article-main .wp-block-post-content .bi-facts {
		padding: 20px 18px;
	}

	.bi-r2 .article-main .wp-block-post-content .wp-block-details summary {
		padding: 17px 44px 17px 18px;
		font-size: 17px;
	}

	.bi-r2 .article-main .wp-block-post-content .wp-block-details summary::after {
		top: 23px;
		right: 18px;
	}

	.bi-r2 .article-main .wp-block-post-content .wp-block-details p {
		margin: 0 18px 18px;
	}
}

@media (max-width: 620px) {
	.bi-r2 .latest-head,
	.bi-r2 .hub-masthead-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.bi-r2 .lead-media img {
		max-height: 220px;
	}

	.bi-r2 .article-standfirst {
		font-size: 18px;
	}
}

@media (max-width: 380px) {
	.bi-r2 .topicnav-list a {
		padding: 12px 11px 10px;
		font-size: 13.5px;
	}

	.bi-r2 .latest-head h2 {
		font-size: 22px;
	}

	.bi-r2 .ed-card-body {
		padding: 14px 15px 16px;
	}
}