/*
 * Course profile cards generated from the G-MSF certificate programme.
 */

.msf-course-card__placeholder {
	display: grid;
	width: 100%;
	height: 100%;
	place-items: center;
	align-content: center;
	gap: 0.85rem;
	padding: 1.5rem;
	background:
		radial-gradient(circle at 20% 18%, rgba(210, 150, 14, 0.17), transparent 34%),
		radial-gradient(circle at 85% 82%, rgba(137, 184, 43, 0.2), transparent 38%),
		linear-gradient(145deg, #eef6e2, #e5eef3);
	color: var(--msf-navy);
	text-align: center;
}

.msf-course-card__placeholder::after {
	width: 54px;
	height: 3px;
	border-radius: 999px;
	background: var(--msf-gold);
	content: "";
}

.msf-course-card__placeholder-icon {
	display: grid;
	width: 82px;
	height: 82px;
	place-items: center;
	border: 1px solid rgba(14, 35, 56, 0.08);
	border-radius: 26px 26px 26px 9px;
	background: rgba(255, 255, 255, 0.86);
	color: var(--msf-green-dark);
	box-shadow: 0 16px 35px rgba(14, 35, 56, 0.12);
}

.msf-course-card:nth-child(3n + 2) .msf-course-card__placeholder-icon {
	color: var(--msf-gold-dark);
}

.msf-course-card:nth-child(3n) .msf-course-card__placeholder-icon {
	color: var(--msf-navy-soft);
}

.msf-course-card__placeholder-icon .msf-training-icon {
	width: 39px;
	height: 39px;
}

.msf-course-card__placeholder > span:last-of-type {
	max-width: 210px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.msf-course-card__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
	margin-top: auto;
}

.msf-course-card__syllabus {
	display: grid;
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	place-items: center;
	border: 1px solid var(--msf-border);
	border-radius: 12px;
	background: var(--msf-light);
	color: var(--msf-navy);
	text-decoration: none;
	transition: background-color var(--msf-transition), color var(--msf-transition), border-color var(--msf-transition), transform var(--msf-transition);
}

.msf-course-card__syllabus:hover,
.msf-course-card__syllabus:focus-visible {
	border-color: var(--msf-gold);
	background: var(--msf-gold);
	color: var(--msf-white);
	transform: translateY(-2px);
}

.msf-course-card__syllabus .msf-icon {
	width: 17px;
	height: 17px;
}