/*** ===================================
     MiMi — Suggested Courses sidebar widget

     Lives next to suggested-courses.php in
     mifam-dashboard/includes/tutor/suggested-courses/ 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.

     The card itself (white background, 18px radius, border,
     padding) is already styled by the existing
     .tutor-course-details-widget rules in Additional CSS, and the
     16px gap to the Tags widget above comes from the
     .tutor-single-course-sidebar-more grid. Nothing here
     re-declares any of that — this file only styles the inside.
     =================================== ***/

.lm-suggested {
	--lm-sg-pink: #ff91a4;
	--lm-sg-teal: #5fcac7;
	--lm-sg-heading: #4b4342;
	--lm-sg-muted: #8b807e;
	--lm-sg-rule: #f4ecef;
	/* 140px wide at 16/9 lands on 140x78.75, which is the Proko
	   proportion. Only the width is set anywhere — the height is
	   left to aspect-ratio on .lm-suggested-thumb, so the two can
	   never drift apart. */
	--lm-sg-thumb: 140px;
}

/* --- Heading row ------------------------------------------ */
/* baseline, not center: the Fredoka heading and the small link
   have very different cap heights, and centring them makes the
   link look like it is floating above the text. */
.lm-suggested .lm-suggested-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 4px;
}

/* The shared widget-title rule ships a 14px bottom margin. The
   head row owns the spacing here instead, so the "Show all" link
   sits on the same line rather than being pushed off it. */
.lm-suggested .lm-suggested-head .tutor-course-details-widget-title {
	margin: 0 !important;
}

.lm-suggested .lm-suggested-all {
	flex: none;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--lm-sg-pink);
	text-decoration: none !important;
	white-space: nowrap;
	transition: color .2s ease;
}

.lm-suggested .lm-suggested-all:hover,
.lm-suggested .lm-suggested-all:focus-visible {
	color: var(--lm-sg-teal);
}

/* The arrow nudges instead of the whole link moving, which would
   shift the heading row and reflow the card on hover. */
.lm-suggested .lm-suggested-arrow {
	display: inline-block;
	transition: transform .2s ease;
}

.lm-suggested .lm-suggested-all:hover .lm-suggested-arrow,
.lm-suggested .lm-suggested-all:focus-visible .lm-suggested-arrow {
	transform: translateX(3px);
}

/* --- List ------------------------------------------------- */
/* The body.single-courses prefix is not decoration — the existing
   Additional CSS styles .tutor-course-details-widget li with that
   same prefix, giving it higher specificity than a bare class
   pair. Without it those rules win and every row keeps the 12px
   text-line padding meant for the Tags widget. Same reason the
   two rules below carry it. */
body.single-courses .lm-suggested .lm-suggested-list {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}

body.single-courses .lm-suggested .lm-suggested-item {
	list-style: none;
	padding: 0 !important;
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
}

/* Hairline dividers between rows only — nothing under the last
   row and nothing under the heading. */
body.single-courses .lm-suggested .lm-suggested-item + .lm-suggested-item {
	border-top: 1px solid var(--lm-sg-rule);
}

/* --- Row -------------------------------------------------- */
/* The whole row is the link, so the padding lives on the <a> and
   the click target covers the full width of the card. */
.lm-suggested .lm-suggested-link {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 0;
	text-decoration: none !important;
	color: inherit;
}

.lm-suggested .lm-suggested-body {
	flex: 1 1 auto;
	min-width: 0; /* lets long titles wrap instead of stretching the row */
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.lm-suggested .lm-suggested-name {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--lm-sg-heading);
	transition: color .2s ease;

	/* Two lines then ellipsis. Course titles here run long
	   ("5 Days Basic Anatomy Challenge") and an unclamped third
	   line pushes the row taller than its own thumbnail, which
	   makes the list look ragged. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lm-suggested .lm-suggested-link:hover .lm-suggested-name,
.lm-suggested .lm-suggested-link:focus-visible .lm-suggested-name {
	color: var(--lm-sg-pink);
}

.lm-suggested .lm-suggested-by {
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--lm-sg-muted);
}

/* Looks like a link, deliberately isn't one — see the note in
   suggested-courses.php about not nesting <a> inside <a>. */
.lm-suggested .lm-suggested-author {
	color: var(--lm-sg-pink);
}

.lm-suggested .lm-suggested-meta {
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--lm-sg-muted);
}

/* --- Thumbnail -------------------------------------------- */
/* Fixed 16:9 box with the image cropped into it, so mismatched
   source ratios cannot make one row taller than the next. */
.lm-suggested .lm-suggested-thumb {
	flex: none;
	display: block;
	width: var(--lm-sg-thumb);
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	background: #fdf1f4;
}

.lm-suggested .lm-suggested-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.lm-suggested .lm-suggested-link:hover .lm-suggested-img,
.lm-suggested .lm-suggested-link:focus-visible .lm-suggested-img {
	transform: scale(1.06);
}

/* No featured image: keep the box, tint it, so the text column
   stays the same width down the whole list. */
.lm-suggested .lm-suggested-thumb--empty {
	background: linear-gradient(135deg, #fff4f7 0%, #fdf5f8 100%);
	border: 1px solid var(--lm-sg-rule);
}

/* --- Keyboard focus --------------------------------------- */
/* Rows are edge to edge inside the card, so a default outline
   would be clipped by the card padding on the left. Inset it. */
.lm-suggested .lm-suggested-link:focus-visible {
	outline: 2px solid var(--lm-sg-teal);
	outline-offset: -2px;
	border-radius: 10px;
}

/* --- Narrow sidebar --------------------------------------- */
/* The band just above 1200px is the tight one: the sidebar column
   is at its narrowest while still sitting beside the content
   (Tutor stacks it full width below 1200px, where 140px is
   comfortable again). A 140px thumb there leaves roughly 150px
   for the title, which clamps most course names to two lines and
   ellipsis. Stepping it down keeps the titles readable — the
   images stay 16/9 either way. */
@media (min-width: 1200px) and (max-width: 1320px) {
	.lm-suggested {
		--lm-sg-thumb: 112px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lm-suggested .lm-suggested-img,
	.lm-suggested .lm-suggested-arrow {
		transition: none;
	}

	.lm-suggested .lm-suggested-link:hover .lm-suggested-img {
		transform: none;
	}
}