/* ═══════════════════════════════════════════════════════════════════════════
   SINGLE PROJECT PAGE
   Scoped to .project-single-v2
   --ci-year-colour is set inline on the <article> element and reflects the
   project's year group colour. Available throughout all rules below.
   ═══════════════════════════════════════════════════════════════════════════ */


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

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


/* ─────────────────────────────────────────────
   BREADCRUMB
───────────────────────────────────────────── */
.project-single-v2 .ci-breadcrumb {
	margin: 0;
}

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

.project-single-v2 .ci-breadcrumb__item {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 600;
	color: var(--ci-color-text-muted);
	display: flex;
	align-items: center;
}

.project-single-v2 .ci-breadcrumb__item + .ci-breadcrumb__item::before {
	content: '›';
	margin: 0 0.4rem;
	color: var(--ci-color-text-muted);
	font-weight: 400;
}

.project-single-v2 .ci-breadcrumb__link {
	color: #c6a54e;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

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

.project-single-v2 .ci-breadcrumb__item--current {
	color: var(--ci-color-text-muted);
}


/* ─────────────────────────────────────────────
   HERO
───────────────────────────────────────────── */

/* 2560/672 is the source banner's 2560x840 with the height cut by 20%. Kept in
   that form so the relationship to the artwork stays readable — it does mean
   the image is now cropped slightly top and bottom by object-fit: cover, so
   keep the subject away from the very top and bottom edges. */
.project-single-v2 .psi-hero__banner {
	width: 100%;
	aspect-ratio: 2560 / 672;
	overflow: hidden;
	line-height: 0;
}

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

.project-single-v2 .psi-hero__banner--empty {
	background-color: #d8d8d8;
}

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

/* Dark panel */
.project-single-v2 .psi-hero__panel {
	background-color: #253d47;
	border-top: 0.3rem solid #ffffff;
	padding: 2.5rem 0 4rem;
	text-align: center;
}

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

.project-single-v2 .psi-hero__panel .ci-breadcrumb__item {
	color: rgba(255, 255, 255, 0.45);
}

.project-single-v2 .psi-hero__panel .ci-breadcrumb__link {
	color: #ffffff;
}

.project-single-v2 .psi-hero__panel .ci-breadcrumb__item + .ci-breadcrumb__item::before {
	color: rgba(255, 255, 255, 0.3);
}

.project-single-v2 .psi-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 › Projects", 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 at 390px: 12 of the 39 projects wrap, and 6 of the 11 longest
   legacy project titles do too — those carry only "Home ›" and still run out
   of room. Above ~560px nothing wraps, which is why this stops at 600px
   rather than the usual 767px: past that the crumb fits and is worth keeping.

   On a legacy project this leaves "Home" alone, because that breadcrumb has
   no Projects level to fall back on even though the post lives under
   /projects/. A lone Home link is thin, but it beats the two-line restatement
   it replaces; adding the missing level would be the better fix.

   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 › Projects" — the part that actually navigates. Nothing
   is lost but a restatement of the heading. */
@media (max-width: 600px) {
	.project-single-v2 .psi-hero__panel .ci-breadcrumb__item--current {
		display: none;
	}
}


/* Title */
.project-single-v2 .psi-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;
}

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

.project-single-v2 .psi-chip {
	display: inline-block;
	padding: 0.7rem 1.9rem;
	border-radius: 9999px;
	font-size: 1.2rem;
	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;
	transition: opacity 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
	.project-single-v2 .psi-chip:hover {
		opacity: 0.78;
	}
}

.project-single-v2 .psi-chip--eyfs  { background-color: #FE9C55; }
/* Year 1 previously overrode the inherited white with dark navy. Now white like
   every other chip, matching the archive card and filter pills. */
.project-single-v2 .psi-chip--year1 { background-color: #11D470; }
.project-single-v2 .psi-chip--year2 { background-color: #175EB6; }
.project-single-v2 .psi-chip--year3 { background-color: #E16EE1; }
.project-single-v2 .psi-chip--year4 { background-color: #FE9C55; }
.project-single-v2 .psi-chip--year5 { background-color: #57AAAA; }
.project-single-v2 .psi-chip--year6 { background-color: #FF5555; }

.project-single-v2 .psi-chip--science              { background-color: #ff9d96; color: #1e2d3d; }
.project-single-v2 .psi-chip--history              { background-color: #9786b3; }
.project-single-v2 .psi-chip--geography            { background-color: #c09b85; }
.project-single-v2 .psi-chip--art                  { background-color: #ffbba6; color: #1e2d3d; }
.project-single-v2 .psi-chip--dt                   { background-color: #87a888; color: #1e2d3d; }
.project-single-v2 .psi-chip--computing            { background-color: #bf7e82; }
.project-single-v2 .psi-chip--maths                { background-color: #8090a9; }
.project-single-v2 .psi-chip--religious-education  { background-color: #538da9; }
/* Main / Mini project — neutral slate, so it reads as a label rather than as
   another subject alongside the coloured chips.

   --type-main was #253d47, which is the hero panel's own background colour:
   contrast 1.00, so the chip was not a chip at all, just white words floating
   on the navy. The intent in this comment was right; the value was the one
   colour it could not be.

   #9fb0bd with dark text instead — 5.13 against the panel so the pill shape
   reads, and 6.29 for its label. Dark rather than white text because at this
   lightness white would only reach 2.23: the same trade the light subject
   chips above already make (--science, --art, --dt all carry #1e2d3d).

   --type-mini is left alone. At 3.23 against the panel it is visible, and its
   white label clears 3:1 — which is the applicable threshold here, since these
   chips are 19.2px bold and therefore large text by WCAG. */
.project-single-v2 .psi-chip--type-main { background-color: #9fb0bd; color: #1e2d3d; }
.project-single-v2 .psi-chip--type-mini { background-color: #7a8a9a; }

.project-single-v2 .psi-chip--default              { background-color: var(--ci-color-innovate, #538da9); }

/* Overview body text */
.project-single-v2 .psi-hero__overview-text {
	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;
}

/* Mobile */
@media (max-width: 767px) {
	/* Both cut by 20% to match the desktop rule. Each one governs at a
	   different width: max-height binds above ~376px, aspect-ratio below it. */
	.project-single-v2 .psi-hero__banner {
		aspect-ratio: 2.5 / 1;
		max-height: 150px;
	}

	.project-single-v2 .psi-hero__panel {
		padding: 2rem 0 3rem;
	}
}


/* ─────────────────────────────────────────────
   WHAT CHILDREN LEARN (four-stage pedagogy cards)
───────────────────────────────────────────── */
.project-single-v2 .psi-stages {
	background: #ffffff;
	position: relative;
	overflow: clip;
}

.project-single-v2 .psi-stages::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;
}

.project-single-v2 .psi-stages::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;
}

.project-single-v2 .psi-stages .site-container {
	position: relative;
	z-index: 1;
}

.project-single-v2 .psi-stages .ce-feature-list__heading {
	color: #646464;
}

/* Cards are free text only now — no stage icon/label header. Flexbox
   (not the shared component's CSS Grid) so a partial last row — e.g. 5
   cards on 3 columns — centres itself instead of trailing off left with
   dead cells; and a fixed flex-basis keeps the same column count as the
   grid it replaces. Height was previously forced tall (min-height: 13rem)
   to leave room for an icon + title + description — now there's only a
   single short line, so the card can hug its content instead of leaving
   empty space below. */
.project-single-v2 .psi-stages .ce-feature-list__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.project-single-v2 .psi-stages .ce-feature-list__item {
	flex: 0 0 calc((100% - 2 * 1.25rem) / 3);
	min-height: 0;
	justify-content: center;
	align-items: center;
}

/* These cards aren't links — the shared component's hover shadow-lift (a
   click affordance) was misleading here, so hold it at the resting
   box-shadow value instead of letting it intensify on hover. */
.project-single-v2 .psi-stages .ce-feature-list__item:hover {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 4px 20px rgba(0, 0, 0, 0.05);
}

.project-single-v2 .psi-stages .ce-feature-list__title {
	margin: 0;
	font-size: var(--ci-text-card-heading);
	text-align: center;
}

@media (max-width: 900px) {
	.project-single-v2 .psi-stages .ce-feature-list__item {
		flex-basis: calc((100% - 1.25rem) / 2);
	}
}

@media (max-width: 560px) {
	.project-single-v2 .psi-stages .ce-feature-list__item {
		flex-basis: 100%;
	}
}

.project-single-v2 .psi-stages__topics {
	margin-top: 3rem;
}

.project-single-v2 .psi-stages__topics h3 {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h3);
	font-weight: 700;
	color: var(--ci-color-navy);
	margin: 0 0 1rem;
}

/* Three columns: topic names are short (1–3 words), so two columns left a
   lot of dead space to the right of each one. */
.project-single-v2 .psi-stages__topics-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.6rem 2rem;
}

.project-single-v2 .psi-stages__topics-list li {
	position: relative;
	padding-left: 1.4rem;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	line-height: 1.55;
	color: #333;
}

/* These entries are links into the topic pages. Underlined rather than
   colour-only, so they are still identifiable as links without relying on
   colour perception. */
.project-single-v2 .psi-stages__topics-list a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: rgba(51, 51, 51, 0.35);
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.project-single-v2 .psi-stages__topics-list a:hover,
.project-single-v2 .psi-stages__topics-list a:focus-visible {
	color: var(--ci-color-navy, #253d47);
	text-decoration-color: currentColor;
}

.project-single-v2 .psi-stages__topics-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	background: var(--ci-color-develop, #af4d76);
}

@media (max-width: 900px) {
	.project-single-v2 .psi-stages__topics-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.project-single-v2 .psi-stages__topics-list {
		grid-template-columns: 1fr;
	}
}


/* ─────────────────────────────────────────────
   TESTIMONIAL PLACEHOLDER
───────────────────────────────────────────── */
.project-single-v2 .psi-testimonial-placeholder {
	background: #253d47;
}


/* ─────────────────────────────────────────────
   LESSON ACTIVITIES
───────────────────────────────────────────── */
.project-single-v2 .psi-includes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.3rem;
	background-color: #ffffff;
	border-top: 0.3rem solid #ffffff;
}

.project-single-v2 .psi-includes__content {
	background-color: #f9f9f9;
	padding: 3.5rem 5rem;
	display: flex;
	align-items: center;
}

/* No max-width: the text fills the panel minus its padding, matching
   .page-split__text — the site's reference 50:50 section. A cap here left a
   growing band of dead space on the right as the viewport widened. */
.project-single-v2 .psi-includes__content-inner {
	width: 100%;
}

.project-single-v2 .psi-includes__content h2 {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h2);
	font-weight: 700;
	line-height: 1.25;
	color: #646464;
	margin: 0 0 1.25rem;
}

.project-single-v2 .psi-includes__content p {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	line-height: 1.8;
	color: var(--ci-color-navy);
	margin: 0 0 1.5rem;
}

/* Checklist */
.project-single-v2 .psi-checklist {
	list-style: none;
	padding: 0;
	margin: 0;
}

.project-single-v2 .psi-checklist li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	color: var(--ci-color-navy);
	line-height: 1.35;
}

.project-single-v2 .psi-checklist li i {
	flex-shrink: 0;
	font-size: 1.3em;
	color: #af4d76;
}

/* Right: square image, sized off its own 50%-width column */
.project-single-v2 .psi-includes__image {
	overflow: hidden;
	line-height: 0;
	background-color: #1a0f0f;
	aspect-ratio: 1 / 1;
}

.project-single-v2 .psi-includes__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Stack below tablet portrait: iPad portrait is 768-1024px, and a
   full-bleed 50:50 split is too cramped there — raised from 896px. */
@media (max-width: 1024px) {
	.project-single-v2 .psi-includes {
		grid-template-columns: 1fr;
	}

	.project-single-v2 .psi-includes__content {
		padding: 3rem 2rem;
	}

	.project-single-v2 .psi-includes__image {
		order: -1;
		aspect-ratio: 1 / 1;
	}
}


/* ─────────────────────────────────────────────
   HOW TO ACCESS (white background, diamonds, 2-card row — matches WHAT CHILDREN LEARN)
───────────────────────────────────────────── */
.project-single-v2 .psi-access {
	background: #ffffff;
	position: relative;
	overflow: clip;
	padding: 5rem 0;
}

/* Two decorative diamonds behind this section, geometrically identical to the
   pair behind .psi-stages further up the same page — same sizes, same offsets,
   so the two sections read as one visual system rather than two near-misses.
   The previous version anchored the small diamond to the section bottom, which
   made its spacing depend on how tall the section happened to be. */
.project-single-v2 .psi-access::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;
}

.project-single-v2 .psi-access::after {
	content: '';
	position: absolute;
	width: 260px;
	height: 260px;
	background: #f9f9f9;
	border-radius: 2rem;
	transform: rotate(45deg);
	/* top, not bottom: .psi-stages anchors its small diamond to a fixed offset
	   from the section top, and that fixed relationship is what gives the pair
	   its spacing. Bottom-anchoring made the gap depend on section height, so
	   the two sections drifted apart as their content changed. */
	top: 420px;
	left: 178px;
	pointer-events: none;
	z-index: 0;
}

.project-single-v2 .psi-access .site-container {
	position: relative;
	z-index: 1;
}

.project-single-v2 .psi-access .ce-feature-list__heading {
	color: #646464;
}

/* 700px wrapped this onto two lines. The default copy measures ~811px at
   20px Lato, so 900px keeps it on one line with room for the longer wording
   some projects use, while still stopping it running the full container. */
.project-single-v2 .psi-access__intro {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	line-height: 1.8;
	color: var(--ci-color-navy);
	max-width: 900px;
	margin: 0 auto 2.5rem;
	text-align: center;
}

.project-single-v2 .psi-access__cards {
	/* auto-fit rather than a fixed two columns: EYFS projects have no
	   single-subject curriculum page, so they render one card only, and a
	   fixed 2-column track left it stranded against the left edge with an
	   empty column beside it. The 438px cap is what each card measured at
	   two-up in this 900px container, so the two-card layout is unchanged
	   and a lone card simply centres. */
	/* The cap is "half a row", written as that rather than as a number.
	   
	   It was 438px, and the repetition count for repeat(auto-fit, minmax(min,
	   max)) comes from the MAX track when it is a definite length — so two
	   cards needed 438 x 2 + 20 = 896px, against the 726px row an iPad in
	   portrait actually has. The 280px minimum, two of which fit easily, never
	   got considered, and the pair stacked. Nothing chose one column there;
	   438 simply happened to be more than half of 726.
	   
	   These two are a CHOICE — the whole curriculum, or the single subject.
	   Side by side they read as alternatives; stacked they read as a sequence,
	   as if the second follows the first. Desktop has always paired them.
	   
	   calc((100% - 20px) / 2) resolves to 440px in the 900px desktop container,
	   which is what 438 was approximating, and to 353px at iPad portrait, where
	   the pair now fits on one row and the section is 142px shorter.
	   
	   auto-fit, not a fixed two columns: EYFS projects have no single-subject
	   page and render ONE card. auto-fit collapses the empty track to 0 and
	   justify-content: center leaves that card centred, exactly as now.
	   
	   1.25rem is the grid's own gap, inherited from .ce-feature-list__grid —
	   written as the same value rather than as 20px so the two cannot drift. */
	grid-template-columns: repeat(auto-fit, minmax(280px, calc((100% - 1.25rem) / 2)));
	justify-content: center;
	max-width: 900px;
	margin: 0 auto;
}

.project-single-v2 .psi-access .ce-feature-list__item {
	min-height: 0;
}

.project-single-v2 .psi-access .ce-feature-list__header {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.project-single-v2 .psi-access .ce-feature-list__badge {
	font-size: 1.75rem;
	flex-shrink: 0;
}

.project-single-v2 .psi-access .ce-feature-list__title {
	margin: 0;
}

.project-single-v2 .psi-access .psi-cta-link {
	color: var(--ci-color-navy);
	margin-top: 0.25rem;
}

/* ── The whole card is the link, not just its last line ──────────────────────
   These two cards are the only route off a project page to the curriculum
   that contains it, and the hit area was the ~250px of text at the bottom of
   a 438x230 card. Everything above it — the icon, the title, the space
   between — looked like part of a button and did nothing when tapped.

   A stretched pseudo-element rather than wrapping the card in an <a>. Wrapping
   would mean moving .ce-feature-list__item onto the anchor so it stays the
   grid child, and that class carries the glass tint, the nth-child colour
   cycle and the hover lift shared with a dozen other pages — a lot to put on
   an element type it has never been on. The ::after belongs to the link, so
   the card gets the link's cursor and its :hover for free, and the accessible
   name stays the link's own text rather than the whole card read aloud.

   position: relative is stated even though .ce-feature-list__item's
   translateZ(0) already makes it a containing block. That transform is there
   for paint promotion, not layout, and would be a silent thing to depend on:
   drop it one day and the overlay quietly stretches to the section instead. */
.project-single-v2 .psi-access .ce-feature-list__item {
	position: relative;
}

.project-single-v2 .psi-access .psi-cta-link::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.project-single-v2 .psi-access__buttons {
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}

@media (max-width: 767px) {
	.project-single-v2 .psi-access {
		padding: 3rem 0;
	}

	.project-single-v2 .psi-access__cards {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.project-single-v2 .psi-access__buttons .ci-btn {
		width: 100%;
		text-align: center;
	}
}


/* ─────────────────────────────────────────────
   PEDAGOGY (50:50 navy panel + image)
───────────────────────────────────────────── */
.project-single-v2 .psi-pedagogy {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.3rem;
	background-color: #ffffff;
	border-top: 0.3rem solid #ffffff;
}

.project-single-v2 .psi-pedagogy__panel {
	background-color: #f9f9f9;
	padding: 3.5rem 5rem;
	display: flex;
	align-items: center;
}

/* No max-width — same reasoning as .psi-includes__content-inner above. */
.project-single-v2 .psi-pedagogy__inner {
	width: 100%;
}

.project-single-v2 .psi-pedagogy__inner h2 {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h2);
	font-weight: 700;
	line-height: 1.25;
	color: #646464;
	margin: 0 0 1.25rem;
}

.project-single-v2 .psi-pedagogy__inner p {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	line-height: 1.8;
	color: var(--ci-color-navy);
	margin: 0 0 2rem;
}

.project-single-v2 .psi-pedagogy__image {
	overflow: hidden;
	line-height: 0;
	background-color: #1a0f0f;
	aspect-ratio: 1 / 1;
}

.project-single-v2 .psi-pedagogy__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Stack below tablet portrait: iPad portrait is 768-1024px, and a
   full-bleed 50:50 split is too cramped there — raised from 896px. */
@media (max-width: 1024px) {
	.project-single-v2 .psi-pedagogy {
		grid-template-columns: 1fr;
	}

	.project-single-v2 .psi-pedagogy__panel {
		padding: 3rem 2rem;
	}

	.project-single-v2 .psi-pedagogy__image {
		order: -1;
		aspect-ratio: 1 / 1;
	}
}


/* ─────────────────────────────────────────────
   VIEW MORE CTA
───────────────────────────────────────────── */
.project-single-v2 .psi-view-more {
	padding: 3rem 0;
	background-color: #f9f9f9;
	text-align: center;
	border-top: 0.3rem solid #ffffff;
}

.project-single-v2 .psi-view-more__inner {
	/* 1216px, matching the width the related-topics grid gets inside
	   .site-container on topic pages. Four cards at 275px plus three 1.5rem
	   gaps need 1172px; at the old 1100px the grid quietly fell back to three
	   columns and wrapped the fourth card onto a second row.
	   The intro copy is capped separately by .psi-view-more__text, so this
	   only widens the grid. */
	max-width: 1216px;
	margin: 0 auto;
}

.project-single-v2 .psi-view-more__text {
	max-width: 1000px;
	margin: 0 auto 2.5rem;
}

/* Related project cards — chromeless: rounded image only, brand-coloured
   subject/year pills overlaid top-left, title centered underneath on the
   section's own background. Matches the /projects/ archive card design
   (no card box, shadow, or frosted-glass footer). */
/* Track, centring and gap come from .ce-related-grid in related-grid.css,
   which this element also carries — see that file. Only the spacing below the
   row is particular to this page. */
.project-single-v2 .psi-related__grid {
	margin-bottom: 2.5rem;
}

.project-single-v2 .psi-related-card {
	position: relative;
}

.project-single-v2 .psi-related-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	outline-offset: 3px;
}

.project-single-v2 .psi-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;
}

.project-single-v2 .psi-related-card:hover .psi-related-card__image {
	opacity: 0.88;
}

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

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

.project-single-v2 .psi-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;
}

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

.project-single-v2 .psi-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;
}

@media (max-width: 767px) {
	/* Between 600 and 767 a two-up row of these would be under 150px a tile,
	   so one column still wins in that band. Below 600 the block further down
	   takes over and matches the archive. */
	.project-single-v2 .psi-related__grid {
		grid-template-columns: 1fr;
	}
}

.project-single-v2 .psi-view-more__text h2 {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h2);
	font-weight: 700;
	line-height: 1.25;
	color: #646464;
	margin: 0 0 1.25rem;
}

.project-single-v2 .psi-view-more__text p {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	line-height: 1.8;
	color: var(--ci-color-navy);
	margin: 0;
}

.project-single-v2 .psi-view-more__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

/* Secondary / tertiary arrow-style links */
.project-single-v2 .psi-cta-link {
	font-family: var(--ci-font-primary);
	font-size: 1rem;
	font-weight: 700;
	color: #ffffff;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

/* Ending CTA sits on a light background — override for legibility */
.project-single-v2 .psi-view-more .psi-cta-link {
	color: var(--ci-color-navy);
}

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

@media (max-width: 640px) {
	.project-single-v2 .psi-view-more__actions {
		width: 100%;
	}

	.project-single-v2 .psi-view-more__actions > .ci-btn {
		width: 100%;
		text-align: center;
	}
}

/* ── 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) {

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

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

	.project-single-v2 .psi-related-card__body {
		padding-top: 0.5rem;
	}

}