/**
 * Single blog post - hero section.
 *
 * Loaded only on single posts (see blog/inc/mh-blog-setup.php), so it costs
 * nothing on the rest of the site.
 *
 * Fonts are deliberately not declared here: Poppins and Inter are already
 * loaded site-wide, and a second family request would push back First
 * Contentful Paint for no design gain.
 */

.mh-bloghero {
	--mh-navy: #172C4B;
	--mh-navy-deep: #121f35;
	--mh-green: #48A625;
	--mh-green-deep: #3a8a1e;
	--mh-slate: #64748b;

	position: relative;
	isolation: isolate;

	/* The site header is fixed and fully transparent - only its inner bar is
	   tinted - so the hero runs underneath it and supplies its own top space.
	   Without this the theme's body padding leaves a bare white strip above. */
	padding: calc(var(--mh-header-offset, 76px) + clamp(20px, 3.4vw, 48px)) 0 clamp(96px, 11vw, 168px);

	background-color: #e9f1fa;
	/* Matched pair, one in each top corner: a single tint on the left read as a
	   rather than a background. */
	background-image:
		radial-gradient(760px 430px at 8% 2%, rgba(46, 104, 174, 0.34), rgba(46, 104, 174, 0) 68%),
		radial-gradient(760px 430px at 92% 2%, rgba(46, 104, 174, 0.30), rgba(46, 104, 174, 0) 68%),
		radial-gradient(680px 380px at 50% 0%, rgba(46, 104, 174, 0.24), rgba(46, 104, 174, 0) 70%),
		linear-gradient(180deg, #eaf2fb 0%, #eef4fa 100%);
	overflow: hidden;
}

/* Body padding for single posts is switched off in functions.php, next to the
   theme's own header-offset rules, so the two never fight over specificity. */

/* Soft colour fade into the page background, instead of a hard shape edge. */
.mh-bloghero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: clamp(80px, 10vw, 150px);
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.42) 52%,
		rgba(255, 255, 255, 0.85) 80%,
		#ffffff 100%
	);
	pointer-events: none;
	z-index: 0;
}

.mh-bloghero__inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 clamp(18px, 4vw, 40px);
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(28px, 4.5vw, 60px);
}

/* ---------- breadcrumb ---------- */

.mh-bloghero__crumbs {
	margin: 0 0 20px;
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.1px;
	color: var(--mh-slate);

	/* One line, clipped rather than wrapped - a two-line trail above a large
	   heading reads as clutter. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.mh-bloghero__crumbs nav,
.mh-bloghero__crumbs p {
	display: inline;
	margin: 0;
	padding: 0;
}

.mh-bloghero__crumbs a {
	color: var(--mh-slate);
	text-decoration: none;
	transition: color 140ms ease;
}

.mh-bloghero__crumbs a:hover,
.mh-bloghero__crumbs a:focus-visible {
	color: var(--mh-navy);
}

.mh-bloghero__crumbs .separator,
.mh-bloghero__crumbs-sep {
	margin: 0 9px;
	color: #b9c4d1;
	font-weight: 400;
}

.mh-bloghero__crumbs .last,
.mh-bloghero__crumbs [aria-current="page"] {
	color: var(--mh-navy);
	font-weight: 600;
}

/* ---------- category pills ---------- */

.mh-bloghero__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.mh-bloghero__pill {
	display: inline-block;
	padding: 7px 17px;
	border-radius: 999px;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.2px;
	line-height: 1.4;
	color: #fff;
	text-decoration: none;
	background: var(--mh-navy);
	transition: transform 140ms ease, background-color 140ms ease;
}

.mh-bloghero__terms li:nth-child(even) .mh-bloghero__pill {
	background: var(--mh-green-deep);
}

.mh-bloghero__pill:hover,
.mh-bloghero__pill:focus-visible {
	transform: translateY(-1px);
	background: var(--mh-navy-deep);
	color: #fff;
}

.mh-bloghero__terms li:nth-child(even) .mh-bloghero__pill:hover {
	background: #2f7a17;
}

/* ---------- title ---------- */

.mh-bloghero__title {
	margin: 0 0 22px;
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: clamp(30px, 3.9vw, 46px);
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -0.018em;
	color: var(--mh-navy);
	text-wrap: balance;
}

/* ---------- meta ---------- */

.mh-bloghero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--mh-slate);
}

.mh-bloghero__byline {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.mh-bloghero__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	border: 2px solid #fff;
	box-shadow: 0 2px 10px rgba(23, 44, 75, 0.16);
	background: #e3ebf3;
}

/* Shown when the author has no avatar yet - keeps the byline from looking
   broken, and costs no external request. */
.mh-bloghero__avatar--initial {
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--mh-navy), var(--mh-green-deep));
	color: #fff;
	font-family: 'Poppins', system-ui, sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	text-transform: uppercase;
}

.mh-bloghero__meta strong {
	font-weight: 600;
	color: var(--mh-navy);
}

.mh-bloghero__dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #b6c1cf;
	display: inline-block;
	flex: 0 0 auto;
}

/* ---------- featured image ---------- */

.mh-bloghero__media {
	margin: 0;
	position: relative;
}

/* aspect-ratio reserves the box before the file arrives, so the text beside it
   never jumps once the image decodes */
.mh-bloghero__frame {
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: 18px;
	overflow: hidden;
	background: #eaf0f6;
	box-shadow:
		0 26px 60px rgba(23, 44, 75, 0.15),
		0 6px 16px rgba(23, 44, 75, 0.07);
}

.mh-bloghero__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
	.mh-bloghero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	/* Image below the text: putting it first would push the h1 off screen and
	   cost both LCP and the reader's orientation. */
	.mh-bloghero__media {
		order: 2;
	}

	.mh-bloghero__frame {
		aspect-ratio: 16 / 9;
		border-radius: 14px;
	}
}

@media (max-width: 560px) {
	.mh-bloghero {
		padding-bottom: clamp(74px, 18vw, 110px);
	}

	.mh-bloghero__crumbs {
		font-size: 12.5px;
		margin-bottom: 15px;
	}

	.mh-bloghero__terms {
		margin-bottom: 14px;
	}

	.mh-bloghero__pill {
		padding: 6px 14px;
		font-size: 12px;
	}

	.mh-bloghero__title {
		margin-bottom: 18px;
	}

	.mh-bloghero__meta {
		font-size: 13.5px;
		gap: 7px 10px;
	}

	.mh-bloghero__avatar {
		width: 32px;
		height: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mh-bloghero__pill {
		transition: none;
	}
}

/* ==========================================================================
   Three column reading layout
   ========================================================================== */

.mh-blog {
	--mh-navy: #172C4B;
	--mh-navy-deep: #121f35;
	--mh-green: #48A625;
	--mh-green-deep: #3a8a1e;
	--mh-slate: #64748b;
	--mh-line: #e6ecf2;
	--mh-stick: calc(var(--mh-header-offset, 76px) + 18px);

	max-width: 1380px;
	margin: 0 auto;
	padding: 0 clamp(18px, 4vw, 40px) clamp(48px, 7vw, 90px);
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	color: #334155;
}

.mh-blog__grid {
	display: grid;
	grid-template-columns: 236px minmax(0, 1fr) 304px;
	gap: clamp(30px, 3.6vw, 56px);
	align-items: start;
}

/* Sticky rails: align-items:start above is what lets them stick - a stretched
   grid item is already full height and has nothing left to scroll against. */
.mh-blog__rail {
	position: sticky;
	top: var(--mh-stick);
	max-height: calc(100vh - var(--mh-stick) - 20px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
}

/* Scrollbar hidden, scrolling kept: the rails almost always fit, and an
   always-visible track down both sides of the article looked broken. */
.mh-blog__rail::-webkit-scrollbar { width: 0; height: 0; }

/* The rail itself stretches to the full row height so the block inside it has
   room to travel; overflow must stay visible or position:sticky is ignored. */
.mh-blog__rail--right {
	position: static;
	align-self: stretch;
	max-height: none;
	overflow: visible;
	display: block;
}

.mh-blog__rail--right .mh-share { margin-bottom: 22px; }

/* Only the CTA and related list stick. Share is a one-off action and, kept
   inside, made the column too tall to stay pinned at all. */
.mh-blog__sticky {
	position: sticky;
	top: var(--mh-stick);
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.mh-blog__sticky.is-unstuck { position: static; }

/* ---------- table of contents ---------- */

/* Plain block, not a panel: a tinted rounded card competes with the article
   card next to it and makes the column look like an advert slot. */
.mh-toc__box {
	border: 0;
	border-radius: 0;
	background: none;
	padding: 0;
}

.mh-toc__summary {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mh-navy);
	cursor: pointer;
	list-style: none;
}

.mh-toc__summary::-webkit-details-marker { display: none; }

.mh-toc__icon { display: inline-flex; color: var(--mh-green-deep); }
.mh-toc__icon .mh-blog-icon { width: 15px; height: 15px; }

.mh-toc__nav { margin-top: 14px; }

.mh-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 2px solid var(--mh-line);
}

.mh-toc__item { margin: 0; }

.mh-toc__link {
	display: block;
	padding: 7px 0 7px 14px;
	margin-left: -2px;
	border-left: 2px solid transparent;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--mh-slate);
	text-decoration: none;
	transition: color 140ms ease, border-color 140ms ease;
}

.mh-toc__item--h3 .mh-toc__link {
	padding-left: 26px;
	font-size: 13px;
}

.mh-toc__link:hover,
.mh-toc__link:focus-visible { color: var(--mh-navy); }

.mh-toc__link.is-active {
	color: var(--mh-green-deep);
	font-weight: 600;
	border-left-color: var(--mh-green);
}

/* ---------- share ---------- */

.mh-share__title,
.mh-related__title {
	margin: 0 0 12px;
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mh-navy);
}

.mh-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mh-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	border: 1px solid var(--mh-line);
	background: #fff;
	color: var(--mh-navy);
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.mh-share__btn .mh-blog-icon { width: 17px; height: 17px; }

/* Brand colours are deliberately not used - the row should read as part of
   this site, not as five borrowed logos. */
.mh-share__btn:hover,
.mh-share__btn:focus-visible {
	background: var(--mh-navy);
	border-color: var(--mh-navy);
	color: #fff;
	transform: translateY(-2px);
}

.mh-share__btn--copy { position: relative; }
.mh-share__icon-done { display: none; }
.mh-share__btn.is-copied { background: var(--mh-green-deep); border-color: var(--mh-green-deep); color: #fff; }
.mh-share__btn.is-copied .mh-share__icon-default { display: none; }
.mh-share__btn.is-copied .mh-share__icon-done { display: inline-flex; }

/* ---------- CTA ---------- */

.mh-cta {
	border-radius: 16px;
	background: linear-gradient(150deg, var(--mh-navy) 0%, var(--mh-navy-deep) 100%);
	color: #fff;
	padding: 22px 22px 24px;
}

.mh-cta__eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #8fd06e;
}

.mh-cta__title {
	margin: 0 0 8px;
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	color: #fff;
}

.mh-cta__text {
	margin: 0 0 18px;
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
}

.mh-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	border-radius: 10px;
	background: var(--mh-green);
	color: #fff;
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 150ms ease, transform 150ms ease;
}

.mh-cta__btn .mh-blog-icon { width: 16px; height: 16px; }

.mh-cta__btn:hover,
.mh-cta__btn:focus-visible {
	background: #56bd2d;
	color: #fff;
	transform: translateY(-1px);
}

.mh-cta--wide {
	margin-top: clamp(36px, 5vw, 60px);
	padding: clamp(26px, 4vw, 40px);
	text-align: center;
}

.mh-cta--wide .mh-cta__title { font-size: clamp(22px, 2.6vw, 30px); }
.mh-cta--wide .mh-cta__text { max-width: 52ch; margin-inline: auto; }

/* ---------- related (sidebar) ---------- */

.mh-related__list { margin: 0; padding: 0; list-style: none; }

.mh-related__item + .mh-related__item {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--mh-line);
}

.mh-related__link {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	text-decoration: none;
	color: inherit;
}

.mh-related__thumb {
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	border-radius: 10px;
	overflow: hidden;
	background: #eef2f6;
}

.mh-related__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mh-related__copy { display: block; min-width: 0; }

.mh-related__headline {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mh-navy);
	transition: color 140ms ease;
}

.mh-related__link:hover .mh-related__headline { color: var(--mh-green-deep); }

.mh-related__meta {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	color: var(--mh-slate);
}

/* ---------- article body ---------- */

.mh-blog__body {
	font-size: 20px;
	line-height: 1.78;
	color: #3a4859;
}

.mh-blog__body > * + * { margin-top: 1.15em; }

.mh-blog__body h2,
.mh-blog__body h3 {
	font-family: 'Poppins', system-ui, sans-serif;
	color: var(--mh-navy);
	line-height: 1.28;
	/* Anchor targets clear the fixed header when jumped to from the contents. */
	scroll-margin-top: calc(var(--mh-header-offset, 76px) + 20px);
}

.mh-blog__body h2 { font-size: clamp(23px, 2.5vw, 30px); font-weight: 600; margin-top: 1.9em; }
.mh-blog__body h3 { font-size: clamp(19px, 2vw, 22px); font-weight: 600; margin-top: 1.6em; }

.mh-blog__body a { color: var(--mh-green-deep); text-decoration: underline; text-underline-offset: 2px; }
.mh-blog__body a:hover { color: var(--mh-navy); }

.mh-blog__body ul,
.mh-blog__body ol { padding-left: 1.3em; }
.mh-blog__body li + li { margin-top: 0.5em; }

.mh-blog__body img { max-width: 100%; height: auto; border-radius: 12px; }

.mh-blog__body blockquote {
	margin-left: 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--mh-green);
	color: var(--mh-navy);
	font-size: 18px;
}

.mh-blog__body table { width: 100%; border-collapse: collapse; font-size: 15px; }
.mh-blog__body th,
.mh-blog__body td { padding: 10px 12px; border: 1px solid var(--mh-line); text-align: left; }
.mh-blog__body th { background: #f6f9fb; color: var(--mh-navy); }

/* Wide content must scroll inside itself, never widen the page. */
.mh-blog__body pre,
.mh-blog__body .wp-block-table { overflow-x: auto; }

/* ---------- more articles ---------- */

.mh-more {
	margin-top: clamp(48px, 7vw, 84px);
	padding-top: clamp(34px, 5vw, 54px);
	border-top: 1px solid var(--mh-line);
}

.mh-more__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 26px;
}

.mh-more__title {
	margin: 0;
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 600;
	color: var(--mh-navy);
}

.mh-more__all {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--mh-green-deep);
	text-decoration: none;
	white-space: nowrap;
}

.mh-more__all .mh-blog-icon { width: 15px; height: 15px; }
.mh-more__all:hover { color: var(--mh-navy); }

.mh-more__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.4vw, 30px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mh-more__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--mh-line);
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.mh-more__link:hover,
.mh-more__link:focus-visible {
	transform: translateY(-3px);
	border-color: #d6e3cd;
	box-shadow: 0 16px 36px rgba(23, 44, 75, 0.10);
}

.mh-more__frame {
	display: block;
	aspect-ratio: 16 / 10;
	background: #eef2f6;
	overflow: hidden;
}

.mh-more__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mh-more__body { display: block; padding: 16px 18px 20px; }

.mh-more__cat {
	display: inline-block;
	margin-bottom: 8px;
	padding: 4px 11px;
	border-radius: 999px;
	background: #eef5e9;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--mh-green-deep);
}

.mh-more__headline {
	display: block;
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--mh-navy);
}

.mh-more__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-size: 12.5px;
	color: var(--mh-slate);
}

.mh-more__dot { width: 3px; height: 3px; border-radius: 50%; background: #b6c1cf; }

/* ---------- responsive ---------- */

/* Below this the middle column drops under ~500px, which is too narrow to
   read comfortably at 18px, so the contents move above the article instead. */
@media (max-width: 1239px) {
	.mh-blog__grid {
		grid-template-columns: minmax(0, 1fr) 300px;
	}

	.mh-blog__rail--left {
		position: static;
		max-height: none;
		overflow: visible;
		grid-column: 1 / -1;
		margin-bottom: 4px;
	}

	.mh-toc__summary { font-size: 14px; }
}

@media (max-width: 860px) {
	.mh-blog__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mh-blog__rail--right {
		position: static;
		max-height: none;
		overflow: visible;
		flex-direction: column;
	}

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

@media (max-width: 560px) {
	.mh-blog__body { font-size: 18px; line-height: 1.72; }
	.mh-more__grid { grid-template-columns: minmax(0, 1fr); }
	.mh-more__head { flex-direction: column; align-items: flex-start; gap: 8px; }
	.mh-cta { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.mh-share__btn,
	.mh-cta__btn,
	.mh-more__link { transition: none; }
}

/* ---------- icon + share refinements ---------- */

/* display:block removes the inline baseline gap that was pushing every icon a
   few pixels below the centre of its button. */
.mh-blog-icon {
	display: block;
	flex: 0 0 auto;
}

.mh-share__btn {
	width: 42px;
	height: 42px;
	border-radius: 12px;
}

.mh-share__btn .mh-blog-icon {
	width: 18px;
	height: 18px;
}

.mh-share__btn--copy .mh-share__icon-default,
.mh-share__btn--copy .mh-share__icon-done {
	display: flex;
	align-items: center;
	justify-content: center;
}

.mh-share__btn.is-copied .mh-share__icon-default { display: none; }
.mh-share__btn:not(.is-copied) .mh-share__icon-done { display: none; }

/* ==========================================================================
   Round 2 - contents panel, mobile placement, hero title wrapping
   ========================================================================== */

/* ---------- contents: animated panel ---------- */

.mh-toc__toggle {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mh-navy);
	text-align: left;
	cursor: pointer;
}

.mh-toc__icon { display: inline-flex; color: var(--mh-green-deep); }
.mh-toc__icon .mh-blog-icon { width: 16px; height: 16px; }

.mh-toc__label { flex: 1 1 auto; }

.mh-toc__chevron {
	display: inline-flex;
	color: var(--mh-slate);
	transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mh-toc__chevron .mh-blog-icon { width: 16px; height: 16px; }

/* The 0fr -> 1fr grid row is the one height transition that works without
   hard-coding a pixel height, so the list can be any length. */
.mh-toc__panel {
	display: grid;
	grid-template-rows: 1fr;
	opacity: 1;
	transition:
		grid-template-rows 360ms cubic-bezier(0.4, 0, 0.2, 1),
		opacity 260ms ease;
}

.mh-toc__panel-inner {
	min-height: 0;
	overflow: hidden;
	padding-top: 14px;
}

/* Closed state is applied by script, so the list stays readable if it never
   runs. */
.mh-toc__panel.is-closed {
	grid-template-rows: 0fr;
	opacity: 0;
}

.mh-toc__panel.is-closed .mh-toc__panel-inner { padding-top: 0; }

.mh-toc__toggle[aria-expanded="false"] .mh-toc__chevron { transform: rotate(-90deg); }

@media (min-width: 1240px) {
	.mh-toc__toggle { cursor: default; }
	.mh-toc__chevron { display: none; }
}

@media (max-width: 1239px) {
	.mh-toc {
		border: 1px solid var(--mh-line);
		border-radius: 12px;
		padding: 14px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mh-toc__panel,
	.mh-toc__chevron { transition: none; }
}

/* ---------- CTA dropped into the article on phones ---------- */

.mh-cta--side.is-inline {
	margin: 36px 0;
}

/* ---------- share: centred on phones ---------- */

@media (max-width: 860px) {
	.mh-share { text-align: center; }
	.mh-share__list { justify-content: center; }
}

/* ---------- CTA note ---------- */

.mh-cta__note {
	margin: 12px 0 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.62);
}

/* ---------- hero title wrapping on phones ---------- */

@media (max-width: 900px) {
	/* text-wrap:balance evens out the line lengths, which on a narrow screen
	   leaves a wide ragged gap on the right that reads as stray padding. */
	.mh-bloghero__title { text-wrap: pretty; }
}

@media (max-width: 560px) {
	.mh-bloghero__title {
		text-wrap: normal;
		/* Small gutter, not the wide ragged one text-wrap:balance used to leave. */
		padding-right: 12px;
	}

	.mh-bloghero__inner { padding-inline: 16px; }
}

/* ---------- author avatar: decorative, not a target ---------- */

/* The avatar is not a link, so the only way to "open" it was the browser's own
   long-press / right-click image menu. Turning off pointer events and the iOS
   callout takes it out of reach without changing how it looks. */
.mh-bloghero__avatar {
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-webkit-user-drag: none;
}

/* ---------- rails that do not fit ---------- */

/* A sticky column taller than the screen can never show its own bottom: it
   stays pinned while the page scrolls past it. Script measures each rail and
   adds this when that would happen, so the content stays reachable instead of
   being silently cut off. */
.mh-blog__rail.is-unstuck {
	position: static;
	max-height: none;
	overflow: visible;
}

/* ---------- inline CTA on phones ---------- */

/* White button against the navy card: sitting inside the article it reads as
   part of the page rather than another green button among the share row. */
.mh-cta--side.is-inline .mh-cta__btn {
	background: #ffffff;
	color: var(--mh-navy);
}

.mh-cta--side.is-inline .mh-cta__btn:hover,
.mh-cta--side.is-inline .mh-cta__btn:focus-visible {
	background: #eef4fa;
	color: var(--mh-navy);
}

/* ---------- wide CTA now sits outside the grid ---------- */

.mh-cta--wide {
	max-width: 900px;
	margin-inline: auto;
}

/* ---------- mobile: nothing sticks ---------- */

@media (max-width: 860px) {
	.mh-blog__rail--right { align-self: auto; }

	.mh-blog__sticky {
		position: static;
		gap: 20px;
	}
}

/* ---------- contents column stays pinned ---------- */

/* The contents list is navigation, so it is worth keeping on screen even when
   it is long. Rather than dropping out of sticky like the right column does,
   it scrolls inside itself - nothing becomes unreachable, and the reader keeps
   a fixed place to jump from. */
.mh-blog__rail--left {
	position: sticky;
	top: var(--mh-stick);
	max-height: calc(100vh - var(--mh-stick) - 20px);
	overflow-y: auto;
}

/* Never un-stick this one, whatever the height test decides. */
.mh-blog__rail--left.is-unstuck {
	position: sticky;
	max-height: calc(100vh - var(--mh-stick) - 20px);
	overflow-y: auto;
}

/* With the scrollbar hidden there is no other clue that the list continues, so
   the last few pixels fade out when it does. */
.mh-blog__rail--left.is-scrollable {
	-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent 100%);
	mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent 100%);
}

@media (max-width: 1239px) {
	.mh-blog__rail--left,
	.mh-blog__rail--left.is-unstuck {
		position: static;
		max-height: none;
		overflow: visible;
	}

	.mh-blog__rail--left.is-scrollable {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* ---------- related: one card at a time ---------- */

/* Stacking only exists once the script adds the modifier, so with JavaScript
   off the block stays the plain list it renders as. */

.mh-related--rotate .mh-related__list {
	/* Grid stacking rather than absolute positioning: the container keeps the
	   height of the tallest card on its own, so swapping cards shifts nothing. */
	display: grid;
}

.mh-related--rotate .mh-related__item {
	grid-area: 1 / 1;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
}

.mh-related--rotate .mh-related__item.is-current {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Transitions are switched on a frame after the stack is built. Without that
   the three cards paint in full and then fade out, which reads as a flicker on
   every page load. */
.mh-related--rotate.is-animated .mh-related__item {
	transition:
		opacity 380ms cubic-bezier(0.4, 0, 0.2, 1),
		transform 380ms cubic-bezier(0.4, 0, 0.2, 1),
		/* delayed so the outgoing card fades before it leaves the tab order */
		visibility 0s linear 380ms;
}

.mh-related--rotate.is-animated .mh-related__item.is-current {
	transition:
		opacity 380ms cubic-bezier(0.4, 0, 0.2, 1),
		transform 380ms cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s;
}

/* Coming from below when scrolling back up, so the movement matches the
   direction of travel. */
.mh-related--rotate .mh-related__item.is-leaving-down { transform: translateY(-10px); }

@media (prefers-reduced-motion: reduce) {
	.mh-related--rotate .mh-related__item { transition: none; }
}

/* ==========================================================================
   Template 2 - two columns
   ========================================================================== */

/* 24 + 70 + 6 gap = 100. minmax(0,1fr) rather than a literal 70% so a long
   word or a wide table can never push the column past its share. */
.mh-blog__grid--two {
	grid-template-columns: 24% minmax(0, 1fr);
	gap: 6%;
}

/* Contents and share share one block, so the share row reads as part of it. */
.mh-blog-tpl-2 .mh-share--bare {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--mh-line);
}

.mh-blog-tpl-2 .mh-share--bare .mh-share__list { gap: 8px; }

.mh-blog-tpl-2 .mh-share--bare .mh-share__btn {
	width: 38px;
	height: 38px;
	border-radius: 10px;
}

.mh-blog-tpl-2 .mh-related { margin-top: 30px; }

/* The desktop CTA on this template is the wide one under the article. This
   copy exists only so the phone layout can lift it into the article. */
.mh-blog-tpl-2 .mh-blog__rail--left .mh-cta--side { display: none; }

/* ---------- related as a full card ---------- */

.mh-related--card .mh-related__item { margin: 0; padding: 0; border: 0; }

.mh-related--card .mh-related__link {
	display: block;
	gap: 0;
}

.mh-related--card .mh-related__thumb {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	border-radius: 14px;
	margin-bottom: 12px;
}

.mh-related--card .mh-related__cat {
	display: inline-block;
	margin-bottom: 7px;
	padding: 4px 11px;
	border-radius: 999px;
	background: #eef5e9;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--mh-green-deep);
}

.mh-related--card .mh-related__headline {
	font-size: 16.5px;
	line-height: 1.38;
}

.mh-related--card .mh-related__meta { margin-top: 6px; font-size: 13px; }

/* ---------- template 2 on smaller screens ---------- */

@media (max-width: 1239px) {
	.mh-blog__grid--two {
		grid-template-columns: 27% minmax(0, 1fr);
		gap: 5%;
	}
}

@media (max-width: 860px) {
	.mh-blog__grid--two {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	/* Contents first, then the article; related drops to the end. */
	.mh-blog-tpl-2 .mh-blog__rail--left { display: contents; }
	.mh-blog-tpl-2 .mh-toc { order: 1; }
	.mh-blog-tpl-2 .mh-blog__main { order: 2; }
	.mh-blog-tpl-2 .mh-related { order: 3; margin-top: 0; }
	.mh-blog-tpl-2 .mh-share--bare { order: 4; border-top: 0; padding-top: 0; }
	.mh-blog-tpl-2 .mh-share--bare .mh-share__list { justify-content: center; }
}

/* ---------- template 2: give the related card room ---------- */

/* Share and related take their natural height; the contents list absorbs
   whatever is left and scrolls inside itself. A fixed vh cap only ever suits
   one screen height - this fits every one. */
.mh-blog-tpl-2 .mh-blog__rail--left {
	display: flex;
	flex-direction: column;
}

.mh-blog-tpl-2 .mh-toc {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.mh-blog-tpl-2 .mh-toc__toggle { flex: 0 0 auto; }

.mh-blog-tpl-2 .mh-toc__panel {
	flex: 1 1 auto;
	min-height: 0;
}

.mh-blog-tpl-2 .mh-share--bare,
.mh-blog-tpl-2 .mh-related { flex: 0 0 auto; }

.mh-blog-tpl-2 .mh-toc__panel-inner {
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: none;
}

.mh-blog-tpl-2 .mh-toc__panel-inner::-webkit-scrollbar { width: 0; height: 0; }

.mh-blog-tpl-2 .mh-toc__panel-inner.is-scrollable {
	-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent 100%);
	mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent 100%);
}

/* Tighter share row - it was costing about 70px of the column. */
.mh-blog-tpl-2 .mh-share--bare {
	margin-top: 12px;
	padding-top: 10px;
}

.mh-blog-tpl-2 .mh-share--bare .mh-share__list { gap: 6px; }

.mh-blog-tpl-2 .mh-share--bare .mh-share__btn {
	width: 34px;
	height: 34px;
	border-radius: 9px;
}

.mh-blog-tpl-2 .mh-share--bare .mh-share__btn .mh-blog-icon {
	width: 16px;
	height: 16px;
}

.mh-blog-tpl-2 .mh-related { margin-top: 22px; }

@media (max-width: 860px) {
	.mh-blog-tpl-2 .mh-blog__rail--left { display: contents; }

	.mh-blog-tpl-2 .mh-toc,
	.mh-blog-tpl-2 .mh-toc__panel { display: block; flex: none; }

	.mh-blog-tpl-2 .mh-toc__panel-inner { overflow: visible; }

	.mh-blog-tpl-2 .mh-toc__panel-inner.is-scrollable {
		-webkit-mask-image: none;
		mask-image: none;
	}
}