/* ==========================================================================

   base-list.css · trackandreact.com

   聚合页基础列表 — 供各皮肤引用的公共类

   生成者：Crystal Yifei Liu · 2026-09-25

   依赖：tokens.css, core.css

   ========================================================================== */



/* ==========================================================================

   一、聚合页基础布局

   ========================================================================== */



.aggregation-page {

  padding-bottom: var(--rhythm-silence);

}



.aggregation-container {

  max-width: var(--container-wide);

  margin: 0 auto;

  padding: 0 var(--gutter);

}



/* ==========================================================================

   二、聚合页头部（所有皮肤共用）

   ========================================================================== */



.aggregation-header {

  padding: var(--rhythm-loose) 0 var(--rhythm-normal);

  border-bottom: 2px solid var(--color-border);

  margin-bottom: var(--rhythm-loose);

}



.aggregation-header h1 {

  font-size: var(--text-4xl);

  margin-bottom: var(--rhythm-normal);

  line-height: var(--leading-tight);

}



.aggregation-header .breadcrumb {

  margin-bottom: var(--rhythm-normal);

}



/* ==========================================================================

   三、信任条（所有皮肤共用）

   ========================================================================== */



.aggregation-trust-bar {

  display: flex;

  align-items: center;

  gap: var(--space-5);

  padding: var(--space-3) var(--space-4);

  margin-bottom: var(--rhythm-normal);

  background-color: var(--color-surface);

  border-radius: var(--radius-md);

  font-size: var(--text-xs);

  color: var(--color-text-secondary);

  flex-wrap: wrap;

}



.aggregation-trust-bar span {

  display: inline-flex;

  align-items: center;

  gap: var(--space-1);

  white-space: nowrap;

}



/* ==========================================================================

   四、动态存活证明（所有皮肤共用）

   ========================================================================== */



.aggregation-alive {

  display: flex;

  align-items: center;

  gap: var(--space-3);

  padding: var(--space-3) var(--space-4);

  margin-bottom: var(--rhythm-normal);

  background-color: var(--color-neutral-50);

  border-radius: var(--radius-md);

  font-size: var(--text-sm);

  color: var(--color-text-secondary);

  flex-wrap: wrap;

}



/* ==========================================================================

   五、原创主题导语（所有皮肤共用）

   ========================================================================== */



.aggregation-intro {

  padding: var(--space-5);

  margin-bottom: var(--rhythm-loose);

  background-color: var(--color-surface);

  border-left: 4px solid var(--color-primary-500);

  border-radius: var(--radius-md);

  font-size: var(--text-base);

  color: var(--color-text-secondary);

  line-height: var(--leading-relaxed);

}



/* ==========================================================================

   六、判断框架（所有皮肤共用）

   ========================================================================== */



.aggregation-framework {

  padding: var(--space-5) var(--space-6);

  margin: var(--rhythm-loose) 0;

  background: linear-gradient(135deg,

    var(--color-primary-alpha-10),

    var(--color-accent-alpha-10));

  border-left: 4px solid var(--color-primary-500);

  border-radius: var(--radius-md);

  position: relative;

}



.aggregation-framework::before {

  content: '🧭';

  position: absolute;

  top: var(--space-4);

  right: var(--space-4);

  font-size: 1.5rem;

  opacity: 0.4;

}



.aggregation-framework h3 {

  font-size: var(--text-lg);

  margin-top: 0;

  margin-bottom: var(--space-3);

  color: var(--color-primary-700);

}



.aggregation-framework p {

  font-size: var(--text-base);

  color: var(--color-text-primary);

  line-height: var(--leading-relaxed);

}



/* ==========================================================================

   七、意图分流漏斗（所有皮肤共用）

   ========================================================================== */



.aggregation-funnel {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: var(--space-3);

  margin: var(--rhythm-loose) 0;

}



.aggregation-funnel a {

  display: flex;

  align-items: center;

  gap: var(--space-2);

  padding: var(--space-4);

  background-color: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  font-size: var(--text-sm);

  font-weight: var(--font-medium);

  color: var(--color-text-primary);

  text-decoration: none;

  min-height: 56px;

  transition: all var(--duration-normal) var(--ease-out);

}



.aggregation-funnel a:hover {

  border-color: var(--color-primary-400);

  box-shadow: var(--shadow-sm);

  transform: translateY(-2px);

  text-decoration: none;

  color: var(--color-primary-600);

}



/* ==========================================================================

   八、编辑精选区（所有皮肤共用）

   ========================================================================== */



.aggregation-picks {

  margin: var(--rhythm-loose) 0;

}



.aggregation-picks h2 {

  font-size: var(--text-2xl);

  margin-bottom: var(--rhythm-normal);

}



/* ==========================================================================

   九、快速推荐区（所有皮肤共用）

   ========================================================================== */



.aggregation-quick-recommend {

  padding: var(--space-5);

  margin: var(--rhythm-loose) 0;

  background-color: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

}



.aggregation-quick-recommend h3 {

  font-size: var(--text-lg);

  margin-top: 0;

  margin-bottom: var(--space-3);

  color: var(--color-primary-700);

}



/* ==========================================================================

   十、子分类导航区（所有皮肤共用）

   ========================================================================== */



.aggregation-subcategories {

  margin: var(--rhythm-loose) 0;

}



.aggregation-subcategories h3 {

  font-size: var(--text-lg);

  margin-bottom: var(--rhythm-normal);

}



/* ==========================================================================

   十一、完整文章列表（所有皮肤共用）

   ========================================================================== */



.aggregation-article-list {

  margin: var(--rhythm-loose) 0;

}



.aggregation-article-list h2 {

  font-size: var(--text-2xl);

  margin-bottom: var(--rhythm-normal);

}



.aggregation-article-list .article-list {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: var(--space-5);

  container-type: inline-size;

  container-name: article-list;

}



@container article-list (max-width: 640px) {

  .aggregation-article-list .article-list {

    grid-template-columns: 1fr;

  }

}



@container article-list (min-width: 960px) {

  .aggregation-article-list .article-list {

    grid-template-columns: repeat(3, 1fr);

  }

}



/* ==========================================================================

   十二、L3深度探索入口（所有皮肤共用）

   ========================================================================== */



.aggregation-exploration {

  margin: var(--rhythm-loose) 0;

}



/* ==========================================================================

   十三、聚合页FAQ（所有皮肤共用）

   ========================================================================== */



.aggregation-faq {

  margin-top: var(--rhythm-loose);

}



.aggregation-faq h2 {

  margin-bottom: var(--rhythm-normal);

}



/* ==========================================================================

   十四、移动端适配

   ========================================================================== */



@media (max-width: 768px) {

  .aggregation-header h1 {

    font-size: var(--text-3xl);

  }



  .aggregation-funnel {

    grid-template-columns: 1fr;

  }



  .aggregation-article-list .article-list {

    grid-template-columns: 1fr;

  }

}



/* ==========================================================================

   十五、减少动效偏好

   ========================================================================== */



@media (prefers-reduced-motion: reduce) {

  .aggregation-funnel a:hover {

    transform: none;

  }

}



/* ==========================================================================

   base-list.css 结束

   ========================================================================== */