/* ═══════════════════════════════════════════════════════════════════════════
   CASE STUDIES — ARCHIVE (listing + taxonomy pages)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page hero banner ── */
.ce-cs-archive__hero {
	background: #253d47;
	padding: 3.5rem 0 3rem;
}

.ce-cs-archive__title {
	font-family: var(--ci-font-primary) !important;
	font-size: clamp(2rem, 4vw, 3rem) !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	margin: 0 0 0.6rem !important;
	line-height: 1.15 !important;
}

.ce-cs-archive__intro {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	color: rgba(255, 255, 255, 0.72);
	margin: 0 !important;
}

/* ════════════════════════════════════════════════════
   FEATURED CASE STUDY CARD
   Same border/radius/shadow formula as .ce-blog-featured__card
   (see blog-archive.css) — content column + image column, rather
   than a full-bleed panoramic photo with a frosted footer bar,
   which cropped badly once the source photo is a square thumbnail
   rather than a wide banner.
   ════════════════════════════════════════════════════ */

/* Now the SECOND band under the hero — the filters come first (see the note
   on the return statement in inc/acf-case-studies.php), so the wider opening
   gap moved to them and this takes the tighter one. */
.ce-cs-featured-section {
	background: #f5f5f3;
	padding: 1.75rem 0 0;
}

.ce-cs-featured__card {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 0;
	align-items: stretch;

	background: rgba(175, 77, 118, 0.14);
	backdrop-filter: blur(20px) saturate(1.3);
	-webkit-backdrop-filter: blur(20px) saturate(1.3);
	border: 1px solid rgba(175, 77, 118, 0.3);
	border-radius: 1.5rem;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 4px 20px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	position: relative;
	transition: background 0.22s ease, box-shadow 0.22s ease;
}

.ce-cs-featured__card:hover {
	background: rgba(175, 77, 118, 0.2);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 8px 28px rgba(0, 0, 0, 0.08);
}

/* Touch devices don't hover, so mirror the hover feedback above onto
   :active instead — same subtle colour/shadow shift, deliberately no
   scale/transform jump (matches the button press-feedback convention used
   site-wide). (hover: none) keeps this off desktop entirely. */
@media (hover: none) {
	.ce-cs-featured__card:active {
		background: rgba(175, 77, 118, 0.2);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 8px 28px rgba(0, 0, 0, 0.08);
	}
}

/* Stretched link — entire card clickable via title ::after. */
.ce-cs-featured__link {
	text-decoration: none;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}

.ce-cs-featured__link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Content side.

   Deliberately NOT position: relative, and deliberately no z-index — both were
   here, and between them they were why only the button half of the card was
   clickable.

   position: relative made THIS the containing block for the stretched link's
   ::after, so `inset: 0` resolved against the text column rather than the card
   and the image half was never covered. z-index: 2 then made it a stacking
   context, which the overlay could not have escaped even if it had been
   anchored correctly — and the image wrapper's matching z-index: 2 would have
   painted over it regardless.

   Nothing needed either one: the card has no layer beneath these for them to
   sit above. With both gone the ::after resolves against .ce-cs-featured__card
   (position: relative) and, being the only positioned thing in the card,
   paints over the whole of it. */
.ce-cs-featured__content {
	padding: 1.75rem 1.5rem 1.75rem 2rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0.85rem;
}

.ce-cs-featured__badges {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ce-cs-featured__badge--featured {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 700;
	color: var(--ci-color-navy);
	background: rgba(28, 46, 74, 0.08);
	padding: 0.28rem 0.8rem;
	border-radius: 9999px;
	letter-spacing: 0.02em;
}

.ce-cs-featured__badge--cat {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 700;
	color: #ffffff;
	background: var(--ci-color-develop);
	padding: 0.28rem 0.8rem;
	border-radius: 9999px;
	letter-spacing: 0.02em;
}

.ce-cs-featured__title {
	font-family: var(--ci-font-primary) !important;
	font-size: clamp(1.25rem, 1.8vw, 1.6rem) !important;
	font-weight: 700 !important;
	color: var(--ci-color-navy) !important;
	line-height: 1.25 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ce-cs-featured__read {
	position: relative;
	z-index: 2;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 400;
	color: #ffffff;
	background: #692D46;
	padding: 0.55rem 1.25rem;
	border-radius: 9999px;
	white-space: nowrap;
	pointer-events: none;
	margin-top: 0.15rem;
	transition: background 0.2s ease;
}

.ce-cs-featured__card:hover .ce-cs-featured__read {
	background: #561f38;
}

/* Image side — padded so the photo keeps its own rounded corners (same
   treatment as the projects page thumbnails) rather than running
   edge-to-edge and sharing the outer card's radius. Fixed column width
   keeps the square a stable size regardless of how tall the text side
   ends up. */
.ce-cs-featured__img-wrap {
	/* No z-index — see the note on .ce-cs-featured__content. This one sat on
	   top of the stretched link's overlay. */
	padding: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ce-cs-featured__img,
.ce-cs-featured__img-placeholder {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 1rem;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* !important overrides WordPress's global img { height: auto } */
.ce-cs-featured__img {
	height: auto !important;
	object-fit: cover !important;
	display: block;
}

.ce-cs-featured__img-placeholder {
	background: linear-gradient(135deg, #e8edf0 0%, #d4dce0 100%);
}

/* Crest variant of the placeholder — the same treatment the grid cards give a
   crest, at the featured card's size: white behind it rather than the gradient,
   and contain rather than cover, because a crest is an irregular shape that has
   to be seen whole where a photograph can be cropped to fit. */
.ce-cs-featured__img-placeholder--logo {
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.ce-cs-featured__logo {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* ════════════════════════════════════════════════════
   CATEGORY FILTER DROPDOWN
   ════════════════════════════════════════════════════ */

.ce-cs-filters {
	background: #f5f5f3;
	padding: 2.5rem 0 0;
}

.ce-cs-filters__bar {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.ce-cs-filters__dropdown-wrap {
	display: flex;
	align-items: center;
	gap: 0.875rem;
}

.ce-cs-filters__label {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 600;
	color: var(--ci-color-navy);
	white-space: nowrap;
}

/* ── Loading skeleton ── */
.ce-cs-grid--loading {
	pointer-events: none;
}

.ce-cs-skeleton {
	aspect-ratio: 1 / 1;
	border-radius: 1rem;
	background: linear-gradient(
		90deg,
		rgba(175, 77, 118, 0.08) 25%,
		rgba(175, 77, 118, 0.16) 50%,
		rgba(175, 77, 118, 0.08) 75%
	);
	background-size: 200% 100%;
	animation: ce-cs-shimmer 1.4s ease infinite;
}

@keyframes ce-cs-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ── Custom coloured, multi-select dropdown (replaces native <select> chrome) —
   same component as the blog page filter (see blog-archive.css
   .ce-blog-dropdown), renamed for this page. Two independent instances
   (school type, topic) — AND'd together; each is OR'd internally. ── */
.ce-cs-dropdown {
	position: relative;
}

.ce-cs-dropdown__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	height: 46px;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 500;
	color: var(--ci-color-navy);
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.12);
	border-radius: 9999px;
	padding: 0 1.1rem;
	width: 260px;
	max-width: 100%;
	flex-shrink: 0;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ce-cs-dropdown__toggle:hover {
	border-color: var(--ci-color-navy);
}

.ce-cs-dropdown.is-open .ce-cs-dropdown__toggle {
	border-color: var(--ci-color-navy);
	box-shadow: 0 0 0 3px rgba(28, 46, 74, 0.1);
}

.ce-cs-dropdown__toggle-content {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
	flex-wrap: nowrap;
	gap: 0.4rem;
	overflow: hidden;
}

.ce-cs-dropdown__placeholder {
	white-space: nowrap;
	padding: 0.1rem 0;
}

/* "×" on the closed toggle — clears every selection at once, no need to
   open the dropdown first. */
.ce-cs-dropdown__toggle-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(28, 46, 74, 0.08);
	border-radius: 50%;
	width: 1.35rem;
	height: 1.35rem;
	color: var(--ci-color-navy);
	font-size: 0.9rem;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.15s ease;
}

.ce-cs-dropdown__toggle-clear:hover {
	background: rgba(28, 46, 74, 0.16);
}

.ce-cs-dropdown__toggle-clear[hidden] {
	display: none;
}

.ce-cs-dropdown__chevron {
	font-size: 0.7rem;
	color: var(--ci-color-navy);
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.ce-cs-dropdown.is-open .ce-cs-dropdown__chevron {
	transform: rotate(180deg);
}

.ce-cs-dropdown__toggle-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--tag-color, var(--ci-color-navy));
	color: #ffffff;
	font-size: var(--ci-text-utility);
	font-weight: 700;
	padding: 0.3rem 0.4rem 0.3rem 0.75rem;
	border-radius: 9999px;
	max-width: 100%;
	min-width: 0;
}

/* Long names truncate with an ellipsis rather than overflowing the
   fixed-width toggle. */
.ce-cs-dropdown__toggle-pill-label {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.ce-cs-dropdown__pill-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.28);
	border: none;
	border-radius: 50%;
	width: 1.15rem;
	height: 1.15rem;
	color: #ffffff;
	font-size: 0.85rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
	transition: background 0.15s ease;
}

.ce-cs-dropdown__pill-remove:hover {
	background: rgba(255, 255, 255, 0.46);
}

.ce-cs-dropdown__toggle-more {
	display: inline-flex;
	align-items: center;
	background: rgba(28, 46, 74, 0.08);
	color: var(--ci-color-navy);
	font-size: var(--ci-text-utility);
	font-weight: 700;
	padding: 0.3rem 0.6rem;
	border-radius: 9999px;
	white-space: nowrap;
	flex-shrink: 0;
}

.ce-cs-dropdown__menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 340px;
	overflow-y: auto;
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.1);
	border-radius: 1rem;
	box-shadow: 0 12px 32px rgba(28, 46, 74, 0.14);
	padding: 0.75rem;
}

.ce-cs-dropdown__menu[hidden] {
	display: none;
}

.ce-cs-dropdown__clear {
	display: block;
	background: none;
	border: none;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 600;
	color: var(--ci-color-navy);
	text-decoration: none;
	cursor: pointer;
	padding: 0 0.25rem 0.6rem;
}

.ce-cs-dropdown__options {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.ce-cs-tag {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.4rem 0.5rem;
	border-radius: 0.6rem;
	cursor: pointer;
	transition: background 0.12s ease;
}

.ce-cs-tag:hover {
	background: #f9f9f9;
}

.ce-cs-tag-input {
	width: 1.05rem;
	height: 1.05rem;
	flex-shrink: 0;
	border-radius: 0.3rem;
	border: 1.5px solid rgba(0, 0, 0, 0.25);
	accent-color: var(--tag-color, var(--ci-color-navy));
	cursor: pointer;
}

.ce-cs-tag-input:focus-visible {
	outline: 2px solid var(--ci-color-navy);
	outline-offset: 2px;
}

.ce-cs-tag__pill {
	display: inline-flex;
	align-items: center;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 700;
	color: #ffffff;
	background: var(--tag-color, var(--ci-color-navy));
	padding: 0.35rem 0.85rem;
	border-radius: 9999px;
	white-space: nowrap;
}

/* ════════════════════════════════════════════════════
   CARD GRID
   ════════════════════════════════════════════════════ */

.ce-cs-grid-section {
	background: #f5f5f3;
	padding: 2rem 0 5rem;
}

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

/* ════════════════════════════════════════════════════
   CARD — chromeless tile, image-first with the category
   tag overlaid on the image and the title sitting below on
   the page background (same treatment as the blog and
   projects archive cards), rather than a boxed card with a
   frosted-glass title bar sitting over the photo.
   ════════════════════════════════════════════════════ */

.ce-cs-card {
	position: relative;
	display: flex;
	flex-direction: column;

	/* One knob for the tile. The image frame and the title beneath it both read
	   from it, so the card narrows as a unit rather than leaving the title
	   overhanging a shrunken tile.

	   76%, down from the 88% these were built at as photo thumbnails. Two
	   reasons to come down: a school crest does not need the presence a photo
	   does, and every logo in the library is a 400x400 original — at the old
	   343px tile that rendered at 1.17x, soft on any retina screen. 296px puts
	   it at 1.35x. */
	--ce-cs-tile-width: 76%;
}

.ce-cs-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	outline-offset: 3px;
	/* Tapping the tile on mobile showed the browser's default grey
	   tap-highlight flash before navigating — has no effect on desktop
	   (mouse input never triggers it), so safe to disable unconditionally. */
	-webkit-tap-highlight-color: transparent;
}

.ce-cs-card__img-wrap {
	position: relative;
	width: var(--ce-cs-tile-width);
	margin: 0 auto;
	aspect-ratio: 1 / 1;
	border-radius: 1rem;
	overflow: hidden;
	background-color: #692D46;
	background-size: cover;
	background-position: center;
	transition: opacity 0.2s ease;
}

.ce-cs-card:hover .ce-cs-card__img-wrap {
	opacity: 0.9;
}

.ce-cs-card__img-wrap--no-image {
	background-image: linear-gradient(135deg, #692D46 0%, var(--ci-color-navy) 100%);
}

/* Crest variant. Overrides --no-image, which still applies.

   No padding and no hairline: every school logo in the library turns out to be
   a 400x400 original, fully opaque, on its own solid background — and each one
   already carries 9-19% of its own margin inside that square (14% on average,
   which is exactly what the CSS was adding on top). So the inset was doubling
   a margin the artwork already had, and reading as a white border around a
   coloured tile rather than as breathing room.

   The white background stays as the floor for anything that does not fit that
   description — a transparent logo, or a non-square one that letterboxes. */
.ce-cs-card__img-wrap--logo {
	background-image: none;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Fills the frame: square artwork in a square frame under object-fit: contain
   meets every edge with nothing cropped. contain rather than cover so that a
   future non-square logo letterboxes against the white above instead of losing
   the school's name off the side. */
.ce-cs-card__logo {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Category pill — pinned top-left over the image */
.ce-cs-card__cat {
	position: absolute;
	top: 0.875rem;
	left: 0.875rem;
	z-index: 2;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 700;
	color: #ffffff;
	background: var(--ci-color-develop);
	padding: 0.28rem 0.8rem;
	border-radius: 9999px;
	letter-spacing: 0.02em;
}

/* Card body — plain text on the page background beneath the image */
/* Width tracks the tile so the card reads as one column — left at full card
   width the title would overhang the narrowed tile by 45px a side. The width
   sits here rather than on the title so the two edges line up exactly: the
   0.1rem of side padding this used to carry (a nudge from when the title ran
   the full width of the card) resolved the percentage against a 386px box
   instead of the tile's 389px one, and left the title 1.2px in on each side. */
.ce-cs-card__body {
	width: var(--ce-cs-tile-width);
	margin-inline: auto;
	padding: 0.85rem 0 0;
	text-align: center;
}

/* ── School name pill ───────────────────────────────────────────────────────
   The card titles are questions — "How can an adopted curriculum inspire
   confident, curious learners?" — so until now nothing on a card said whose
   school it was. Twelve of the fourteen carry a crest, which names the school
   to anyone who recognises it and to nobody else.

   A pill rather than a plain line of text because it has to read as a label
   attached to the card, not as the first line of the title: the two sit 8px
   apart in the same centred column, and without a shape around it the eye
   runs them together into one sentence.

   Sized and weighted to match .ce-cs-card__cat, the category pill overlaid on
   the tile above — same font size, same weight, same 9999px radius — so the
   card carries one pill treatment in two places rather than two designs.
   The tint is the navy at 7%, which reads as a label on the section's warm
   off-white without competing with the title directly beneath it.

   text-wrap: balance matters more here than it looks. The longest names run
   to two lines in a 296px column ("Canon Sharples Church of England Primary
   School and Nursery"), and a stadium shape with a long first line and a
   two-word second one looks broken. Balancing gives even lines, which the
   full radius can hold. max-width keeps the pill inside the column that the
   tile and the title already share.
──────────────────────────────────────────────────────────────────────────── */
.ce-cs-card__school {
	display: inline-block;
	max-width: 100%;
	font-family: var(--ci-font-primary);
	/* 15px, not the 16px utility size. Shortening the names (see
	   ce_cs_school_name_short) left one of the fourteen still wrapping in the
	   296px desktop column — "Queen Elizabeth II Silver Jubilee School", which
	   has no boilerplate to drop. It needs 280px at 16px and 262px at 15px
	   against 267px of usable width, so a single step down is the difference
	   between thirteen tidy pills and fourteen. */
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ci-color-navy);
	background: rgba(30, 45, 61, 0.07);
	border-radius: 9999px;
	padding: 0.3rem 0.9rem;
	margin-bottom: 0.5rem;
	text-wrap: balance;
}

.ce-cs-card__title {
	font-family: var(--ci-font-primary) !important;
	font-size: var(--ci-text-card-heading) !important;
	font-weight: 700 !important;
	color: var(--ci-color-navy) !important;
	line-height: 1.35 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ce-cs-card:hover .ce-cs-card__title {
	color: var(--ci-color-develop) !important;
	transition: color 0.15s ease;
}

/* Touch devices don't hover, so mirror the hover feedback above onto
   :active instead — same subtle image-dim/colour shift, deliberately no
   scale/transform jump (matches the button press-feedback convention used
   site-wide). (hover: none) keeps this off desktop entirely. */
@media (hover: none) {
	.ce-cs-card:active .ce-cs-card__img-wrap {
		opacity: 0.9;
	}

	.ce-cs-card:active .ce-cs-card__title {
		color: var(--ci-color-develop) !important;
	}
}

/* ── Pagination ── */
.ce-cs-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 1rem;
}

.ce-cs-pagination a,
.ce-cs-pagination span {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 600;
	color: var(--ci-color-navy);
	padding: 0.5rem 0.9rem;
	border-radius: 8px;
	text-decoration: none;
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.1);
	transition: background 0.15s ease;
	display: inline-flex;
	align-items: center;
}

.ce-cs-pagination a:hover {
	background: rgba(28, 46, 74, 0.07);
}

.ce-cs-pagination .current {
	background: var(--ci-color-navy);
	color: #ffffff;
	border-color: var(--ci-color-navy);
}

.ce-cs-empty {
	font-family: var(--ci-font-primary);
	color: var(--ci-color-text-muted);
	text-align: center;
	padding: 3rem 0;
}

/* ════════════════════════════════════════════════════
   TABLET
   ════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
	.ce-cs-featured__card {
		grid-template-columns: 1fr 260px;
	}
}

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

@media (max-width: 768px) {
	.ce-cs-archive__hero {
		padding: 2rem 0 1.75rem;
	}

	.ce-cs-featured-section {
		padding: 1.25rem 0 0;
	}

	.ce-cs-featured__card {
		grid-template-columns: 1fr;
	}

	/* Image above content on mobile */
	.ce-cs-featured__img-wrap {
		order: -1;
		padding: 1.25rem 1.25rem 0;
	}

	.ce-cs-featured__img,
	.ce-cs-featured__img-placeholder {
		max-width: 220px;
		margin: 0 auto;
	}

	.ce-cs-featured__content {
		padding: 1.25rem 1.25rem 1.5rem;
	}

	.ce-cs-featured__title {
		font-size: var(--ci-text-card-heading) !important;
	}

	.ce-cs-filters {
		padding: 1.75rem 0 0;
	}

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

	/* Label above the control, not beside it.

	   Selecting a filter puts its name in the toggle as a pill, and a long one
	   — "Multi-Academy Trust" — is 178px on its own. Beside a 174px label on a
	   390px screen the toggle had 173px to hold it in, and being a flex item
	   with the default min-width: auto it could not shrink below its content:
	   it grew to 292px instead, ran 108px off the right of the screen and took
	   the whole document with it (scrollWidth 390 to 497).

	   Stacked, the control gets the full row and the name fits with room to
	   spare. min-width: 0 stays as the structural guard, so a longer name in
	   future truncates with an ellipsis — the machinery for which is already
	   on .ce-cs-dropdown__toggle-pill-label — rather than widening the page. */
	.ce-cs-filters__dropdown-wrap {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
	}

	.ce-cs-dropdown {
		flex: 1;
		min-width: 0;
	}

	.ce-cs-dropdown__toggle {
		width: 100%;
	}

	/* The menu was pinned to the toggle's width (left: 0; right: 0), which on
	   a phone is whatever is left over beside the "Find schools like yours"
	   label — 173px. Its widest pill, "Multi-Academy Trust", is 178px and
	   carries white-space: nowrap, so the panel could not fit its own content
	   and grew a horizontal scrollbar with the label sliced off mid-word.

	   Sized to its content instead, and anchored to the RIGHT edge so it grows
	   inwards across the page rather than off it. max-width keeps it inside
	   the viewport if a longer school type is ever added. */
	.ce-cs-dropdown__menu {
		left: auto;
		right: 0;
		width: max-content;
		min-width: 100%;
		max-width: calc(100vw - 2.5rem);
	}

	.ce-cs-grid-section {
		padding: 1.5rem 0 3rem;
	}

	.ce-cs-grid {
		gap: 1.25rem;
	}

}

/* Phones — 2 tiles per row rather than 1 (mirrors the projects page grid).
   A single square tile floating in a full-width row (what auto-fill/minmax
   naturally collapses to here) reads as sparse; 2-up feels like a proper
   gallery grid and halves the scrolling needed to browse. */
@media (max-width: 600px) {
	/* Back to the full-width tile. Two-up on a phone the cards are ~170px
	   already; taking another 12% off them buys nothing — the crests are well
	   past 3x density at this size — and only makes them harder to make out. */
	.ce-cs-card {
		--ce-cs-tile-width: 88%;
	}

	.ce-cs-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.85rem;
	}

	.ce-cs-card__cat {
		font-size: var(--ci-text-utility);
		padding: 0.22rem 0.6rem;
	}

	.ce-cs-card__body {
		padding-top: 0.5rem;
	}

	/* ── The pill on a phone: smaller, and capped at two lines ──────────────
	   Two-up at 390px the body under each tile is 131px wide. At the desktop
	   size "Canon Sharples Church of England Primary School and Nursery" wrapped
	   to SEVEN lines there — a tall oval blob taller than the crest above it,
	   which is not a pill by any reading. Dropping to 0.75rem with tighter
	   padding takes the worst case to about four, and the clamp takes it to
	   two, which is the only height that still reads as a label rather than a
	   paragraph with a rounded border.

	   The trade is an ellipsis on the three longest names — the other eleven
	   fit whole. A truncated school name is a real cost, so it is paid only
	   here: from 601px up there is no clamp and every name shows in full.
	   The alternative is a one-column phone grid, which would give every name
	   its own line, at the cost of the two-up layout this archive chose.

	   -webkit-inline-box, not -webkit-box: the block form fills its container,
	   so short names like "Bunscoill Rhumsaa" would stretch into a full-width
	   bar instead of hugging their text. The inline form keeps shrink-to-fit,
	   which is what makes the shape a pill. */
	.ce-cs-card__school {
		display: -webkit-inline-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-size: 0.75rem;
		line-height: 1.3;
		padding: 0.2rem 0.6rem;
		margin-bottom: 0.4rem;
	}

	.ce-cs-card__title {
		font-size: var(--ci-text-card-heading) !important;
	}
}


/* ── Placeholder school name ──────────────────────────────────────────────
   Cards without a featured image fall back to a plum→navy gradient. The card
   titles are questions ("How can an adopted curriculum…"), not school names,
   so a wall of gradients is impossible to tell apart. Naming the school on
   the placeholder makes each one identifiable.
──────────────────────────────────────────────────────────────────────────── */
.ce-cs-card__placeholder-name {
	position: absolute;
	inset: auto 1.25rem 1.25rem;
	z-index: 2;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-heading);
	font-weight: 700;
	line-height: 1.3;
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}

/* ── Tablet: both filters on one row ─────────────────────────────────────────
   Side by side with their labels beside them, the pair needs 842px — label 160
   plus a 260px control, label 114 plus another 260, and the gaps. The bar has
   741px at iPad portrait and 945 at 1024, so 1024 fits and every tablet width
   below it wrapped the second filter onto its own line.

   Shrinking the controls is the obvious fix and it is the wrong one: a selected
   filter shows as a pill inside the toggle, and the longest — "Multi-Academy
   Trust" — is 178px on its own. Fitting both filters on one row that way caps
   each toggle at 209px, which leaves about 150px of usable width inside it.

   So the label moves above its control instead, which is what the phone layout
   already does. Each filter is then as wide as its control rather than label
   plus control — 260px, so the pair needs 540px and fits from 769 up with room
   to spare, and the toggle keeps its full width for the pill. */
@media (min-width: 769px) and (max-width: 1023px) {
	.ce-cs-filters__dropdown-wrap {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
}