/**
 * AKSRT - Categories Index Route Stylesheet
 *
 * 分类汇总页面 (templates/pages/page-categories.php) 专用样式：
 * 卡片网格、封面图、文章计数徽章、子分类胶囊条、页面顶部统计与底部返回。
 *
 * Tokens: 颜色 / 间距 / 圆角 / 阴影 全部来自 core/tokens.css
 */

/* ================================================
 * 页面头：标题 + 计数
 * ================================================ */
.aksrt-cats-header {
	margin-bottom: var(--space-7);
}

.aksrt-cats-header__meta {
	margin-top: var(--space-2);
	color: var(--color-ink-4);
	font-size: 13px;
}

/* ================================================
 * 网格容器
 * ================================================ */
.aksrt-cats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-5);
	margin-bottom: var(--space-8);
}

/* ================================================
 * 卡片
 * ================================================ */
.aksrt-cat-card {
	display: flex;
	flex-direction: column;
	background: var(--surface-page);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.aksrt-cat-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: var(--color-primary);
}

/* 封面图 */
.aksrt-cat-card__cover {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background-color: var(--surface-3);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	text-decoration: none;
}

.aksrt-cat-card__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(20, 28, 48, 0) 40%,
		rgba(20, 28, 48, 0.45) 100%
	);
	pointer-events: none;
}

/* 计数徽章 */
.aksrt-cat-card__count-badge {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	background: var(--color-primary);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-sm);
}

/* 卡片正文 */
.aksrt-cat-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5);
	flex: 1;
}

.aksrt-cat-card__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}

.aksrt-cat-card__title a {
	color: var(--color-ink);
	text-decoration: none;
	transition: color 0.15s ease;
}

.aksrt-cat-card__title a:hover {
	color: var(--color-primary);
}

.aksrt-cat-card__desc {
	margin: 0;
	color: var(--color-ink-3);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ================================================
 * 子分类胶囊条
 * ================================================ */
.aksrt-cat-card__children {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: auto;
	padding-top: var(--space-3);
	border-top: 1px dashed var(--color-line);
}

.aksrt-cat-card__children li {
	margin: 0;
	padding: 0;
}

.aksrt-cat-card__children a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background: var(--surface-2);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	color: var(--color-ink-3);
	font-size: 12px;
	line-height: 1.4;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.aksrt-cat-card__children a:hover {
	background: var(--color-primary-soft);
	border-color: var(--color-primary);
	color: var(--color-ink);
}

.aksrt-cat-card__child-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: var(--surface-3);
	border-radius: var(--radius-pill);
	color: var(--color-ink-4);
	font-size: 11px;
	font-weight: 600;
}

/* ================================================
 * 空状态
 * ================================================ */
.aksrt-cats-empty {
	padding: var(--space-9) var(--space-5);
	text-align: center;
	color: var(--color-ink-3);
	background: var(--surface-2);
	border: 1px dashed var(--color-line);
	border-radius: var(--radius-lg);
}

/* ================================================
 * 底部返回
 * ================================================ */
.aksrt-cats-footer {
	text-align: center;
	margin-top: var(--space-8);
}

/* ================================================
 * 响应式
 * ================================================ */
@media (max-width: 640px) {
	.aksrt-cats-grid {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}

	.aksrt-cat-card__body {
		padding: var(--space-4);
	}

	.aksrt-cat-card__title {
		font-size: 17px;
	}
}