/* ============================================================
   topics.css — 主题列表页样式（视觉语言对齐 topic.html 设计稿）
   ============================================================ */

/* Hero — 浅薄荷渐变 + 道路纹理底纹（移植自设计稿 .topic-hero） */
.topics-hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-2xl);
  background: linear-gradient(135deg, var(--qdw-mint-50) 0%, var(--qdw-mint-100) 40%, var(--qdw-white) 100%);
  border: 1px solid var(--color-border-tertiary);
  padding: var(--space-8) var(--space-5);
  margin-bottom: var(--space-5);
}
.topics-hero__pattern {
  position: absolute; inset: 0; opacity: 0.06; pointer-events: none;
}
.topics-hero__content { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }
.topics-hero__badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--qdw-mint-700); background: rgba(142, 229, 161, 0.18);
  padding: 3px 10px; border-radius: var(--radius-pill);
  margin-bottom: var(--space-3); letter-spacing: 0.03em;
}
.topics-hero__title {
  font-size: var(--text-display-md); font-weight: var(--weight-semibold);
  color: var(--color-text-base); letter-spacing: -0.02em; margin-bottom: var(--space-2);
}
.topics-hero__subtitle {
  font-size: var(--text-md); color: var(--color-text-secondary);
  line-height: var(--leading-body); max-width: 560px; margin: 0;
}

.topics-container { max-width: 1200px; margin: 0 auto; padding: var(--space-4) 0; }

.topic-group { margin-bottom: var(--space-6); }
.topic-group__header { margin-bottom: var(--space-3); }
.topic-group__title { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--color-text-base); margin: 0 0 var(--space-1) 0; }
.topic-group__desc { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; }

.topic-group__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

/* Card — 白底 + 左侧薄荷强调条，hover 抬升（对齐设计稿卡片质感） */
.topic-card {
  position: relative; display: block; overflow: hidden;
  background: var(--color-bg-container);
  border: 1px solid var(--color-border-tertiary);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 4px);
  transition: all var(--duration-fast) var(--ease-standard);
  text-decoration: none; color: inherit;
}
.topic-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--qdw-mint-500), var(--qdw-mint-300));
  opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard);
}
.topic-card:hover {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.topic-card:hover::before { opacity: 1; }
.topic-card__body { display: flex; flex-direction: column; gap: var(--space-2); }
.topic-card__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text-base); margin: 0; }
.topic-card__desc { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; line-height: var(--leading-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.topic-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-1); }
.topic-card__count {
  display: inline-flex; align-items: center;
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--qdw-mint-700); background: var(--qdw-mint-50);
  padding: 2px 10px; border-radius: var(--radius-pill);
}
.topic-card__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-quaternary);
  transform: translateX(-4px); opacity: 0;
  transition: all var(--duration-fast) var(--ease-standard);
}
.topic-card:hover .topic-card__arrow { color: var(--color-primary-hover); transform: translateX(0); opacity: 1; }