/* ══════════════════════════════════════════════════════════════════════════
   skin-helpcategory.css —— 帮助文档分类页换肤层
   /helpcategory/*.html    模板 helpcategory.html

   ⚠ 覆盖层。厂商的 helparticle.css（这页也引它）114KB 一个字不改。
   颜色走 /themes/_shared/design-token.css。

   改之前的实测（1440px，分类 6「VPS问答」）：
     整页就是一列 10 条蓝链接（rgb(82,110,204)，站内没有的蓝），
     文字只占约 350px，**右边 650px 全空**；
     每条只有一个标题，没有任何其它信息；
     内容到 y=745 结束，页面被 min-height 撑到 1434 —— 底下 690px 是空白。

   数据可用性（先查过 shd_news_menu，分类 6 共 57 篇）：
     read 57/57 · push_time 57/57 · description 36/57 · label 40/57
     head_img **0/57** —— 一张图都没有，所以不做缩略图布局，
     靠「两列卡片 + 摘要 + 标签 + 元信息 + 页尾其它分类」把空间用起来。
   ══════════════════════════════════════════════════════════════════════════ */


/* ══ 1 · 头部 ═════════════════════════════════════════════════════════════ */
#content .help-content .topictitle1 {
	font-size: 28px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--ink-1, #111823);
	margin: 0 0 6px;
}
.bv-cat-sub {
	margin: 0 0 20px;
	font-size: 13px;
	color: var(--ink-4, #8D9AAB);
}
.bv-cat-sub b {
	color: var(--ink-2, #333F4E);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
#content .crumbs { font-size: 13px; color: var(--ink-4, #8D9AAB); }
#content .crumbs .link { color: var(--ink-3, #5E6B7C); }
#content .crumbs .link:hover { color: var(--brand-600, #D9520A); }


/* ══ 2 · 两列卡片 ══════════════════════════════════════════════════════════
   单列窄链接是「空旷」的主因：一行只放一个标题，右边整片浪费。
   两列之后同样 10 条只占 5 行，横向也吃满了。 */
#content .ullinks.bv-cat-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 1199.98px) {
	#content .ullinks.bv-cat-grid { grid-template-columns: minmax(0, 1fr); }
}
/* 分页原本就写在 <ul> 里面（结构上 div 塞进 ul 是上游的写法）。
   与其挪动它冒结构风险，不如让它横跨整行 —— 结果一样，模板改动少一处。 */
#content .ullinks.bv-cat-grid > .paginationWrap {
	grid-column: 1 / -1;
}

#content .ullinks.bv-cat-grid > .bv-cat-card {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	min-width: 0;
}
/* ⚠ 厂商有一条 `.help-content ul:not(.tex-guide-list) > li::after` 画橙色小圆点
   当项目符号（详见 skin-helparticle.css §3）。卡片式布局里那个点会飘在卡片
   左上角外面，必须关掉 —— 它是按 li 定位的，不是按 ul。 */
#content .ullinks.bv-cat-grid > .bv-cat-card::after,
#content .ullinks.bv-cat-grid > .bv-cat-card::before {
	display: none !important;
	content: none !important;
}

.bv-cat-link {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 16px 18px;
	border: 1px solid var(--line, #E2E7EF);
	border-radius: var(--r-card, 12px);
	background: var(--surface, #FFFFFF);
	text-decoration: none !important;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.bv-cat-link:hover {
	border-color: var(--brand-100, #FFE3D0);
	box-shadow: 0 6px 18px rgba(17, 24, 35, .07);
	transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
	.bv-cat-link, .bv-cat-link:hover { transition: none; transform: none; }
}

.bv-cat-title {
	display: block;
	padding-right: 22px;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 600;
	/* 原来链接是 rgb(82,110,204) 的蓝，站内没有这个色 */
	color: var(--ink-1, #111823);
	transition: color .15s ease;
}
.bv-cat-link:hover .bv-cat-title { color: var(--brand-600, #D9520A); }

/* 右上角箭头，hover 时往右挪一格 */
.bv-cat-link::after {
	content: "";
	position: absolute;
	top: 20px;
	right: 16px;
	width: 13px;
	height: 10px;
	background-color: var(--ink-4, #8D9AAB);
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 6h12M9.2 1.8 13.5 6l-4.3 4.2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 6h12M9.2 1.8 13.5 6l-4.3 4.2' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: background-color .15s ease, transform .15s ease;
}
.bv-cat-link:hover::after {
	background-color: var(--brand-500, #F2610C);
	transform: translateX(3px);
}

.bv-cat-desc {
	margin: 8px 0 0;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--ink-3, #5E6B7C);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bv-cat-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}
.bv-cat-tags:empty { display: none; }
.bv-cat-tag {
	padding: 2px 8px;
	border-radius: var(--r-chip, 4px);
	background: var(--surface-sunk, #EFF2F7);
	color: var(--ink-3, #5E6B7C);
	font-size: 11.5px;
	line-height: 17px;
	white-space: nowrap;
	max-width: 46%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* margin-top:auto 把元信息钉在卡片底部 —— 只有 63% 的文章有摘要，
   不钉底的话同一行两张卡的底边会参差不齐。 */
.bv-cat-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 12px;
	font-size: 12px;
	color: var(--ink-4, #8D9AAB);
	font-variant-numeric: tabular-nums;
}
.bv-cat-meta i {
	width: 1px;
	height: 10px;
	background: var(--line-strong, #CFD7E3);
	flex: 0 0 auto;
}


/* ══ 3 · 空态 ══════════════════════════════════════════════════════════════ */
.bv-cat-empty {
	padding: 60px 20px;
	text-align: center;
	color: var(--ink-4, #8D9AAB);
	border: 1px dashed var(--line-strong, #CFD7E3);
	border-radius: var(--r-card, 12px);
	font-size: 14px;
}


/* ══ 4 · 分页 ══════════════════════════════════════════════════════════════ */
#content .paginationWrap > .pagination-container {
	height: auto !important;
	padding-top: 24px !important;
	margin-bottom: 0 !important;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
#content .pagination-text { color: var(--ink-4, #8D9AAB); font-size: 13px; }


/* ══ 5 · 页尾「浏览其它分类」 ══════════════════════════════════════════════
   内容到 y=745 就结束了，页面却被 min-height 撑到 1434 —— 底下 690px 纯空白，
   而且读者看完这一屏没有任何去处。这一块用的是侧栏同一份 $helpCate 数据，
   必然有值，既填了版面也真的有用（窄屏侧栏是收起来的，这里等于把出口补回来）。 */
.bv-cat-other {
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var(--line, #E2E7EF);
}
.bv-cat-other-h {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink-1, #111823);
}
.bv-cat-other-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* ⚠ 这三个值都得提权。厂商有两条规则专挑列表项：
     `.help-content ul:not(.tex-guide-list) li + li { margin-top: 8px }`  (0,3,3)
     以及给 li 的 `padding-left: 12px`
   我原来写的 `.bv-cat-other-grid > li` 只有 (0,1,1)，全被压掉 ——
   实测第一个胶囊 y=1050，后面六个 y=1058，**上边缘差 8px 不齐**，
   而且第一个因为没吃到 margin 反而被拉高成 70px（其余 62px）。
   加 `#content` 前缀（1,1,1）压过去；padding 也一并按 0 收，
   否则每个胶囊里的文字会莫名其妙左缩 12px。
   （上面卡片那条当初写了 !important 所以没中招，这里是漏的。） */
#content .bv-cat-other-grid > li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
#content .bv-cat-other-grid > li::after,
#content .bv-cat-other-grid > li::before { display: none !important; content: none !important; }
.bv-cat-other-grid a {
	display: block;
	padding: 11px 14px;
	border: 1px solid var(--line, #E2E7EF);
	border-radius: var(--r-ctl, 8px);
	font-size: 13.5px;
	color: var(--ink-2, #333F4E);
	text-decoration: none !important;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bv-cat-other-grid a:hover {
	background: var(--brand-50, #FFF4ED);
	border-color: var(--brand-100, #FFE3D0);
	color: var(--brand-700, #B84508);
}
.bv-cat-other-grid a.bv-on {
	background: var(--brand-50, #FFF4ED);
	border-color: var(--brand-100, #FFE3D0);
	color: var(--brand-700, #B84508);
	font-weight: 500;
	cursor: default;
}


/* ══ 6 · 左栏当前分类 ══════════════════════════════════════════════════════ */
#content .side-menu-list a.bv-on,
#content .side-nav .nav-item a.bv-on {
	color: var(--brand-700, #B84508);
	font-weight: 500;
}
#content .side-menu-list a:hover,
#content .side-nav .nav-item a:hover { color: var(--brand-600, #D9520A); }


/* ══ 7 · 窄屏 ══════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
	#content .help-content .topictitle1 { font-size: 21px; }
	.bv-cat-link { padding: 14px 15px; }
	.bv-cat-title { font-size: 15.5px; }
	.bv-cat-desc { font-size: 13px; }
	.bv-cat-other-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
	.bv-cat-other { margin-top: 28px; padding-top: 20px; }
}