.list-card-title {

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

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

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

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

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

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.list-card:hover .list-card-title {

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

}



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

   四、卡片摘要

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



.list-card-summary {

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

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

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

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

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



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

   五、卡片评分可视化

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



.list-card-score {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

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

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

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

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

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

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

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

  text-decoration: none;

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

}



.list-card-score:hover {

  background-color: var(--color-primary-100);

  text-decoration: none;

}



.list-card-score-number {

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

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

}



.list-card-score-max {

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

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

}



.list-card-score-stars {

  color: var(--color-warning);

  letter-spacing: -2px;

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

}



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

   六、卡片底部元信息

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



.list-card-meta {

  display: flex;

  align-items: center;

  gap: var(--space-3);

  margin-top: auto;

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

  border-top: 1px dashed var(--color-border);

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

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

  flex-wrap: wrap;

}



.list-card-meta-item {

  display: inline-flex;

  align-items: center;

  gap: var(--space-1);

}



.list-card-author {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

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

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

}



.list-card-author-avatar {

  width: 24px;

  height: 24px;

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

  display: flex;

  align-items: center;

  justify-content: center;

  color: hsl(0, 0%, 100%);

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

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

  flex-shrink: 0;

}



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

   七、卡片状态标记

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



.list-card-under-review {

  display: inline-flex;

  align-items: center;

  gap: var(--space-1);

  padding: var(--space-1) var(--space-2);

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

  color: hsl(0, 0%, 100%);

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

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

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

  text-transform: uppercase;

  letter-spacing: var(--tracking-wide);

}



.list-card-under-review::before {

  content: '⚠ ';

}



.list-card-new {

  display: inline-flex;

  align-items: center;

  gap: var(--space-1);

  padding: var(--space-1) var(--space-2);

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

  color: hsl(0, 0%, 100%);

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

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

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

  text-transform: uppercase;

  letter-spacing: var(--tracking-wide);

}



.list-card-new::before {

  content: '✦ ';

}



.list-card-updated {

  display: inline-flex;

  align-items: center;

  gap: var(--space-1);

  padding: var(--space-1) var(--space-2);

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

  color: hsl(0, 0%, 100%);

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

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

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

  text-transform: uppercase;

  letter-spacing: var(--tracking-wide);

}



.list-card-updated::before {

  content: '↻ ';

}



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

   八、容器查询 · 卡片尺寸自适应

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



@container list-card (max-width: 320px) {

  .list-card-summary {

    display: none;

  }



  .list-card-title {

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

    -webkit-line-clamp: 3;

  }



  .list-card-body {

    padding: var(--space-4);

  }

}



@container list-card (min-width: 480px) {

  .list-card-title {

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

  }



  .list-card-summary {

    -webkit-line-clamp: 3;

  }

}



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

   九、紧凑卡片变体（用于侧边栏/相关阅读）

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



.list-card-compact {

  display: flex;

  gap: var(--space-3);

  padding: var(--space-3);

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

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

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

  text-decoration: none;

  color: inherit;

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

}



.list-card-compact:hover {

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

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

  text-decoration: none;

  color: inherit;

}



.list-card-compact-cover {

  flex-shrink: 0;

  width: 80px;

  height: 80px;

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

  overflow: hidden;

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

}



.list-card-compact-cover img,

.list-card-compact-cover svg {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.list-card-compact-body {

  flex: 1;

  min-width: 0;

}



.list-card-compact-title {

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

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

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

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

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

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.list-card-compact:hover .list-card-compact-title {

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

}



.list-card-compact-meta {

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

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

}



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

   十、大卡片变体（用于编辑精选/首屏）

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



.list-card-large {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 0;

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

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

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

  overflow: hidden;

  text-decoration: none;

  color: inherit;

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

}



.list-card-large:hover {

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

  transform: translateY(-3px);

  text-decoration: none;

  color: inherit;

}



.list-card-large-cover {

  position: relative;

  aspect-ratio: 4 / 3;

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

  overflow: hidden;

}



.list-card-large-cover img,

.list-card-large-cover svg {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.list-card-large-body {

  padding: var(--space-6);

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.list-card-large-title {

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

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

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

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

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

}



.list-card-large:hover .list-card-large-title {

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

}



.list-card-large-summary {

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

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

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

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

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



@media (max-width: 768px) {

  .list-card-large {

    grid-template-columns: 1fr;

  }



  .list-card-large-title {

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

  }



  .list-card-large-body {

    padding: var(--space-4);

  }

}



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

   十一、列表网格容器

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



.list-grid {

  display: grid;

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

  gap: var(--space-5);

  container-type: inline-size;

  container-name: list-grid;

}



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

  .list-grid {

    grid-template-columns: 1fr;

  }

}



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

  .list-grid {

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

  }

}



.list-grid-2col {

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

}



.list-grid-4col {

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

}



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

   十二、水平滚动卡片列表（用于"相关阅读"）

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



.list-scroll {

  display: flex;

  gap: var(--space-4);

  overflow-x: auto;

  padding: var(--space-2) 0;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;

  scroll-snap-type: x mandatory;

}



.list-scroll::-webkit-scrollbar {

  height: 6px;

}



.list-scroll::-webkit-scrollbar-thumb {

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

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

}



.list-scroll > * {

  flex: 0 0 280px;

  scroll-snap-align: start;

}



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

   十三、空状态

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



.list-empty {

  padding: var(--rhythm-silence) var(--space-4);

  text-align: center;

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

}



.list-empty::before {

  content: '📭';

  display: block;

  font-size: 3rem;

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

  opacity: 0.6;

}



.list-empty-text {

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

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

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

}



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

   十四、移动端适配

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



@media (max-width: 768px) {

  .list-card-body {

    padding: var(--space-4);

  }



  .list-card-title {

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

  }



  .list-card-summary {

    -webkit-line-clamp: 2;

  }



  .list-card-score {

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

    padding: var(--space-1) var(--space-2);

  }



  .list-card-score-number {

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

  }



  .list-scroll > * {

    flex: 0 0 240px;

  }

}



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

   十五、减少动效偏好

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



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

  .list-card,

  .list-card:hover,

  .list-card-large:hover,

  .list-card-cover img,

  .list-card:hover .list-card-cover img {

    transform: none;

  }

}



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

   十六、打印样式

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



@media print {

  .list-card,

  .list-card-large,

  .list-card-compact {

    border: 1px solid #ccc;

    box-shadow: none;

    break-inside: avoid;

  }



  .list-card-cover,

  .list-card-large-cover {

    display: none;

  }

}



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

   list-card.css 结束

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