/* ═══════════════════════════════════════════════════════════════════════════
   CPD HUB PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared tokens ──────────────────────────────────────────────────────── */

:root {
	--cpd-roles-top: 0px;
}

/* ── Shared utilities ────────────────────────────────────────────────────── */

/* In-page nav pills scroll to these sections via JS scrollIntoView({block:'start'}),
   which respects scroll-margin-top — without it the fixed header covers the heading. */
.cpd-tools,
.cpd-downloads,
.cpd-pathways,
.cpd-editorial,
#cpd-webinars {
	scroll-margin-top: var(--nav-bottom, 64px);
}

.cpd-eyebrow {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.65);
	margin: 0 0 0.75rem;
}

.cpd-eyebrow--dark {
	color: var(--ci-color-develop);
}

.cpd-section__title {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h2);
	font-weight: 700;
	color: #646464;
	margin: 0 0 1rem;
	line-height: 1.2;
}

.cpd-section__intro {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	line-height: 1.7;
	color: var(--ci-color-text-muted);
	max-width: 680px;
	margin: 0 0 2.5rem;
}

/* ── Tag pills ─────────────────────────────────────────────────────────── */

.cpd-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: 0.75rem;
}

.cpd-tag {
	display: inline-flex;
	align-items: center;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 600;
	padding: 0.2rem 0.6rem;
	border-radius: 9999px;
	border: 1px solid transparent;
	line-height: 1.4;
}

.cpd-tag--teacher {
	background: rgba(207, 214, 102, 0.2);
	color: #5a6b18;
	border-color: rgba(207, 214, 102, 0.65);
}

.cpd-tag--subject-leader {
	background: rgba(175, 77, 118, 0.1);
	color: #8f3a5e;
	border-color: rgba(175, 77, 118, 0.35);
}

.cpd-tag--senior-leader {
	background: rgba(83, 141, 169, 0.12);
	color: #1a5e72;
	border-color: rgba(83, 141, 169, 0.4);
}

.cpd-tag--headteacher {
	background: rgba(249, 157, 49, 0.12);
	color: #9a4d00;
	border-color: rgba(249, 157, 49, 0.45);
}

.cpd-tag--all-roles {
	background: rgba(30, 45, 61, 0.07);
	color: #692D46;
	border-color: rgba(30, 45, 61, 0.2);
}

.cpd-tag--free {
	background: rgba(46, 125, 50, 0.1);
	color: #1b5e20;
	border-color: rgba(46, 125, 50, 0.35);
}

.cpd-tag--subscriber {
	background: rgba(244, 67, 54, 0.08);
	color: #b71c1c;
	border-color: rgba(244, 67, 54, 0.3);
}

/* Article category tags */
.cpd-tag--cat-2028 {
	background: rgba(249, 157, 49, 0.12);
	color: #9a4d00;
	border-color: rgba(249, 157, 49, 0.4);
}

.cpd-tag--cat-ofsted {
	background: rgba(83, 141, 169, 0.12);
	color: #1a5e72;
	border-color: rgba(83, 141, 169, 0.4);
}

.cpd-tag--cat-subject {
	background: rgba(175, 77, 118, 0.1);
	color: #8f3a5e;
	border-color: rgba(175, 77, 118, 0.35);
}

/* ── Card icon badge ────────────────────────────────────────────────────── */

.cpd-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.75rem;
	background: none;
	margin-bottom: 1rem;
	flex-shrink: 0;
}

.cpd-card-icon--orange { color: var(--ci-color-engage); --fa-primary-color: var(--ci-color-engage); --fa-secondary-color: rgba(249,157,49,0.4); }
.cpd-card-icon--pink   { color: var(--ci-color-develop); --fa-primary-color: var(--ci-color-develop); --fa-secondary-color: rgba(175,77,118,0.4); }
.cpd-card-icon--teal   { color: var(--ci-color-innovate); --fa-primary-color: var(--ci-color-innovate); --fa-secondary-color: rgba(83,141,169,0.4); }
/* Green has no brand token — it's the same literal #71947e used as the 4th
   colour in the feature-list cycle (see feature-list.css), which is what the
   Maestro card grid renders. Kept identical so the two grids match. */
.cpd-card-icon--green  { color: #71947e; --fa-primary-color: #71947e; --fa-secondary-color: rgba(113,148,126,0.4); }

/* ── Shared grid layouts ────────────────────────────────────────────────── */

.cpd-grid--2col {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}

.cpd-grid--3col {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

/* ── Button extensions ─────────────────────────────────────────────────── */

.cpd-btn--inert {
	cursor: default;
}

.cpd-btn--outline-teal {
	background: transparent;
	color: var(--ci-color-innovate);
	border: 2px solid var(--ci-color-innovate);
}

.cpd-btn--outline-pink {
	background: transparent;
	color: var(--ci-color-develop);
	border: 2px solid var(--ci-color-develop);
}

.cpd-btn--sm {
	padding: 0.55rem 1.35rem;
	font-size: var(--ci-text-utility);
}

@media (hover: hover) and (pointer: fine) {
	.cpd-btn--outline-teal:not(.cpd-btn--inert):hover {
		background: var(--ci-color-innovate);
		color: #ffffff;
	}
	.cpd-btn--outline-pink:not(.cpd-btn--inert):hover {
		background: var(--ci-color-develop);
		color: #ffffff;
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 1 — HERO
   ═══════════════════════════════════════════════════════════════════════════ */

.cpd-hero__btns,
.cpd-hero__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 1.75rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 2 — ROLE SELECTOR
   ═══════════════════════════════════════════════════════════════════════════ */

.cpd-roles {
	background: #ffffff;
	padding: 2.5rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	z-index: 1;
}

.cpd-roles--shadow {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.cpd-roles__header {
	margin-bottom: 1.5rem;
}

.cpd-roles__header .cpd-section__title {
	font-size: clamp(1.25rem, 2.5vw, 1.6rem);
	margin-bottom: 0.4rem;
}

.cpd-roles__header .cpd-section__intro {
	font-size: var(--ci-text-body);
	margin: 0;
}

.cpd-roles__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

.cpd-role-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 1.375rem;
	background: var(--ci-color-light-bg);
	border: 1.5px solid transparent;
	border-radius: 1.25rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
	cursor: pointer;
	text-align: left;
	transition: box-shadow 0.2s ease, background-color 0.18s ease, border-color 0.18s ease;
	font-family: var(--ci-font-primary);
	width: 100%;
}

.cpd-role-card--orange { background: rgba(249, 157, 49, 0.13); border-color: rgba(249, 157, 49, 0.32); }
.cpd-role-card--pink   { background: rgba(175, 77, 118, 0.10); border-color: rgba(175, 77, 118, 0.28); }
.cpd-role-card--teal   { background: rgba(83, 141, 169, 0.12); border-color: rgba(83, 141, 169, 0.30); }

.cpd-role-card:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); }

.cpd-role-card--orange.is-active { background: rgba(249, 157, 49, 0.22); border-color: var(--ci-color-engage); box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.cpd-role-card--pink.is-active   { background: rgba(175, 77, 118, 0.18); border-color: var(--ci-color-develop); box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.cpd-role-card--teal.is-active   { background: rgba(83, 141, 169, 0.20); border-color: var(--ci-color-innovate); box-shadow: 0 10px 30px rgba(0,0,0,0.15); }

.cpd-role-card__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
}

.cpd-role-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 2.25rem;
	background: none;
	flex-shrink: 0;
}

.cpd-role-card__icon--orange { color: var(--ci-color-engage); }
.cpd-role-card__icon--pink   { color: var(--ci-color-develop); }
.cpd-role-card__icon--teal   { color: var(--ci-color-innovate); }

.cpd-role-card__title {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-heading);
	font-weight: 700;
	color: #692D46;
	line-height: 1.3;
	display: block;
}

.cpd-role-card__desc {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-body);
	color: #4a5a6a;
	line-height: 1.65;
	display: block;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 3 — BURNING ISSUES
   ═══════════════════════════════════════════════════════════════════════════ */

.cpd-pressures {
	background: #253d47;
	padding: 5rem 0;
	position: relative;
	overflow: clip;
}

/* Same faint rotated-square decoration used on the equivalent SEND page
   navy section (see send.css .ce-send-we-help). */
.cpd-pressures::before {
	content: '';
	position: absolute;
	width: 450px;
	height: 450px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 2.75rem;
	transform: rotate(45deg);
	top: -80px;
	left: -90px;
	pointer-events: none;
	z-index: 0;
}

.cpd-pressures::after {
	content: '';
	position: absolute;
	width: 260px;
	height: 260px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 2rem;
	transform: rotate(45deg);
	top: 420px;
	left: 178px;
	pointer-events: none;
	z-index: 0;
}

.cpd-pressures .site-container {
	position: relative;
	z-index: 1;
}

.cpd-pressures__title-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 0.6rem;
}

.cpd-pressures .cpd-section__title {
	color: #fff;
	margin: 0;
	text-align: center;
}


.cpd-pressures .cpd-section__intro {
	text-align: center;
	color: rgba(255, 255, 255, 0.75);
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

.cpd-pressure-card {
	position: relative;
	backdrop-filter: blur(20px) saturate(1.3);
	-webkit-backdrop-filter: blur(20px) saturate(1.3);
	border-radius: 1.5rem;
	padding: 1.375rem;
	display: flex;
	flex-direction: column;
	border: 1px solid transparent;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 4px 20px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.2s ease;
	overflow: clip;
}

.cpd-pressure-card:hover {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 8px 28px rgba(0, 0, 0, 0.08);
}

/* Same opaque light-tint glass-card look used for feature-list cards
   elsewhere on the site (see feature-list.css / SEND page) — computed as
   each brand tint composited over white, since a translucent tint here
   would just darken/muddy against the navy section background. */
.cpd-pressure-card--orange { background: rgb(254, 242, 228); border-color: rgba(249, 157, 49, 0.3); }
.cpd-pressure-card--teal   { background: rgb(233, 240, 244); border-color: rgba(83, 141, 169, 0.28); }
.cpd-pressure-card--pink   { background: rgb(246, 235, 240); border-color: rgba(175, 77, 118, 0.25); }

/* Header row — icon beside the title, same as feature-list cards */
.cpd-pressure-card__header {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-bottom: 0.75rem;
}

/* Bare colour-matched icon, no boxed background — matches
   .ce-feature-list__badge on the SEND page rather than the boxed
   .cpd-card-icon treatment used elsewhere on this page. */
.cpd-pressure-card .cpd-card-icon {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	font-size: 1.75rem;
	margin-bottom: 0;
	flex-shrink: 0;
}

.cpd-pressure-card--orange .cpd-card-icon { color: var(--ci-color-engage); }
.cpd-pressure-card--teal   .cpd-card-icon { color: var(--ci-color-innovate); }
.cpd-pressure-card--pink   .cpd-card-icon { color: var(--ci-color-develop); }

.cpd-pressure-card__title {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-heading);
	font-weight: 700;
	color: #1e2d3d;
	margin: 0;
	display: block;
}


.cpd-pressure-card__body {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-body);
	line-height: 1.65;
	color: #3a4a5a;
	margin: 0;
	display: block;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 4 — INTERACTIVE TOOLS
   ═══════════════════════════════════════════════════════════════════════════ */

.cpd-tools {
	background: #ffffff;
	padding: 5rem 0;
	position: relative;
	overflow: clip;
}

.cpd-tools::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;
}

.cpd-tools::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;
}

.cpd-tools .site-container {
	position: relative;
	z-index: 1;
}

.cpd-tools__title-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 0.6rem;
}

.cpd-tools__title-row .cpd-section__title {
	margin: 0;
	text-align: center;
}

.cpd-tools__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}

.cpd-tools__grid > .cpd-tool-card:last-child:nth-child(odd) {
	grid-column: 1 / -1;
	max-width: calc(50% - 0.75rem);
	margin-left: auto;
	margin-right: auto;
}

/* Same border/radius/shadow formula as .ce-feature-list__item (see
   feature-list.css / SEND page) — the site-wide reference for what a
   colour-tinted card on a light background should look like. */
.cpd-tool-card {
	background: var(--ci-color-light-bg);
	border-radius: 1.5rem;
	padding: 1.125rem 1.25rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0;
	position: relative;
	border: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 4px 20px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.2s ease;
}

.cpd-tool-card:hover {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 8px 28px rgba(0, 0, 0, 0.08);
}

.cpd-tool-card--orange { background: rgba(249, 157, 49, 0.13); border-color: rgba(249, 157, 49, 0.3); }
.cpd-tool-card--pink   { background: rgba(175, 77, 118, 0.11); border-color: rgba(175, 77, 118, 0.25); }
.cpd-tool-card--teal   { background: rgba(83, 141, 169, 0.13); border-color: rgba(83, 141, 169, 0.28); }
.cpd-tool-card--green  { background: rgba(113, 148, 126, 0.13); border-color: rgba(113, 148, 126, 0.28); }

.cpd-tool-card__badges {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
}

.cpd-badge {
	display: inline-flex;
	align-items: center;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 700;
	padding: 0.2rem 0.65rem;
	border-radius: 9999px;
}

.cpd-badge--coming-soon {
	background: rgba(30, 45, 61, 0.08);
	color: #692D46;
	border: 1px solid rgba(30, 45, 61, 0.2);
}

.cpd-badge--ai {
	background: rgba(175, 77, 118, 0.12);
	color: var(--ci-color-develop);
	border: 1px solid rgba(175, 77, 118, 0.3);
}

.cpd-tool-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.6rem;
}

.cpd-tool-card__title-group {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 1;
	min-width: 0;
}

.cpd-tool-card__title-group .cpd-card-icon {
	font-size: 1.75rem;
	margin-bottom: 0;
	flex-shrink: 0;
}

.cpd-tool-card__header .cpd-tags {
	margin-bottom: 0;
	justify-content: flex-end;
	flex-shrink: 0;
}

.cpd-tool-card__title {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-heading);
	font-weight: 700;
	color: #692D46;
	margin: 0;
	line-height: 1.3;
	display: block;
}

.cpd-tool-card__body {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-body);
	line-height: 1.65;
	color: #4a5a6a;
	margin: 0 0 0.875rem;
	display: block;
}

/* .ci-btn covers the coming-soon state too — it carries both classes. */
.cpd-tool-card .ci-btn {
	align-self: flex-start;
	margin-top: auto;
}

.cpd-tools .cpd-section__intro {
	max-width: 680px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/* ── Role filters (tools + downloads) ── */
.cpd-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 2rem;
}

.cpd-filter-btn {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 400;
	padding: 0.4rem 1.1rem;
	border-radius: 9999px;
	border: 1.5px solid #692D46;
	background: transparent;
	color: #692D46;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
	line-height: 1.4;
}

.cpd-filter-btn:hover,
.cpd-filter-btn.is-active {
	background: #692D46;
	color: #ffffff;
}

.cpd-downloads .cpd-filter-btn {
	border-color: rgba(255, 255, 255, 0.5);
	color: rgba(255, 255, 255, 0.85);
}

.cpd-downloads .cpd-filter-btn:hover,
.cpd-downloads .cpd-filter-btn.is-active {
	background: rgba(255, 255, 255, 0.2);
	border-color: #ffffff;
	color: #ffffff;
}

.cpd-tool-card.is-hidden,
.cpd-resource-card.is-hidden,
.cpd-editorial-card.is-hidden {
	display: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 5 — FREE DOWNLOADS
   ═══════════════════════════════════════════════════════════════════════════ */

.cpd-downloads {
	background: #253d47;
	padding: 5rem 0;
	position: relative;
	overflow: clip;
}

/* Same faint rotated-square decoration used on the equivalent SEND page
   navy section (see send.css .ce-send-we-help). */
.cpd-downloads::before {
	content: '';
	position: absolute;
	width: 450px;
	height: 450px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 2.75rem;
	transform: rotate(45deg);
	top: -80px;
	left: -90px;
	pointer-events: none;
	z-index: 0;
}

.cpd-downloads::after {
	content: '';
	position: absolute;
	width: 260px;
	height: 260px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 2rem;
	transform: rotate(45deg);
	top: 420px;
	left: 178px;
	pointer-events: none;
	z-index: 0;
}

.cpd-downloads .site-container {
	position: relative;
	z-index: 1;
}

.cpd-downloads__title-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 0.6rem;
}

.cpd-downloads .cpd-section__title {
	color: #fff;
	margin: 0;
	text-align: center;
}

.cpd-downloads .cpd-section__intro {
	text-align: center;
	color: rgba(255, 255, 255, 0.75);
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

.cpd-resource-card {
	position: relative;
	backdrop-filter: blur(20px) saturate(1.3);
	-webkit-backdrop-filter: blur(20px) saturate(1.3);
	border-radius: 1.5rem;
	padding: 1.375rem;
	display: flex;
	flex-direction: column;
	border: 1px solid transparent;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 4px 20px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.2s ease;
	overflow: clip;
}

.cpd-resource-card:hover {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 8px 28px rgba(0, 0, 0, 0.08);
}

/* Same opaque light-tint glass-card look used for feature-list cards
   elsewhere on the site (see feature-list.css / SEND page) — computed as
   each brand tint composited over white, since a translucent tint here
   would just darken/muddy against the navy section background. */
.cpd-resource-card--orange { background: rgb(254, 242, 228); border-color: rgba(249, 157, 49, 0.3); }
.cpd-resource-card--pink   { background: rgb(246, 235, 240); border-color: rgba(175, 77, 118, 0.25); }
.cpd-resource-card--teal   { background: rgb(233, 240, 244); border-color: rgba(83, 141, 169, 0.28); }

/* Header row — icon beside the title, same as feature-list cards */
.cpd-resource-card__header {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-bottom: 0.75rem;
}

/* Bare colour-matched icon, no boxed background — matches
   .ce-feature-list__badge on the SEND page rather than the boxed
   .cpd-card-icon treatment used elsewhere on this page. */
.cpd-resource-card .cpd-card-icon {
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	font-size: 1.75rem;
	margin-bottom: 0;
	flex-shrink: 0;
}

.cpd-resource-card--orange .cpd-card-icon { color: var(--ci-color-engage); }
.cpd-resource-card--pink   .cpd-card-icon { color: var(--ci-color-develop); }
.cpd-resource-card--teal   .cpd-card-icon { color: var(--ci-color-innovate); }

.cpd-resource-card__title {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-heading);
	font-weight: 700;
	color: #1e2d3d;
	margin: 0;
	line-height: 1.3;
	display: block;
}

.cpd-resource-card__body {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-body);
	line-height: 1.65;
	color: #3a4a5a;
	margin: 0 0 1.25rem;
	flex: 1;
	display: block;
}

.cpd-resource-card .ci-btn,
.cpd-resource-card .cpd-btn--outline-pink,
.cpd-resource-card .cpd-btn--outline-teal {
	align-self: flex-start;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 6 — VIDEO CPD
   ═══════════════════════════════════════════════════════════════════════════ */

.cpd-videos {
	background: #ffffff;
	padding: 5rem 0;
}

.cpd-video-card {
	border-radius: 0.75rem;
	border: 1px solid rgba(0, 0, 0, 0.08);
	overflow: clip;
	display: flex;
	flex-direction: column;
}

.cpd-video-thumb {
	background: #e5e7eb;
	height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cpd-video-thumb i {
	font-size: 3rem;
	color: var(--ci-color-develop);
	opacity: 0.6;
}

.cpd-video-card__body {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.cpd-video-card__title {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-heading);
	font-weight: 700;
	color: #692D46;
	margin: 0 0 0.5rem;
	line-height: 1.3;
}

.cpd-video-card__desc {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-body);
	line-height: 1.65;
	color: var(--ci-color-text-muted);
	margin: 0;
}

.cpd-videos__note {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	color: var(--ci-color-text-muted);
	text-align: center;
	margin: 2rem 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 7 — CPD PATHWAYS
   ═══════════════════════════════════════════════════════════════════════════ */

.cpd-pathways {
	background: #ffffff;
	padding: 5rem 0;
	position: relative;
	overflow: clip;
}

.cpd-pathways::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;
}

.cpd-pathways::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;
}

.cpd-pathways .site-container {
	position: relative;
	z-index: 1;
}

.cpd-pathways__title-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 0.6rem;
}

.cpd-pathways__title-row .cpd-section__title {
	margin: 0;
	text-align: center;
}

.cpd-pathways .cpd-section__intro {
	text-align: center;
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

.cpd-pathways__sub-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* One number governs every gap in this block: 1.5rem between the two
	   columns, 1.5rem between rows if it ever wraps, and 1.5rem above the row
	   as a whole. The row then sits the same distance below the full-width
	   card as its own two cards sit apart, which is what makes the group read
	   as one unit rather than two loose rows. */
	gap: 1.5rem;
	margin-top: 1.5rem;
}

/* The cards carry margin-top: 2rem for when they stack in normal flow. Inside
   this grid that is the grid's job, and because a grid container establishes
   its own formatting context the two margins do not collapse — they stacked to
   56px, which is what made this gap look wrong. */
.cpd-pathways__sub-grid > .cpd-pathway-card {
	margin-top: 0;
}

/* Same card treatment as .cpd-tool-card (CPD tools section) — this
   section's background is white too, so a plain translucent brand tint
   is correct here (unlike the navy sections elsewhere on this page,
   which need an opaque-over-white computed colour instead). */
.cpd-pathway-card {
	position: relative;
	border-radius: 1.5rem;
	padding: 1.125rem 1.25rem 1rem;
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 4px 20px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.2s ease;
	margin-top: 2rem;
}

.cpd-pathway-card:hover {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 8px 28px rgba(0, 0, 0, 0.08);
}

.cpd-pathway-card--wide {
	margin-top: 2rem;
}

.cpd-pathway-card--orange { background: rgba(249, 157, 49, 0.13); border-color: rgba(249, 157, 49, 0.3); }
.cpd-pathway-card--pink   { background: rgba(175, 77, 118, 0.11); border-color: rgba(175, 77, 118, 0.25); }
.cpd-pathway-card--teal   { background: rgba(83, 141, 169, 0.13); border-color: rgba(83, 141, 169, 0.28); }

.cpd-pathway-card__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.6rem;
}

.cpd-pathway-card__header .cpd-card-icon {
	font-size: 1.75rem;
	margin-bottom: 0;
	flex-shrink: 0;
}

.cpd-pathway-card__title {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-heading);
	font-weight: 700;
	color: #692D46;
	margin: 0;
	line-height: 1.3;
}

.cpd-pathway-card__body {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-body);
	line-height: 1.7;
	color: #4a5a6a;
	margin: 0 0 0.6rem;
}

.cpd-pathway-card__body:last-child {
	margin-bottom: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 8 — LIVE EVENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.cpd-events {
	background: #ffffff;
	padding: 5rem 0;
}

.cpd-event-card {
	border-radius: 1.5rem;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	backdrop-filter: blur(20px) saturate(1.3);
	-webkit-backdrop-filter: blur(20px) saturate(1.3);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 4px 20px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.2s ease;
}

.cpd-event-card:hover {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 8px 28px rgba(0, 0, 0, 0.08);
}

.cpd-event-card--orange { background: rgba(249, 157, 49, 0.13); border: 1px solid rgba(249, 157, 49, 0.3); }
.cpd-event-card--pink   { background: rgba(175, 77, 118, 0.11); border: 1px solid rgba(175, 77, 118, 0.25); }
.cpd-event-card--teal   { background: rgba(83, 141, 169, 0.13); border: 1px solid rgba(83, 141, 169, 0.28); }

.cpd-event-card__title {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-heading);
	font-weight: 700;
	color: #692D46;
	margin: 0 0 0.6rem;
	line-height: 1.3;
}

.cpd-event-card__body {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-body);
	line-height: 1.7;
	color: var(--ci-color-text-muted);
	margin: 0 0 1.25rem;
	flex: 1;
}

.cpd-event-card .ci-btn,
.cpd-event-card .cpd-btn--outline-teal,
.cpd-event-card .cpd-btn--outline-pink {
	align-self: flex-start;
	margin-top: auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 9 — COMMUNITY
   ═══════════════════════════════════════════════════════════════════════════ */

.cpd-community {
	background: var(--ci-color-light-bg);
	padding: 5rem 0;
}

.cpd-community-card {
	border-radius: 1.5rem;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	backdrop-filter: blur(20px) saturate(1.3);
	-webkit-backdrop-filter: blur(20px) saturate(1.3);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 4px 20px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.2s ease;
}

.cpd-community-card:hover {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 8px 28px rgba(0, 0, 0, 0.08);
}

.cpd-community-card--teal   { background: rgba(83, 141, 169, 0.13); border: 1px solid rgba(83, 141, 169, 0.28); }
.cpd-community-card--pink   { background: rgba(175, 77, 118, 0.11); border: 1px solid rgba(175, 77, 118, 0.25); }
.cpd-community-card--orange { background: rgba(249, 157, 49, 0.13); border: 1px solid rgba(249, 157, 49, 0.3); }

.cpd-community-card__title {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-heading);
	font-weight: 700;
	color: #692D46;
	margin: 0 0 0.6rem;
	line-height: 1.3;
}

.cpd-community-card__body {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-body);
	line-height: 1.7;
	color: var(--ci-color-text-muted);
	margin: 0 0 1.25rem;
	flex: 1;
}

.cpd-community-card .ci-btn {
	align-self: flex-start;
	margin-top: auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 10 — EDITORIAL AND POLICY TRACKER
   ═══════════════════════════════════════════════════════════════════════════ */

.cpd-editorial {
	background: #253d47;
	padding: 5rem 0;
}

.cpd-editorial__title-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 0.6rem;
}

.cpd-editorial .cpd-section__title {
	color: #fff;
	margin: 0;
	text-align: center;
}

.cpd-editorial .cpd-section__intro {
	text-align: center;
	color: rgba(255, 255, 255, 0.75);
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

.cpd-editorial .cpd-filter-btn {
	border-color: rgba(255, 255, 255, 0.5);
	color: rgba(255, 255, 255, 0.85);
}

.cpd-editorial .cpd-filter-btn:hover,
.cpd-editorial .cpd-filter-btn.is-active {
	background: rgba(255, 255, 255, 0.2);
	border-color: #ffffff;
	color: #ffffff;
}

.cpd-editorial__columns {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 3rem;
	align-items: start;
}

.cpd-editorial__articles {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.cpd-article {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.cpd-editorial__articles > .cpd-article:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.cpd-article__img {
	flex-shrink: 0;
	width: 120px;
	height: 80px;
	background: #e5e7eb;
	border-radius: 0.5rem;
}

.cpd-article__text {
	flex: 1;
}

.cpd-article__text .cpd-tags {
	margin-bottom: 0.4rem;
}

.cpd-article__title {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-heading);
	font-weight: 700;
	color: #692D46;
	margin: 0 0 0.4rem;
	line-height: 1.35;
}

.cpd-article__snippet {
	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 0 0.5rem;
}

.cpd-article__read {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 600;
	color: var(--ci-color-develop);
	cursor: default;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

/* Policy tracker panel */
.cpd-policy-panel {
	background: var(--ci-color-light-bg);
	border-radius: 0.75rem;
	padding: 1.75rem;
	border: 1px solid rgba(0, 0, 0, 0.07);
}

.cpd-policy-panel__icon {
	font-size: 2rem;
	color: var(--ci-color-innovate);
	margin-bottom: 0.75rem;
}

.cpd-policy-panel__title {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-heading);
	font-weight: 700;
	color: #692D46;
	margin: 0 0 0.5rem;
}

.cpd-policy-panel__intro {
	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 0 1.25rem;
}

.cpd-policy-list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.cpd-policy-list li {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.07);
	font-family: var(--ci-font-primary);
}

.cpd-policy-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.cpd-policy-list__date {
	font-size: var(--ci-text-utility);
	font-weight: 700;
	color: var(--ci-color-innovate);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.cpd-policy-list span {
	font-size: var(--ci-text-card-body);
	line-height: 1.5;
	color: var(--ci-color-text-muted);
}

.cpd-policy-panel .cpd-btn--outline-teal {
	display: inline-flex;
}

/* ── Editorial card grid ── */
.cpd-editorial__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
	align-items: start;
}

/* Chromeless tile matching .ce-blog-card (blog-archive.css) exactly — image
   first, category pill overlaid on it, no boxed background/border/shadow
   on the card itself. Was previously a frosted-glass "boxed" card with the
   category as plain text below the image; ported to match the blog archive
   card design as requested, not just its placeholder gradient. */
.cpd-editorial-card {
	position: relative;
	display: flex;
	flex-direction: column;
}

.cpd-editorial-card__img-wrap {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 1.25rem;
	overflow: hidden;
	background-color: #e8edf0;
	transition: opacity 0.2s ease;
}

.cpd-editorial-card:hover .cpd-editorial-card__img-wrap {
	opacity: 0.9;
}

/* Same diagonal-gradient placeholder as .ce-blog-card__img-placeholder —
   these are hardcoded article/webinar entries with no real featured image,
   so this is the site-standard "no image" treatment. */
.cpd-editorial-card__img {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #e8edf0 0%, #d4dce0 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cpd-editorial-card__img--webinar i {
	font-size: 3rem;
	color: var(--ci-color-develop);
	opacity: 0.65;
}

/* Category pill — pinned top-left over the image, same treatment as
   .ce-blog-card__cat. */
.cpd-editorial-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;
}

.cpd-editorial-card__body {
	padding: 0.85rem 0.1rem 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

/* wpautop injects a <p> before the <h3> — make it transparent to flex layout */
.cpd-editorial-card__body > p {
	display: contents;
}

/* Article/Webinar — kept as a small text label in the body, unlike the
   blog cards which have no equivalent "type" field. Colours here are
   white/muted-white rather than blog-card's navy/dark-grey, since this
   section (.cpd-editorial) has a dark navy background, not blog's white
   page — the blog card's own text colours would be near-invisible here. */
.cpd-editorial-card__type {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 700;
	color: rgba(255, 255, 255, 0.65);
	display: block;
}

.cpd-editorial-card__title,
.cpd-editorial-card .cpd-editorial-card__title {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-card-heading);
	font-weight: 700;
	color: #ffffff;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.35;
}

.cpd-editorial-card:hover .cpd-editorial-card__title {
	color: var(--ci-color-develop);
	transition: color 0.15s ease;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 11 — FINAL CTA
   ═══════════════════════════════════════════════════════════════════════════ */

.cpd-final-cta {
	background: #692D46;
	padding: 5rem 0;
}

.cpd-final-cta .cpd-eyebrow {
	color: var(--ci-color-engage);
}

.cpd-final-cta__inner {
	text-align: center;
	max-width: 680px;
	margin: 0 auto;
}

.cpd-final-cta__title {
	font-family: var(--ci-font-primary);
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 1rem;
	line-height: 1.2;
}

.cpd-final-cta__body {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.72);
	margin: 0 0 2rem;
}

.cpd-final-cta__btns {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 2.5rem;
}

.cpd-trust-indicators {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.cpd-trust-item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	color: rgba(255, 255, 255, 0.55);
}

.cpd-trust-item i {
	color: rgba(255, 255, 255, 0.4);
	font-size: 0.9rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tablet: below 900px */
@media (max-width: 900px) {

	/* Hero: stack columns */
	.cpd-hero__inner {
		grid-template-columns: 1fr;
	}

	.cpd-hero__right {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

	/* Role selector: 2x2 */
	.cpd-roles__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* ── Long-copy card grids go to a single column here ─────────────────────
	   Two columns at this width leaves each card about 359px, and the body
	   copy inside measures 36 characters a line at 820px — 40 at 900, 33 at
	   768, 26 at 601, against a comfortable minimum of 45. Stacked at 820 the
	   same copy measures about 70.

	   Three grids, chosen because their cards carry a paragraph:

	     pressures 3 cards    tools 6 cards    downloads 4 cards

	   Deliberately NOT here:
	     .cpd-editorial__grid   article cards — short titles and a date, they
	                            work as a grid and were asked to stay one
	     .cpd-pathways__grid    keeps its two columns below, as before
	     .cpd-roles__grid       short role buttons, not cards; 2x2 at every
	                            width is right for them */
	.cpd-grid--2col,
	.cpd-grid--3col,
	.cpd-tools__grid {
		grid-template-columns: 1fr;
	}

	/* Handed a whole tablet, the same copy overshoots the other way — 89
	   characters a line at 900px. Capping the paragraph rather than the card
	   keeps each tinted panel full width, so the section still reads as a
	   stack of cards rather than a column of text. Only the three stacked
	   above need it. */
	.cpd-pressure-card__body,
	.cpd-resource-card__body,
	.cpd-tool-card__body {
		max-width: 38rem;
	}

	/* Unchanged from before: these stay two-up at this width. */
	.cpd-pathways__grid,
	.cpd-editorial__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Editorial: stack */
	.cpd-editorial__columns {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	/* Tool cards: centred last card resets */
	.cpd-tools__grid > .cpd-tool-card:last-child:nth-child(odd) {
		grid-column: auto;
		max-width: none;
		margin: 0;
	}
}

/* Mobile: below 600px */
@media (max-width: 600px) {

	/* Hero stacks, stat cards single col */
	.cpd-hero {
		padding: 3rem 0;
	}

	.cpd-hero__right {
		grid-template-columns: 1fr;
	}

	/* Role selector: 2x2 on mobile too */
	.cpd-roles__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* All 2-col grids: single col */
	.cpd-grid--2col,
	.cpd-tools__grid,
	.cpd-grid--3col,
	.cpd-pathways__grid,
	.cpd-pathways__sub-grid,
	.cpd-editorial__grid {
		grid-template-columns: 1fr;
	}

	.cpd-tools__grid > .cpd-tool-card:last-child:nth-child(odd) {
		grid-column: auto;
		max-width: none;
		margin: 0;
	}

	/* Pressure cards: tighter */
	.cpd-pressure-card {
		flex-direction: column;
		gap: 0.75rem;
	}

	/* Filter pills removed on mobile — neither wrapping nor horizontal
	   scroll read well at this width. All cards show unfiltered
	   (the same as the default "All" state) instead. */
	.cpd-filter {
		display: none;
	}

	/* Trust indicators: stack */
	.cpd-trust-indicators {
		flex-direction: column;
		gap: 0.75rem;
	}

	/* Video note: stack */
	.cpd-videos__note {
		flex-direction: column;
	}

	/* General section padding */
	.cpd-pressures,
	.cpd-tools,
	.cpd-downloads,
	.cpd-videos,
	.cpd-pathways,
	.cpd-events,
	.cpd-community,
	.cpd-editorial,
	.cpd-final-cta {
		padding: 3rem 0;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — icon-and-heading rows

   Every section header on this page is the same shape: an icon badge, then an
   <h2>, the pair centred together as a unit. Most of the headings also carry
   an explicit text-align: center, which on one line is invisible and on three
   is not — a centred, ragged-both-sides block sitting beside a left-hand icon
   reads as misaligned rather than centred. On a phone they all wrap.

   Left-aligning the text keeps the icon-plus-heading pair centred as a unit
   while the words themselves line up under each other, which is what
   .ce-ofsted-framework__heading was already doing and what made it the one
   that looked right.

   Desktop is untouched: every one of these is a single line up there.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

	.cpd-pressures .cpd-section__title,
	.cpd-tools__title-row .cpd-section__title,
	.cpd-downloads .cpd-section__title,
	.cpd-pathways__title-row .cpd-section__title,
	.cpd-editorial .cpd-section__title {
		text-align: left;
	}

	/* Tags below the title, as on .cpd-resource-card.

	   The tool card puts the icon, the title and the tags on one flex row.
	   With room that reads as a header line; without it the tags cannot
	   shrink any further, so they hold their width and squeeze the title into
	   a two- or three-line column beside them — and then, being vertically
	   centred, they sit ON TOP of the wrapped title rather than beside it.

	   Stacking the row is the same arrangement the resource cards use, where
	   the tags have always been on their own line under the header. */
	.cpd-tool-card__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.6rem;
	}

	.cpd-tool-card__header .cpd-tags {
		justify-content: flex-start;
		flex-shrink: 1;
	}
}