/* ==========================================================================
   SSI TARGET / OPPORTUNITY CARDS
   Colorful default state + existing navy hover state
   ========================================================================== */


/* ==========================================================================
   TARGET CARD BASE
   ========================================================================== */

.ssi-course-detail__targets-list > div {
	position: relative;
	overflow: hidden;

	display: flex;
	align-items: center;
	justify-content: space-between;

	min-height: 68px;

	padding:
		0 20px;

	border:
		1px solid transparent;

	border-radius:
		16px;

	box-shadow:
		0 10px 25px
		rgba(
			15,
			23,
			42,
			0.04
		);

	transition:
		transform 320ms cubic-bezier(.22,.61,.36,1),
		background 320ms ease,
		border-color 320ms ease,
		box-shadow 320ms ease,
		color 320ms ease;
}


/* ==========================================================================
   COLOR 1 — BLUE
   ========================================================================== */

.ssi-course-detail__targets-list > div:nth-child(1) {
	background:
		linear-gradient(
			145deg,
			#edf4ff 0%,
			#dbe8ff 100%
		);

	border-color:
		#d5e3fa;
}


/* ==========================================================================
   COLOR 2 — PURPLE
   ========================================================================== */

.ssi-course-detail__targets-list > div:nth-child(2) {
	background:
		linear-gradient(
			145deg,
			#f3f0ff 0%,
			#e7e1ff 100%
		);

	border-color:
		#dfd8fa;
}


/* ==========================================================================
   COLOR 3 — GOLD
   ========================================================================== */

.ssi-course-detail__targets-list > div:nth-child(3) {
	background:
		linear-gradient(
			145deg,
			#fff8e8 0%,
			#ffedc5 100%
		);

	border-color:
		#f2dfb4;
}


/* ==========================================================================
   COLOR 4 — TEAL
   ========================================================================== */

.ssi-course-detail__targets-list > div:nth-child(4) {
	background:
		linear-gradient(
			145deg,
			#edf9f8 0%,
			#d8f0ed 100%
		);

	border-color:
		#cbe8e4;
}


/* ==========================================================================
   COLOR 5 — SOFT PEACH / BONUS
   ========================================================================== */

.ssi-course-detail__targets-list > div:nth-child(5) {
	background:
		linear-gradient(
			145deg,
			#fff2ec 0%,
			#ffe3d7 100%
		);

	border-color:
		#f4d8cc;
}


/* ==========================================================================
   LEFT ACCENT
   ========================================================================== */

.ssi-course-detail__targets-list > div::after {
	content:
		"";

	position:
		absolute;

	left:
		0;

	top:
		0;

	bottom:
		0;

	width:
		4px;

	background:
		linear-gradient(
			to bottom,
			#2457d6,
			#dca238
		);

	transform:
		scaleY(0);

	transform-origin:
		center;

	transition:
		transform 300ms
		cubic-bezier(.22,.61,.36,1);
}


/* ==========================================================================
   TARGET LABEL
   ========================================================================== */

.ssi-course-detail__targets-list > div span {
	position:
		relative;

	z-index:
		2;

	color:
		#2457d6;

	font-size:
		0.57rem;

	font-weight:
		800;

	transition:
		color 300ms ease,
		transform 300ms ease;
}


/* ==========================================================================
   TARGET NAME
   ========================================================================== */

.ssi-course-detail__targets-list > div strong {
	position:
		relative;

	z-index:
		2;

	color:
		#24364f;

	font-size:
		0.65rem;

	font-weight:
		800;

	transition:
		color 300ms ease,
		transform 300ms ease;
}


/* ==========================================================================
   HOVER — SAME NAVY STYLE
   ========================================================================== */

.ssi-course-detail__targets-list > div:hover {
	transform:
		translateX(7px)
		scale(1.015);

	background:
		linear-gradient(
			145deg,
			#0b1f3a 0%,
			#163c68 100%
		);

	border-color:
		transparent;

	box-shadow:
		0 20px 42px
		rgba(
			11,
			31,
			58,
			0.16
		);
}


/* ==========================================================================
   HOVER ACCENT
   ========================================================================== */

.ssi-course-detail__targets-list > div:hover::after {
	transform:
		scaleY(1);
}


/* ==========================================================================
   HOVER LABEL
   ========================================================================== */

.ssi-course-detail__targets-list > div:hover span {
	color:
		#f4c766;

	transform:
		translateX(2px);
}


/* ==========================================================================
   HOVER TARGET
   ========================================================================== */

.ssi-course-detail__targets-list > div:hover strong {
	color:
		#ffffff;

	transform:
		translateX(-2px);
}


/* ==========================================================================
   DESKTOP MICRO-MOTION
   ========================================================================== */

.ssi-course-detail__targets-list > div:hover {
	animation:
		ssiTargetHoverPulse
		600ms
		ease-out
		1;
}


@keyframes ssiTargetHoverPulse {

	0% {
		transform:
			translateX(0)
			scale(1);
	}

	55% {
		transform:
			translateX(8px)
			scale(1.022);
	}

	100% {
		transform:
			translateX(7px)
			scale(1.015);
	}
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

	.ssi-course-detail__targets-list > div {
		min-height:
			64px;

		padding:
			0 16px;
	}

	.ssi-course-detail__targets-list > div:hover {
		transform:
			translateX(3px)
			scale(1.01);
	}
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.ssi-course-detail__targets-list > div,
	.ssi-course-detail__targets-list > div::after {

		animation:
			none !important;

		transition:
			none !important;
	}
}
/* ==========================================================================
   FINAL BENEFIT CARD COLORS
   ========================================================================== */

.ssi-course-detail__benefit-card:nth-child(1) {
	background:
		linear-gradient(
			145deg,
			#eef4ff 0%,
			#dce9ff 100%
		) !important;

	border-color:
		#d3e1f8 !important;
}


.ssi-course-detail__benefit-card:nth-child(2) {
	background:
		linear-gradient(
			145deg,
			#f3f0ff 0%,
			#e7e1ff 100%
		) !important;

	border-color:
		#dfd8fa !important;
}


.ssi-course-detail__benefit-card:nth-child(3) {
	background:
		linear-gradient(
			145deg,
			#fff8e8 0%,
			#ffedc5 100%
		) !important;

	border-color:
		#f2dfb4 !important;
}


.ssi-course-detail__benefit-card:nth-child(4) {
	background:
		linear-gradient(
			145deg,
			#edf9f8 0%,
			#d8f0ed 100%
		) !important;

	border-color:
		#cbe8e4 !important;
}


/* Keep text dark and readable */

.ssi-course-detail__benefit-card h3 {
	color:
		#0b1f3a !important;
}


.ssi-course-detail__benefit-card p {
	color:
		#687a91 !important;
}


/* Keep icons colorful */

.ssi-course-detail__benefit-card:nth-child(1)
.ssi-course-detail__benefit-icon {
	color:
		#2457d6 !important;
}


.ssi-course-detail__benefit-card:nth-child(2)
.ssi-course-detail__benefit-icon {
	color:
		#6d5acb !important;
}


.ssi-course-detail__benefit-card:nth-child(3)
.ssi-course-detail__benefit-icon {
	color:
		#b9821f !important;
}


.ssi-course-detail__benefit-card:nth-child(4)
.ssi-course-detail__benefit-icon {
	color:
		#218b85 !important;
}


/* Restore colorful state after leaving hover */

.ssi-course-detail__benefit-card:not(:hover) {
	color:
		#0b1f3a !important;
}


/* Hover remains subtle and colorful */

.ssi-course-detail__benefit-card:hover {
	transform:
		translateY(-8px)
		scale(1.025);

	box-shadow:
		0 26px 60px
		rgba(
			15,
			23,
			42,
			0.13
		);
}