@charset "utf-8";
/*
	易菇网 · 专题详情页专用样式（/special/show.php）
	作用域：仅专题详情模板 chan_special_show.htm 使用
	前缀 sp- 与全局 ch-（channel2.css）/ dt-（moment-detail.css）/ know* 完全隔离，互不影响
	约定色值沿用 theme.css 的 --f-* 变量，缺省值兜底
*/

/* ================= ① 专题头部（横幅 + 标题 + 元信息 + 简介） ================= */
.sp-hero {
	position: relative; margin-bottom: 20px; overflow: hidden;
	background: #FFFFFF;
	border: 1px solid var(--f-line, rgba(61,214,140,.14));
	border-radius: var(--f-radius, 20px);
	box-shadow: 0 8px 30px rgba(18,51,42,.06);
}
.sp-hero-banner { position: relative; display: block; background: linear-gradient(135deg,#0E3B2E,#134F3C 58%,#0E4E52); }
.sp-hero-banner img { display: block; width: 100%; max-height: 400px; object-fit: cover; }
.sp-hero-nopic { height: 150px; }
.sp-hero-nopic::after {
	content: ''; position: absolute; inset: 0;
	background: radial-gradient(120% 130% at 82% 12%, rgba(61,214,140,.28), transparent 62%),
	            radial-gradient(90% 90% at 8% 96%, rgba(59,130,246,.20), transparent 60%);
}
.sp-hero-head { display: flex; gap: 22px; align-items: flex-start; padding: 22px 26px 0; }
.sp-hero-l { flex: 1 1 auto; min-width: 0; }
.sp-hero-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-tag {
	display: inline-flex; align-items: center; height: 25px; padding: 0 12px;
	border-radius: 13px; font-size: 12px; font-weight: 700; letter-spacing: .3px;
	color: #137A52; background: rgba(61,214,140,.14); border: 1px solid rgba(61,214,140,.3);
	text-decoration: none; transition: .2s;
}
.sp-tag:hover { background: rgba(61,214,140,.24); }
.sp-tag-hot { color: #B4471F; background: rgba(242,84,91,.1); border-color: rgba(242,84,91,.28); }
.sp-hero-t {
	margin: 10px 0 0; font-size: 28px; line-height: 1.42; font-weight: 800;
	letter-spacing: -.3px; color: var(--f-ink, #12332A);
}
.sp-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.sp-hero-thumb {
	flex: 0 0 170px; width: 170px; height: 120px; border-radius: 12px; overflow: hidden;
	border: 1px solid var(--f-line, rgba(61,214,140,.14)); background: #F1F7F4;
}
.sp-hero-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-hero-lead {
	margin: 0; padding: 15px 26px 23px;
	font-size: 14.5px; line-height: 1.95; color: var(--f-ink2, #4A6A5E);
}

/* ================= ② 结语 / 总结语（后台自定义字段） ================= */
.sp-note {
	position: relative; margin: 0 0 20px; padding: 20px 26px 20px 28px;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(61,214,140,.075), rgba(38,198,218,.05) 60%, rgba(124,107,245,.04));
	border: 1px solid rgba(61,214,140,.26);
}
.sp-note::before {
	content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px;
	border-radius: 0 4px 4px 0; background: linear-gradient(180deg,#3DD68C,#26C6DA);
}
.sp-note-h { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.sp-note-h b { font-size: 14.5px; font-weight: 800; color: #0F8A5B; letter-spacing: .5px; white-space: nowrap; }
.sp-note-h i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(61,214,140,.45), transparent); }
.sp-note-h em { font-style: normal; font-size: 11px; letter-spacing: 1.2px; color: rgba(61,214,140,.7); }
.sp-note p { margin: 0 0 11px; font-size: 14.5px; line-height: 2.0; color: #2E4A40; text-indent: 2em; }
.sp-note p:last-child { margin-bottom: 0; }
.sp-note-zj { background: linear-gradient(135deg, rgba(124,107,245,.07), rgba(38,198,218,.05)); border-color: rgba(124,107,245,.24); }
.sp-note-zj::before { background: linear-gradient(180deg,#7C6BF5,#26C6DA); }
.sp-note-zj .sp-note-h b { color: #6A5AE0; }
.sp-note-zj .sp-note-h i { background: linear-gradient(90deg, rgba(124,107,245,.42), transparent); }
.sp-note-zj .sp-note-h em { color: rgba(124,107,245,.65); }

/* ================= ③ 正文 ================= */
.sp-article {
	position: relative; padding: 20px 24px; border-radius: 13px;
	background: linear-gradient(180deg,#FBFEFC,#FFFFFF);
	border: 1px solid #E6F0EB;
}
.sp-article::before {
	content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
	border-radius: 13px 0 0 13px; background: linear-gradient(180deg,#3DD68C,#26C6DA);
}
.sp-article .content, .sp-article #article {
	font-size: 15.5px; line-height: 2.0; color: #2E4A40; word-break: break-word;
}
.sp-article p { margin: 0 0 15px; }
.sp-article img { max-width: 100%; height: auto; border-radius: 10px; margin: 10px 0; }
.sp-article a { color: #22B573; }
.sp-article table { max-width: 100%; border-collapse: collapse; }
.sp-article td, .sp-article th { border: 1px solid #E6F0EB; padding: 8px 12px; font-size: 14px; }

/* ================= ④ 主栏区块标题 ================= */
.sp-block { margin-top: 22px; }
.sp-block-h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.sp-block-h h3 {
	margin: 0; font-size: 17px; font-weight: 800; color: var(--f-ink, #12332A);
	position: relative; padding-left: 13px; letter-spacing: .3px; white-space: nowrap;
}
.sp-block-h h3::before {
	content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 4px; height: 16px; border-radius: 2px;
	background: linear-gradient(180deg, var(--f-p1, #3DD68C), var(--f-p2, #2BB673));
}
.sp-block-h i { flex: 1; height: 1px; background: linear-gradient(90deg,#D5E6DE,transparent); }
.sp-block-h em { font-style: normal; font-size: 12px; color: var(--f-ink3, #8AA79C); white-space: nowrap; }

/* ================= ⑤ 专题内容网格 ================= */
.sp-items { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.sp-item {
	display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
	background: #FFFFFF; border: 1px solid #E6F0EB; border-radius: 12px;
	transition: transform .2s, box-shadow .2s, border-color .2s;
}
.sp-item:hover { transform: translateY(-2px); border-color: rgba(61,214,140,.5); box-shadow: 0 8px 22px rgba(18,51,42,.09); }
.sp-item-pic { height: 132px; background: #F1F7F4; }
.sp-item-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-item-noimg {
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg,#CFE9DD,#EAF7F1);
	color: #4A6A5E; font-size: 12.5px; font-weight: 700; letter-spacing: .5px;
}
.sp-item-b { padding: 11px 12px 12px; }
.sp-item-b b {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	font-size: 13.5px; font-weight: 600; line-height: 1.62; color: var(--f-ink, #12332A);
}
.sp-item-b span { display: block; margin-top: 7px; font-size: 11.5px; color: var(--f-ink4, #B8CFC6); }
.sp-item:hover .sp-item-b b { color: #137A52; }

/* 纯文本列表（后台未设置图片调用数量时使用） */
.sp-litems { display: flex; flex-direction: column; }
.sp-litems a {
	display: flex; align-items: center; gap: 10px; padding: 11px 4px;
	border-bottom: 1px dashed #EDF3F0; font-size: 14px; color: var(--f-ink2, #4A6A5E); text-decoration: none;
}
.sp-litems a:last-child { border-bottom: none; }
.sp-litems a::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--f-p1, #3DD68C); opacity: .7; }
.sp-litems a b { flex: 1 1 auto; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-litems a:hover { color: #137A52; }
.sp-litems a:hover b { font-weight: 600; }
.sp-litems a span { flex: none; font-size: 12px; color: var(--f-ink4, #B8CFC6); }

/* ================= ⑥ 视频 / 直播 ================= */
.sp-video { position: relative; border-radius: 14px; overflow: hidden; background: #0E3B2E; }
.sp-video video { display: block; width: 100%; max-height: 480px; background: #0E3B2E; }
.sp-live { position: relative; display: block; border-radius: 14px; overflow: hidden; text-decoration: none; }
.sp-live img { display: block; width: 100%; max-height: 320px; object-fit: cover; }
.sp-live::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(6,26,20,.72), rgba(6,26,20,.15));
}
.sp-live span {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2;
	padding: 11px 26px; border-radius: 26px; font-size: 14px; font-weight: 700; color: #FFFFFF;
	background: linear-gradient(135deg,#22B573,#1490B5); box-shadow: 0 8px 22px rgba(20,144,181,.35);
}

/* ================= ⑦ 关键词 ================= */
.sp-kws { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-kws a {
	padding: 5px 13px; border-radius: 15px; font-size: 12.5px; text-decoration: none;
	color: var(--f-ink2, #4A6A5E); background: #EDF6F1; border: 1px solid #E6F0EB; transition: .2s;
}
.sp-kws a:hover { color: #137A52; background: rgba(61,214,140,.16); border-color: rgba(61,214,140,.45); }

/* ================= ⑧ 主栏底部：热榜（双列） ================= */
.sp-hot { column-count: 2; column-gap: 30px; }
.sp-hot .ch-rel-list { display: block; }
.sp-hot .ch-rel-list li { break-inside: avoid; }

/* ================= ⑧b 上一条 / 下一条 ================= */
.sp-nav { display: flex; gap: 12px; margin-top: 22px; }
.sp-nav a {
	flex: 1 1 0; min-width: 0; display: block; padding: 13px 16px; text-decoration: none;
	background: #FFFFFF; border: 1px solid #E6F0EB; border-radius: 12px; transition: .2s;
}
.sp-nav a:hover { border-color: rgba(61,214,140,.5); background: #F7FBF9; }
.sp-nav em { display: block; font-style: normal; font-size: 11.5px; color: var(--f-ink3, #8AA79C); margin-bottom: 5px; }
.sp-nav b {
	display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
	font-size: 13.5px; font-weight: 600; color: var(--f-ink, #12332A); line-height: 1.6;
}
.sp-nav a:hover b { color: #137A52; }
.sp-nav .sp-nav-r { text-align: right; }
.sp-nav-none { flex: 1 1 0; }

/* ================= ⑨ 侧栏：专题信息表 ================= */
.sp-info { display: flex; flex-direction: column; }
.sp-info-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed #EDF3F0; font-size: 12.5px; line-height: 1.7; }
.sp-info-row:last-child { border-bottom: none; }
.sp-info-row em { flex: 0 0 60px; font-style: normal; color: var(--f-ink3, #8AA79C); }
.sp-info-row b { flex: 1 1 auto; min-width: 0; font-weight: 600; color: #2C4A40; word-break: break-word; }
.sp-info-row b a { color: #137A52; text-decoration: none; }
.sp-info-row b a:hover { text-decoration: underline; }

/* 侧栏：同类专题 */
.sp-rlist { list-style: none; margin: 0; padding: 0; }
.sp-rlist li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dashed #EDF3F0; }
.sp-rlist li:last-child { border-bottom: none; }
.sp-rlist a {
	flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.6; color: var(--f-ink2, #4A6A5E);
	text-decoration: none; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
	-webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.sp-rlist a:hover { color: #137A52; }
.sp-rlist span { flex: none; font-size: 11.5px; color: var(--f-ink4, #B8CFC6); }

/* ================= ⑩ 响应式 ================= */
@media (max-width: 1400px) {
	.sp-items { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 1160px) {
	.sp-hero-thumb { flex: 0 0 140px; width: 140px; height: 100px; }
	.sp-hero-t { font-size: 25px; }
	.sp-items { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 900px) {
	.sp-hero-head { flex-direction: column; gap: 16px; padding: 18px 16px 0; }
	.sp-hero-thumb { flex: none; width: 100%; height: 168px; }
	.sp-hero-lead { padding: 13px 16px 19px; }
	.sp-hero-t { font-size: 21px; }
	.sp-hero-banner img { max-height: 240px; }
	.sp-note { padding: 17px 16px 17px 19px; }
	.sp-note p { font-size: 14px; line-height: 1.92; }
	.sp-article { padding: 16px 16px; }
	.sp-items { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.sp-hot { column-count: 1; }
	.sp-nav { flex-direction: column; }
	.sp-nav .sp-nav-r { text-align: left; }
	.sp-nav-none { display: none; }
}
@media (max-width: 560px) {
	.sp-items { grid-template-columns: minmax(0,1fr); }
	.sp-item-pic { height: 172px; }
}

/* ================= ⑪ 主体布局：主栏左边界与上方横幅对齐 + 加宽 =================
	.moment-detail.css 给 .dt-ms-main 的通用内边距是 padding:30px 34px 34px，
	使主栏内容左边界比上面的 .sp-hero 卡片内缩 34px，左栏看起来比横幅窄一截。
	这里用 .sp-body 限定本页：去掉主栏左内边距（内容左边界 = 横幅左边界），
	并把侧栏由 340px 收到 320px，两处合计为主栏释放约 54px 可用宽度。 */
.sp-body { align-items: stretch; }
.sp-body .dt-ms-main { padding: 26px 30px 34px 0; }
.sp-body .dt-ms-side { flex: 0 0 320px; width: 320px; }
/* ≤1160px 转为上下堆叠：主栏左右同时对齐横幅，避免只对齐一侧 */
@media (max-width: 1160px) {
	.sp-body .dt-ms-main { padding: 18px 0 26px; border-right: 0; }
	.sp-body .dt-ms-side { flex: none; width: auto; }
}