/* ═══════════════════════════════════════════════════════════════════════════
   BLOG — ARCHIVE (listing + category pages)
   ═══════════════════════════════════════════════════════════════════════════ */

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

.ce-blog-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-blog-archive__intro {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	color: rgba(255, 255, 255, 0.72);
	margin: 0 !important;
}

/* "Return to all articles" — search results only, where the hero is otherwise
   a dead end. inline-flex rather than the pill's usual block, so it sits to
   its own width under the title instead of stretching. */
.ce-blog-archive__back {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin-top: 1.25rem;
}

/* Sized in em so it tracks the label, and given explicit dimensions so the
   space it occupies is known before anything loads — see the note in
   inc/acf-blog.php on why this is an inline SVG rather than an icon font. */
.ce-blog-archive__back-icon {
	width: 0.72em;
	height: 0.72em;
	flex-shrink: 0;
	display: block;
}

/* ════════════════════════════════════════════════════
   FEATURED HERO CARD
   ════════════════════════════════════════════════════ */

.ce-blog-featured {
	background: #eeeceb;
	padding: 2.5rem 0 3rem;
}

/* Same border/radius/shadow formula as .ce-feature-list__item (see
   feature-list.css / SEND page) — the site-wide reference for a
   colour-tinted card, replacing the thick border + gloss-overlay
   treatment this used to share with .home-what__card. */
.ce-blog-featured__card {
	display: grid;
	/* Image column first. The markup still emits the content before the image,
	   so the title is what a screen reader reaches first; only the visual order
	   is swapped, by explicit grid placement below. */
	grid-template-columns: 45% 1fr;
	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-blog-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-blog-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. Tapping the
   title text 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. */
.ce-blog-featured__link {
	text-decoration: none;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}

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

/* The overlay resolves against this, so it has to be the nearest positioned
   ancestor of the link — see the note on __content below. */
.ce-blog-featured__card {
	position: relative;
}

/* The focus ring goes on the overlay, since the overlay is what a click
   actually hits. Sits inside the card's rounded corners. */
.ce-blog-featured__link:focus-visible {
	outline: none;
}

.ce-blog-featured__link:focus-visible::after {
	outline: 2px solid #af4d76;
	outline-offset: -3px;
	border-radius: inherit;
}

.ce-blog-featured__card:hover .ce-blog-featured__cta {
	background-color: #8f3a5e;
}

/* Content side */
.ce-blog-featured__content {
	padding: 1.5rem 1.25rem 1.5rem 1.75rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0;
	/* Deliberately NOT position: relative. This is a grid item, and z-index
	   applies to grid items without it — which matters, because being
	   positioned made this the nearest positioned ancestor of the title link,
	   so the stretched ::after above resolved against the text column instead
	   of the card. The card looked clickable over its own text and dead over
	   its image, which is what it had been doing since the pattern was added. */
	z-index: 2;
}

/* Two copies exist (see inc/acf-blog.php) — on desktop the badges sit in
   the text column as normal flow; on mobile, where the image runs
   edge-to-edge, they're overlaid on the image instead. Only one is ever
   visible at a time (below). */
.ce-blog-featured__labels {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.ce-blog-featured__labels--image {
	display: none;
	position: absolute;
	top: 0.875rem;
	left: 0.875rem;
	z-index: 2;
}

.ce-blog-featured__badge {
	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.3rem 0.85rem;
	border-radius: 9999px;
}

.ce-blog-featured__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.3rem 0.85rem;
	border-radius: 9999px;
}

.ce-blog-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;
}

.ce-blog-featured__excerpt {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-body);
	line-height: 1.6;
	color: var(--ci-color-text-muted);
	margin: 0 !important;
}

.ce-blog-featured__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem 0.6rem;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	color: var(--ci-color-text-muted);
	margin: 0;
}

.ce-blog-featured__meta-item {
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

.ce-blog-featured__meta-item i {
	opacity: 0.6;
	font-size: 0.85rem;
}

.ce-blog-featured__meta-sep {
	opacity: 0.35;
}

.ce-blog-featured__cta {
	position: relative;
	z-index: 2;
	margin-top: 0;
	pointer-events: none;
}

/* Image side — edge-to-edge, no padding/frame. The card's own
   border-radius + overflow:hidden clips it at the true outer edge, so the
   image itself needs no rounding of its own.

   Pinned to the ratio the thumbnails are uploaded at. It used to be
   min-height: 340px stretched to the row, which meant the crop was decided by
   however tall the text beside it happened to be — a short excerpt gave a
   squat, heavily cropped image and a long one gave a tall slice of the same
   photo, so the featured post looked different with every publish.

   align-self: start is what makes that hold: a stretched grid item takes the
   row's height, and a resolved height beats aspect-ratio, so leaving it to
   stretch would silently reinstate the crop. Where the text runs taller than
   the image, the panel colour fills the remainder. */
.ce-blog-featured__img-wrap {
	position: relative;
	overflow: hidden;
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	aspect-ratio: 1000 / 653;
}

.ce-blog-featured__content {
	grid-column: 2;
	grid-row: 1;
}

/* !important overrides WordPress's global img { height: auto } */
.ce-blog-featured__img-wrap img,
.ce-blog-featured__img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}

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

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

.ce-blog-filters {
	background: #f5f5f3;
	padding: 1.75rem 0 0;
}

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

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

.ce-blog-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;
}

/* ── Custom coloured, multi-select dropdown (replaces native <select> chrome) —
   same component as the projects page filter (see projects-archive.css
   .ce-proj-dropdown), renamed for this page. ── */
.ce-blog-dropdown {
	position: relative;
}

.ce-blog-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: 320px;
	max-width: 100%;
	flex-shrink: 0;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

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

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

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

.ce-blog-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-blog-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-blog-dropdown__toggle-clear:hover {
	background: rgba(28, 46, 74, 0.16);
}

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

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

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

.ce-blog-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 category names ("Diversity and Inclusion") truncate with an
   ellipsis rather than overflowing the fixed-width toggle. */
.ce-blog-dropdown__toggle-pill-label {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.ce-blog-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-blog-dropdown__pill-remove:hover {
	background: rgba(255, 255, 255, 0.46);
}

.ce-blog-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-blog-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-blog-dropdown__menu[hidden] {
	display: none;
}

.ce-blog-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-blog-dropdown__options {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.ce-blog-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-blog-tag:hover {
	background: #f9f9f9;
}

.ce-blog-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-blog-tag-input:focus-visible {
	outline: 2px solid var(--ci-color-navy);
	outline-offset: 2px;
}

.ce-blog-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;
}

/* ── Search form ── */
.ce-blog-search {
	flex: 1;
	max-width: 360px;
}

.ce-blog-search__wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.ce-blog-search__icon {
	position: absolute;
	left: 1rem;
	font-size: 0.8rem;
	color: var(--ci-color-text-muted);
	pointer-events: none;
	z-index: 1;
}

.ce-blog-search__input {
	width: 100%;
	height: 46px;
	box-sizing: border-box;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	color: var(--ci-color-navy);
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.12);
	border-radius: 9999px;
	padding: 0 2.75rem 0 2.5rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.ce-blog-search__input::placeholder {
	color: rgba(28, 46, 74, 0.4);
}

.ce-blog-search__input:hover {
	border-color: var(--ci-color-navy);
}

.ce-blog-search__input:focus {
	outline: none;
	border-color: var(--ci-color-navy);
	box-shadow: 0 0 0 3px rgba(28, 46, 74, 0.1);
}

.ce-blog-search__btn {
	position: absolute;
	right: 0.4rem;
	background: var(--ci-color-develop);
	border: none;
	border-radius: 9999px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #ffffff;
	font-size: 0.72rem;
	transition: opacity 0.15s ease;
}

.ce-blog-search__btn:hover {
	opacity: 0.82;
}

/* ── Live search dropdown ── */
.ce-blog-search__dropdown {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	right: 0;
	background: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.1);
	border-radius: 1rem;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
	z-index: 200;
	overflow: hidden;
	display: none;
}

.ce-blog-search__dropdown.is-open {
	display: block;
}

.ce-blog-search__list {
	list-style: none;
	margin: 0;
	padding: 0.35rem 0 0;
}

.ce-blog-search__item {
	padding: 0;
}

.ce-blog-search__result-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 1rem;
	text-decoration: none;
	color: var(--ci-color-navy);
	transition: background 0.12s ease;
}

.ce-blog-search__item:hover .ce-blog-search__result-link,
.ce-blog-search__item.is-active .ce-blog-search__result-link {
	background: rgba(28, 46, 74, 0.05);
}

.ce-blog-search__result-title {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-heading);
	font-weight: 500;
	flex: 1;
	line-height: 1.35;
}

.ce-blog-search__result-title mark {
	background: none;
	color: var(--ci-color-develop);
	font-weight: 700;
}

.ce-blog-search__result-arrow {
	font-size: 0.72rem;
	color: var(--ci-color-text-muted);
	opacity: 0;
	transition: opacity 0.12s ease;
	flex-shrink: 0;
}

.ce-blog-search__item:hover .ce-blog-search__result-arrow,
.ce-blog-search__item.is-active .ce-blog-search__result-arrow {
	opacity: 1;
}

.ce-blog-search__view-all {
	display: block;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 600;
	color: #ffffff;
	text-decoration: none;
	text-align: center;
	background: var(--ci-color-develop);
	border-radius: 9999px;
	padding: 0.6rem 1.25rem;
	margin: 0.5rem 1rem 0.65rem;
	transition: opacity 0.15s ease;
}

.ce-blog-search__view-all:hover {
	opacity: 0.82;
}

.ce-blog-search__no-results {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	color: var(--ci-color-text-muted);
	padding: 1rem;
	text-align: center;
}

/* Loading pulse dots */
.ce-blog-search__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: 1rem;
}

.ce-blog-search__loading span {
	width: 6px;
	height: 6px;
	border-radius: 9999px;
	background: var(--ci-color-navy);
	animation: ce-search-pulse 1.2s ease-in-out infinite;
	opacity: 0.4;
}

.ce-blog-search__loading span:nth-child(2) { animation-delay: 0.2s; }
.ce-blog-search__loading span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ce-search-pulse {
	0%, 80%, 100% { transform: scale(0.8); opacity: 0.4; }
	40%            { transform: scale(1.1); opacity: 1; }
}

/* ════════════════════════════════════════════════════
   POST GRID
   ════════════════════════════════════════════════════ */

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

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

/* ── Card — chromeless tile, image-first with the category tag overlaid
   on the image (same treatment as the projects page grid) rather than a
   boxed "card" with its own background/border. ── */
.ce-blog-card {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* Stretched link — entire card clickable via title ::after. Tapping the
   title text 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. */
.ce-blog-card__link {
	text-decoration: none;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}

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

.ce-blog-card__img-wrap {
	position: relative;
	/* The shape the thumbnails are actually made in. It was 16/9, which is a
	   wider frame than the source, so object-fit: cover was trimming about 14%
	   off the height of every image — the top of a head, the bottom of a
	   caption. Written as the pixel dimensions rather than reduced to 3/2
	   (which it nearly is) so the reason is legible: this is the upload size. */
	aspect-ratio: 1000 / 653;
	border-radius: 1.25rem;
	overflow: hidden;
	background-color: #e8edf0;
	transition: opacity 0.2s ease;
}

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

.ce-blog-card__img {
	width: 100% !important;
	height: 100% !important;
	max-height: none !important;
	object-fit: cover !important;
	display: block;
	border-radius: 0;
	box-shadow: none;
}

.ce-blog-card__img-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #e8edf0 0%, #d4dce0 100%);
}

/* Card body */
.ce-blog-card__body {
	padding: 0.85rem 0.1rem 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

/* Kill empty <p> tags injected by wpautop inside card body */
.ce-blog-card__body > p:empty {
	display: none;
	margin: 0;
	padding: 0;
}

/* Category label — pinned top-left over the image, not in the body below */
.ce-blog-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;
}

/* Title — all margins killed to prevent WP/browser h3 defaults leaking in */
.ce-blog-card__title,
.ce-blog-card .ce-blog-card__title {
	font-family: var(--ci-font-primary) !important;
	font-size: var(--ci-text-card-heading) !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: var(--ci-color-navy) !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ce-blog-card:hover .ce-blog-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-blog-card:active .ce-blog-card__img-wrap {
		opacity: 0.9;
	}

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

.ce-blog-card__date {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	color: var(--ci-color-text-muted);
}

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

.ce-blog-pagination a,
.ce-blog-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-blog-pagination a:hover {
	background: rgba(28, 46, 74, 0.07);
}

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

.ce-blog-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-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ce-blog-featured__card {
		grid-template-columns: 42% 1fr;
	}
}

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

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

	.ce-blog-featured {
		padding: 2rem 0 0;
	}

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

	/* Image on top, content below on mobile. The explicit grid-column /
	   grid-row placement that puts the image on the left at desktop has to be
	   released here — a grid-column: 2 inside a single-column grid conjures an
	   implicit second column rather than being ignored, which would push the
	   text off to the side of a card that is meant to be stacked. */
	.ce-blog-featured__img-wrap,
	.ce-blog-featured__content {
		grid-column: auto;
		grid-row: auto;
	}

	.ce-blog-featured__img-wrap {
		order: -1;
	}

	/* Swap which copy of the badges is visible (see acf-blog.php) — overlaid
	   on the image here instead of sitting in the text column. */
	.ce-blog-featured__labels--content {
		display: none;
	}

	.ce-blog-featured__labels--image {
		display: flex;
	}

	/* The transparent navy tint reads fine on the card's own light
	   background, but blends into an arbitrary photo once overlaid on the
	   image — make it solid here instead. */
	.ce-blog-featured__labels--image .ce-blog-featured__badge {
		background: #ffffff;
	}

	/* On desktop, .ce-blog-featured__content relies on space-between +
	   gap:0 for spacing — it works there because the grid stretches the
	   content column to match the image's height, leaving room for
	   space-between to distribute. On mobile the card stacks into
	   separate rows instead, so the content column shrinks to fit its
	   own content exactly, and that same space-between has nothing left
	   to distribute — everything collapses together with no gap at all.
	   Switch to an explicit gap instead of relying on leftover space. */
	.ce-blog-featured__content {
		padding: 1.75rem;
		justify-content: flex-start;
		gap: 0.85rem;
	}

	.ce-blog-filters {
		padding: 1.5rem 0 0;
	}

	.ce-blog-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-blog-dropdown__toggle-pill-label — rather than widening the page. */
	.ce-blog-filters__dropdown-wrap {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
	}

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

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

	.ce-blog-search {
		max-width: 100%;
	}

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

	.ce-blog-grid {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}