/* ==================================================================
   pages/index.css — 三线门户首页（页面层：只写本页布局几何）
   依赖：static/base.css 的 token 与组件；本文件不得出现字面色值，
        不得使用 !important（见《前端显示优化方案_20260925.md》§3）
   ================================================================== */

body[data-page="index"] { display: flex; flex-direction: column; }

/* ---------- hero（V9.2：只留大标题块，描述小字已按评审意见移除） ---------- */
.hero {
  display: flex; align-items: center; justify-content: space-between; gap: var(--g-sp-6);
  max-width: var(--g-page); margin: 0 auto;
  padding: var(--g-sp-7) var(--g-sp-4) var(--g-sp-5);
}
.hero-main { display: flex; align-items: center; gap: var(--g-sp-4); min-width: 0; }
.hero-icon {
  width: 60px; height: 60px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; line-height: 1;
  border-radius: var(--g-r-xl);
  background: var(--g-wash-1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 12px 28px -10px rgba(79, 70, 229, 0.35);
}
.hero h1 {
  font-size: var(--g-fs-xl); font-weight: 900; letter-spacing: 0.4px; line-height: 1.25;
  background: var(--g-grad-ink);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero .subtitle { margin-top: 4px; font-size: var(--g-fs-base); font-weight: 500; color: var(--g-ink-2); }

/* ---------- 三线卡 ---------- */
.tracks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: var(--g-sp-4); }

.track-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--g-sp-5) var(--g-sp-5) var(--g-sp-4);
  border-radius: var(--g-r-xl); text-decoration: none; position: relative; overflow: hidden;
}
.track-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--g-grad); opacity: 0.9;
}
.track-card.t-knowledge::before { background: linear-gradient(90deg, var(--g-knowledge), var(--g-knowledge-2)); }
.track-card.t-tasks::before { background: linear-gradient(90deg, var(--g-tasks), var(--g-tasks-2)); }
.track-card.t-exams::before { background: linear-gradient(90deg, var(--g-exams), var(--g-exams-2)); }

.track-icon {
  width: 52px; height: 52px; margin-bottom: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; border-radius: var(--g-r-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 10px 20px -10px rgba(15, 23, 42, 0.3);
}
.t-knowledge .track-icon { background: var(--g-wash-2); }
.t-tasks .track-icon { background: var(--g-wash-3); }
.t-exams .track-icon { background: var(--g-wash-4); }

.track-title { font-size: 1.15rem; font-weight: 800; color: var(--g-ink); }
.track-desc { flex: 1; font-size: var(--g-fs-sm); color: var(--g-mute); }
.track-items { font-size: var(--g-fs-xs); color: var(--g-mute-2); letter-spacing: 0.2px; }
.track-footer { display: flex; align-items: center; justify-content: space-between; margin-top: var(--g-sp-2); }
.track-arrow { color: var(--g-mute-2); transition: transform var(--g-dur) var(--g-ease), color var(--g-dur) var(--g-ease); }
a.track-card:hover .track-arrow { transform: translateX(4px); color: var(--g-primary); }

/* ---------- 工具区（V9.1：桌面固定 3 列，6 张卡恰好 2 行收满，消灭孤儿网格） ---------- */
.cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g-sp-3); }
.cards-grid .card { border-radius: var(--g-r-lg); }
.card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.card-title { font-size: var(--g-fs-base); }

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
  .hero { flex-direction: column; align-items: flex-start; gap: var(--g-sp-3); padding: var(--g-sp-5) var(--g-sp-4) var(--g-sp-3); }
  .hero-icon { width: 52px; height: 52px; font-size: 1.5rem; }
  .tracks-grid { grid-template-columns: 1fr; }
  .cards-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
  .track-card { padding: var(--g-sp-4); }
}
@media (max-width: 420px) {
  .cards-grid { grid-template-columns: 1fr; }
}