/* EWB Courses — single-course page styles.
 * Conditionally loaded on is_singular('course').
 * Mobile-first. All colours via CSS variables — no hex literals.
 */

/* Effect utilities (.glass, .aurora, .iridescent, .grain-overlay) are now in assets/css/effects.css */

/* ============================================================
   COURSE HERO (Section 1)
   ============================================================ */

.course-hero {
	position: relative;
	overflow: hidden;
	background: var(--navy-deep);
	padding-block: clamp(2.5rem, 8vw, 5rem);
	isolation: isolate;
}

.course-hero__blob {
	position: absolute;
	top: -40px;
	right: -60px;
	width: clamp(180px, 28vw, 320px);
	height: auto;
	z-index: 1;
	opacity: 0.85;
}

.course-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	gap: var(--space-7);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 1024px) {
	.course-hero__inner {
		grid-template-columns: 6fr 4fr;
		gap: var(--space-8);
	}
}

.course-hero__kicker { color: var(--cyan); }

.course-hero__title {
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	font-size: clamp(2.25rem, 5vw, 4rem);
	line-height: var(--lh-tight);
	margin: 0 0 var(--space-4);
}

.course-hero__lede {
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	color: var(--color-text-muted);
	max-width: 56ch;
	margin: 0 0 var(--space-6);
}

.course-hero__pills {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
	margin: 0 0 var(--space-6);
	padding: 0;
}

@media (min-width: 640px) {
	.course-hero__pills { grid-template-columns: repeat(4, 1fr); }
}

.course-pill {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
}

.course-pill__label {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.course-pill__value {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-body);
	color: var(--white);
}

.course-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

/* Right glass card with next-batch info + lead form */
.course-hero__card {
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.course-hero__card-title {
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	margin: var(--space-2) 0 0;
	color: var(--white);
}

.course-hero__card-time {
	color: var(--cyan);
	font-weight: var(--fw-semibold);
	margin: 0;
}

.course-hero__card-seats {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	margin: 0 0 var(--space-3);
}

.course-hero__card-fallback {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	margin: 0 0 var(--space-3);
}

/* Category-tinted aurora moods. Default mix is balanced. */
.course-hero__bg--cybersecurity .aurora__blob--cyan { opacity: 0.7; }
.course-hero__bg--cybersecurity .aurora__blob--lime { opacity: 0.15; }

.course-hero__bg--cloud .aurora__blob--cyan { opacity: 0.55; }
.course-hero__bg--cloud .aurora__blob--lime { opacity: 0.4; }

.course-hero__bg--cloud-sre .aurora__blob--cyan { opacity: 0.5; }
.course-hero__bg--cloud-sre .aurora__blob--lime { opacity: 0.5; }

.course-hero__bg--networking .aurora__blob--cyan { opacity: 0.65; }
.course-hero__bg--networking .aurora__blob--lime { opacity: 0.2; }

.course-hero__bg--marketing .aurora__blob--cyan { opacity: 0.25; }
.course-hero__bg--marketing .aurora__blob--lime { opacity: 0.6; }

/* ============================================================
   OUTCOMES (Section 2)
   ============================================================ */

.course-outcomes { position: relative; overflow: hidden; }

.course-outcomes__grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
	padding: 0;
}

@media (min-width: 768px) {
	.course-outcomes--four .course-outcomes__grid,
	.course-outcomes--row .course-outcomes__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.course-outcomes--bento .course-outcomes__grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.course-outcomes--bento .course-outcomes__grid > li:first-child {
		grid-column: span 2;
	}
}

.course-outcome {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-5);
	border-radius: var(--radius-lg);
	color: var(--color-text-dark);
}

.course-outcome__check {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-pill);
	background: var(--cyan);
	color: var(--navy-deep);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.course-outcomes__grid > li:nth-child(even) .course-outcome__check {
	background: var(--lime);
}

.course-outcome__text {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
}

/* ============================================================
   CURRICULUM (Section 3)
   ============================================================ */

.course-curriculum { background: var(--navy-deep); }

.course-curriculum__list { gap: var(--space-3); }

.course-module {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
}

.course-module__trigger {
	padding: var(--space-5);
	gap: var(--space-4);
}

.course-module__head {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	min-width: 0;
}

.course-module__num {
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	color: var(--cyan);
	font-size: 1.5rem;
	flex: 0 0 auto;
}

.course-module__title {
	color: var(--white);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: 1.0625rem;
	text-align: start;
}

.course-module__items {
	margin: 0;
	padding-inline-start: 1.25rem;
	color: var(--color-text-muted);
	display: grid;
	gap: var(--space-2);
}

.course-module__items li { line-height: var(--lh-snug); }

.course-module__summary {
	margin: 0;
	color: var(--color-text-muted);
}

/* ============================================================
   WHO + PREREQUISITES (Section 4)
   ============================================================ */

.course-who { position: relative; overflow: hidden; }

.course-who__grid {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.course-who__grid { grid-template-columns: 1fr 1fr; }
}

.course-who__card {
	padding: var(--space-6);
	color: var(--color-text-dark);
}

.course-who__title {
	margin: var(--space-2) 0 var(--space-4);
	color: var(--color-text-dark);
	font-size: var(--fs-h3);
}

.course-who__list {
	margin: 0;
	padding-inline-start: 1.25rem;
	display: grid;
	gap: var(--space-2);
	line-height: var(--lh-snug);
}

.course-who__card p { margin: 0; }

/* ============================================================
   DELIVERY (Section 5) — 3 × 2 bento
   ============================================================ */

.course-delivery { background: var(--navy-deep); }

.course-delivery__grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
	padding: 0;
}

@media (min-width: 640px) {
	.course-delivery__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.course-delivery__grid { grid-template-columns: repeat(3, 1fr); }
}

.course-delivery__tile {
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.course-delivery__icon {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-md);
	background: rgba(0, 184, 255, 0.12);
	color: var(--cyan);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(0, 184, 255, 0.25);
}

.course-delivery__tile[data-tone="lime"] .course-delivery__icon {
	background: rgba(166, 255, 0, 0.14);
	color: var(--lime);
	border-color: rgba(166, 255, 0, 0.3);
}

.course-delivery__title {
	margin: 0;
	font-size: var(--fs-h4);
	color: var(--white);
}

.course-delivery__desc {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--fs-small);
}

/* ============================================================
   INSTRUCTOR (Section 6)
   ============================================================ */

.course-instructor {
	position: relative;
	background: var(--navy-deep);
	overflow: hidden;
}

.course-instructor__blob {
	position: absolute;
	left: -50px;
	bottom: -50px;
	width: clamp(160px, 24vw, 240px);
	height: auto;
	z-index: 0;
	opacity: 0.65;
}

.course-instructor__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--space-7);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 1024px) {
	.course-instructor__inner { grid-template-columns: 4fr 6fr; }
}

.course-instructor__photo {
	max-width: 320px;
	margin-inline: auto;
	width: 100%;
}

.course-instructor__photo-frame {
	aspect-ratio: 5 / 6;
	border-radius: var(--radius-lg);
	overflow: hidden;
	padding: 0;
}

.course-instructor__photo-frame svg { display: block; width: 100%; height: 100%; }

.course-instructor__name {
	margin: var(--space-2) 0 var(--space-4);
	font-size: var(--fs-h2);
}

.course-instructor__bio p {
	color: var(--color-text-muted);
	max-width: 60ch;
}

.course-instructor__creds {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
	margin: var(--space-5) 0 0;
}

@media (min-width: 640px) {
	.course-instructor__creds { grid-template-columns: repeat(4, 1fr); }
}

.course-instructor__cred {
	padding: var(--space-3) var(--space-4);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.course-instructor__cred strong {
	font-family: var(--font-display);
	color: var(--cyan);
	font-weight: var(--fw-black);
	font-size: 1.0625rem;
	line-height: 1;
}

.course-instructor__cred span {
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
}

/* ============================================================
   TESTIMONIALS (Section 7)
   ============================================================ */

.course-testimonials__grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
	padding: 0;
}

@media (min-width: 768px) {
	.course-testimonials__grid { grid-template-columns: repeat(3, 1fr); }
}

.course-testimonial { color: var(--color-text); }

/* ============================================================
   FAQ (Section 8)
   ============================================================ */

.course-faq { position: relative; overflow: hidden; }

.course-faq__list { gap: var(--space-2); }

.course-faq__item {
	background: var(--white);
	border-color: rgba(31, 35, 40, 0.08);
}

.course-faq__item .faq__trigger { color: var(--color-text-dark); }
.course-faq__item .faq__trigger:hover { color: var(--navy-deep); }
.course-faq__item .faq__panel { color: var(--color-text-dark); opacity: 0.8; }

/* ============================================================
   RELATED COURSES (Section 9)
   ============================================================ */

.course-related { background: var(--navy-deep); }

.course-related__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--space-5);
	flex-wrap: wrap;
	text-align: start;
}

.course-related__all {
	color: var(--cyan);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-small);
	white-space: nowrap;
}

.course-related__grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
	padding: 0;
}

@media (min-width: 768px) {
	.course-related__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   FINAL CTA (Section 10)
   ============================================================ */

.course-cta {
	position: relative;
	overflow: hidden;
	background: var(--navy-deep);
	padding-block: clamp(3rem, 8vw, 5rem);
	text-align: center;
	isolation: isolate;
}

.course-cta__blob {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: clamp(200px, 30vw, 320px);
	z-index: 1;
	opacity: 0.5;
}

.course-cta__inner {
	position: relative;
	z-index: 2;
	max-width: 720px;
	margin-inline: auto;
}

.course-cta__title {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	margin: 0 0 var(--space-3);
}

.course-cta__lede {
	color: var(--color-text-muted);
	margin: 0 0 var(--space-5);
	font-size: 1.0625rem;
}

/* ============================================================
   STICKY MOBILE CTA
   ============================================================ */

.course-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--z-header);
	background: var(--navy-light);
	border-top: 1px solid var(--color-border-strong);
	padding: var(--space-3) var(--container-px);
	transform: translateY(100%);
	transition: transform var(--dur) var(--ease);
	display: none;
}

.course-sticky-cta.is-visible {
	transform: translateY(0);
}

.course-sticky-cta__inner {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	justify-content: space-between;
	max-width: var(--container-max);
	margin-inline: auto;
}

.course-sticky-cta__copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.course-sticky-cta__hint {
	font-size: var(--fs-xs);
	color: var(--lime);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.course-sticky-cta__title {
	color: var(--white);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-small);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 60vw;
}

@media (max-width: 767px) {
	.course-sticky-cta { display: block; }
	body.has-course-sticky main { padding-bottom: 80px; }
}