/* ===========================================================================
   chaopmuban · 首页样式二（DUX 图文流）
   复刻 https://www.ypojie.com/ 的首页版式：
     轮播 → 专题入口 → 公告条 → 图文流列表 → 分页 ／ 右侧栏
   仅在「首页 + 样式二」时加载（见 inc/home-style.php 的条件 enqueue）。
   配色全部复用 main.css 的 CSS 变量，自动跟随夜间模式。
   =========================================================================== */

/* 轮播高度：后台「样式 → 轮播高度」由模板内联成 --cp-s2-h-cfg。
 * ★ 不能用内联的 --cp-s2-h 直接当 height —— 内联自定义属性会压过媒体查询，
 *   手机端的高度覆盖（见文件末尾 @media）就会失效。这里让内联只提供「默认值」，
 *   各断点直接改 height 来覆盖。 */
.cp-s2 {
	--cp-s2-h-cfg: 380px;
}

.cp-s2-main {
	padding: 18px 0 40px;
}

/* 首页 H1（2026-10-05 SEO 补强 P0-1）：样式二原先缺 H1。
   视觉上作为整页标题，与 .cp-s2-sec-title 同一套语言（左侧蓝竖条），
   但层级更高、不与「最新更新」等区块标题抢视觉。 */
.cp-s2-h1 {
	position: relative;
	margin: 0 0 16px;
	padding-left: 11px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--cp-ink);
}
.cp-s2-h1::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 18px;
	border-radius: 2px;
	background: var(--cp-blue);
}
@media (max-width: 768px) {
	.cp-s2-h1 { font-size: 17px; margin-bottom: 12px; }
}

/* ---------- ① 轮播 ---------- */
.cp-s2-slider {
	position: relative;
	height: var(--cp-s2-h-cfg);
	margin-bottom: 18px;
	border-radius: var(--cp-radius);
	overflow: hidden;
	background: var(--cp-card);
	box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}

.cp-s2-track {
	position: absolute;
	inset: 0;
}

.cp-s2-slide {
	position: absolute;
	inset: 0;
	display: block;
	opacity: 0;
	visibility: hidden;
	transition: opacity .55s ease, visibility .55s ease;
}
.cp-s2-slide.on {
	opacity: 1;
	visibility: visible;
}

.cp-s2-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 后台关掉「手机端显示轮播大图」时，<img> 会被包成 <picture>（桌面走 source 取真图、
   手机端回落 1px 占位，从根上不发起大图请求）。picture 默认是 inline，会让内部 img 的
   height:100% 参照不到 .cp-s2-slide ⇒ 这里显式补成块级满高盒子。
   （口径同 critical.css 里 .cp-resgrid-img picture 的既有写法） */
.cp-s2-slide picture {
	display: block;
	width: 100%;
	height: 100%;
}

/* 图片标题（左下角渐变压底，保证白字可读） */
.cp-s2-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 46px 22px 16px;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	background: linear-gradient(to top, rgba(8, 14, 24, .78), rgba(8, 14, 24, 0));
	pointer-events: none;
}

/* 左右箭头 */
.cp-s2-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(16, 24, 40, .38);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s, background .2s;
}
.cp-s2-arrow.prev { left: 14px; }
.cp-s2-arrow.next { right: 14px; }
.cp-s2-slider:hover .cp-s2-arrow { opacity: 1; }
.cp-s2-arrow:hover { background: rgba(16, 24, 40, .66); }

/* 圆点 */
.cp-s2-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	display: flex;
	justify-content: center;
	gap: 7px;
}
.cp-s2-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
	cursor: pointer;
	transition: background .2s, transform .2s;
}
.cp-s2-dot.on {
	background: #fff;
	transform: scale(1.18);
}

/* ---------- ② 专题入口 ---------- */
/* 2026-10-02：由 3 个增至 4 个。列数改 4、间距与卡片高度同步收窄，
   保证 4 张卡片在左列里等宽排满、背景图（cover）不被裁得难看。 */
.cp-s2-topics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 11px;
	margin-bottom: 18px;
}

.cp-s2-topic {
	position: relative;
	display: block;
	height: 112px;
	border-radius: var(--cp-radius);
	overflow: hidden;
	background-color: #1b2431;
	background-size: cover;
	background-position: center;
	color: #fff;
}
/* 压暗遮罩：保证图片上白字可读 */
.cp-s2-topic::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(8, 14, 24, .74), rgba(8, 14, 24, .12));
	transition: background .2s;
}
.cp-s2-topic:hover::after {
	background: linear-gradient(to top, rgba(8, 14, 24, .82), rgba(8, 14, 24, .3));
}
/* 无图分类：用主题色渐变兜底，不留空框 */
.cp-s2-topic-noimg {
	background-image: linear-gradient(135deg, #1e73be, #40baf5);
}

.cp-s2-topic-info {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 13px;
	z-index: 1;
}
.cp-s2-topic-info h2 {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}
.cp-s2-topic-info dfn {
	display: block;
	margin-bottom: 3px;
	font-size: 12px;
	font-style: normal;
	opacity: .82;
}

/* ---------- ③ 网站公告 ----------
 * 结构（.cp-notice / .cp-notice-tag / .cp-notice-text）与视觉统一定义在
 * css/main.css —— 页头那条与这里这条完全同款。此处只补内容区特有的下间距。 */
.cp-s2-left .cp-notice {
	margin-bottom: 18px;
}

/* ---------- ④⑤⑥ 两栏布局：左列（前置区块 + 图文流）／ 右栏（侧栏） ---------- */
/*
 * 轮播 / 专题 / 公告 / 图文流 全部收进 .cp-s2-left 左列，
 * 于是这三段前置区块的宽度与下方「最新更新」天然一致；
 * 侧栏成为独立列，从容器顶部起排（与轮播齐平）。
 * 注意：这里必须用 stretch（默认值）而不是 start —— 否则侧栏列只有内容高，
 *       内部 position: sticky 的 .cp-sidebar-inner 没有可滚动行程，吸顶会失效。
 */
.cp-s2-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 20px;
	align-items: stretch;
}
.cp-s2-grid.cp-s2-noside {
	grid-template-columns: minmax(0, 1fr);
}

.cp-s2-left {
	min-width: 0;
}

.cp-s2-content {
	min-width: 0;
}

/* 区块标题栏 */
.cp-s2-sec {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
	padding-bottom: 9px;
	border-bottom: 1px solid var(--cp-line);
}
.cp-s2-sec-title {
	position: relative;
	margin: 0;
	padding-left: 11px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}
.cp-s2-sec-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 17px;
	border-radius: 2px;
	background: var(--cp-blue);
}
.cp-s2-sec-more {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 13px;
	color: var(--cp-mut);
}
.cp-s2-sec-more:hover { color: var(--cp-blue); }

/* 图文流卡片（DUX 的 .excerpt） */
.cp-s2-post {
	position: relative;            /* 承接标题链接的浮动点击层（stretched link） */
	display: flex;
	gap: 16px;
	margin-bottom: 14px;
	padding: 15px;
	background: var(--cp-card);
	border: 1px solid var(--cp-line);
	border-radius: var(--cp-radius);
	transition: box-shadow .2s, transform .2s;
}
.cp-s2-post:hover {
	box-shadow: 0 4px 16px rgba(16, 24, 40, .09);
	transform: translateY(-1px);
}

.cp-s2-fig {
	flex: 0 0 218px;
	display: block;
	height: 142px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--cp-bg);
}
.cp-s2-fig img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}
.cp-s2-post:hover .cp-s2-fig img {
	transform: scale(1.04);
}
.cp-s2-nofig {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--cp-mut);
	opacity: .5;
}

.cp-s2-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.cp-s2-title {
	margin: 0 0 7px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.cp-s2-title a { color: var(--cp-ink); }
.cp-s2-title a:hover { color: var(--cp-blue); }
/* 整卡可点：标题链接的伪元素铺满卡片（同 URL 只保留这一条链接）
   .cp-s2-title 的 overflow:hidden 对其不裁剪——该伪元素的包含块是 .cp-s2-post */
.cp-s2-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.cp-s2-note {
	margin: 0 0 auto;
	color: var(--cp-mut);
	font-size: 13.5px;
	line-height: 1.72;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cp-s2-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 10px;
	color: var(--cp-mut);
	font-size: 12.5px;
}
.cp-s2-cat {
	position: relative;            /* 抬到整卡点击层之上，保证分类链接仍可点 */
	z-index: 2;
	flex: 0 0 auto;
	padding: 1px 9px;
	border-radius: 20px;
	background: rgba(30, 115, 190, .09);
	color: var(--cp-blue);
	font-size: 12px;
}
.cp-s2-cat:hover { background: var(--cp-blue); color: #fff; }
/* 置顶标（DUX 同款红色角标，is_sticky 时输出在标题前） */
.cp-s2-stick {
	display: inline-block;
	margin-right: 6px;
	padding: 0 6px;
	border-radius: 3px;
	background: #e4393c;
	color: #fff;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 20px;
	vertical-align: 2px;
}

/* ---------- 分页 ----------
 * v1.7.17 起样式二首页已取消「最新更新」分页（见 template/home-style-2.php），
 * 下面这几条规则当前无对应 DOM、零开销；保留是为了需要恢复分页时不用重写样式。 */
.cp-s2-pager {
	margin: 22px 0 4px;
}
.cp-s2-pager ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cp-s2-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 11px;
	border: 1px solid var(--cp-line);
	border-radius: 6px;
	background: var(--cp-card);
	color: var(--cp-ink);
	font-size: 14px;
}
.cp-s2-pager a.page-numbers:hover {
	border-color: var(--cp-blue);
	color: var(--cp-blue);
}
.cp-s2-pager .page-numbers.current {
	background: var(--cp-blue);
	border-color: var(--cp-blue);
	color: #fff;
}
.cp-s2-pager .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

.cp-s2-empty {
	padding: 30px 0;
	color: var(--cp-mut);
	text-align: center;
}

/* ---------- 夜间模式微调 ---------- */
body.cp-night .cp-s2-topic-noimg {
	background-image: linear-gradient(135deg, #14456f, #1b5c8c);
}
body.cp-night .cp-s2-cat {
	background: rgba(88, 166, 255, .14);
}
body.cp-night .cp-s2-cat:hover {
	background: var(--cp-blue);
	color: #0d1117;
}
body.cp-night .cp-s2-post:hover {
	box-shadow: none;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
	.cp-s2-grid {
		grid-template-columns: minmax(0, 1fr) 280px;
	}
	.cp-s2-fig {
		flex-basis: 190px;
		height: 126px;
	}
}

@media (max-width: 900px) {
	.cp-s2-topics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	/* 手机端压矮轮播（模板内联的 --cp-s2-h-cfg 只是默认值，这里直接覆盖 height）
	   2026-10-02：200 → 150，与参考站 ypojie.com 的移动端轮播高度一致 */
	.cp-s2-slider {
		height: 150px;
	}
	.cp-s2-main {
		padding: 12px 0 30px;
	}
	.cp-s2-cap {
		font-size: 14px;
		padding: 34px 14px 12px;
	}
	.cp-s2-arrow {
		display: none; /* 移动端靠手动滑动/圆点，避免误触 */
	}
	.cp-s2-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	/* 手机端取消右边栏小工具（用户 2026-10-02 要求）：整列隐藏，列表占满全宽 */
	.cp-s2-grid .cp-sidebar {
		display: none;
	}
	/* 手机端卡片改 DUX 列表式：左标题（＋日期/浏览数）、右缩略图，不显摘要 */
	.cp-s2-post {
		flex-direction: row-reverse; /* DOM 里图在前 → 反转后图靠右 */
		gap: 13px;
		padding: 12px;
	}
	.cp-s2-fig {
		flex: 0 0 112px;
		width: 112px;
		height: 84px;
		border-radius: 6px;
	}
	.cp-s2-body {
		justify-content: space-between;
	}
	.cp-s2-title {
		margin: 0;
		font-size: 16px;
		font-weight: 600;
		-webkit-line-clamp: 3;
	}
	.cp-s2-note {
		display: none; /* 列表页不显摘要，与目标站手机端一致 */
	}
	.cp-s2-meta {
		margin-top: 0;
		gap: 10px;
	}
	.cp-s2-cat {
		display: none;
	}
}