@charset "utf-8";
/* ==========================================================================
   城市分站页 / 标签页  视觉改版样式        2026-09-27
   --------------------------------------------------------------------------
   · 本文件只「新增」class，不改动任何既有选择器 —— 对其它页面零回归风险。
   · 生效页面：/city.html、/tag、/tag/{标签}
   · 品牌色沿用站内 #0060ed，渐变沿用 .term-bar 的 #4403ff -> #0060ed。
   · 引入方式：template/dachao/head.html 里新增一行 <link>。
     之所以单独建文件而不是往 style.css 末尾追加：
     nginx 对 .css 下了 expires 12h（实测响应头），追加进旧文件后
     老访客 12 小时内拿到的仍是旧样式，页面会改不动。
   ========================================================================== */

.citypage,
.tagpage {
	--ct-brand: #0060ed;
	--ct-brand-deep: #4403ff;
	--ct-grad: linear-gradient(135deg, #4403ff 0%, #0060ed 100%);
	--ct-ink: #141727;
	--ct-ink-2: #5b6480;
	--ct-ink-3: #98a0b6;
	--ct-line: #e8ecf7;
	--ct-bg: #f5f7fd;
	--ct-card: #ffffff;
	--ct-shadow: 0 10px 26px -18px rgba(0, 96, 237, .55);
}

/* ==========================================================================
   一、城市分站列表 /city.html
   ========================================================================== */
.citypage {
	background-color: var(--ct-bg);
	background-image: radial-gradient(1200px 320px at 50% -120px, rgba(68, 3, 255, .10), rgba(68, 3, 255, 0) 70%);
	padding: 2.75rem 0 4rem;
	color: var(--ct-ink);
}

.citypage .container {
	padding-left: 15px;
	padding-right: 15px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* ---------- 顶部说明条 ---------- */
.citypage-lead {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	gap: 1rem;
	background: var(--ct-card);
	border: 1px solid var(--ct-line);
	border-radius: 14px;
	padding: 1.25rem 1.5rem;
	margin: 0 0 2.5rem;
	box-shadow: var(--ct-shadow);
}

.citypage-lead-icon {
	-webkit-box-flex: 0;
	-ms-flex: none;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: var(--ct-grad);
	color: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	font-size: 20px;
	box-shadow: 0 8px 18px -10px rgba(0, 96, 237, .9);
}

.citypage-lead p {
	margin: 0;
	font-size: 15px;
	line-height: 1.85;
	color: var(--ct-ink-2);
}

.citypage-lead b {
	display: inline-block;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	color: var(--ct-brand);
	margin: 0 .15em;
	vertical-align: -1px;
}

.citypage-lead-note {
	display: block;
	font-size: 12px;
	line-height: 1.7;
	color: var(--ct-ink-3);
	margin-top: .3rem;
}

/* ---------- 大区分组 ---------- */
.city-region-list {
	display: block;
}

.city-region {
	margin: 0 0 2.5rem;
}

.city-region:last-child {
	margin-bottom: 0;
}

.city-region-title {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: .7rem;
	margin: 0 0 1.15rem;
	padding: .62rem 1.1rem .62rem 1.2rem;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--ct-ink);
	/* 左侧浓、右侧散的渐变底，让每个大区自带一条「色带」节奏，
	   比单纯一条细下划线更能把 7 个分区切开 */
	background: linear-gradient(90deg, rgba(0, 96, 237, .10) 0%, rgba(68, 3, 255, .045) 46%, rgba(255, 255, 255, 0) 88%);
	border-radius: 0 12px 12px 0;
}

/* 左侧实心渐变竖条（border-image 与圆角冲突，用伪元素更稳） */
.city-region-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: .3rem;
	bottom: .3rem;
	width: 4px;
	border-radius: 0 3px 3px 0;
	background: var(--ct-grad);
}

.city-region-idx {
	-webkit-box-flex: 0;
	-ms-flex: none;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--ct-grad);
	color: #fff;
	font-style: normal;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .5px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	box-shadow: 0 6px 14px -8px rgba(0, 96, 237, .95);
}

.city-region-name {
	letter-spacing: 1px;
}

/* 城市数改为实心品牌色药丸：白底灰字在浅底上太弱，撑不起右侧的分量 */
.city-region-num {
	margin-left: auto;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
	color: #fff;
	background: var(--ct-brand);
	border-radius: 999px;
	padding: .12rem .7rem;
	box-shadow: 0 6px 14px -10px rgba(0, 96, 237, 1);
}


/* ---------- 城市卡片网格 ---------- */
.city-region-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
	gap: .75rem;
}

.city-card {
	position: relative;
	display: block;
	background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
	border: 1px solid #e3e9f8;
	border-radius: 12px;
	padding: .95rem 2.3rem .95rem 1.05rem;
	overflow: hidden;
	text-decoration: none !important;
	-webkit-transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

/* 左侧色条改为「常显 + hover 加深」：
   原来 scaleY(0) 只在 hover 出现，等于触屏/截图里完全没有这条视觉锚点 */
.city-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--ct-grad);
	opacity: .42;
	-webkit-transition: opacity .22s ease, width .22s ease;
	transition: opacity .22s ease, width .22s ease;
}

.city-card-name {
	display: block;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .3px;
	color: var(--ct-ink);
	-webkit-transition: color .22s ease;
	transition: color .22s ease;
}

.city-card-sub {
	display: block;
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--ct-ink-3);
	margin-top: .15rem;
}

/* 箭头同样改为常显（浅）-> hover 变实并右滑，保证一眼能看出「可点」 */
.city-card-arrow {
	position: absolute;
	right: 1rem;
	top: 50%;
	-webkit-transform: translate(-3px, -50%);
	transform: translate(-3px, -50%);
	font-size: 15px;
	color: var(--ct-brand);
	opacity: .3;
	-webkit-transition: opacity .22s ease, transform .22s ease;
	transition: opacity .22s ease, transform .22s ease;
}

.city-card:hover {
	-webkit-transform: translateY(-3px);
	transform: translateY(-3px);
	border-color: rgba(0, 96, 237, .45);
	background: linear-gradient(180deg, #ffffff 0%, #f0f6ff 100%);
	box-shadow: var(--ct-shadow);
}

.city-card:hover::before {
	opacity: 1;
	width: 4px;
}

.city-card:hover .city-card-name {
	color: var(--ct-brand);
}

.city-card:hover .city-card-arrow {
	opacity: 1;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
}

.city-empty {
	margin: 0;
	padding: 3rem 0;
	text-align: center;
	font-size: 15px;
	color: var(--ct-ink-3);
}

/* ==========================================================================
   二、标签页 /tag、/tag/{标签}
   ========================================================================== */
.tagpage {
	background-color: var(--ct-bg);
	background-image: radial-gradient(1100px 300px at 50% -110px, rgba(68, 3, 255, .10), rgba(68, 3, 255, 0) 70%);
	padding: 2.5rem 0 4rem;
	color: var(--ct-ink);
}

.tagpage .container {
	padding-left: 15px;
	padding-right: 15px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.tagpage-detail {
	padding-top: 1.5rem;
}

/* ---------- 总览页头部（标签总数） ---------- */
.tagpage-hero {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 1.5rem;
	overflow: hidden;
	background: var(--ct-card);
	border: 1px solid var(--ct-line);
	border-radius: 16px;
	padding: 1.5rem 1.75rem;
	margin-bottom: 2.25rem;
	box-shadow: var(--ct-shadow);
}

.tagpage-hero::after {
	content: "";
	position: absolute;
	right: -60px;
	top: -60px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 96, 237, .16), rgba(0, 96, 237, 0) 70%);
	pointer-events: none;
}

.tagpage-hero-num {
	-webkit-box-flex: 0;
	-ms-flex: none;
	flex: none;
	min-width: 132px;
	text-align: center;
	background: var(--ct-grad);
	color: #fff;
	border-radius: 14px;
	padding: 1rem 1.1rem;
	box-shadow: 0 12px 24px -14px rgba(0, 96, 237, 1);
}

.tagpage-hero-num b {
	display: block;
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -1px;
}

.tagpage-hero-num span {
	display: block;
	font-size: 12px;
	letter-spacing: 1px;
	opacity: .92;
	margin-top: .3rem;
}

.tagpage-hero-text {
	position: relative;
	z-index: 1;
}

.tagpage-hero-text h2 {
	margin: 0 0 .5rem;
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--ct-ink);
}

.tagpage-hero-text p {
	margin: 0;
	font-size: 14px;
	line-height: 1.85;
	color: var(--ct-ink-2);
}

/* ---------- 卡片区块 ---------- */
.ct-block {
	background: var(--ct-card);
	border: 1px solid var(--ct-line);
	border-radius: 14px;
	padding: 1.5rem 1.75rem;
	margin-bottom: 1.5rem;
}

.ct-block:last-child {
	margin-bottom: 0;
}

.ct-block-plain {
	background: transparent;
	border: 0;
	padding: 0;
}

.ct-block-title {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1.1rem;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--ct-ink);
}

.ct-block-title i {
	-webkit-box-flex: 0;
	-ms-flex: none;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: rgba(0, 96, 237, .10);
	color: var(--ct-brand);
	font-size: 13px;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

/* 区块标题右侧的补充说明（如「字号越大文章越多」），弱化处理不抢标题 */
.ct-block-hint {
	margin-left: auto;
	font-size: 12.5px;
	font-style: normal;
	font-weight: 400;
	color: var(--ct-ink-3);
}


/* ---------- 标签云 ---------- */
.ct-cloud {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: .55rem;
}

.ct-cloud-lg {
	gap: .65rem;
}

.ct-cloud-side {
	gap: .45rem;
}

.tag-chip {
	display: inline-block;
	line-height: 1.2;
	border: 1px solid var(--ct-line);
	border-radius: 999px;
	background: #f8faff;
	color: var(--ct-ink-2);
	text-decoration: none !important;
	white-space: nowrap;
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
}

.tag-chip-lg {
	font-size: 15.5px;
	padding: .5rem 1rem;
}

.tag-chip-md {
	font-size: 14px;
	padding: .45rem .85rem;
}

.tag-chip-sm {
	font-size: 13px;
	padding: .35rem .72rem;
}

/* 三档热度：hot 实底渐变 / major 浅底蓝字 / minor 透明描边
   —— 三档叠在一起才有「色彩节奏」，两档时整片云的重心看不出来 */
.tag-chip-hot {
	background: var(--ct-grad);
	border-color: transparent;
	color: #fff;
	font-weight: 600;
	box-shadow: 0 10px 20px -12px rgba(0, 96, 237, 1);
}

.tag-chip-major {
	border-color: rgba(0, 96, 237, .38);
	background: #e9f1ff;
	color: #0044b3;
	font-weight: 600;
}

.tag-chip-minor {
	background: #fbfcff;
	border-color: #eef1f9;
	color: var(--ct-ink-3);
}

.tag-chip-hot:hover,
.tag-chip-major:hover,
.tag-chip-minor:hover {
	background: var(--ct-grad);
	border-color: transparent;
	color: #fff;
}

.tag-chip:hover {
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
	box-shadow: 0 8px 16px -10px rgba(0, 96, 237, 1);
}

.tag-chip-empty {
	margin: 0;
	font-size: 14px;
	color: var(--ct-ink-3);
}

.ct-cloud-side .tag-chip {
	font-size: 12.5px;
	padding: .3rem .65rem;
}

/* ---------- 文章列表 ---------- */
.ct-news {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ct-news li {
	border-bottom: 1px dashed #eef1f9;
}

.ct-news li:last-child {
	border-bottom: 0;
}

.ct-news li a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: .75rem;
	padding: .95rem .1rem;
	text-decoration: none !important;
	-webkit-transition: padding-left .2s ease;
	transition: padding-left .2s ease;
}

.ct-news-t {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	font-size: 15.5px;
	font-weight: 500;
	color: var(--ct-ink);
	text-overflow: ellipsis;
	white-space: nowrap;
	-webkit-transition: color .2s ease;
	transition: color .2s ease;
}

/* ---------- PC / 移动双标题（替代本站未定义的 d-none / d-md-* 工具类）
   模板里同一篇文章输出两个标题：PC 取 34 字、移动取 14 字。
   若不在这里做互斥，两个 span 会同时显示 —— 标题被打印两遍。
   ------------------------------------------------------------------ */
.ct-news-t-mb {
	display: none;
}

@media (max-width: 767px) {
	.ct-news-t-pc {
		display: none;
	}

	.ct-news-t-mb {
		display: block;
	}
}

.ct-news-badges {
	-webkit-box-flex: 0;
	-ms-flex: none;
	flex: none;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	gap: .25rem;
}

.ct-news-badges .badge {
	font-size: 11px;
}

.ct-news-d {
	-webkit-box-flex: 0;
	-ms-flex: none;
	flex: none;
	font-size: 12.5px;
	color: var(--ct-ink-3);
	font-variant-numeric: tabular-nums;
}

.ct-news li a:hover {
	padding-left: .5rem;
}

.ct-news li a:hover .ct-news-t {
	color: var(--ct-brand);
}

/* ---------- 栏目入口 ---------- */
.ct-entries {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: .6rem;
}

.ct-entries-col {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: 0;
}

.ct-entry {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: .5rem;
	padding: .6rem .9rem;
	background: #f8faff;
	border: 1px solid var(--ct-line);
	border-radius: 10px;
	font-size: 14px;
	color: var(--ct-ink-2);
	text-decoration: none !important;
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
}

.ct-entry i {
	font-size: 13px;
	color: var(--ct-brand);
	-webkit-transition: color .2s ease;
	transition: color .2s ease;
}

.ct-entry:hover {
	background: var(--ct-grad);
	border-color: transparent;
	color: #fff;
}

.ct-entry:hover i {
	color: #fff;
}

.ct-entries-col .ct-entry {
	background: transparent;
	border: 0;
	border-bottom: 1px dashed #eef1f9;
	border-radius: 0;
	padding: .7rem .1rem;
}

.ct-entries-col .ct-entry:last-child {
	border-bottom: 0;
}

.ct-entries-col .ct-entry:hover {
	background: transparent;
	color: var(--ct-brand);
}

.ct-entries-col .ct-entry:hover i {
	color: var(--ct-brand);
}

/* ---------- 详情页左右分栏 ---------- */
.tagpage-detail .le-crumb {
	margin-bottom: 1.1rem;
}

.tagpage-grid {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	gap: 1.5rem;
}

.tagpage-main {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
}

.tagpage-side {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 300px;
	flex: 0 0 300px;
	width: 300px;
}

/* 分页条融进卡片，不再单独一块白底 */
.tagpage .pageinfo {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--ct-line);
	border-radius: 0;
	margin-top: .25rem;
	padding: 1.25rem 0 0;
}

/* ---------- 「查看全部标签」入口 ---------- */
.ct-alltags {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: .6rem;
	background: var(--ct-grad);
	border-radius: 12px;
	padding: .95rem 1.25rem;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	text-decoration: none !important;
	box-shadow: 0 12px 24px -16px rgba(0, 96, 237, 1);
	-webkit-transition: transform .2s ease, box-shadow .2s ease;
	transition: transform .2s ease, box-shadow .2s ease;
}

.ct-alltags span {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
}

.ct-alltags-arrow {
	-webkit-transition: transform .2s ease;
	transition: transform .2s ease;
}

.ct-alltags:hover {
	color: #fff;
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -16px rgba(0, 96, 237, 1);
}

.ct-alltags:hover .ct-alltags-arrow {
	-webkit-transform: translateX(3px);
	transform: translateX(3px);
}

/* ==========================================================================
   三、响应式
   ========================================================================== */
@media (max-width: 991px) {
	.tagpage-grid {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 1.25rem;
	}

	.tagpage-side {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
		width: 100%;
	}
}

@media (max-width: 768px) {
	.citypage {
		padding: 1.75rem 0 2.5rem;
	}

	.tagpage {
		padding: 1.5rem 0 2.5rem;
	}

	.citypage-lead {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: .75rem;
		padding: 1.1rem 1.15rem;
	}

	.citypage-lead b {
		font-size: 20px;
	}

	.city-region {
		margin-bottom: 1.85rem;
	}

	.city-region-grid {
		grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
		gap: .6rem;
	}

	.city-card {
		padding: .8rem 2rem .8rem .85rem;
	}

	.city-card-name {
		font-size: 15px;
	}

	.tagpage-hero {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: stretch;
		-ms-flex-align: stretch;
		align-items: stretch;
		gap: 1rem;
		padding: 1.25rem;
	}

	.tagpage-hero-num {
		min-width: 0;
		text-align: left;
		padding: .85rem 1rem;
	}

	.tagpage-hero-num b {
		font-size: 2.1rem;
	}

	.ct-block {
		padding: 1.15rem;
		border-radius: 12px;
	}

	.ct-news-t {
		font-size: 14.5px;
	}

	.ct-news li a {
		gap: .5rem;
	}

	.ct-news-d {
		font-size: 11.5px;
	}
}