/* ==========================================================
   Spirit Talk Lessons – front-end styles
   All values below are defaults; every one can be overridden
   from the Elementor Style tab.
   ========================================================== */

:root {
	--st-purple: #7c4dff;
	--st-purple-dark: #6a3fe0;
	--st-purple-deep: #6b3fb8;
	--st-lavender: #efe8ff;
	--st-lavender-2: #f1e8fb;
	--st-ink: #1b1530;
	--st-text: #5f5a72;
	--st-muted: #7b7690;
	--st-line: #ece6f5;
	--st-cream: #faf7f3;
	--st-night: #120c26;
	--st-serif: "Source Serif 4", "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--st-display: "Cormorant Garamond", "Source Serif 4", Georgia, serif;
	--st-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.st-hero *, .st-grid *, .st-path *, .st-single * { box-sizing: border-box; }

.st-arrow { flex: 0 0 auto; transition: transform .25s ease; }

.st-empty {
	padding: 24px;
	border: 1px dashed #c9bdf0;
	border-radius: 12px;
	background: #faf8ff;
	color: #5f5a72;
	font: 14px/1.5 var(--st-sans);
	text-align: center;
}

/* ---------- Badge ---------- */
.st-badge {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--st-lavender);
	color: var(--st-purple);
	font: 600 10px/1.2 var(--st-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 12px;
}
.st-badge--dark {
	background: rgba(124, 77, 255, .35);
	border: 1px solid rgba(190, 170, 255, .35);
	color: #fff;
	backdrop-filter: blur(4px);
}

/* ---------- Button ---------- */
.st-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 14px;
	background: var(--st-purple);
	color: #fff !important;
	font: 600 15px/1 var(--st-sans);
	text-decoration: none !important;
	box-shadow: 0 10px 30px -10px rgba(124, 77, 255, .7);
	transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.st-btn:hover { background: var(--st-purple-dark); transform: translateY(-2px); }
.st-btn:hover .st-arrow { transform: translateX(3px); }

/* ==========================================================
   HERO
   ========================================================== */
.st-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 440px;
	padding: 56px 60px;
	border-radius: 18px;
	overflow: hidden;
	background-color: var(--st-night);
	isolation: isolate;
}
.st-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	z-index: -2;
	max-width: none;
}
.st-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(14, 9, 34, .94) 0%, rgba(14, 9, 34, .75) 38%, rgba(14, 9, 34, .15) 70%, rgba(14, 9, 34, 0) 100%);
}
.st-hero__content { position: relative; width: 100%; max-width: 520px; color: #fff; }
.st-hero__title {
	margin: 4px var(--st-mr, auto) 6px var(--st-ml, 0);
	font-family: var(--st-serif);
	font-weight: 700;
	font-size: clamp(40px, 6vw, 72px);
	line-height: 1.02;
	letter-spacing: -.01em;
	color: #fff;
	background: linear-gradient(90deg, #ffffff 0%, #e9ddff 60%, #c9b4ff 100%);
	-webkit-background-clip: text;
	background-clip: text;
}
.st-hero__subtitle {
	margin: 0 var(--st-mr, auto) 22px var(--st-ml, 0);
	font-family: var(--st-serif);
	font-weight: 600;
	font-size: clamp(20px, 2.4vw, 30px);
	line-height: 1.2;
	color: #fff;
}
.st-hero__desc {
	margin: 0 var(--st-mr, auto) 28px var(--st-ml, 0);
	font: 400 15px/1.7 var(--st-sans);
	color: rgba(255, 255, 255, .86);
}

/* ==========================================================
   GRID (cards)
   ========================================================== */
.st-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}
.st-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 14px;
	background: #fff;
	border: 1px solid #f0ecf7;
	border-radius: 16px;
	box-shadow: 0 10px 30px -18px rgba(40, 20, 90, .25);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.st-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(60, 30, 140, .35); border-color: #e3d9fb; }
.st-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 7;
	border-radius: 10px;
	margin-bottom: 18px;
	background: linear-gradient(135deg, #2a1a5e, #7c4dff 60%, #ffb27a);
}
.st-card__media img,
.st-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-width: none;
	transition: transform .6s ease;
}
.st-zoom-yes .st-card:hover .st-card__media img { transform: scale(1.05); }
.st-card__body { --st-align: flex-start; display: flex; flex-direction: column; align-items: stretch; flex: 1; padding: 0 12px 10px; text-align: left; }
.st-card__body > .st-badge, .st-card__body > .st-card__more { align-self: var(--st-align); }
.st-card__title {
	margin: 0 0 10px;
	font-family: var(--st-serif);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.25;
	color: var(--st-ink);
	transition: color .25s ease;
}
.st-card__title a { color: inherit !important; text-decoration: none !important; }
.st-card--stretch .st-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.st-card__excerpt {
	margin: 0 0 18px;
	font: 400 14px/1.7 var(--st-sans);
	color: var(--st-text);
	flex: 1;
}
.st-card__more {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	font: 600 13px/1 var(--st-sans);
	color: var(--st-purple) !important;
	text-decoration: none !important;
	transition: color .25s ease;
}
.st-card:hover .st-card__more .st-arrow { transform: translateX(4px); }

/* ==========================================================
   LEARNING PATH (numbered)
   ========================================================== */
.st-path { font-family: var(--st-sans); }
.st-path__header { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.st-path__eyebrow {
	margin: 0 0 14px;
	font: 600 12px/1.2 var(--st-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--st-purple-deep);
}
.st-path__heading {
	margin: 0 0 18px;
	font-family: var(--st-display);
	font-weight: 500;
	font-size: clamp(34px, 4.4vw, 54px);
	line-height: 1.1;
	color: var(--st-ink);
}
.st-path__desc {
	margin: 0;
	font: 400 18px/1.8 var(--st-sans);
	color: #4a4560;
}
.st-path__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.st-path__item { margin: 0; padding: 0; list-style: none; display: flex; }
.st-path__item::marker { content: none; }
.st-step {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	padding: 24px 22px;
	background: #fff;
	border: 1px solid var(--st-line);
	border-radius: 16px;
	color: inherit;
	text-decoration: none !important;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
a.st-step:hover,
.st-step.is-current { border-color: #d9c9f7; box-shadow: 0 16px 32px -20px rgba(107, 63, 184, .45); }
a.st-step:hover { transform: translateY(-3px); }
.st-step .st-num,
.st-single__list .st-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--st-lavender-2);
	color: var(--st-purple-deep);
	font: 600 13px/1 var(--st-sans);
	transition: background-color .25s ease, color .25s ease;
}
a.st-step:hover .st-num,
.st-step.is-current .st-num { background: var(--st-purple-deep); color: #fff; }
.st-step__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; text-align: left; }
.st-step__title {
	margin: 0 0 2px;
	font-family: var(--st-display);
	font-weight: 500;
	font-size: 24px;
	line-height: 1.15;
	color: var(--st-ink);
	transition: color .25s ease;
}
.st-step__sub { font: 400 13px/1.4 var(--st-sans); color: var(--st-muted); }

/* ==========================================================
   SINGLE LESSON
   ========================================================== */
.st-single-page { background: var(--st-cream); padding: 40px 0 80px; }
.st-single-page__wrap { width: min(1200px, 100% - 32px); margin: 0 auto; }

.st-single { --st-sidebar-w: 300px; display: flex; flex-direction: column; gap: 48px; font-family: var(--st-sans); }

/* Banner */
.st-single__hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 420px;
	padding: 48px 56px;
	border-radius: 18px;
	overflow: hidden;
	background-color: var(--st-night);
	isolation: isolate;
}
.st-single__hero--noimg { background: linear-gradient(135deg, #160e33 0%, #3a1f86 60%, #7c4dff 100%); }
.st-single__hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; max-width: none; }
.st-single__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(14, 9, 34, .15) 0%, rgba(14, 9, 34, .55) 45%, rgba(14, 9, 34, .92) 100%);
}
.st-single__hero-inner { width: 100%; max-width: 760px; color: #fff; }
.st-single__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 26px;
	font: 500 14px/1 var(--st-sans);
	color: rgba(255, 255, 255, .85) !important;
	text-decoration: none !important;
}
.st-single__back:hover .st-arrow { transform: translateX(-3px); }
.st-single__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.st-single__meta .st-badge { margin-bottom: 14px; }
.st-single__title {
	margin: 0 0 10px;
	font-family: var(--st-serif);
	font-weight: 700;
	font-size: clamp(36px, 5.4vw, 64px);
	line-height: 1.05;
	color: #fff;
}
.st-single__subtitle {
	margin: 0;
	font-family: var(--st-serif);
	font-weight: 600;
	font-size: clamp(18px, 2.2vw, 26px);
	line-height: 1.3;
	color: rgba(255, 255, 255, .9);
}

/* Body */
.st-single__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: start; }
.st-single--has-sidebar .st-single__body { grid-template-columns: minmax(0, 1fr) var(--st-sidebar-w); }
.st-single__content {
	max-width: 740px;
	font: 400 18px/1.85 var(--st-sans);
	color: #3f3a52;
}
.st-single__content > *:first-child { margin-top: 0; }
.st-single__content p { margin: 0 0 1.35em; }
.st-single__content h2,
.st-single__content h3 {
	margin: 1.6em 0 .6em;
	font-family: var(--st-display);
	font-weight: 600;
	line-height: 1.15;
	color: var(--st-ink);
}
.st-single__content h2 { font-size: 36px; }
.st-single__content h3 { font-size: 28px; }
.st-single__content a { color: var(--st-purple); }
.st-single__content img { max-width: 100%; height: auto; border-radius: 12px; }
.st-dropcap-yes .st-single__content > p:first-of-type::first-letter {
	float: left;
	margin: .08em .12em 0 0;
	font-family: var(--st-display);
	font-weight: 600;
	font-size: 4.2em;
	line-height: .8;
	color: var(--st-purple-deep);
}
.st-single__content blockquote {
	position: relative;
	clear: both;
	margin: 2.2em 0;
	padding: 34px 76px 34px 40px;
	border: 0;
	border-left: 4px solid var(--st-purple);
	border-radius: 14px;
	background: linear-gradient(135deg, #f4eeff 0%, #fbf8ff 100%);
	color: var(--st-ink);
	font-style: normal;
}
.st-single__content blockquote::before {
	content: "\201C";
	position: absolute;
	top: -6px;
	right: 22px;
	font: 600 110px/1 var(--st-display);
	color: rgba(124, 77, 255, .16);
}
.st-single__content blockquote p {
	margin: 0;
	font-family: var(--st-display);
	font-weight: 500;
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.35;
	color: var(--st-ink);
}

/* Sidebar */
.st-single__sidebar { position: sticky; top: 30px; }
.admin-bar .st-single__sidebar { top: 62px; }
.st-single__sidebar-card {
	padding: 24px 18px;
	background: #fff;
	border: 1px solid var(--st-line);
	border-radius: 16px;
}
.st-single__sidebar-title {
	margin: 0 0 12px;
	padding: 0 6px;
	font: 600 12px/1.2 var(--st-sans);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--st-purple-deep);
}
.st-progress { height: 4px; margin: 0 6px 6px; border-radius: 4px; background: var(--st-lavender-2); overflow: hidden; }
.st-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--st-purple-deep), var(--st-purple)); }
.st-progress__label { margin: 0 6px 14px; font: 500 12px/1 var(--st-sans); color: var(--st-muted); }
.st-single__list { margin: 0; padding: 0; list-style: none; }
.st-single__list li { margin: 0; padding: 0; list-style: none; }
.st-single__list a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 8px;
	border-radius: 10px;
	color: var(--st-ink) !important;
	text-decoration: none !important;
	transition: background-color .2s ease, color .2s ease;
}
.st-single__list a:hover { background: #f8f4ff; }
.st-single__list .st-num { flex-basis: 32px; width: 32px; height: 32px; font-size: 11px; }
.st-single__list li.is-current a { background: var(--st-lavender-2); color: var(--st-purple-deep) !important; }
.st-single__list li.is-current .st-num { background: var(--st-purple-deep); color: #fff; }
.st-single__list-title { font: 500 15px/1.3 var(--st-display); font-size: 18px; }

/* Prev / Next */
.st-single__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.st-navcard {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px;
	background: #fff;
	border: 1px solid var(--st-line);
	border-radius: 16px;
	color: inherit;
	text-decoration: none !important;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.st-navcard:hover { transform: translateY(-3px); border-color: #d9c9f7; box-shadow: 0 16px 32px -20px rgba(107, 63, 184, .45); }
.st-navcard--next { flex-direction: row-reverse; text-align: right; }
.st-navcard--empty { visibility: hidden; border: 0; }
.st-navcard__img { flex: 0 0 120px; height: 76px; border-radius: 10px; background-size: cover; background-position: center; }
.st-navcard__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.st-navcard__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 600 11px/1.2 var(--st-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--st-purple);
}
.st-navcard--next .st-navcard__label { justify-content: flex-end; }
.st-navcard__title { font: 600 22px/1.2 var(--st-display); color: var(--st-ink); transition: color .2s ease; }
.st-navcard:hover .st-navcard__title { color: var(--st-purple-deep); }

/* ==========================================================
   RESPONSIVE (tablet ≤1024, mobile ≤767)
   ========================================================== */
@media (max-width: 1024px) {
	.st-hero { min-height: 380px; padding: 44px 40px; }
	.st-hero__overlay { background: linear-gradient(90deg, rgba(14, 9, 34, .94) 0%, rgba(14, 9, 34, .78) 50%, rgba(14, 9, 34, .3) 100%); }
	.st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.st-path__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.st-single--has-sidebar .st-single__body { grid-template-columns: minmax(0, 1fr); }
	.st-single__sidebar { position: static; order: 2; }
	.st-single__content { max-width: none; }
	.st-single__hero { min-height: 360px; padding: 40px; }
}

@media (max-width: 767px) {
	.st-hero { min-height: 0; padding: 40px 22px; border-radius: 14px; }
	.st-hero__overlay { background: linear-gradient(180deg, rgba(14, 9, 34, .55) 0%, rgba(14, 9, 34, .9) 100%); }
	.st-hero__content { max-width: 100%; }
	.st-hero__desc { font-size: 14px; }
	.st-btn { padding: 13px 22px; }

	.st-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.st-card { padding: 12px; }
	.st-card__body { padding: 0 6px 6px; }
	.st-card__title { font-size: 20px; }

	.st-path__header { margin-bottom: 32px; }
	.st-path__desc { font-size: 16px; }
	.st-path__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.st-step { padding: 18px 16px; gap: 14px; }
	.st-step__title { font-size: 21px; }

	.st-single { gap: 32px; }
	.st-single-page { padding: 16px 0 56px; }
	.st-single__hero { min-height: 320px; padding: 28px 20px; border-radius: 14px; }
	.st-single__back { margin-bottom: 18px; }
	.st-single__content { font-size: 16.5px; line-height: 1.8; }
	.st-single__content blockquote { padding: 30px 22px 26px 24px; }
	.st-single__content blockquote::before { font-size: 70px; top: -4px; right: 14px; }
	.st-single__nav { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.st-navcard--empty { display: none; }
	.st-navcard__img { flex-basis: 84px; height: 60px; }
	.st-navcard__title { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
	.st-card, .st-step, .st-navcard, .st-btn, .st-card__media img, .st-arrow { transition: none !important; }
}