/*** ===================================
     MiMi — Curriculum rows: lesson thumbnail + meta chips

     Lives next to lesson-rows.php in
     mifam-dashboard/includes/tutor/lesson-rows/ and is enqueued by
     it — do NOT paste this into Additional CSS. The version string
     is this file's mtime, so saving it here is enough to bust WP
     Rocket and the browser cache.

     ⚠ If an earlier copy of these rules is still in Additional CSS,
     delete it. The inline copy loads later and would win, making
     edits to this file look like they do nothing.

     The rest of the Course Content styling still lives in Additional
     CSS (see customized-css.css:7146) — only these rows moved.
     =================================== ***/

/* The thumbnail is 40px tall, so the title block needs centring
   against it instead of the old icon's tutor-mt-4 top alignment.
   min-width:0 lets long titles ellipsis instead of forcing the row
   wider than its container. */
body.single-courses .tutor-course-content-list-item > .tutor-d-flex:first-child {
	align-items: center;
	min-width: 0;
}

body.single-courses .lm-lesson-thumb {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 67px;
	margin-right: 12px;
	border-radius: 6px;
	/* overflow clips the duration badge to the rounded corners;
	   position is the containing block that anchors it. */
	overflow: hidden;
	position: relative;
	background: #fbf5f7;
	/* Faint lift off the row. Very low alpha — this is a 120px chip,
	   not a card, and anything heavier turns the list into a grid of
	   floating tiles. */
	box-shadow: 0 1px 3px rgba(75, 67, 66, 0.10);
}

/* Several lesson thumbnails are line art on a white ground, which
   dissolves straight into the white row — no edge, no shape. This
   overlay fixes that without touching the artwork:

   - a hairline inset ring draws the edge back in, and works whatever
     the image contains
   - a gradient rising from the bottom grounds the picture and gives
     the duration badge something to sit on instead of white

   It has to be a pseudo-element rather than box-shadow on .lm-lesson-thumb
   or the img: an inset shadow paints *below* its element's content, so
   the image would cover it completely. ::after generates as the last
   child and paints on top. */
body.single-courses .lm-lesson-thumb::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: inset 0 0 0 1px rgba(75, 67, 66, 0.12);
}

/* Duration badge, bottom-right on the thumbnail. Dark pill rather
   than the theme's muted grey — it has to stay readable over
   arbitrary artwork, and your lesson thumbnails are bright. */
body.single-courses .lm-lesson-duration {
	position: absolute;
	/* Above the ::after overlay, which generates last and would
	   otherwise lay its gradient across the badge. */
	z-index: 1;
	right: 3px;
	bottom: 3px;
	padding: 1px 5px;
	border-radius: 4px;
	background: rgba(32, 24, 26, 0.78);
	color: #ffffff !important;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

body.single-courses .lm-lesson-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Fallback: quizzes, assignments and lessons with no Featured Image
   keep the old icon, centred in a box the same size so every row
   still lines up. */
body.single-courses .lm-lesson-thumb--empty .tutor-course-content-list-item-icon {
	margin: 0 !important;
	font-size: 15px;
	color: #c6b5bb;
}

/* --- Meta chips (eye + views, bubble + comments) ------------ */

body.single-courses .lm-meta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-right: 4px;
}

body.single-courses .lm-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	line-height: 1;
	color: #6f6462;
	white-space: nowrap;
}

body.single-courses .lm-meta-item i {
	font-size: 12px;
	color: #c6b5bb;
}

@media only screen and (max-width: 575px) {
	body.single-courses .lm-lesson-thumb {
		width: 52px;
		height: 33px;
		margin-right: 10px;
	}

	body.single-courses .lm-meta {
		gap: 10px;
	}

	body.single-courses .lm-meta-item {
		font-size: 12px;
	}
}