/*
 * 7vga 栏目知识轮换 —— 只做极少量补充。
 * 卡片本体完全复用主题的 .card / .ico / h3 / p / .more，
 * 因此大小、圆角、阴影、hover 抬升与栏目下的内容方块完全一致。
 */

.know-card {
	display: flex;
	flex-direction: column;
}

/* 顶部小标签（沿用 .sys-card .tag 的观感，但不依赖主题作用域） */
.know-card .know-tag {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 1px;
	color: var(--cta, #f97316);
	margin-bottom: 10px;
}

/* 与 sys-card 一样把「更多」顶到底部，保证同排卡片等高时按钮对齐 */
.know-card .more {
	margin-top: auto;
}

/* 顶部小标签改为右上角绝对定位，不占 Flow 高度，使博文卡与服务卡结构一致、等高 */
.know-card .know-tag {
	position: absolute;
	top: 16px;
	right: 18px;
	margin-bottom: 0;
}

/* 标题最多 2 行，超出省略号截断；介绍仅在标题为 1 行时显示（2 行时由主题 JS 加 .no-intro 隐藏），
   从而让博文卡与栏目服务卡高度一致，不会因长标题/长介绍被撑高 */
.know-card h3 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.know-card p {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.know-card.no-intro p {
	display: none;
}

/* 「博客文章」卡片做一点区分：左侧渐变细条 */
.know-card[data-know="post"]::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, #06b6d4, #6366f1);
	opacity: .85;
	z-index: 1;
}

/* 分类页 / 博客页的整块知识区 */
.know-block {
	margin-top: 44px;
	padding-top: 30px;
	border-top: 1px solid rgba(15, 23, 42, .08);
}

.know-block-head {
	margin-bottom: 22px;
}

.know-block-head h3 {
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 6px;
}

.know-block-head .know-block-sub {
	font-size: 14px;
	color: var(--text-soft, #475569);
}

[data-theme="dark"] .know-block {
	border-top-color: rgba(255, 255, 255, .09);
}