/* CPD Course single page styles (compiled from cpd-course-single.scss, keep both in sync) */
/* Depends on: cpd-courses.css (.cpd-badge* classes, reused in the hero) and
   educational.discount.css (the site's .panel/.button/.d-flex utility framework,
   reused here for spacing, typography and buttons — see other page-templates). */

:root {
	--cpd-purple: #4B3D8F;
	--cpd-purple-dark: #3C3072;
}

.cpd-section {
	padding: 60px 0;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.cpd-hero {
	position: relative;
	background: var(--cpd-purple);
	color: #FFFFFF;
	padding: 60px 0 110px;
	overflow: hidden;
}

.cpd-hero-category {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #C9C3EA;
	margin-bottom: 10px;
}

.cpd-hero-title {
	font-size: 40px;
	line-height: 1.2;
	font-weight: 700;
	color: #FFFFFF;
	margin: 0 0 16px;
}

.cpd-hero-desc {
	font-size: 16px;
	line-height: 1.6;
	color: #E3E0F4;
	margin: 0 0 24px;
	max-width: 520px;
}

.cpd-hero-actions .button {
	white-space: nowrap;
}

.button.cpd-btn-outline {
	background: transparent;
	color: var(--cpd-purple);
	border: 2px solid var(--cpd-purple);
	padding: 14px 30px;
}

.cpd-hero .button.cpd-btn-outline {
	color: #FFFFFF;
	border-color: #FFFFFF;
}

.cpd-hero-image {
	background: #1F1A3D;
	border-radius: 16px;
	padding: 10px;
	max-width: 340px;
}

.cpd-hero-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 10px;
}

.cpd-hero-stats {
	margin-top: 16px;
}

.cpd-hero-stat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #D8D4F0;
}

.cpd-hero-stat svg {
	flex-shrink: 0;
	opacity: 0.85;
}

/* Wave dividers — percentage-based clip-path so they scale full-bleed. */
.cpd-wave {
	position: absolute;
	left: 0;
	width: 100%;
	height: 70px;
	clip-path: polygon(
		0% 60%, 8% 30%, 17% 55%, 25% 15%, 33% 50%, 42% 10%,
		50% 45%, 58% 15%, 67% 50%, 75% 20%, 83% 55%, 92% 25%,
		100% 50%, 100% 100%, 0% 100%
	);
}

.cpd-wave-to-white {
	bottom: -1px;
	background: #FFFFFF;
}

.cpd-wave-to-purple {
	top: -1px;
	background: #EBF7FD;
	transform: scaleY(-1);
}

/* ── Law & Legislation ────────────────────────────────────────────────── */

.cpd-law-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.cpd-law-item {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #FBEFE0;
	border-radius: 12px;
	padding: 16px 20px;
	font-size: 15px;
	color: #434A4F;
}

.cpd-law-check {
	flex-shrink: 0;
}

@media (max-width: 768px) {
	.cpd-law-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Course Overview ──────────────────────────────────────────────────── */

.cpd-overview-image {
	max-width: 100%;
	max-height: 320px;
}

/* ── Topics Covered ───────────────────────────────────────────────────── */

.cpd-topics-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.cpd-topic-card {
	display: flex;
	gap: 16px;
	background: #FFFFFF;
	border: 1px solid #E7E9EE;
	border-radius: 16px;
	padding: 20px;
}

.cpd-topic-number {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #0168A5;
	color: #FFFFFF;
	font-weight: 700;
	font-size: 14px;
}

.cpd-topic-title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: #004974;
}

.cpd-topic-desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #555666;
}

@media (max-width: 768px) {
	.cpd-topics-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Trust strip ──────────────────────────────────────────────────────── */

.cpd-trust-badge {
	font-family: 'Mikado', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: #9AA1A8;
	text-transform: lowercase;
}

.cpd-trust-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #F4FAED;
	color: #4C7A2A;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 999px;
}

/* ── Contact CTA ──────────────────────────────────────────────────────── */

.cpd-cta-section {
	position: relative;
	background: var(--cpd-purple);
	color: #FFFFFF;
	padding-top: 90px;
}

.cpd-cta-panel a:not(.button) {
	color: #FFFFFF;
}

.cpd-cta-muted {
	color: #D8D4F0;
	font-size: 13px;
}

.cpd-cta-link {
	text-decoration: underline;
}

@media (max-width: 600px) {
	.cpd-hero-title {
		font-size: 28px;
	}
	.cpd-hero {
		padding-bottom: 90px;
	}
	.cpd-cta-section {
		padding-top: 70px;
	}
}