/* ═══════════════════════════════════════════════════════════════════════════
   SINGLE TOPIC PAGE (mockup)
   Scoped to .topic-single-v2 — reuses the same brand furniture as
   project-single.css (navy hero, tag pills, ce-feature-list cards,
   card-with-frosted-footer, .home-cta) so the two page types read as one family.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────
   SCROLL ANIMATIONS (same as project-single.css)
───────────────────────────────────────────── */
.topic-single-v2 [data-animate="fade-up"] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.65s ease, transform 0.65s ease;
}

.topic-single-v2 [data-animate="fade-up"].is-visible {
	opacity: 1;
	transform: translateY(0);
}


/* ─────────────────────────────────────────────
   HERO — banner image slot + navy band
───────────────────────────────────────────── */
/* Matches the project hero exactly — 2560/672, the shape the banner artwork is
   actually authored at. It was 2560/420, which cropped a third off the top and
   bottom of every image and made topic pages look like a lesser thing than
   project pages. See project-single.css, which is the source of these numbers. */
.topic-single-v2 .tpi-hero__banner {
	width: 100%;
	aspect-ratio: 2560 / 672;
	overflow: hidden;
	line-height: 0;
}

.topic-single-v2 .tpi-hero__banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.topic-single-v2 .tpi-hero__banner--empty {
	background-color: #d8d8d8;
}

@supports (background: color-mix(in srgb, red 20%, #d8d8d8)) {
	.topic-single-v2 .tpi-hero__banner--empty {
		background-color: color-mix(in srgb, var(--ci-color-innovate, #538da9) 20%, #d8d8d8);
	}
}

@media (max-width: 767px) {
	/* Both values from project-single.css, for the same reason as above: each
	   governs at a different width — max-height binds above ~376px,
	   aspect-ratio below it. */
	.topic-single-v2 .tpi-hero__banner {
		aspect-ratio: 2.5 / 1;
		max-height: 150px;
	}
}

.topic-single-v2 .tpi-hero__panel {
	background-color: #253d47;
	border-top: 0.3rem solid #ffffff;
	padding: 3.5rem 0 4rem;
	text-align: center;
}

.topic-single-v2 .tpi-hero__panel .ci-breadcrumb {
	margin-bottom: 0.75rem;
	display: flex;
	justify-content: center;
}

.topic-single-v2 .tpi-hero__panel .ci-breadcrumb__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
}

.topic-single-v2 .tpi-hero__panel .ci-breadcrumb__item {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.45);
	display: flex;
	align-items: center;
}

.topic-single-v2 .tpi-hero__panel .ci-breadcrumb__item + .ci-breadcrumb__item::before {
	content: '›';
	margin: 0 0.4rem;
	color: rgba(255, 255, 255, 0.3);
	font-weight: 400;
}

.topic-single-v2 .tpi-hero__panel .ci-breadcrumb__link {
	color: #ffffff;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
	.topic-single-v2 .tpi-hero__panel .ci-breadcrumb__link:hover {
		opacity: 0.7;
	}
}

.topic-single-v2 .tpi-hero__panel .ci-breadcrumb__item--current {
	color: rgba(255, 255, 255, 0.45);
}

/* ── Phones: drop the current-page crumb ─────────────────────────────────────
   The last crumb is the page title, and the H1 directly below it is the same
   string — byte for byte, from the same variable. On a phone it has no room
   to fit beside "Home › Topics", so it wraps and the breadcrumb becomes a
   two-line block of small grey text sitting immediately above the identical
   title in large bold type.

   Measured across the 64 published topics at 390px: 27 of them wrap. At 480px, 2.
   Above ~560px none do, which is why this stops at 600px rather than the
   usual 767px — past that the crumb fits and is worth keeping.

   Same call, and the same reasoning, as .ce-post-header__breadcrumb in
   blog-post-header.css. This needs one selector where that needed two: here
   the separator is a ::before on the crumb itself, so hiding the crumb takes
   the "›" with it.

   What's left is "Home › Topics" — the part that actually navigates. Nothing
   is lost but a restatement of the heading. */
@media (max-width: 600px) {
	.topic-single-v2 .tpi-hero__panel .ci-breadcrumb__item--current {
		display: none;
	}
}


.topic-single-v2 .tpi-hero__panel h1 {
	font-family: var(--ci-font-primary);
	font-size: clamp(2.2rem, 5vw, 3.8rem);
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
	margin: 0 auto 1.25rem;
	max-width: 1000px;
}

/* Tag pills */
.topic-single-v2 .tpi-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0 auto 1.25rem;
	max-width: 640px;
}

.topic-single-v2 .tpi-chip {
	display: inline-block;
	padding: 0.7rem 1.9rem;
	border-radius: 9999px;
	font-size: var(--ci-text-body);
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	text-decoration: none;
	color: #fff;
	font-family: var(--ci-font-primary);
	letter-spacing: 0.01em;
	/* --tag-color is set inline per chip (subject/key-stage colour, same
	   ce_projects_subject_color()/ce_topics_key_stage_color() functions the
	   /topic/ archive's filter pills and card tags use) — this is only the
	   fallback for a chip with no colour assigned. */
	background-color: var(--tag-color, var(--ci-color-innovate, #538da9));
	transition: opacity 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
	a.topic-single-v2 .tpi-chip:hover,
	.topic-single-v2 a.tpi-chip:hover {
		opacity: 0.78;
	}
}

.topic-single-v2 .tpi-hero__intro {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.85);
	max-width: 1000px;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.topic-single-v2 .tpi-hero__panel {
		padding: 2.5rem 0 3rem;
	}
}


/* ─────────────────────────────────────────────
   EDUCATIONAL CONTENT — designed section matching
   the project page's "What children learn" treatment
───────────────────────────────────────────── */
.topic-single-v2 .tpi-content {
	background: #ffffff;
	position: relative;
	overflow: clip;
	padding: 5rem 0;
}

.topic-single-v2 .tpi-content::before {
	content: '';
	position: absolute;
	width: 450px;
	height: 450px;
	background: #f9f9f9;
	border-radius: 2.75rem;
	transform: rotate(45deg);
	top: -80px;
	left: -90px;
	pointer-events: none;
	z-index: 0;
}

.topic-single-v2 .tpi-content::after {
	content: '';
	position: absolute;
	width: 260px;
	height: 260px;
	background: #f9f9f9;
	border-radius: 2rem;
	transform: rotate(45deg);
	top: 420px;
	left: 178px;
	pointer-events: none;
	z-index: 0;
}

.topic-single-v2 .tpi-content .site-container {
	position: relative;
	z-index: 1;
}

.topic-single-v2 .tpi-content .ce-feature-list__heading {
	color: #646464;
}

.topic-single-v2 .tpi-content .ce-feature-list__item {
	min-height: 0;
}

.topic-single-v2 .tpi-content .ce-feature-list__header {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.topic-single-v2 .tpi-content .ce-feature-list__badge {
	font-size: 1.75rem;
	flex-shrink: 0;
}

.topic-single-v2 .tpi-content .ce-feature-list__title {
	margin: 0;
}

/* Prose — full container width, no 780px cap */
.topic-single-v2 .tpi-content__prose {
	margin: 0 0 2.5rem;
}

.topic-single-v2 .tpi-content__prose h3 {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h3);
	font-weight: 700;
	color: var(--ci-color-navy);
	margin: 0 0 0.75rem;
	line-height: 1.3;
}

.topic-single-v2 .tpi-content__prose p {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	line-height: 1.65;
	color: #333;
	margin: 0 0 1.5rem;
}

.topic-single-v2 .tpi-content__prose p:last-child {
	margin-bottom: 0;
}

/* Group label — mirrors .ce-inv__label (checklist.css) so this reads as the
   same "icon + bold grey heading" pattern used on the science page's
   Inside-the-curriculum section, rather than inventing a new visual style. */
.topic-single-v2 .tpi-knowledge-group__label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--ci-font-primary);
	font-size: 1.05rem;
	font-weight: 700;
	color: #646464;
	margin: 0 0 1rem;
}

.topic-single-v2 .tpi-knowledge-group__label i {
	font-size: 1.15rem;
	color: #646464;
	--fa-secondary-opacity: 0.35;
}

.topic-single-v2 .tpi-knowledge-group {
	margin-bottom: 2rem;
}

.topic-single-v2 .tpi-knowledge-group:last-child {
	margin-bottom: 0;
}

.topic-single-v2 .tpi-knowledge {
	margin-bottom: 3rem;
}

/* Real grid, column count from --tpi-cols (set inline per group in
   inc/topics.php).

   Rows are content-sized, not 1fr. These cards are subgrids spanning two row
   tracks — see feature-list.css — so each card occupies a header track and a
   description track. 1fr sizes every *track* equally, which made the header
   track as tall as the description track: an 81px header sitting in a 146px
   row, and ~65px of dead space above every description. That was the visible
   symptom on desktop.

   1fr was there to make all cards in the grid one height rather than one
   height per row. Subgrid already aligns the descriptions to a shared line,
   which is what that was really for, and it does it without the gap. Rows can
   now differ slightly in height between grid rows, which reads as normal. */
.topic-single-v2 .tpi-knowledge-grid {
	display: grid;
	grid-template-columns: repeat(var(--tpi-cols, 3), 1fr);
	grid-auto-rows: auto;
	gap: 1.25rem;
	margin-bottom: 0;
}

.topic-single-v2 .tpi-knowledge-grid > .ce-feature-list__item {
	height: 100%;
}

/* Reserve space for 2 lines of title — without this, a card whose title
   wraps (e.g. "Mummification and the afterlife") gets a taller header than
   its neighbours, pushing its description down out of line with cards
   whose title only takes 1 line. Fixing the height keeps every card's
   description starting at the same y-position regardless of title length,
   and centering the (possibly single-line) text within it keeps a short
   title looking centred against its icon rather than pinned to the top. */
.topic-single-v2 .tpi-knowledge-grid .ce-feature-list__title {
	display: flex;
	align-items: center;
	min-height: 2.7em;
}

@media (max-width: 1100px) {
	.topic-single-v2 .tpi-knowledge-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.topic-single-v2 .tpi-knowledge-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.topic-single-v2 .tpi-content {
		padding: 3rem 0;
	}
}


/* ─────────────────────────────────────────────
   OUR PROJECTS COVERING THIS TOPIC — card row
───────────────────────────────────────────── */
.topic-single-v2 .tpi-projects {
	background: #f9f9f9;
	padding: 4rem 0;
}

.topic-single-v2 .tpi-projects .ce-feature-list__heading {
	color: #646464;
}

/* A topic maps to exactly one Cornerstones project, so this is a single
   feature row rather than a grid — one card stranded in a 3-up grid left
   two-thirds of the row empty. No card "box" (no background/shadow) — a
   square thumbnail and text sit directly on the section's own background,
   with the CTA as a real button rather than the whole row being one link
   (a <button>-style element can't itself be nested inside another <a>).

   The thumbnail borrows the /projects/ archive card's own language — square
   image, colour-coded pills overlaid top-left (same subject/key-stage colours
   as this page's own hero chips and the archive filters) — but laid out
   horizontally rather than the archive's stacked image-then-title, since this
   is one featured project rather than a grid of many. */
.topic-single-v2 .tpi-project-feature {
	position: relative;
	max-width: 940px;
	margin: 2.5rem auto 0;
	display: flex;
	align-items: center;
	gap: 2.5rem;
}

/* Whole card clickable via the "View project" link's own .ce-stretched-link
   overlay (feature-list.css) stretching to fill this positioned ancestor —
   not a wrapping <a>, since that can't contain the link's own <a> tag.
   :hover still bubbles up from any descendant (including the overlay), so
   this fires on hovering the image or question text too, not just the link. */
.topic-single-v2 .tpi-project-feature:hover .tpi-project-feature__image {
	opacity: 0.88;
}

@media (hover: none) {
	.topic-single-v2 .tpi-project-feature:active .tpi-project-feature__image {
		opacity: 0.88;
	}
}

.topic-single-v2 .tpi-project-feature__image {
	position: relative;
	flex: 0 0 340px;
	width: 340px;
	aspect-ratio: 1 / 1;
	border-radius: 1rem;
	background-size: cover;
	background-position: center;
	background-color: #e8edf0;
	transition: opacity 0.2s ease;
}

.topic-single-v2 .tpi-project-feature__image--no-image {
	background-image: linear-gradient(135deg, #e8edf0 0%, #d4dce0 100%);
}

/* Pills — deliberately identical values to .ce-proj-card__pills/__pill
   (projects-archive.css), not just visually similar, so this thumbnail reads
   as the same component wherever it appears. */
.topic-single-v2 .tpi-project-feature__pills {
	position: absolute;
	top: 0.875rem;
	left: 0.875rem;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.topic-single-v2 .tpi-project-feature__pill {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 700;
	color: #ffffff;
	padding: 0.28rem 0.8rem;
	border-radius: 9999px;
	letter-spacing: 0.02em;
}

.topic-single-v2 .tpi-project-feature__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 0.85rem;
}

.topic-single-v2 .tpi-project-feature__title {
	font-family: var(--ci-font-primary);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ci-color-navy);
	line-height: 1.25;
	margin: 0;
}

.topic-single-v2 .tpi-project-feature__question {
	font-family: var(--ci-font-primary);
	font-size: 1.05rem;
	line-height: 1.55;
	color: #4a5a6a;
	margin: 0;
}

.topic-single-v2 .tpi-project-feature__cta {
	margin-top: 0.25rem;
}

@media (max-width: 780px) {
	.topic-single-v2 .tpi-projects {
		padding: 2.5rem 0;
	}

	.topic-single-v2 .tpi-project-feature {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 1.5rem;
	}

	/* Fixed 340px would overflow a narrow phone once the row stacks and the
	   image is no longer sharing space with the text column — cap at 100%
	   of the (padded) container instead. */
	.topic-single-v2 .tpi-project-feature__image {
		width: min(340px, 100%);
		flex-basis: auto;
	}

	.topic-single-v2 .tpi-project-feature__body {
		align-items: center;
		text-align: center;
	}
}

/* Option C. 1.5rem longhand is the desktop --ci-text-h3 value, so the mobile
   scale never reached it; brought to Option C's h3 by hand.

   Its own 767px block rather than the 780px one above, which is a layout
   breakpoint: sharing it would shrink this heading across 768-780px while
   every token around it was still at desktop size. */
@media (max-width: 767px) {
	.topic-single-v2 .tpi-project-feature__title {
		font-size: 1.3125rem;   /* 21px — Option C h3 */
	}
}


/* ─────────────────────────────────────────────
   FREE RESOURCE BLOCK — distinct, warm lead-capture block
───────────────────────────────────────────── */
.topic-single-v2 .tpi-resource {
	background: #253d47;
	padding: 4rem 0;
}

/* Two columns — the resource preview does the selling and the copy sits
   beside it rather than under it. */
.topic-single-v2 .tpi-resource__inner {
	max-width: 1040px;
	margin: 0 auto;
	display: flex;
	/* Image on the right, text on the left — the "Our project" section right
	   above this one puts its image on the left, so reversing here stops two
	   back-to-back image/text splits reading as one monotonous repeated block. */
	flex-direction: row-reverse;
	align-items: center;
	gap: 3.5rem;
	text-align: left;
}

/* 'contain', not 'cover' — the intended asset is a mockup of the resource
   itself (pages rendered at an angle, usually with transparency and a soft
   shadow), which must not be cropped by the slot. */
.topic-single-v2 .tpi-resource__visual {
	flex: 0 0 42%;
	aspect-ratio: 4 / 3;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

/* Grey mock until the real resource mockup exists. Same placeholder treatment
   as the project thumbnail, with a radius since there's no artwork shape of
   its own to define the edges. */
.topic-single-v2 .tpi-resource__visual--placeholder {
	background-image: linear-gradient(135deg, #e8edf0 0%, #d4dce0 100%);
	background-size: cover;
	border-radius: 1rem;
}

.topic-single-v2 .tpi-resource__content {
	flex: 1 1 auto;
	min-width: 0;
}

.topic-single-v2 .tpi-resource__inner h2 {
	font-family: var(--ci-font-primary);
	font-size: clamp(1.6rem, 2.4vw, 2.2rem);
	font-weight: 700;
	color: #ffffff;
	line-height: 1.25;
	margin: 0 0 1rem;
}

.topic-single-v2 .tpi-resource__inner p {
	font-family: var(--ci-font-primary);
	font-size: 1.1rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 1.75rem;
}

.topic-single-v2 .tpi-resource__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

@media (max-width: 880px) {
	.topic-single-v2 .tpi-resource__inner {
		flex-direction: column;
		text-align: center;
		gap: 2rem;
	}

	.topic-single-v2 .tpi-resource__visual {
		flex: 0 0 auto;
		width: min(420px, 100%);
		aspect-ratio: 4 / 3;
	}

	.topic-single-v2 .tpi-resource__actions {
		justify-content: center;
	}
}

@media (max-width: 767px) {
	.topic-single-v2 .tpi-resource {
		padding: 2.5rem 0;
	}
}


/* ─────────────────────────────────────────────
   ACCESS PATHWAYS — matches the project page's
   "How to access this project" card treatment
───────────────────────────────────────────── */
/* Navy section, matching the agreed /topic/romans-ks2/ blueprint. Sits
   between the white .tpi-content above and the grey .tpi-related below, so
   the page runs white / navy / grey / navy from top to bottom. Decorative diamonds use a
   low-opacity white rather than solid — solid white would read as a bold,
   jarring shape against navy rather than a subtle texture. */
.topic-single-v2 .tpi-paths {
	background: #253d47;
	position: relative;
	overflow: clip;
	padding: 5rem 0;
}

.topic-single-v2 .tpi-paths::before {
	content: '';
	position: absolute;
	width: 450px;
	height: 450px;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 2.75rem;
	transform: rotate(45deg);
	top: -80px;
	left: -90px;
	pointer-events: none;
	z-index: 0;
}

.topic-single-v2 .tpi-paths::after {
	content: '';
	position: absolute;
	width: 260px;
	height: 260px;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 2rem;
	transform: rotate(45deg);
	top: 420px;
	left: 178px;
	pointer-events: none;
	z-index: 0;
}

.topic-single-v2 .tpi-paths .site-container {
	position: relative;
	z-index: 1;
}

.topic-single-v2 .tpi-paths .ce-feature-list__heading {
	color: #ffffff;
}

/* Optional intro paragraph, above the access cards — plain body copy, same
   treatment as the prose paragraphs in .tpi-content, not a highlighted
   panel. Centred and capped to match the heading above it. */
.topic-single-v2 .tpi-paths__intro {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.8);
	margin: 0 0 3rem;
	text-align: center;
}

/* This section's own CTA link and note sit directly on the navy field, so
   both flip light for legibility. The .tpi-cta-link instances inside the
   light-tinted access cards keep their default navy colour. */
.topic-single-v2 .tpi-paths__quickteach .tpi-cta-link {
	color: #ffffff;
}

.topic-single-v2 .tpi-paths__quickteach-note {
	color: rgba(255, 255, 255, 0.65);
}

/* The base .ce-feature-list__item tints are translucent, designed to sit over
   a light section background — over navy they read as a muddy, near-illegible
   dark green/purple. Same opaque light-tint glass card treatment as
   .cpd-resource-card on the CPD page's navy download section. */
.topic-single-v2 .tpi-paths .ce-feature-list__item:nth-child(4n+1) {
	background: rgb(254, 242, 228);
	border-color: rgba(249, 157, 49, 0.3);
}

.topic-single-v2 .tpi-paths .ce-feature-list__item:nth-child(4n+2) {
	background: rgb(246, 235, 240);
	border-color: rgba(175, 77, 118, 0.25);
}

/* Sized to their content rather than stretched across the full container.
   These cards hold only a title and a link, so at 1fr each they left a large
   dead area to the right of the text. Centred to match this section's own
   heading and the button below it. */
.topic-single-v2 .tpi-paths__cards {
	grid-template-columns: repeat(2, minmax(0, 360px));
	justify-content: center;
}

/* Navigational cards only — a large title and a link, no body copy — so they
   are deliberately tighter than the standard feature-list card, which is
   sized for title + description + link. */
.topic-single-v2 .tpi-paths .ce-feature-list__item {
	min-height: 0;
	gap: 0.65rem;
	padding: 1.4rem 1.5rem;
}

.topic-single-v2 .tpi-paths .ce-feature-list__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.topic-single-v2 .tpi-paths .ce-feature-list__badge {
	font-size: 2rem;
	flex-shrink: 0;
}

.topic-single-v2 .tpi-paths .ce-feature-list__title {
	margin: 0;
	font-size: var(--ci-text-card-heading);
	line-height: 1.25;
}

.topic-single-v2 .tpi-cta-link {
	font-family: var(--ci-font-primary);
	font-size: 1rem;
	font-weight: 700;
	color: var(--ci-color-navy);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.25rem;
}

@media (hover: hover) and (pointer: fine) {
	.topic-single-v2 .tpi-cta-link:hover {
		opacity: 0.7;
	}
}

.topic-single-v2 .tpi-paths__buttons {
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}

.topic-single-v2 .tpi-paths__quickteach {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	margin: 1.25rem 0 0;
	text-align: center;
}

.topic-single-v2 .tpi-paths__quickteach-note {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
}

/* Two 360px cards plus the gap and container padding need ~825px of viewport,
   so drop to a single (still capped, still centred) column above the usual
   767px breakpoint — otherwise 767–820px overflows. This is a wider breakpoint
   than the base .ce-feature-list__grid rules use, and it has to override them,
   which the extra .topic-single-v2 specificity handles. */
@media (max-width: 820px) {
	.topic-single-v2 .tpi-paths__cards {
		grid-template-columns: minmax(0, 360px);
	}
}

@media (max-width: 767px) {
	.topic-single-v2 .tpi-paths {
		padding: 3rem 0;
	}
}


/* ─────────────────────────────────────────────
   RELATED TOPICS — same thumbnail + pills + title card design as the
   /topic/ archive (.ce-proj-card, projects-archive.css). That stylesheet
   isn't loaded on a single topic page, so the values below are deliberately
   copied rather than shared — same approach already used for the pills on
   .tpi-project-feature above.
───────────────────────────────────────────── */
/* White, not grey — .tpi-paths (immediately before this section) is now grey
   itself (see the note there), so this flips to white to keep grey and white
   alternating regardless of which optional sections between hero and CTA are
   present on a given topic. */
.topic-single-v2 .tpi-related {
	background: #f9f9f9;
	padding: 3.5rem 0;
	text-align: center;
}

.topic-single-v2 .tpi-related h2 {
	font-family: var(--ci-font-primary);
	font-size: clamp(1.4rem, 2vw, 1.8rem);
	font-weight: 700;
	color: #646464;
	margin: 0 0 1.5rem;
}

/* Track, centring and gap come from .ce-related-grid in related-grid.css,
   which this element also carries — see that file. Nothing else about this
   row differs from the other two at this width, so nothing is left here. */

.topic-single-v2 .tpi-related-card {
	position: relative;
}

.topic-single-v2 .tpi-related-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	outline-offset: 3px;
	-webkit-tap-highlight-color: transparent;
}

.topic-single-v2 .tpi-related-card__image {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 1rem;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-color: #e8edf0;
	transition: opacity 0.2s ease;
}

.topic-single-v2 .tpi-related-card:hover .tpi-related-card__image {
	opacity: 0.88;
}

@media (hover: none) {
	.topic-single-v2 .tpi-related-card:active .tpi-related-card__image {
		opacity: 0.88;
	}
}

/* A real <img> inside the positioned tile rather than a CSS background: it
   carries srcset and loading="lazy", and these cards sit well below the fold.
   The tile stays the positioning context for the pills. */
.topic-single-v2 .tpi-related-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.topic-single-v2 .tpi-related-card__image--no-image {
	background-image: linear-gradient(135deg, #e8edf0 0%, #d4dce0 100%);
}

.topic-single-v2 .tpi-related-card__pills {
	position: absolute;
	top: 0.875rem;
	left: 0.875rem;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.topic-single-v2 .tpi-related-card__pill {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 700;
	color: #ffffff;
	padding: 0.28rem 0.8rem;
	border-radius: 9999px;
	letter-spacing: 0.02em;
}

.topic-single-v2 .tpi-related-card__body {
	padding: 0.7rem 0.1rem 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.3rem;
}

.topic-single-v2 .tpi-related-card__title {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-heading);
	font-weight: 600;
	color: var(--ci-color-navy);
	line-height: 1.3;
	margin: 0;
}

/* "Explore this topic in more depth" reuses .tpi-related's markup/grid but
   sits on a navy background — its own class rather than changing .tpi-related
   itself, since the real "Related topics" section at the foot of the page
   keeps its light grey background. */
.topic-single-v2 .tpi-subtopics {
	background: #253d47;
}

.topic-single-v2 .tpi-subtopics h2 {
	color: #ffffff;
}

.topic-single-v2 .tpi-subtopics .tpi-related-card__title {
	color: #ffffff;
}

@media (max-width: 560px) {
	.topic-single-v2 .tpi-related-card__pill {
		font-size: var(--ci-text-utility);
		padding: 0.22rem 0.6rem;
	}

	.topic-single-v2 .tpi-related-card__title {
		font-size: var(--ci-text-card-heading);
	}
}


/* ─────────────────────────────────────────────
   FINAL CTA — navy. The grey .tpi-related section above it provides the
   seam that keeps this from running into the navy .tpi-paths section.
   That depends on .tpi-related actually rendering: it is skipped when a
   topic has no related_topics, which would put navy directly against
   navy. Every one of the 36 topics carries four related topics, so this
   holds — but a topic added later with none would need a divider.
───────────────────────────────────────────── */
.topic-single-v2 .home-cta {
	background: #253d47;
}

.topic-single-v2 .home-cta__heading {
	color: #ffffff;
}

.topic-single-v2 .home-cta__body {
	color: rgba(255, 255, 255, 0.85);
}

/* ── Related cards on phones — match the archive tile ──────────────────────
   These are the same card the /projects/ and /topic/ archives show, so they
   should be the same size in the same place. The archive goes two-up at 600px
   with a 0.85rem gap, giving a 149x201 tile; this grid stayed one-up, so the
   identical card rendered at 311x344 and four of them ran to 1449px — about
   1.7 screens, with barely two visible at a time.

   The pill comes down to the archive's 0.75rem too. It was inheriting
   --ci-text-utility (16px), which is fine over a 311px image and much too
   heavy over a 149px one.

   600px, not the 767px the one-column rule used, so the switch happens at the
   same width as the archive it is matching.
──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {

	.topic-single-v2 .tpi-related__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.85rem;
	}

	.topic-single-v2 .tpi-related-card__pill {
		font-size: 0.75rem;
		padding: 0.2rem 0.55rem;
	}

	.topic-single-v2 .tpi-related-card__body {
		padding-top: 0.5rem;
	}

}