/* =====================================================================
 * PixelAlgo · 门户专属样式 portal.css
 * 仅 index.html 门户页加载。卡片网格 / 筛选 / 学习路径 / 进度。
 * 依赖：tokens.css + base.css + components.css。
 * =================================================================== */

.portal-wrap { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-8) var(--sp-5) var(--sp-16); }

/* ── Hero ── */
.portal-hero { padding: var(--sp-10) 0 var(--sp-8); }
.portal-hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.02; letter-spacing: -.02em; }
.portal-hero .lead { font-size: clamp(15px, 2vw, 19px); color: var(--ink-2); max-width: 60ch; margin-top: var(--sp-4); line-height: 1.65; }
.portal-hero .stats-row { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-6); }
.portal-hero .stats-row .stat { min-width: 120px; }

/* ── 控制条（搜索 + 类别筛选）── */
.portal-controls { position: sticky; top: var(--nav-h); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-6); background: rgba(8,12,23,.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--bd); border-radius: var(--r-pill); }
[data-theme="light"] .portal-controls { background: rgba(255,255,255,.7); }
.portal-search { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; }
.portal-search input { background: transparent; border: none; color: var(--ink); font-size: 14px; outline: none; width: 100%; font-family: var(--font-ui); }
.portal-search input::placeholder { color: var(--ink-4); }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── 分组标题 ── */
.section-head { display: flex; align-items: baseline; gap: var(--sp-3); margin: var(--sp-10) 0 var(--sp-5); }
.section-head h2 { font-family: var(--font-display); font-size: 1.6rem; margin: 0; }
.section-head .count { font-family: var(--font-mono); font-size: 12px; color: var(--ink-4); }

/* ── 模型卡片网格 ── */
.model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--sp-5); }

.model-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, var(--s2), var(--s1));
  border: 1px solid var(--bd); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit;
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2), box-shadow var(--dur-2);
}
.model-card:hover { transform: translateY(-4px); border-color: var(--bd2); box-shadow: var(--shadow-lg); text-decoration: none; }
.model-card[data-status="wip"]      { opacity: .82; }
.model-card[data-status="planned"]  { opacity: .55; }
.model-card[data-hidden="true"]     { display: none; }

/* 卡片缩略动画区（mini 可视化预览，默认渐变占位，JS 可注入 canvas）*/
.model-card__thumb { position: relative; aspect-ratio: 16 / 9; background: var(--bg-2); overflow: hidden; border-bottom: 1px solid var(--bd); }
.model-card__thumb canvas { width: 100%; height: 100%; display: block; }
.model-card__thumb .thumb-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 3rem; color: var(--ink-4); opacity: .4; }
.model-card__thumb .status-tag { position: absolute; top: 10px; right: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-pill); backdrop-filter: blur(6px); }
.status-tag.published { background: rgba(52,211,153,.18); color: var(--good); border: 1px solid rgba(52,211,153,.3); }
.status-tag.wip { background: rgba(232,176,75,.18); color: var(--gold); border: 1px solid rgba(232,176,75,.3); }
.status-tag.planned { background: rgba(255,255,255,.08); color: var(--ink-3); border: 1px solid var(--bd); }

.model-card__body { padding: var(--sp-4) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.model-card__meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-4); font-family: var(--font-mono); }
.model-card__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.model-card__title .en { color: var(--ink-4); font-size: .8em; font-weight: 400; margin-left: 6px; }
.model-card__summary { font-size: 13px; color: var(--ink-2); line-height: 1.55; flex: 1; }
.model-card__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.model-card__tags .tag { font-size: 10.5px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--s2); border: 1px solid var(--bd); color: var(--ink-3); }

.model-card__footer { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--bd); background: var(--s1); }
.model-card__footer .arrow { color: var(--teal); font-size: 14px; transition: transform var(--dur-1); }
.model-card:hover .model-card__footer .arrow { transform: translateX(3px); }

/* ── 学习路径轨道 ── */
.path-track { display: flex; gap: var(--sp-3); overflow-x: auto; padding: var(--sp-4) var(--sp-2); }
.path-node { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 96px; text-align: center; }
.path-node .dot-ring { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; font-weight: 700; border: 2px solid var(--bd); background: var(--s1); color: var(--ink-3); position: relative; }
.path-node[data-status="published"] .dot-ring { border-color: var(--teal); color: var(--teal); box-shadow: 0 0 18px -4px rgba(94,234,212,.5); }
.path-node[data-status="wip"] .dot-ring { border-color: var(--gold); color: var(--gold); }
.path-node .label { font-size: 11.5px; color: var(--ink-2); line-height: 1.3; max-width: 96px; }
.path-arrow { align-self: center; color: var(--ink-4); margin-top: -20px; }

/* ── 进度条 ── */
.progress-meter { display: flex; align-items: center; gap: var(--sp-3); }
.progress-meter__bar { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--s2); overflow: hidden; }
.progress-meter__fill { height: 100%; background: linear-gradient(90deg, var(--teal), var(--azure)); border-radius: inherit; transition: width var(--dur-4) var(--ease); }
.progress-meter__text { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); white-space: nowrap; }

/* 空状态 */
.empty-state { text-align: center; padding: var(--sp-16) var(--sp-4); color: var(--ink-3); }
.empty-state .icon { font-size: 2.5rem; margin-bottom: var(--sp-3); opacity: .5; }