/* 首页·题库编排 —— 与 xiuno 风格自洽 */
/*
 * 性能说明（重要）：
 * 早期版本在这里用 @import 引入 paper_question 的 tabler-icons.min.css 做「图标兜底」，
 * 但 ①@import 是串行阻塞的（要先下完本文件才发现还要下它，多一个 RTT 且阻塞首屏渲染）；
 * ②它的 @font-face 路径是 ./fonts/tabler-icons.woff2，解析后与主程序
 *   /view/vendor/tabler-icons/fonts/tabler-icons.woff2 不是同一个 URL，
 *   浏览器会重复下载一份 221KB 的 woff2 字体。
 * 现在主程序 view/htm/header.inc.htm 已经「同步」加载 tabler-icons（不再用 media=print+onload 异步），
 * 图标显示是可靠的，因此这里不再重复引入。请勿加回 @import。
 */

/* ============ Hero 区 ============ */
.hp-hero {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	background: linear-gradient(135deg, #4f6ef7 0%, #6a5ae0 55%, #8a5ae0 100%);
	color: #fff;
	padding: 2.4rem 1.5rem 2rem;
	box-shadow: 0 10px 30px rgba(79,110,247,.18);
}
/* 装饰光晕：左下柔光 + 右上亮圆，纯装饰不接收鼠标事件 */
.hp-hero::before,
.hp-hero::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.hp-hero::before {
	left: -80px; bottom: -100px;
	width: 280px; height: 280px;
	background: radial-gradient(circle, rgba(255,255,255,.16), rgba(255,255,255,0) 70%);
}
.hp-hero::after {
	right: -70px; top: -70px;
	width: 230px; height: 230px;
	background: rgba(255,255,255,.10);
}
.hp-hero > div { position: relative; z-index: 1; }
.hp-hero h1 {
	font-weight: 800;
	font-size: clamp(1.25rem, 1rem + 1.5vw, 1.95rem);
	line-height: 1.35;
	letter-spacing: .5px;
	margin-bottom: .6rem;
	text-shadow: 0 2px 12px rgba(0,0,0,.12);
}
.hp-hero .hp-hero-sub {
	opacity: .95;
	font-size: clamp(.84rem, .8rem + .3vw, 1rem);
	line-height: 1.8;
	max-width: 680px;
	margin: 0 auto .2rem;
}
.hp-hero .btn { transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.hp-hero .btn:hover { transform: translateY(-2px); }
.hp-hero .btn-light {
	background: #fff;
	color: #4f6ef7;
	font-weight: 600;
	border: 0;
	box-shadow: 0 6px 16px rgba(0,0,0,.14);
}
.hp-hero .btn-outline-light {
	border-color: rgba(255,255,255,.55);
	color: #fff;
}
.hp-hero .btn-outline-light:hover { background: rgba(255,255,255,.16); color: #fff; }

/* 统计：玻璃质感卡片 */
.hp-stats .hp-stat {
	/* 半透明+描边即可，不用 backdrop-filter：手机上模糊合成开销大、易掉帧 */
	background: rgba(255,255,255,.16);
	border: 1px solid rgba(255,255,255,.22);
	border-radius: .9rem;
	padding: .7rem 1.15rem;
	min-width: 104px;
	transition: transform .18s ease, background .18s ease;
}
.hp-stats .hp-stat:hover { transform: translateY(-2px); background: rgba(255,255,255,.22); }
.hp-stats .hp-stat-num {
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .5px;
	/* 等宽数字：数字滚动时宽度不变，避免布局抖动（CLS） */
	font-variant-numeric: tabular-nums;
}
.hp-stats .hp-stat-label {
	font-size: .75rem;
	opacity: .92;
	margin-top: .3rem;
}

/* ============ 功能入口 ============ */
.hp-entry {
	text-align: center;
	padding: 1.3rem .9rem;
	border: 1px solid rgba(31,45,61,.06);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	height: 100%;
}
.hp-entry:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(31,45,61,.10);
	border-color: rgba(79,110,247,.35);
	text-decoration: none;
}
/* 插件内联图标（SVG，不依赖任何图标字体）：尺寸跟随父级字号，绝不缺字形 */
.hp-ico {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	vertical-align: -.125em;
}
/* Hero 内（按钮 / 统计标签）与文字保持间距，替代原图标的 me-1 */
.hp-hero .hp-ico { margin-right: .28rem; }

.hp-entry .hp-entry-icon {
	width: 50px;
	height: 50px;
	margin: 0 auto .65rem;
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.45rem;
	color: #fff;
	box-shadow: 0 6px 14px rgba(31,45,61,.16);
	transition: transform .18s ease, box-shadow .18s ease;
}
.hp-entry:hover .hp-entry-icon {
	transform: scale(1.07);
	box-shadow: 0 10px 20px rgba(31,45,61,.22);
}
/* 12 个入口各自配色：统一渐变风格，又保留色相区分，便于一眼找到 */
.hp-entries > div:nth-child(1)  .hp-entry-icon { background: linear-gradient(135deg,#5b7cfa,#6a5ae0) !important; }
.hp-entries > div:nth-child(2)  .hp-entry-icon { background: linear-gradient(135deg,#12b981,#059669) !important; }
.hp-entries > div:nth-child(3)  .hp-entry-icon { background: linear-gradient(135deg,#14b8a6,#0d9488) !important; }
.hp-entries > div:nth-child(4)  .hp-entry-icon { background: linear-gradient(135deg,#f05252,#dc2626) !important; }
.hp-entries > div:nth-child(5)  .hp-entry-icon { background: linear-gradient(135deg,#fb7185,#e11d48) !important; }
.hp-entries > div:nth-child(6)  .hp-entry-icon { background: linear-gradient(135deg,#8b5cf6,#7c3aed) !important; }
.hp-entries > div:nth-child(7)  .hp-entry-icon { background: linear-gradient(135deg,#f97316,#ea580c) !important; }
.hp-entries > div:nth-child(8)  .hp-entry-icon { background: linear-gradient(135deg,#d946ef,#c026d3) !important; }
.hp-entries > div:nth-child(9)  .hp-entry-icon { background: linear-gradient(135deg,#f59e0b,#d97706) !important; }
.hp-entries > div:nth-child(10) .hp-entry-icon { background: linear-gradient(135deg,#7c3aed,#6d28d9) !important; }
.hp-entries > div:nth-child(11) .hp-entry-icon { background: linear-gradient(135deg,#22c55e,#16a34a) !important; }
.hp-entries > div:nth-child(12) .hp-entry-icon { background: linear-gradient(135deg,#0ea5e9,#0284c7) !important; }
.hp-entry .hp-entry-title { font-weight: 600; font-size: .95rem; }
.hp-entry .hp-entry-desc {
	font-size: .78rem;
	color: var(--bs-secondary-color);
	line-height: 1.55;
	margin-top: .2rem;
}

/* ============ 区块小标题 ============ */
.hp-sec-head {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
	margin-bottom: .8rem;
}
.hp-sec-head .hp-sec-bar {
	width: 4px;
	height: 16px;
	border-radius: 3px;
	background: linear-gradient(180deg,#4f6ef7,#8a5ae0);
	flex-shrink: 0;
}
.hp-sec-head .hp-sec-title { font-weight: 700; font-size: .98rem; }
.hp-sec-head .hp-sec-desc { font-size: .8rem; color: var(--bs-secondary-color); }
.hp-sec-head .hp-sec-more { font-size: .8rem; }

/* ============ 知识点 / 方法卡标签 ============ */
.hp-cat-tag {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .38rem .8rem;
	border-radius: 2rem;
	font-size: .82rem;
	background: var(--bs-secondary-bg);
	color: var(--bs-body-color);
	border: 1px solid rgba(31,45,61,.07);
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.hp-cat-tag:hover {
	background: linear-gradient(135deg,#4f6ef7,#6a5ae0);
	border-color: transparent;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(79,110,247,.28);
	text-decoration: none;
}

/* ============ 最新专题卷 ============ */
.hp-paper-card {
	position: relative;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
	height: 100%;
	border-left: 3px solid transparent;
}
.hp-paper-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--bs-box-shadow);
	border-left-color: #4f6ef7;
	text-decoration: none;
}
.hp-paper-card .hp-paper-title {
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.4;
	color: var(--bs-body-color);
}
.hp-paper-card:hover .hp-paper-title { color: #4f6ef7; }
.hp-paper-meta {
	font-size: .75rem;
	color: var(--bs-secondary-color);
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
	margin-top: .55rem;
}

/* 卷型徽章配色 */
.hp-badge { font-size: .72rem; padding: .2rem .55rem; border-radius: 2rem; }
.hp-badge-worksheet { background: #eef2ff; color: #4f6ef7; }
.hp-badge-sync      { background: #ecfdf5; color: #10b981; }
.hp-badge-unit      { background: #fff7ed; color: #f97316; }
.hp-badge-monthly   { background: #fef2f2; color: #ef4444; }
.hp-badge-exam      { background: #f5f3ff; color: #8b5cf6; }

/* ============ 入场动画 ============ */
/* hp-anim 由 JS 添加：JS 未加载/出错时内容照常显示，不会白屏 */
.hp-anim { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.hp-anim.hp-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.hp-anim, .hp-anim.hp-in { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============ 手机浏览适配 ============ */
@media (max-width: 767.98px) {
	.hp-hero { padding: 1.5rem 1rem 1.3rem; border-radius: 14px; }
	.hp-hero h1 { font-size: 1.2rem; }
	.hp-hero .hp-hero-sub { font-size: .84rem; line-height: 1.7; }
	.hp-hero .btn { padding: .4rem .8rem; font-size: .85rem; }
	.hp-stats { width: 100%; justify-content: center; margin-top: .75rem; flex-wrap: wrap; }
	.hp-stats .hp-stat { min-width: 84px; padding: .5rem .8rem; }
	.hp-stats .hp-stat-num { font-size: 1.2rem; }
	.hp-entry { padding: 1rem .5rem; }
	.hp-entry .hp-entry-icon { width: 44px; height: 44px; font-size: 1.25rem; border-radius: 13px; }
	.hp-entry .hp-entry-title { font-size: .86rem; }
	.hp-entry .hp-entry-desc { font-size: .72rem; }
	.hp-cat-tag { font-size: .78rem; padding: .32rem .66rem; }
	.hp-paper-card { padding: .9rem !important; }
	.hp-paper-meta { gap: .5rem; }
	.hp-sec-head .hp-sec-desc { width: 100%; }
}

/* ============ 首页隐藏论坛左侧导航 ============ */
/*
 * 首页使用论坛的三栏骨架：col-lg-2(左导航) + col-lg-10/col-xl-7(中) + col-xl-3(右)。
 * 首页以题库内容为主，左侧论坛导航会把首屏内容挤窄，因此：
 * - lg(992-1199)：隐藏左栏，中栏占满 12 列（此时右栏本来就不显示）；
 * - xl(≥1200)：隐藏左栏，中栏改为 9 列，右栏保持 3 列。
 * homepage.css 只在首页加载，不会影响论坛/帖子等其他页面。
 */
@media (min-width: 992px) {
	#body .container > .row.g-4 > div.col-lg-2 { display: none !important; }
	#body .container > .row.g-4 > div.col-lg-10 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 1200px) {
	#body .container > .row.g-4 > div.col-xl-7 { flex: 0 0 75%; max-width: 75%; }
}