/* ==========================================================================
   SSI COURSE CARD HOVER FIX
   Image-first cards keep readable text on hover.
   ========================================================================== */


/* ==========================================================================
   SUBJECT CARD
   ========================================================================== */

.ssi-course-detail__focus-card:hover {
	transform:
		translateY(-9px);

	border-color:
		#d7e1ed;

	background:
		#ffffff;

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


/* ==========================================================================
   IMAGE
   ========================================================================== */

.ssi-course-detail__focus-card:hover
.ssi-course-detail__focus-media img {

	transform:
		scale(1.09);

	filter:
		saturate(1.08)
		contrast(1.04);
}


/* ==========================================================================
   IMAGE OVERLAY
   ========================================================================== */

.ssi-course-detail__focus-card:hover
.ssi-course-detail__focus-overlay {

	opacity:
		1;

	background:
		linear-gradient(
			to top,
			rgba(
				5,
				18,
				35,
				0.78
			) 0%,
			rgba(
				5,
				18,
				35,
				0.28
			) 48%,
			rgba(
				5,
				18,
				35,
				0
			) 100%
		);
}


/* ==========================================================================
   CONTENT AREA
   ========================================================================== */

.ssi-course-detail__focus-card:hover
.ssi-course-detail__focus-content {

	background:
		#ffffff;

	color:
		#0b1f3a;
}


/* ==========================================================================
   NUMBER
   ========================================================================== */

.ssi-course-detail__focus-card:hover
.ssi-course-detail__focus-number {

	color:
		#b4bfcc;
}


/* ==========================================================================
   TITLE
   ========================================================================== */

.ssi-course-detail__focus-card:hover
.ssi-course-detail__focus-content h3 {

	color:
		#0b1f3a;

	transform:
		translateY(-1px);
}


/* ==========================================================================
   DESCRIPTION
   ========================================================================== */

.ssi-course-detail__focus-card:hover
.ssi-course-detail__focus-content p {

	color:
		#75849a;
}


/* ==========================================================================
   ARROW
   ========================================================================== */

.ssi-course-detail__focus-card:hover
.ssi-course-detail__focus-arrow {

	transform:
		translate(
			2px,
			-2px
		)
		rotate(
			7deg
		);

	border-color:
		#f0b83f;

	background:
		#f0b83f;

	color:
		#0b1f3a;

	box-shadow:
		0
		8px
		18px
		rgba(
			240,
			184,
			63,
			0.22
		);
}


/* ==========================================================================
   FALLBACK ICON
   ========================================================================== */

.ssi-course-detail__focus-card:hover
.ssi-course-detail__focus-fallback span {

	transform:
		scale(1.08)
		rotate(3deg);

	background:
		#0b1f3a;

	color:
		#f4c766;

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


/* ==========================================================================
   CARD ACCENT
   ========================================================================== */

.ssi-course-detail__focus-card::after {

	content:
		"";

	position:
		absolute;

	left:
		0;

	right:
		0;

	bottom:
		0;

	height:
		4px;

	background:
		linear-gradient(
			90deg,
			#2457d6,
			#dca238
		);

	transform:
		scaleX(0);

	transform-origin:
		left center;

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


.ssi-course-detail__focus-card:hover::after {

	transform:
		scaleX(1);
}


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

@media (max-width: 600px) {

	.ssi-course-detail__focus-card:hover {

		transform:
			translateY(-5px);

	}

}