/* 主站课程入口里的知识单元卡片
 *
 * 知识单元列表来自 src/knowledge/catalog.json，这里的样式只负责主站一侧的展示。
 * 颜色全部使用设计令牌，深浅色主题自动生效。
 */

.kunits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-md, 20px);
  margin-bottom: var(--space-lg, 28px);
}

.kunit {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: var(--space-md, 20px);
  border: 1px solid var(--color-border, var(--line));
  border-radius: var(--radius-lg, 18px);
  background: var(--color-surface, var(--panel));
  text-decoration: none;
  transition: border-color var(--motion-fast, .2s), transform var(--motion-fast, .2s);
}

.kunit:hover { border-color: var(--color-accent, var(--accent)); transform: translateY(-2px); }

.kunit-tag {
  justify-self: start;
  padding: 5px 10px;
  border-radius: var(--radius-pill, 30px);
  background: var(--color-accent-soft, var(--soft));
  color: var(--color-accent, var(--accent));
  font-size: 12px;
  font-weight: 700;
}

.kunit h3 { margin: 0; font-size: 20px; letter-spacing: -.4px; }
.kunit p { margin: 0; font-size: 13px; color: var(--color-text-muted, var(--muted)); line-height: 1.6; }

.kunit-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.kunit-meta span {
  padding: 4px 9px;
  border: 1px solid var(--color-border, var(--line));
  border-radius: var(--radius-sm, 11px);
  font-size: 12px;
  color: var(--color-text-muted, var(--muted));
}

@media (max-width: 600px) {
  .kunits { grid-template-columns: 1fr; gap: 14px; }
  .kunit { padding: 16px; }
}