/* ═══════════════════════════════════════════════════════════════════════════
   CASE STUDY — SINGLE POST
   ═══════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════
   HEADER — burgundy + image left, text right
   ════════════════════════════════════════════════════ */

.ce-cs-post-header {
	background: #253d47;
	padding: 1.5rem 0 2.5rem;
}

/* ── 2-column inner grid ── */
.ce-cs-post-header__inner {
	display: grid;
	grid-template-columns: 34% 1fr;
	gap: 0 4rem;
	align-items: stretch;
}

/* ── Left column — pure image box, no content inside ── */
.ce-cs-post-header__left {
	border-radius: 0.75rem;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	aspect-ratio: 1 / 1;
	align-self: flex-start;
}

/* Grey fallback shown when no hero image is uploaded */
.ce-cs-post-header__left--no-image {
	background-color: #f9f9f9;
}

/* Crest variant — the school logo in place of a photograph.

   The 16% inset this used to carry is gone, matching the archive tiles. Every
   logo in the library is a 400x400 original on its own solid background with
   9-19% of margin already built into the square, so the padding was doubling a
   margin the artwork had, and the result read as a white border around a
   coloured panel rather than as space around a crest.

   The white background stays as the floor for a transparent or non-square
   logo, which object-fit: contain letterboxes against it. */
.ce-cs-post-header__left--logo {
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Needed only now the crest reaches the edges: the panel's 0.75rem radius
	   used to fall on white, and without clipping the logo's square corners
	   would sit proud of it in whatever colour the artwork's background is. */
	overflow: hidden;
}

/* __crest, not __logo: that class is already the 56px badge beside the school
   name in the right column, and reusing it here capped this to 56px inside a
   386px panel.

   Note the resolution ceiling: this panel is 413px square and the source files
   are 400px, so a filled crest renders at 0.97x — fine on a 1x display, soft on
   a retina one. It was already soft before this (1.42x, i.e. 0.71x effective at
   2x); filling makes it marginally more so. Re-uploading the logos at 800px
   would fix it here and give the archive tiles headroom too. */
.ce-cs-post-header__crest {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Breadcrumb — full width above the image grid */
.ce-cs-post-header__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.35rem;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 1.5rem;
}

.ce-cs-post-header__breadcrumb a {
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	transition: color 0.15s ease;
}

.ce-cs-post-header__breadcrumb a:hover {
	color: #ffffff;
}

.ce-cs-post-header__sep {
	color: rgba(255, 255, 255, 0.3);
}

.ce-cs-post-header__current {
	color: rgba(255, 255, 255, 0.9);
	font-weight: 600;
}

/* ── Phones: drop the current-page crumb ─────────────────────────────────────
   Same treatment as the topic and project heroes, and for the same reason:
   at 390px this breadcrumb runs to two lines, and the crumb that pushes it
   there is already contained in the H1 immediately below — the school name,
   or a six-word truncation of the title when there isn't one.

   Two selectors rather than one, because these separators are sibling
   <span>s rather than a ::before on the crumb, so the "›" has to be hidden
   alongside it. (.ci-breadcrumb, used by topics and projects, needs only
   one — see project-single.css.)

   Leaves "🏠 › Case Studies", which is the part that navigates. */
@media (max-width: 600px) {
	.ce-cs-post-header__breadcrumb > :last-child,
	.ce-cs-post-header__breadcrumb > :nth-last-child(2) {
		display: none;
	}
}

/* No <img> element — image is a CSS background on .ce-cs-post-header__left */

/* ── Right column — text ── */
.ce-cs-post-header__right {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0;
}

/* School name — muted label above the title */
.ce-cs-post-header__school {
	font-family: var(--ci-font-primary);
	font-size: 2rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.75);
	margin: 0 0 0.65rem !important;
	line-height: 1.4 !important;
}

/* Logo + school name row — only rendered when a logo is set */
.ce-cs-post-header__identity {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.65rem;
}

.ce-cs-post-header__identity .ce-cs-post-header__school {
	margin: 0 !important;
}

/* White badge behind the logo — most crests are drawn for light backgrounds
   and would disappear against the navy header. object-fit:contain since a
   crest can't be cropped without losing detail. */
.ce-cs-post-header__logo {
	width: 56px;
	height: 56px;
	border-radius: 0.5rem;
	background: #ffffff;
	padding: 0.4rem;
	object-fit: contain;
	flex-shrink: 0;
}

/* H1 */
.ce-cs-post-header__title {
	font-family: var(--ci-font-primary) !important;
	font-size: clamp(1.75rem, 2.8vw, 2.8rem) !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	line-height: 1.15 !important;
	margin: 0 !important;
}

/* ── Snapshot pills ── */
.ce-cs-snapshot {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.ce-cs-snapshot__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
	background: rgba(255, 255, 255, 0.15);
	padding: 0.35rem 0.9rem;
	border-radius: 9999px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	text-decoration: none;
}

.ce-cs-snapshot__pill i {
	font-size: 0.72rem;
	opacity: 0.8;
}

/* Category pill — bright frosted, stands out without stark button look */
.ce-cs-snapshot__pill--category {
	background: rgba(255, 255, 255, 0.25);
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.75);
	font-weight: 700;
}

.ce-cs-snapshot__pill--category:hover {
	background: rgba(255, 255, 255, 0.35);
}

/* Meta pills row: type · pupils · location · years */
.ce-cs-post-header__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

/* Quote teaser — brief italic excerpt of headteacher_quote */
.ce-cs-snapshot__teaser {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	font-style: italic;
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
	line-height: 1.6;
}

/* Cat-pill neutral wrapper — removes <a> as direct flex child */
.ce-cs-post-header__cat-wrap {
	display: block;
}


/* When category pill sits above school name */
.ce-cs-post-header__cat-pill {
	width: fit-content;
	align-self: flex-start;
}

/* Meta pills — brand colours (Engage / Develop / Innovate / Express) */
.ce-cs-snapshot__pill--type {
	background: rgba(249, 157, 49, 0.2);
	color: #ffd090;
	border-color: rgba(249, 157, 49, 0.45);
	font-weight: 600;
}

.ce-cs-snapshot__pill--pupils {
	background: rgba(175, 77, 118, 0.2);
	color: #f0a8c8;
	border-color: rgba(175, 77, 118, 0.45);
	font-weight: 600;
}

.ce-cs-snapshot__pill--location {
	background: rgba(83, 141, 169, 0.2);
	color: #a8d8f0;
	border-color: rgba(83, 141, 169, 0.45);
	font-weight: 600;
}

.ce-cs-snapshot__pill--years {
	background: rgba(207, 214, 102, 0.2);
	color: #e0ea80;
	border-color: rgba(207, 214, 102, 0.45);
	font-weight: 600;
}

.ce-cs-snapshot__pill--type i,
.ce-cs-snapshot__pill--pupils i,
.ce-cs-snapshot__pill--location i,
.ce-cs-snapshot__pill--years i {
	opacity: 1;
}

/* Ofsted — colour coded */
.ce-cs-snapshot__pill--outstanding {
	background: rgba(46, 125, 50, 0.35);
	color: #b9f0bb;
	border-color: rgba(46, 125, 50, 0.55);
	font-weight: 700;
}

.ce-cs-snapshot__pill--good {
	background: rgba(25, 118, 210, 0.35);
	color: #b3d8ff;
	border-color: rgba(25, 118, 210, 0.5);
	font-weight: 600;
}

.ce-cs-snapshot__pill--requires {
	background: rgba(230, 81, 0, 0.3);
	color: #ffd0a0;
	border-color: rgba(230, 81, 0, 0.45);
}

.ce-cs-snapshot__pill--inadequate {
	background: rgba(183, 28, 28, 0.35);
	color: #ffb3b3;
	border-color: rgba(183, 28, 28, 0.5);
}

/* ════════════════════════════════════════════════════
   SNAPSHOT BAR — white strip below navy header
   ════════════════════════════════════════════════════ */

.ce-cs-snapshot-bar {
	background: #ffffff;
	padding: 1.25rem 0;
	border-bottom: 1px solid #ebebeb;
}

.ce-cs-snapshot-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 2rem;
}

.ce-cs-snapshot-tag {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	font-family: var(--ci-font-primary);
	font-size: 1.3rem;
	font-weight: 700;
	color: #646464;
}

.ce-cs-snapshot-tag__icon {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 0.85rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.4rem;
	flex-shrink: 0;
}

/* secondary-opacity: 1 makes both duotone layers fully visible.
   Where the "wrong" layer was getting the primary colour, swap the two values. */

.ce-cs-snapshot-tag--type .ce-cs-snapshot-tag__icon {
	background: #FCF3E8;
	border: 2px solid #F9D0A0;
	--fa-primary-color: #F59C33;
	--fa-secondary-color: #F9D0A0;
	--fa-secondary-opacity: 1;
}

.ce-cs-snapshot-tag--pupils .ce-cs-snapshot-tag__icon {
	background: #FAF0F5;
	border: 2px solid #D6B6C7;
	--fa-primary-color: #A16082;
	--fa-secondary-color: #D6B6C7;
	--fa-secondary-opacity: 1;
}

.ce-cs-snapshot-tag--location .ce-cs-snapshot-tag__icon {
	background: #F3F9FA;
	border: 2px solid #BBD4D5;
	--fa-primary-color: #689C9E;
	--fa-secondary-color: #BBD4D5;
	--fa-secondary-opacity: 1;
}

.ce-cs-snapshot-tag--years .ce-cs-snapshot-tag__icon {
	background: #FAF8E8;
	border: 2px solid #EBE6B1;
	--fa-primary-color: #D6CC5E;
	--fa-secondary-color: #EBE6B1;
	--fa-secondary-opacity: 1;
}

@media (max-width: 768px) {
	.ce-cs-snapshot-bar__inner {
		justify-content: flex-start;
		gap: 0.9rem 2rem;
	}
}

/* ════════════════════════════════════════════════════
   CHALLENGE SECTION
   ════════════════════════════════════════════════════ */

.ce-cs-challenge {
	background: #ffffff;
	padding: var(--ci-size-2xl) 0 var(--ci-size-xl);
}

.ce-cs-challenge__inner {
	max-width: 780px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	background: rgba(175, 77, 118, 0.10);
	border: 1.5px solid rgba(175, 77, 118, 0.28);
	border-radius: 1.25rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
	padding: 1.375rem;
}

.ce-cs-challenge__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ce-cs-challenge__icon {
	width: 3rem;
	height: 3rem;
	border-radius: 0.75rem;
	background: rgba(175, 77, 118, 0.28);
	color: #af4d76;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	flex-shrink: 0;
}

.ce-cs-challenge__label {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-heading);
	font-weight: 700;
	color: #1e2d3d;
}

.ce-cs-challenge__text {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-body);
	line-height: 1.65;
	color: #4a5a6a;
	margin: 0 !important;
}

/* ════════════════════════════════════════════════════
   PULL QUOTE
   ════════════════════════════════════════════════════ */

.ce-cs-pull-quote {
	background: #692D46;
	padding: 3.5rem 0;
}

.ce-cs-pull-quote__inner {
	max-width: 780px;
	margin: 0 auto;
	padding: 0;
	position: relative;
}

/* Large opening quote mark */
.ce-cs-pull-quote__inner::before {
	content: '\201C';
	position: absolute;
	top: -1.5rem;
	left: -0.5rem;
	font-family: Georgia, serif;
	font-size: 6rem;
	line-height: 1;
	color: rgba(255, 255, 255, 0.18);
	pointer-events: none;
}

.ce-cs-pull-quote__text {
	font-family: var(--ci-font-primary);
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	font-weight: 400;
	line-height: 1.65;
	color: #ffffff;
	font-style: italic;
	margin: 0 0 1.25rem !important;
	padding-left: 1rem;
}

.ce-cs-pull-quote__attr {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding-left: 1rem;
}

.ce-cs-pull-quote__name {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 700;
	color: #ffffff;
}

.ce-cs-pull-quote__role {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.7);
}

/* ════════════════════════════════════════════════════
   POST BODY
   ════════════════════════════════════════════════════ */

/* The block editor's "constrained" layout only centres content once the
   viewport is wider than its contentSize breakpoint — below that (i.e. on
   mobile) it adds no horizontal inset at all, so text ran edge-to-edge.
   Add the site's standard gutter explicitly rather than relying on it
   (mirrors .ce-post-body in blog-post-header.css). */
.ce-post-body {
	padding-top: 0.5rem !important;
	padding-bottom: 5rem !important;
	padding-left: var(--ci-container-padding) !important;
	padding-right: var(--ci-container-padding) !important;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	line-height: 1.65;
	color: #333;
}

/* Body content typography */
.ce-post-body p {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body); /* 15px → 18px */
	line-height: 1.65;
	color: #333;
	margin-top: 0;
	margin-bottom: 1.25em;
}

.ce-post-body p:last-child {
	margin-bottom: 0;
}

.ce-post-body h2 {
	font-family: var(--ci-font-primary) !important;
	font-size: var(--ci-text-h2) !important;
	font-weight: 700 !important;
	color: var(--ci-color-navy) !important;
	margin: var(--ci-size-2xl) 0 var(--ci-size-sm) !important;
}

.ce-post-body h3 {
	font-family: var(--ci-font-primary) !important;
	font-size: var(--ci-text-h3) !important;
	font-weight: 700 !important;
	color: var(--ci-color-navy) !important;
	margin: var(--ci-size-xl) 0 var(--ci-size-xs) !important;
}

.ce-post-body img {
	border-radius: 0.75rem;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* :not(.ci-btn) matters more than it looks. This rule is (0,1,1) and
   .ci-btn--develop is (0,1,0), so without the exclusion every button placed in
   post content lost its own colour and took the prose link colour — dark plum
   text on a plum button, which measured 2.01:1 against WCAG's 4.5:1 minimum.
   The :hover opacity below did the same job to the hover state, fading the
   whole button instead of letting .ci-btn's own hover run, which is why the
   resting state looked like a hover and the hover looked like a resting one. */
.ce-post-body a:not(.ci-btn) {
	color: #692D46;
	text-underline-offset: 2px;
}

.ce-post-body a:not(.ci-btn):hover {
	opacity: 0.8;
}

/* ════════════════════════════════════════════════════
   PRIMARY CTA (navy)
   ════════════════════════════════════════════════════ */

.ce-cs-cta {
	background: #253d47;
	padding: 4.5rem 0;
}

.ce-cs-cta__inner {
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}

.ce-cs-cta__heading {
	font-family: var(--ci-font-primary) !important;
	font-size: var(--ci-text-h2) !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	margin: 0 !important;
	line-height: 1.2 !important;
}

.ce-cs-cta__text {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
	margin: 0 !important;
}

.ce-cs-cta__buttons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════
   MORE SCHOOLS (case study cards)
   ════════════════════════════════════════════════════ */

.ce-cs-more-schools {
	background: #f9f9f9;
	padding: 4rem 0;
}

.ce-cs-more-schools__heading {
	font-family: var(--ci-font-primary) !important;
	font-size: var(--ci-text-h2) !important;
	font-weight: 700 !important;
	color: #253d47 !important;
	margin: 0 0 2rem !important;
	text-align: center !important;
	line-height: 1.25 !important;
}


/* The track alone was not enough to make these match.
   
   .ce-cs-card insets its tile to 76% of the card — right on the archive, where
   the inset is what separates a dense grid of crests — so matching the track
   at 250px still left a 190px tile beside the projects page's 250px one, and
   84px of air between tiles against their 24px. The cards were the same width
   and looked nothing alike.

   Taking the inset out for this module puts tile, body and gap all on the same
   numbers as .psi-related__grid. Nothing else about the card changes, and the
   card itself is transparent, so this is purely how much of it the artwork
   uses. */
@media (min-width: 769px) {
	.ce-cs-more-schools__grid .ce-cs-card {
		--ce-cs-tile-width: 100%;
	}
}

/* ════════════════════════════════════════════════════
   IMAGE ROW  [cs-image-row]
   ════════════════════════════════════════════════════ */

.cs-image-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin: 1.5rem 0;
}

.cs-image-row__img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0.5rem;
	display: block;
}

.cs-image-row__img--placeholder {
	background: #e8edf0;
}

@media (max-width: 768px) {
	.cs-image-row {
		display: block;
	}

	/* Hide all three, then show only the designated mobile image */
	.cs-image-row .cs-image-row__img {
		display: none;
	}

	.cs-image-row[data-mobile="1"] .cs-image-row__img:nth-child(1),
	.cs-image-row[data-mobile="2"] .cs-image-row__img:nth-child(2),
	.cs-image-row[data-mobile="3"] .cs-image-row__img:nth-child(3) {
		display: block;
		width: 100%;
		max-width: 480px;
		margin: 0 auto;
	}
}

/* ════════════════════════════════════════════════════
   MOBILE
   ════════════════════════════════════════════════════ */

@media (max-width: 768px) {
	.ce-cs-post-header__inner {
		grid-template-columns: 1fr;
	}

	/* No padding — the crest fills the panel, exactly as it does on desktop.

	   This carried padding-top: 1.5rem, which made the content box 326x302
	   instead of square. object-fit: contain then did what it is supposed to:
	   fitted the square logo to the shorter side and letterboxed the rest, so
	   there was a white bar above it AND a sliver down each side.

	   Padding on all four sides fixed the letterboxing but reintroduced a
	   border the desktop rule had deliberately removed — see the note on
	   .ce-cs-post-header__left--logo: every logo in the library already has
	   9-19% of margin built into its own artwork, so any padding here doubles
	   a margin that is already there. Zero is the answer; the square panel and
	   the square crest then match exactly. */
	.ce-cs-post-header__left {
		padding: 0;
		min-height: 260px;
	}

	.ce-cs-post-header__right {
		padding: 1.5rem 0;
	}

	/* One fact per line.

	   The bar wraps, so how many share a row depended on how long the words
	   happened to be: "Independent" + "249 pupils" is 418px and wrapped, but
	   "Primary" + "424 pupils" fits in 326px and did not. Same component,
	   different shape per case study. A column makes it the same everywhere. */
	.ce-cs-snapshot-bar__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.ce-cs-post-header__title {
		font-size: clamp(1.6rem, 5.5vw, 2.2rem) !important;
	}

	.ce-cs-challenge {
		padding: 2rem 0;
	}

	.ce-cs-pull-quote {
		padding: 2.5rem 0;
	}

	.ce-cs-pull-quote__text {
		font-size: var(--ci-text-body) !important;
	}

	.ce-cs-cta {
		padding: 3rem 0;
	}

	.ce-cs-cta__buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.ce-cs-more-schools {
		padding: 2.5rem 0;
	}

	/* Two up, not one.

	   Full-width these cards ran to 387px each — a square crest at 326px plus
	   its title — so three of them were more than a screen and a half of
	   scrolling for what is a footer module. Every comparable section on the
	   site pairs them on a phone: .tpi-related__grid (related topics) and
	   .ce-cs-grid (the case-studies archive itself) are both
	   repeat(2, 1fr) with a 0.85rem gap. This is the same. */
	.ce-cs-more-schools__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.85rem;
	}
}

/* Lead paragraph — first <p> in post body */
.ce-post-body .wp-block-post-content > p:first-child,
.ce-post-body .wp-block-post-content > .wp-block-paragraph:first-child {
	font-size: var(--ci-text-body);
	line-height: 1.85;
	font-weight: 500;
	color: #222;
}

/* Figure captions */
.ce-post-body figcaption,
.ce-post-body .wp-element-caption {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	color: rgba(0, 0, 0, 0.5);
	text-align: center;
	margin-top: 0.5rem;
	font-style: italic;
	line-height: 1.5;
}

/* Image breakout — alignwide escapes 780px column */
.ce-post-body .wp-block-image.alignwide {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

/* alignfull — true edge-to-edge */
.ce-post-body .wp-block-image.alignfull {
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
}

.ce-post-body .wp-block-image.alignfull img {
	border-radius: 0;
}

/* Side-by-side image columns */
.ce-post-body .wp-block-columns {
	gap: 1.5rem;
}

/* ── Classic Editor image alignment ── */
.ce-post-body img {
	max-width: 100%;
	height: auto;
}

.ce-post-body .aligncenter {
	display: block;
	margin-top: var(--ci-size-xl);
	margin-bottom: var(--ci-size-xl);
	margin-left: auto;
	margin-right: auto;
}

/* An image directly after a quote already gets generous breathing room from
   the quote's own bottom padding (2.75rem regular / 4.5rem primary) — adding
   this image's usual top margin on top of that stacks up further still.
   Dropping the image's own top margin here removes that redundant stack.
   wpautop sometimes wraps the image in its own <p> immediately after the
   quote, hence both selectors below. */
.ce-post-body .ce-cs-inline-quote + img,
.ce-post-body .ce-cs-inline-quote + p > img:first-child:last-child {
	margin-top: 0;
}

/* Removing the image's own margin (above) still leaves the quote's OWN
   bottom padding as the dominant gap — 4.5rem for a primary-tier quote is
   on its own already bigger than the ~3rem gap below the image before the
   next heading. Scope the reduction to only quotes immediately followed by
   an image (regular tier's 2.75rem is close enough to 3rem to leave alone),
   rather than changing the quote's padding everywhere it's used. */
.ce-post-body .ce-cs-inline-quote:has(+ img),
.ce-post-body .ce-cs-inline-quote:has(+ .cs-image-row),
.ce-post-body .ce-cs-inline-quote:has(+ p > img:first-child:last-child) {
	padding-bottom: 2.75rem;
}

.ce-post-body .alignleft {
	float: left;
	margin: 0.25rem 1.5rem 1rem 0;
}

.ce-post-body .alignright {
	float: right;
	margin: 0.25rem 0 1rem 1.5rem;
}

.ce-post-body .alignnone {
	display: block;
}

/* Large / full-size images fill the content column */
.ce-post-body .size-large,
.ce-post-body .size-full {
	width: 100%;
	height: auto;
}

/* [cs-btn] shortcode — breathing room when sitting inline in body content */
.ce-post-body .ci-btn {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

/* ════════════════════════════════════════════════════
   OUTCOMES STATS BLOCK
   ════════════════════════════════════════════════════ */

.ce-cs-outcomes {
	background: var(--ci-color-navy);
	padding: 4rem 0;
}

.ce-cs-outcomes__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem 2rem;
}

.ce-cs-outcomes__item {
	text-align: center;
	padding: 2rem 1.5rem;
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.ce-cs-outcomes__number {
	display: block;
	font-family: var(--ci-font-primary);
	font-size: clamp(2.5rem, 4.5vw, 3.75rem);
	font-weight: 700;
	color: #ffffff;
	line-height: 1;
	margin-bottom: 0.6rem;
}

.ce-cs-outcomes__label {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.45;
}

@media (max-width: 600px) {
	.ce-cs-outcomes {
		padding: 2.5rem 0;
	}

	.ce-cs-outcomes__grid {
		grid-template-columns: 1fr;
		max-width: 320px;
		margin: 0 auto;
	}
}

/* ════════════════════════════════════════════════════
   TRUST MEMBER SCHOOLS
   Sits inline in the white snapshot bar, alongside the school-type and
   location tags, so a trust reads as one row of context.

   No white chip here: the bar is already white, so the logos sit directly on
   it. Height is matched to the tag icons beside them, and object-fit keeps a
   long wordmark and a round crest the same height without cropping either.
   ════════════════════════════════════════════════════ */

.ce-cs-trust-schools {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.ce-cs-trust-schools__item {
	display: flex;
}

.ce-cs-trust-schools__link {
	display: flex;
	border-radius: 0.5rem;
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.ce-cs-trust-schools__logo {
	display: block;
	height: 3.25rem;          /* close to the 4.5rem tag icons, without dwarfing them */
	width: auto;
	max-width: 8rem;
	object-fit: contain;
}

@media (hover: hover) and (pointer: fine) {
	.ce-cs-trust-schools__link:hover {
		transform: translateY(-2px);
		opacity: 0.85;
	}
}

.ce-cs-trust-schools__link:focus-visible {
	outline: 2px solid #f99d31;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.ce-cs-trust-schools__link,
	.ce-cs-trust-schools__link:hover {
		transition: none;
		transform: none;
	}
}

@media (max-width: 767px) {
	/* Option C. This is 2rem longhand — the desktop --ci-text-h2 value written
	   out rather than referenced, so the mobile scale never reached it. Left
	   alone it would sit at 32px while every real section heading on the page
	   dropped to 26px, making a muted label the largest type on screen. */
	.ce-cs-post-header__school {
		font-size: 1.625rem;   /* 26px — Option C h2 */
	}

	.ce-cs-trust-schools {
		gap: 0.5rem;
	}

	.ce-cs-trust-schools__logo {
		height: 2.4rem;
		max-width: 6rem;
	}
}

/* ── Tablet: three "More schools" cards on one row, at a smaller size ────────
   The shared .ce-related-grid track is minmax(225px, 275px), and repetitions
   are counted from the MAX when it is a definite length — so the 741px row at
   iPad portrait fits floor((741 + 24) / 299) = 2 cards at full 275px width,
   with the third dropping to a row of its own. Two 275px crests on a tablet is
   what reads as oversized.

   Lowering the cap to 225 makes it floor((741 + 24) / 249) = 3, so the module's
   three cards sit on one line and each is 50px narrower. The floor drops to 180
   only so the track can compress rather than overflow at the bottom of the
   band; nothing here reaches it.

   Bounded to the tablet band because above 1024 the 275px cap already fits
   three on a row, and below 769 the module switches to its own two-up phone
   layout further up this file. */
@media (min-width: 769px) and (max-width: 1023px) {
	.ce-cs-more-schools__grid {
		grid-template-columns: repeat(auto-fit, minmax(180px, 225px));
	}
}