@charset "utf-8";
/* ==========================================================================
   文章详情页右侧栏 · 推荐课程卡片（2026-09-28 新增）
   版式参照唯傲林网课站文章详情页右栏；内容取本站课程原字段（缩略图 + 标题）。
   作用域：所有选择器以 .newsconright .course-side 打头；.newsconright 仅出现在
           文章详情页模板，故不会波及其它页面。
   覆盖对象（style.css 原值，均为 .feature-post 系列）：
     .feature-post li        margin-bottom:20px; border-radius:4px; overflow:hidden; background:#fff
     .feature-post a         display:block
     .feature-post img       width:100%; height:auto
     .feature-post li:hover img  transform:scale(1.05)
     .feature-post span      position:absolute; left:0; bottom:0; width:100%; height:34px;
                             padding:0 10px; line-height:34px; color:#fff; font-size:12px;
                             background:rgba(0,0,0,.3)   <- 本文件对 span 逐项重置
   本文件用「更高特异性」覆盖上述规则，未使用 !important。
   品牌色：本站为蓝 #0060ed；本文件不出现任何橙色系。
   ========================================================================== */

/* --- 模块标题：与同栏「标签云 / 热门文章」标题同级 --- */
.newsconright .course-side .cs-head {
	margin: 0 0 16px;
	padding: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	color: #141727;
	border: 0;
	background: none;
}

/* --- 列表：清掉 .feature-post 的 li 间距 / 圆角 / 溢出裁切 / 白底 --- */
.newsconright .course-side ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.newsconright .course-side ul li {
	position: static;
	height: auto;
	margin: 0 0 16px;
	padding: 0;
	border-radius: 0;
	overflow: visible;
	background: transparent;
	line-height: normal;
}

.newsconright .course-side ul li:last-child {
	margin-bottom: 0;
}

/* --- 单条：横向 flex（缩略图 + 文字） --- */
.newsconright .course-side ul li a {
	display: flex;
	align-items: center;
	overflow: visible;
	white-space: normal;
	text-overflow: clip;
	font-size: 14px;
	color: #333;
	transition: color .25s ease-out 0s;
}

/* --- 缩略图：固定 100x56（与网课站同规格），原图等比裁切 --- */
.newsconright .course-side ul li a img {
	display: block;
	width: 100px;
	height: 56px;
	flex: 0 0 100px;
	max-width: none;
	border-radius: 4px;
	object-fit: cover;
	background: #f2f2f2;
	transition: none;
}

/* --- 覆盖原 .feature-post li:hover img 的放大效果 --- */
.newsconright .course-side ul li:hover img {
	-webkit-transform: none;
	transform: none;
}

/* --- 文字区：逐项重置 .feature-post span 的绝对定位样式 --- */
.newsconright .course-side .cs-info {
	position: static;
	left: auto;
	bottom: auto;
	display: block;
	width: auto;
	height: auto;
	padding: 0 0 0 10px;
	background: none;
	line-height: normal;
	color: inherit;
	font-size: 14px;
	flex: 1 1 auto;
	min-width: 0;
	/* ↓ 2026-09-28 补丁：原 .feature-post span 的 nowrap/ellipsis/hidden 必须逐项重置，
	      否则文本不换行 ⇒ .cs-tt 恒为 1 行，line-clamp 失效（实测高度 18px vs 网课站 36px） */
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
	word-wrap: normal;
	box-sizing: border-box;
}

.newsconright .course-side .cs-tt {
	position: static;
	left: auto;
	bottom: auto;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	width: auto;
	height: auto;
	padding: 0;
	background: none;
	overflow: hidden;                 /* ← 保留：line-clamp 依赖 overflow */
	font-size: 13px;
	line-height: 18px;
	color: #333;
	/* ↓ 2026-09-28 补丁：同 .cs-info，重置 span 继承来的不换行三件套 */
	text-overflow: clip;
	white-space: normal;
	word-wrap: normal;
	box-sizing: border-box;
}

/* --- 悬停：标题转本站品牌蓝 --- */
.newsconright .course-side ul li a:hover .cs-tt {
	color: #0060ed;
}

/* --- 移动端（断点与 m.css 的 900px 对齐） --- */
@media (max-width: 900px) {
	.newsconright .course-side .cs-head {
		font-size: 16px;
		margin-bottom: 14px;
	}
	.newsconright .course-side ul li {
		margin-bottom: 14px;
	}
}