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

   base-list.css · Our Smart Baby

   聚合页基础列表样式（供各皮肤引用）

   加载顺序：33/34

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



/* 通用聚合页容器 */

.aggregation-page {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 var(--gutter);

}



/* 聚合页通用标题 */

.aggregation-page h1 {

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

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

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

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

}



/* 通用聚合页区块 */

.aggregation-page .agg-section {

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

}



.aggregation-page .agg-section h2 {

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

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

}



/* 通用列表容器 */

.agg-list {

  display: flex;

  flex-direction: column;

  gap: var(--space-3);

}



/* 通用网格容器 */

.agg-grid {

  display: grid;

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

  gap: var(--space-5);

}



.agg-grid-2 {

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

}



.agg-grid-3 {

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

}



/* 通用列表项 */

.agg-item {

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

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

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

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

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

}



.agg-item:hover {

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

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

}



/* 列表项元数据 */

.agg-meta {

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-3);

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

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

  margin-top: var(--space-2);

}



/* 通用空状态 */

.agg-empty {

  text-align: center;

  padding: var(--rhythm-breath) var(--space-6);

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

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

}



.agg-empty::before {

  content: '📭';

  display: block;

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

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

  opacity: 0.5;

}



/* 移动端 */

@media (max-width: 768px) {

  .aggregation-page h1 { font-size: var(--text-3xl); }



  .agg-grid,

  .agg-grid-2,

  .agg-grid-3 {

    grid-template-columns: 1fr;

  }

}