/* ═══════════════════════════════════════════════════════════════════════════
   LEGACY PROJECT SINGLE PAGE
   Loaded alongside project-single.css (enqueued as a dependency) — this file
   only holds what differs from the live project template: the "Legacy
   project" chip, the redesigned "What's included" stats/image/tick, and the
   Project scope intro line. Everything else (hero, chips, scope cards, how to
   access, pedagogy, view-more) reuses .project-single-v2 rules from
   project-single.css as-is, so the two page types stay visually identical.
   Legacy pages carry no testimonial block.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── "Legacy project" chip — informational only, not a link, so no hover
   fade like the other (filterable) chips. Dark text for contrast on the
   bright yellow, same pairing convention as the light year-group chips. ── */
.project-single-v2 .psi-chip--legacy {
	background-color: #FFD800;
	color: #1e2d3d;
	cursor: default;
}

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


/* ─────────────────────────────────────────────
   WHAT'S INCLUDED (legacy) — stats row + tilted single image
───────────────────────────────────────────── */

.project-single-v2 .psi-includes__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2.5rem;
	margin: 0 0 1.5rem;
}

.project-single-v2 .psi-includes__stat {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
}

.project-single-v2 .psi-includes__stat-num {
	font-family: var(--ci-font-primary);
	font-size: 2rem;
	font-weight: 700;
	color: #af4d76;
	line-height: 1;
}

.project-single-v2 .psi-includes__stat-label {
	font-family: var(--ci-font-primary);
	font-size: 1.05rem;
	color: var(--ci-color-navy);
}

/* Legacy image is a single pre-made graphic, not a photo to crop square, so
   it drops the live template's 1:1 crop and sizes to its own aspect ratio.

   No padding and no aspect-ratio: the panel takes its height from the image
   itself, so the image sits flush to all four edges with nothing dead above,
   below or beside it. These graphics vary in shape across the ~210 pages —
   letting the image drive the height means none of them get letterboxed.

   The grey background only shows when the text column is the taller of the
   two and the grid stretches this one to match; then the image centres and
   the leftover reads as the same grey as the panel opposite, not white. */
.project-single-v2 .psi-includes__image--legacy {
	aspect-ratio: auto;
	background-color: #f9f9f9;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	overflow: hidden;
}

.project-single-v2 .psi-includes__image--legacy img {
	width: 100%;
	height: auto;
	object-fit: contain;
	box-shadow: none;
	border-radius: 0;
}


/* ─────────────────────────────────────────────
   WHAT'S INCLUDED — checklist tick
   Green here, unlike the live template's pink, matching the tick used on the
   old site's "What's included" bullets that this content is imported from.
   Scoped to .legacy-project-single so live project pages keep their pink.
───────────────────────────────────────────── */
.legacy-project-single .psi-checklist li i {
	color: #11D470;
}


/* ════════════════════════════════════════════════════
   PROJECT SCOPE
   Reuses .psi-stages wholesale — subjects render as the same glossy cards the
   live template uses for "What children learn in X", topics as its "Topics
   covered" list. Only the intro line is unique to legacy pages, so that's all
   that lives here.
   ════════════════════════════════════════════════════ */
/* No max-width: this is one sentence and should stay on one line. It's the
   longest at ~980px ("The Great Fire of London provides a structured approach
   to History…") against a 1216px container, so every project title in the set
   clears it; narrow viewports still wrap normally. */
.legacy-project-single .psi-scope__intro {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	line-height: 1.8;
	color: var(--ci-color-navy);
	margin: 0 auto 2rem;
	text-align: center;
}


/* ─────────────────────────────────────────────
   HERO OVERVIEW
   Old pages carry several paragraphs, rendered as separate <p>s rather than
   one run-on block.
───────────────────────────────────────────── */
.legacy-project-single .psi-hero__overview-text + .psi-hero__overview-text {
	margin-top: 1.25rem;
}