/* ==========================================================================
   QI Curriculum — "What You'll Learn" numbered lesson grid
   ========================================================================== */

.qi-curriculum {
	--qi-primary: #1f7a4d;
	--qi-heading: #143d2c;
	--qi-gold: #b8892e;
	--qi-bg: #eef6f1;
	--qi-mint: #dcefe3;
	--qi-card: #ffffff;
	--qi-text: #66716c;
	--qi-border: #d6ebdf;
	--qi-radius: 16px;
	--qi-gap: 20px;
	--qi-ease: cubic-bezier(.22, 1, .36, 1);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 72px 24px 80px;
	background: var(--qi-bg);
	color: var(--qi-text);
	font-size: 16px;
	line-height: 1.55;
	box-sizing: border-box;
}

.qi-curriculum *,
.qi-curriculum *::before,
.qi-curriculum *::after {
	box-sizing: border-box;
}

/* Faint star lattice + glow */
.qi-curriculum::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: .3;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%231f7a4d' stroke-opacity='.08' stroke-width='1'%3E%3Cpath d='M40 14l7.6 18.4L66 40l-18.4 7.6L40 66l-7.6-18.4L14 40l18.4-7.6z'/%3E%3Crect x='21.6' y='21.6' width='36.8' height='36.8' transform='rotate(45 40 40)'/%3E%3Crect x='21.6' y='21.6' width='36.8' height='36.8'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 80px 80px;
	-webkit-mask-image: radial-gradient(ellipse at 50% 55%, #000 10%, transparent 70%);
	mask-image: radial-gradient(ellipse at 50% 55%, #000 10%, transparent 70%);
	pointer-events: none;
}

.qi-curriculum::after {
	content: "";
	position: absolute;
	z-index: -1;
	width: 480px;
	height: 480px;
	right: -180px;
	bottom: -220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(184, 137, 46, .06), transparent 70%);
	pointer-events: none;
}

/* Heading ---------------------------------------------------------------- */
.qi-curriculum__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 720px;
	margin: 0 auto 44px;
	text-align: center;
}

.qi-curriculum__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 14px;
	margin-bottom: 14px;
	border-radius: 999px;
	background: var(--qi-mint);
	color: var(--qi-primary);
	font-size: 13px;
	font-weight: 600;
}

.qi-curriculum__star {
	width: 7px;
	height: 7px;
	background: var(--qi-gold);
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.qi-curriculum__title {
	margin: 0;
	color: var(--qi-heading);
	font-size: clamp(28px, 3.6vw, 40px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
}

.qi-curriculum__highlight {
	position: relative;
	display: inline-block;
	color: var(--qi-gold);
}

.qi-curriculum__highlight::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -.16em;
	height: .26em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 9c40-6 90-8 196-3' fill='none' stroke='%23b8892e' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	opacity: .85;
}

.qi-curriculum__subtitle {
	max-width: 560px;
	margin: 16px 0 0;
	font-size: 16px;
}

/* Grid ------------------------------------------------------------------- */
.qi-curriculum__grid {
	display: grid;
	grid-template-columns: repeat(var(--qi-cols, 3), minmax(0, 1fr));
	gap: var(--qi-gap);
	max-width: 900px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* Lesson card ------------------------------------------------------------ */
.qi-lesson {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 20px 20px 24px;
	border-radius: var(--qi-radius);
	background: var(--qi-card);
	border: 1px solid var(--qi-border);
	box-shadow: 0 1px 2px rgba(20, 61, 44, .03);
	overflow: hidden;
	transition: transform .45s var(--qi-ease), box-shadow .45s var(--qi-ease), border-color .35s;
}

.qi-lesson > * {
	position: relative;
	z-index: 1;
}

/* Big outlined number watermark */
.qi-lesson__ghost {
	position: absolute !important;
	z-index: 0 !important;
	top: 14px;
	right: 18px;
	font-size: 40px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.04em;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--qi-mint);
	transition: opacity .35s, transform .45s var(--qi-ease);
	user-select: none;
	pointer-events: none;
}

.qi-lesson__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 16px;
}

/* Number badge with spinning gold star frame */
.qi-lesson__num {
	position: relative;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin: 4px;
}

.qi-lesson__frame,
.qi-lesson__frame::before {
	position: absolute;
	inset: -4px;
	border: 1.2px solid var(--qi-gold);
	border-radius: 10px;
	opacity: .45;
	transition: opacity .4s;
}

.qi-lesson__frame {
	animation: qi-lesson-spin 24s linear infinite;
	animation-delay: calc(var(--i, 0) * -3s);
}

.qi-lesson__frame::before {
	content: "";
	inset: -1.2px;
	opacity: 1;
	transform: rotate(45deg);
}

.qi-lesson__digit {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	border-radius: 9px;
	background: var(--qi-mint);
	color: var(--qi-primary);
	font-size: 15px;
	font-weight: 800;
	transition: background .35s, color .35s, box-shadow .35s;
}

/* Arrow that slides in on hover */
.qi-lesson__arrow {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--qi-mint);
	color: var(--qi-primary);
	opacity: 0;
	transform: translate(-6px, 6px) scale(.8);
	transition: opacity .35s, transform .45s var(--qi-ease);
}

.qi-lesson__arrow svg {
	width: 14px;
	height: 14px;
}

.qi-lesson__title {
	margin: 0 0 4px;
	color: var(--qi-heading);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
}

.qi-lesson__text {
	margin: 0;
	color: var(--qi-text);
	font-size: 14px;
}

/* Learning-path bar: grows with the lesson number (1/n … n/n) */
.qi-lesson__bar {
	display: none;
}

.qi-curriculum--path .qi-lesson__bar {
	position: absolute !important;
	display: block;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: rgba(31, 122, 77, .07);
}

.qi-curriculum--path .qi-lesson__bar::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: calc((var(--i, 0) + 1) / var(--qi-n, 6) * 100%);
	background: linear-gradient(90deg, var(--qi-primary), var(--qi-gold));
	border-radius: 0 3px 3px 0;
	transform-origin: left;
	transition: transform 1.2s var(--qi-ease);
	transition-delay: calc(var(--i, 0) * 110ms + 400ms);
}

.qi-curriculum--animate.qi-ready:not(.is-visible) .qi-lesson__bar::after {
	transform: scaleX(0);
}

/* Hover ------------------------------------------------------------------ */
.qi-lesson:hover {
	transform: translateY(-5px);
	border-color: #a9d3b9;
	box-shadow: 0 20px 36px -22px rgba(20, 61, 44, .38);
}

.qi-lesson:hover .qi-lesson__digit {
	background: linear-gradient(145deg, var(--qi-primary), var(--qi-heading));
	color: #fff;
	box-shadow: 0 8px 16px -8px rgba(20, 61, 44, .6);
}

.qi-lesson:hover .qi-lesson__frame {
	opacity: .9;
}

.qi-lesson:hover .qi-lesson__arrow {
	opacity: 1;
	transform: none;
}

.qi-lesson:hover .qi-lesson__ghost {
	opacity: 0;
	transform: translate(8px, -8px);
}

/* Scroll reveal ---------------------------------------------------------- */
.qi-curriculum--animate.qi-ready .qi-curriculum__head > *,
.qi-curriculum--animate.qi-ready .qi-lesson {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s var(--qi-ease), transform .7s var(--qi-ease), box-shadow .45s var(--qi-ease), border-color .35s;
}

.qi-curriculum--animate.qi-ready .qi-curriculum__head > :nth-child(2) { transition-delay: .08s; }
.qi-curriculum--animate.qi-ready .qi-curriculum__head > :nth-child(3) { transition-delay: .16s; }

.qi-curriculum--animate.qi-ready .qi-lesson {
	transition-delay: calc(var(--i, 0) * 90ms + 200ms), calc(var(--i, 0) * 90ms + 200ms), 0s, 0s;
}

.qi-curriculum--animate.qi-ready.is-visible .qi-curriculum__head > *,
.qi-curriculum--animate.qi-ready.is-visible .qi-lesson {
	opacity: 1;
	transform: none;
}

.qi-curriculum--animate.qi-ready.is-visible .qi-lesson:hover {
	transform: translateY(-5px);
	transition-delay: 0s;
}

@keyframes qi-lesson-spin {
	to { transform: rotate(360deg); }
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1024px) {
	.qi-curriculum__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.qi-curriculum {
		--qi-gap: 12px;
		padding: 56px 16px 60px;
	}

	.qi-curriculum__head {
		margin-bottom: 32px;
	}

	.qi-curriculum__grid {
		grid-template-columns: 1fr;
	}

	/* Compact row layout on phones: number left, text right */
	.qi-lesson {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 16px;
		align-items: center;
		padding: 16px 18px 18px;
	}

	.qi-lesson__top {
		grid-row: span 2;
		margin: 0;
	}

	.qi-lesson__arrow {
		display: none;
	}

	.qi-lesson__title {
		font-size: 16px;
		margin: 0;
	}

	.qi-lesson__text {
		grid-column: 2;
		font-size: 13.5px;
	}

	.qi-lesson {
		padding-right: 64px;
	}

	.qi-lesson__ghost {
		top: 50%;
		right: 16px;
		font-size: 34px;
		transform: translateY(-50%);
	}

	.qi-lesson:hover .qi-lesson__ghost {
		opacity: 1;
		transform: translateY(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.qi-curriculum *,
	.qi-curriculum *::before,
	.qi-curriculum *::after {
		animation: none !important;
		transition: none !important;
	}

	.qi-curriculum--animate.qi-ready .qi-curriculum__head > *,
	.qi-curriculum--animate.qi-ready .qi-lesson {
		opacity: 1;
		transform: none;
	}

	.qi-curriculum--animate.qi-ready:not(.is-visible) .qi-lesson__bar::after {
		transform: none;
	}
}