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

   list-card.css · Our Smart Baby

   文章卡片设计系统

   加载顺序：34/34

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



/* 卡片容器 · 容器查询 */

.list-card-container {

  container-type: inline-size;

  container-name: card;

}



/* 基础卡片 */

.list-card {

  display: flex;

  flex-direction: column;

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

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

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

  overflow: hidden;

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

  text-decoration: none;

  color: inherit;

}



.list-card:hover {

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

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

  transform: translateY(-2px);

}



/* 卡片封面 */

.list-card .card-cover {

  aspect-ratio: 16 / 9;

  width: 100%;

  overflow: hidden;

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

  position: relative;

}



.list-card .card-cover img,

.list-card .card-cover svg {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform var(--duration-slower) var(--ease-out);

}



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

  transform: scale(1.03);

}



/* 卡片内容区 */

.list-card .card-body {

  padding: var(--card-padding);

  display: flex;

  flex-direction: column;

  gap: var(--space-2);

  flex: 1;

}



/* 卡片标签 */

.list-card .card-tags {

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-2);

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

}



.list-card .card-tag {

  padding: 2px 8px;

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

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

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

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

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

}



.list-card .card-tag.series {

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

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

}



.list-card .card-tag.review {

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

  color: white;

}



/* 卡片标题 */

.list-card .card-title {

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

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

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

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

  margin: 0;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



/* 卡片摘要 */

.list-card .card-excerpt {

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

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

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

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  overflow: hidden;

  margin: 0;

}



/* 卡片底部元数据 */

.list-card .card-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: var(--space-3);

  margin-top: auto;

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

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

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

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

}



.list-card .card-author {

  display: flex;

  align-items: center;

  gap: var(--space-2);

}



.list-card .card-author-avatar {

  width: 24px;

  height: 24px;

  border-radius: 50%;

  font-size: 11px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

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

  flex-shrink: 0;

}



.list-card .card-score {

  padding: 2px 8px;

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

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

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

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

}



/* 卡片横向变体 */

.list-card.horizontal {

  flex-direction: row;

}



.list-card.horizontal .card-cover {

  flex: 0 0 200px;

  aspect-ratio: 4 / 3;

}



.list-card.horizontal .card-body {

  flex: 1;

}



/* 卡片紧凑变体 */

.list-card.compact {

  flex-direction: row;

  padding: var(--space-3);

  gap: var(--space-3);

}



.list-card.compact .card-cover {

  flex: 0 0 80px;

  aspect-ratio: 1;

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

}



.list-card.compact .card-body {

  padding: 0;

  gap: var(--space-1);

}



.list-card.compact .card-title {

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

  -webkit-line-clamp: 2;

}



.list-card.compact .card-excerpt,

.list-card.compact .card-footer {

  display: none;

}



/* 容器查询适配 */

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

  .list-card .card-excerpt { display: none; }

  .list-card .card-title { font-size: var(--text-base); }

  .list-card .card-cover { aspect-ratio: 2 / 1; }

}



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

  .list-card .card-title { font-size: var(--text-xl); }

}



/* 移动端 */

@media (max-width: 768px) {

  .list-card.horizontal {

    flex-direction: column;

  }



  .list-card.horizontal .card-cover {

    flex: none;

    aspect-ratio: 16 / 9;

  }



  .list-card .card-cover { aspect-ratio: 16 / 9; }

}