/* CoreCave editorial — course-page page CSS. Wave 3 T3.3.
 * Body class verified via curl /?p=6159 → `single single-courses`. CPT
 * slug is `courses`. single-course kept as safety belt; no-op when absent.
 * Template tutor/content-single-course-01.php is a full CoreCave override:
 * selectors target `cc-*` markup the override actually emits — zero dead.
 * 8 components: baseline / shell / hero+frame / instructor inline /
 * benefits / curriculum (details+summary) / price / CTAs. Sale price +
 * meta chips deferred (markup absent — would be dead code under §3.2).
 * Specificity scoped under `.cc-course-page` to defeat 0,2,0 theme rules.
 */

/* 1. Page baseline ----------------------------------------- */
body.single-courses,
body.single-course {
	background: var(--cc-ed-bg);
	color: var(--cc-ed-ink);
}

/* 2. Shell + layout rhythm --------------------------------- */
.cc-course-page {
	color: var(--cc-ed-ink);
}

.cc-course-shell__top {
	padding-block: var(--cc-ed-sp-fluid-section);
	background: var(--cc-ed-bg);
	border-block-end: 1px solid var(--cc-ed-paper-rule-soft);
}

.cc-course-shell__body {
	padding-block: var(--cc-ed-sp-fluid-section);
}

.cc-course-shell .container {
	max-inline-size: var(--cc-ed-w-wide);
}

.cc-course-main {
	display: flex;
	flex-direction: column;
	gap: var(--cc-ed-sp-7);
}

.cc-course-sidebar {
	position: sticky;
	inset-block-start: var(--cc-ed-sp-7);
	display: flex;
	flex-direction: column;
	gap: var(--cc-ed-sp-5);
	padding: var(--cc-ed-sp-card-pad-y) var(--cc-ed-sp-card-pad-x);
	background: var(--cc-ed-bg-tint);
	border: 1px solid var(--cc-ed-paper-rule);
	border-radius: var(--cc-ed-radius-md);
	box-shadow: var(--cc-ed-shadow-card);
}

/* 3. Hero — title + preview frame -------------------------- */
.cc-course-hero {
	display: flex;
	flex-direction: column;
	gap: var(--cc-ed-sp-5);
	max-inline-size: var(--cc-ed-w-wide);
	margin-inline: auto;
}

.cc-course-page .cc-course-hero__title {
	font-family: var(--cc-font-display);
	font-size: var(--cc-fs-display);
	font-weight: 900;
	line-height: var(--cc-lh-display);
	letter-spacing: var(--cc-tracking-tight);
	color: var(--cc-ed-ink);
	margin-block: 0;
}

/* Cream paper frame around the Bunny preview iframe. */
.cc-course-preview-frame {
	position: relative;
	inline-size: 100%;
	max-inline-size: var(--cc-ed-w-wide);
	margin-inline: auto;
	padding: var(--cc-ed-sp-2);
	background: var(--cc-ed-bg-tint);
	border: 8px solid var(--cc-ed-paper-rule);
	border-radius: var(--cc-ed-radius-md);
	box-shadow: var(--cc-ed-shadow-card);
	overflow: hidden;
}

.cc-course-preview-frame iframe {
	display: block;
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	block-size: auto;
	border: 0;
	border-radius: var(--cc-ed-radius-sm);
	background: var(--cc-ed-ink);
}

/* 4. Instructor inline-emphasis card ----------------------- */
.cc-course-hero .cc-teacher-card--inline {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-ed-sp-4);
	padding: var(--cc-ed-sp-3) var(--cc-ed-sp-4);
	background: var(--cc-ed-bg-tint);
	border: 1px solid var(--cc-ed-paper-rule);
	border-radius: var(--cc-ed-radius-md);
	color: var(--cc-ed-ink);
	text-decoration: none;
	inline-size: fit-content;
	transition: box-shadow var(--cc-ed-dur-mid) var(--cc-ed-ease),
		border-color var(--cc-ed-dur-mid) var(--cc-ed-ease);
}

.cc-course-hero .cc-teacher-card--inline:hover {
	border-color: var(--cc-ed-saffron);
	box-shadow: var(--cc-ed-shadow-hover);
}

.cc-course-hero .cc-teacher-card--inline:focus-visible {
	outline: 0;
	box-shadow: var(--cc-ed-shadow-focus);
}

.cc-teacher-card--inline .cc-teacher-card__avatar {
	inline-size: 80px;
	block-size: 80px;
	border-radius: var(--cc-ed-radius-md);
	object-fit: cover;
	flex-shrink: 0;
}

.cc-teacher-card--inline .cc-teacher-card__meta {
	display: flex;
	flex-direction: column;
	gap: var(--cc-ed-sp-1);
	min-inline-size: 0;
}

.cc-teacher-card--inline .cc-teacher-card__label {
	font-family: var(--cc-font-body);
	font-size: var(--cc-fs-sm);
	font-weight: 700;
	letter-spacing: var(--cc-tracking-eyebrow);
	color: var(--cc-ed-saffron);
	text-transform: uppercase;
}

.cc-teacher-card--inline .cc-teacher-card__name {
	font-family: var(--cc-font-display);
	font-size: var(--cc-fs-h3);
	font-weight: 800;
	line-height: var(--cc-lh-tight);
	color: var(--cc-ed-ink);
}

.cc-teacher-card--inline:hover .cc-teacher-card__name {
	text-decoration: underline;
	text-decoration-color: var(--cc-ed-saffron);
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}

/* 5. Course benefits (what-you-learn) ---------------------- */
.cc-course-benefits {
	max-inline-size: var(--cc-ed-w-content);
	padding-block: var(--cc-ed-sp-5);
}

.cc-course-page .cc-course-benefits__title {
	font-family: var(--cc-font-display);
	font-size: var(--cc-fs-h2);
	font-weight: 800;
	color: var(--cc-ed-ink);
	margin-block-end: var(--cc-ed-sp-5);
}

.cc-course-benefits__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--cc-ed-sp-3) var(--cc-ed-sp-5);
}

.cc-course-benefits__item {
	position: relative;
	padding-block: var(--cc-ed-sp-3);
	padding-inline-start: var(--cc-ed-sp-5);
	font-family: var(--cc-font-body);
	font-size: var(--cc-fs-lead);
	line-height: var(--cc-lh-loose);
	color: var(--cc-ed-ink-soft);
	border-block-end: 1px solid var(--cc-ed-paper-rule-soft);
}

.cc-course-benefits__item::before {
	content: "✓";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: var(--cc-ed-sp-3);
	color: var(--cc-ed-saffron);
	font-weight: 900;
}

/* 6. Curriculum — native details/summary accordion --------- */
.cc-curriculum {
	max-inline-size: var(--cc-ed-w-content);
	padding-block: var(--cc-ed-sp-5);
}

.cc-course-page .cc-curriculum__title {
	font-family: var(--cc-font-display);
	font-size: var(--cc-fs-h2);
	font-weight: 800;
	color: var(--cc-ed-ink);
	margin-block-end: var(--cc-ed-sp-5);
}

.cc-curriculum__topic {
	border-block-end: 1px solid var(--cc-ed-paper-rule);
	padding-block: var(--cc-ed-sp-3);
}

.cc-curriculum__topic:first-of-type {
	border-block-start: 1px solid var(--cc-ed-paper-rule);
}

.cc-curriculum__topic-title {
	list-style: none;
	cursor: pointer;
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--cc-ed-sp-3);
	padding-block: var(--cc-ed-sp-3);
	padding-inline-end: var(--cc-ed-sp-7);
	font-family: var(--cc-font-display);
	font-size: var(--cc-fs-h3);
	font-weight: 800;
	line-height: var(--cc-lh-tight);
	color: var(--cc-ed-ink);
}

.cc-curriculum__topic-title::-webkit-details-marker {
	display: none;
}

/* Chevron — two 1px ink lines via CSS wedge. */
.cc-curriculum__topic-title::after {
	content: "";
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: 50%;
	inline-size: 12px;
	block-size: 12px;
	border-inline-end: 1px solid var(--cc-ed-ink);
	border-block-end: 1px solid var(--cc-ed-ink);
	transform: translateY(-75%) rotate(45deg);
	transition: transform var(--cc-ed-dur-mid) var(--cc-ed-ease);
}

.cc-curriculum__topic[open] > .cc-curriculum__topic-title::after {
	transform: translateY(-25%) rotate(-135deg);
}

/* Active topic — saffron underline beneath the title row. */
.cc-curriculum__topic[open] > .cc-curriculum__topic-title {
	color: var(--cc-ed-ink);
	box-shadow: inset 0 -2px 0 0 var(--cc-ed-saffron);
}

.cc-curriculum__lessons {
	list-style: none;
	margin: 0;
	padding-block-start: var(--cc-ed-sp-2);
	padding-inline-start: 0;
}

.cc-curriculum__lesson {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-ed-sp-3);
	padding-block: var(--cc-ed-sp-3);
	padding-inline: var(--cc-ed-sp-4);
	border-block-end: 1px solid var(--cc-ed-paper-rule-soft);
	font-family: var(--cc-font-body);
	font-size: var(--cc-fs-body);
	color: var(--cc-ed-ink-soft);
}

.cc-curriculum__lesson:last-child {
	border-block-end: 0;
}

.cc-curriculum__lesson-title {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.cc-curriculum__lesson-badges {
	flex: 0 0 auto;
	display: inline-flex;
	gap: var(--cc-ed-sp-2);
	align-items: center;
	margin-inline-start: auto;
}

/* Replay + free-sample chips — paper-pill style. */
.cc-curriculum__lesson .cc-replay-tag,
.cc-curriculum__lesson .cc-free-sample-badge {
	font-family: var(--cc-font-body);
	font-size: var(--cc-fs-xs);
	font-weight: 700;
	letter-spacing: var(--cc-tracking-eyebrow);
	text-transform: uppercase;
	padding-block: var(--cc-ed-sp-1);
	padding-inline: var(--cc-ed-sp-3);
	border-radius: var(--cc-ed-radius-pill);
	border: 1px solid var(--cc-ed-paper-rule);
	color: var(--cc-ed-muted);
	background: var(--cc-ed-bg-tint);
}

.cc-curriculum__lesson .cc-free-sample-badge {
	color: var(--cc-ed-saffron);
	border-color: var(--cc-ed-saffron);
}

/* 7. Sidebar price block (oversized editorial) ------------- */
.cc-course-price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--cc-ed-sp-2);
}

.cc-course-price__amount {
	display: inline-flex;
	align-items: baseline;
	gap: var(--cc-ed-sp-3);
	font-family: var(--cc-font-display);
	color: var(--cc-ed-ink);
}

/* Template wraps numeral in <bdi class="cc-num">. .cc-stat-numeral is not
 * applied; replicate tabular-numeral typography scaled for sidebar fit
 * (col-lg-4 ≈ 280-320px at desktop). */
.cc-course-price__amount .cc-num,
.cc-course-price__amount bdi {
	font-family: var(--cc-font-display);
	font-size: clamp(48px, 6vw, 88px);
	font-weight: 900;
	line-height: var(--cc-lh-display);
	letter-spacing: var(--cc-tracking-tight);
	font-feature-settings: "lnum", "tnum";
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--cc-ed-ink);
	unicode-bidi: isolate;
}

.cc-course-price__unit {
	font-family: var(--cc-font-body);
	font-size: var(--cc-fs-sm);
	font-weight: 700;
	letter-spacing: var(--cc-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--cc-ed-saffron);
}

.cc-course-price__amount--free {
	font-family: var(--cc-font-display);
	font-size: var(--cc-fs-h2);
	font-weight: 900;
	color: var(--cc-ed-success);
}

/* 8. CTAs — saffron primary + saffron-ghost ---------------- */
.cc-course-cta {
	display: flex;
	flex-direction: column;
	gap: var(--cc-ed-sp-3);
}

.cc-course-page .cc-course-cta__btn,
.cc-course-page a.cc-course-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cc-ed-sp-2);
	padding-block: var(--cc-ed-sp-4);
	padding-inline: var(--cc-ed-sp-6);
	font-family: var(--cc-font-display);
	font-size: var(--cc-fs-h4);
	font-weight: 800;
	line-height: 1;
	letter-spacing: var(--cc-tracking-tight);
	border-radius: var(--cc-ed-radius-md);
	background: var(--cc-ed-saffron);
	color: var(--cc-ed-bg);
	border: 1px solid var(--cc-ed-saffron);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--cc-ed-dur-mid) var(--cc-ed-ease),
		border-color var(--cc-ed-dur-mid) var(--cc-ed-ease),
		box-shadow var(--cc-ed-dur-mid) var(--cc-ed-ease);
}

.cc-course-page .cc-course-cta__btn:hover,
.cc-course-page a.cc-course-cta__btn:hover {
	background: var(--cc-ed-saffron-warm);
	border-color: var(--cc-ed-saffron-warm);
	box-shadow: var(--cc-ed-shadow-hover);
}

.cc-course-page .cc-course-cta__btn:focus-visible {
	outline: 0;
	box-shadow: var(--cc-ed-shadow-focus);
}

.cc-course-page .cc-course-cta__btn--ghost,
.cc-course-page a.cc-course-cta__btn--ghost {
	background: transparent;
	color: var(--cc-ed-saffron);
	border-color: var(--cc-ed-saffron);
}

.cc-course-page .cc-course-cta__btn--ghost:hover,
.cc-course-page a.cc-course-cta__btn--ghost:hover {
	background: var(--cc-ed-saffron);
	color: var(--cc-ed-bg);
}

.cc-valu-badge-region {
	padding-block-end: var(--cc-ed-sp-5);
}

/* Responsive — stack at 768; full-bleed iframe at 480. */
@media (max-width: 768px) {
	.cc-course-sidebar {
		position: static;
		inset-block-start: auto;
		margin-block-start: var(--cc-ed-sp-6);
	}

	.cc-course-shell__top,
	.cc-course-shell__body {
		padding-block: var(--cc-ed-sp-6);
	}

	.cc-course-hero {
		gap: var(--cc-ed-sp-4);
	}

	.cc-course-benefits__list {
		grid-template-columns: 1fr;
	}

	.cc-curriculum__topic-title {
		font-size: var(--cc-fs-h4);
	}
}

@media (max-width: 480px) {
	.cc-course-preview-frame {
		inline-size: 100vw;
		max-inline-size: 100vw;
		margin-inline-start: calc(50% - 50vw);
		margin-inline-end: calc(50% - 50vw);
		border-width: 4px;
		border-radius: 0;
	}

	.cc-course-price__amount .cc-num,
	.cc-course-price__amount bdi {
		font-size: clamp(40px, 12vw, 64px);
	}

	.cc-curriculum__lesson {
		flex-wrap: wrap;
		gap: var(--cc-ed-sp-2);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-curriculum__topic-title::after,
	.cc-course-cta__btn,
	.cc-teacher-card--inline {
		transition: none;
	}
}