/*
 * LMS v16 web-widget CSS restoration (bug #4)
 * ------------------------------------------------------------------
 * Frappe LMS 2.62 (v16) commented out `web_include_css` in hooks.py AND
 * deleted lms/public/css/style.css, so the server-rendered web pages
 * (www) that use lms/lms/widgets/CourseCard.html lost all their styling.
 * The most visible symptom: the course preview image is blank on the
 * public course site, because `.course-image` has no height so its inline
 * background-image paints on a zero-height box. (It still renders in the
 * Vue SPA, which has its own bundle.)
 *
 * This file restores the card-widget rules that v15 shipped via
 * `web_include_css = "lms.bundle.css"`. Scoped to LMS's own `.course-*`
 * and `.common-card-style` classes, so it cannot shift the frappe web
 * theme. Wired up by the hooks.py edit in apply_lms_patches.py:
 *   web_include_css = "/assets/lms/css/web-widgets.css"
 * Source of truth: v15 lms/public/css/style.css (frappe/lms@v15).
 */

.common-card-style {
	display: flex;
	background: #FFFFFF;
	border-radius: var(--border-radius-md);
	position: relative;
	border: 1px solid var(--gray-300);
	box-shadow: var(--shadow-inset);
}

.course-card {
	flex-direction: column;
	height: 100%;
	min-height: 350px;
	overflow: auto;
}

/* THE fix for bug #4: without an explicit height the inline
   background-image on this element has nothing to paint on. */
.course-image {
	height: 168px;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.default-image {
	background-color: var(--avatar-frame-bg);
	color: var(--avatar-frame-color);
	display: flex;
	flex-direction: column;
}

.default-image-text {
	display: flex;
	flex: 1;
	align-self: center;
	justify-content: normal;
	font-size: 7rem;
	font-weight: bold;
}

.course-tags {
	display: flex;
	position: relative;
	top: 1rem;
	left: 1rem;
}

.course-image .course-tags {
	width: fit-content;
}

.course-card-pills {
	background: #ffffff;
	margin-left: 0;
	margin-right: 0.5rem;
	border-radius: var(--border-radius);
	padding: 3.5px 8px;
	font-size: 11px;
	text-align: center;
	letter-spacing: 0.011em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--gray-900);
	width: fit-content;
	border: 1px solid var(--gray-300);
}

.course-card-content {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	color: var(--text-color);
}

.course-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--text-base);
	color: var(--gray-900);
	margin-bottom: 0.5rem;
}

.course-card-title {
	font-weight: 600;
	color: var(--gray-900);
	font-size: 1.125rem;
}

.course-card-footer {
	display: flex;
	justify-content: space-between;
	margin-top: auto;
}

.course-card-instructors {
	display: flex;
	align-items: center;
}