/* ============================================================
   maps.html - 网站地图页专属样式 (mp- 系统)
   基础皮肤复用 service-full.css 的 au- 全屏体系，
   本文件只负责「站点导航索引区」的高端卡片化布局。
   配色：深蓝 #16356b + 科技青蓝 #3f9df0，与全站一致。
   ============================================================ */

/* ===== 索引区容器 ===== */
.mp-index { background: linear-gradient(180deg, #eef3fb 0%, #f7f9fd 100%); padding: 88px 0 100px; position: relative; overflow: hidden; }
.mp-index::before {
	content: ''; position: absolute; top: -180px; right: -120px; width: 460px; height: 460px;
	background: radial-gradient(circle, rgba(63,157,240,.12), transparent 70%); border-radius: 50%;
}

/* ===== 快捷入口 ===== */
.mp-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-bottom: 70px; position: relative; z-index: 2; }
.mp-qcard {
	background: #fff; border: 1px solid rgba(22,53,107,.08); border-radius: 20px; padding: 30px 28px;
	text-decoration: none; transition: all .4s ease; position: relative; overflow: hidden; display: block;
}
.mp-qcard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
	background: linear-gradient(90deg, #3f9df0, #8ecbff); transform: scaleX(0); transition: transform .4s ease; }
.mp-qcard:hover { transform: translateY(-8px); box-shadow: 0 18px 48px rgba(32,106,228,.14); }
.mp-qcard:hover::before { transform: scaleX(1); }
.mp-qcard .mp-q-ico {
	width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, #206ae4, #4d8fff); margin-bottom: 20px;
}
.mp-qcard .mp-q-ico i { font-size: 26px; color: #fff; }
.mp-qcard h3 { font-size: 20px; font-weight: 700; color: #16356b; margin: 0 0 8px; }
.mp-qcard p { font-size: 13px; color: #8a97ad; line-height: 1.6; margin: 0; }
.mp-qcard .mp-q-arrow { position: absolute; top: 30px; right: 28px; font-size: 18px; color: #c4cede; transition: all .3s ease; }
.mp-qcard:hover .mp-q-arrow { color: #3f9df0; transform: translateX(4px); }

/* ===== 板块卡片 ===== */
.mp-block { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; position: relative; z-index: 2; }
.mp-item {
	background: #fff; border: 1px solid rgba(22,53,107,.08); border-radius: 20px; overflow: hidden;
	transition: all .4s ease; display: flex; flex-direction: column;
}
.mp-item:hover { transform: translateY(-8px); box-shadow: 0 18px 48px rgba(32,106,228,.13); border-color: rgba(63,157,240,.3); }
.mp-item .mp-item-head {
	display: flex; align-items: center; justify-content: space-between; padding: 24px 28px 20px;
	background: linear-gradient(135deg, #f3f7ff, #eaf1ff); border-bottom: 1px solid rgba(22,53,107,.05);
}
.mp-item .mp-item-head .mp-t {
	display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
}
.mp-item .mp-item-head .mp-t-ico {
	width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, #206ae4, #4d8fff);
}
.mp-item .mp-item-head .mp-t-ico i { font-size: 19px; color: #fff; }
.mp-item .mp-item-head .mp-t-name { font-size: 20px; font-weight: 800; color: #16356b; transition: color .3s; }
.mp-item .mp-item-head .mp-t:hover .mp-t-name { color: #206ae4; }
.mp-item .mp-item-head .mp-more { font-size: 13px; color: #3f9df0; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.mp-item .mp-item-head .mp-more:hover { color: #1856b8; }
.mp-item .mp-item-body { padding: 20px 28px 28px; flex: 1; }

/* 链接标签云 */
.mp-links { display: flex; flex-wrap: wrap; gap: 10px; }
.mp-links a {
	font-size: 14px; color: #4b5a78; text-decoration: none; display: inline-block;
	padding: 9px 16px; background: #f7f9fd; border: 1px solid rgba(22,53,107,.08);
	border-radius: 10px; transition: all .35s cubic-bezier(.34,1.56,.64,1); position: relative; overflow: hidden;
	max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom;
}
.mp-links a.mp-lk-long { max-width: 240px; }
.mp-links a::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
	background: linear-gradient(90deg, transparent, rgba(63,157,240,.12), transparent); transition: left .5s ease; }
.mp-links a:hover { background: linear-gradient(135deg, #206ae4, #4d8fff); color: #fff; border-color: transparent;
	transform: translateY(-3px); box-shadow: 0 8px 20px rgba(32,106,228,.28); }
.mp-links a:hover::before { left: 100%; }

/* 子分类标题 */
.mp-sub { font-size: 15px; font-weight: 700; color: #206ae4; margin: 6px 0 12px; display: flex; align-items: center; gap: 8px; }
.mp-sub::before { content: ''; width: 5px; height: 5px; border-radius: 50%;
	background: linear-gradient(135deg, #3f9df0, #8ecbff); box-shadow: 0 0 8px rgba(63,157,240,.5); }
.mp-sub + .mp-links { margin-bottom: 6px; }

/* 最新资讯/随机资讯 时间点 */
.mp-links .mp-lk-date { color: #9aa7c0; margin-left: 8px; font-size: 12px; }

/* 空态 */
.mp-empty { text-align: center; color: #a4aec2; font-size: 14px; padding: 20px 0; }

/* ===== 底部说明 ===== */
.mp-note { text-align: center; margin-top: 60px; color: #8a97ad; font-size: 14px; position: relative; z-index: 2; }
.mp-note i { color: #3f9df0; margin: 0 3px; }

/* ===== 响应式 ===== */
@media (max-width: 1200px) {
	.mp-quick { grid-template-columns: repeat(2, 1fr); }
	.mp-block { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.mp-index { padding: 56px 0 64px; }
	.mp-quick { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.mp-qcard { padding: 22px 20px; }
	.mp-qcard h3 { font-size: 17px; }
	.mp-block { grid-template-columns: 1fr; gap: 22px; }
	.mp-item .mp-item-head { padding: 20px 20px 16px; }
	.mp-item .mp-item-body { padding: 16px 20px 22px; }
}
@media (max-width: 480px) {
	.mp-quick { grid-template-columns: 1fr; }
	.mp-qcard p { display: none; }
}