/* ======================================================
 * 文件: article-card.css
 * 职责: 文章卡片组件样式
 * 可修改性: 可修改卡片外观、颜色、布局
 * 可删除性: 可删除，ArticleCard组件依赖此样式
 * 学习知识点: CSS卡片设计、Flexbox、过渡动画、伪元素
 * ====================================================== */

/* ==================== 文章卡片基础样式 ==================== */
.article-card {
  background-color: var(--color-bg-primary); /* 卡片背景 */
  border-radius: var(--radius-lg);    /* 圆角 */
  box-shadow: var(--shadow-md);       /* 阴影效果 */
  border: 1px solid var(--color-border); /* 边框 */
  overflow: hidden;                   /* 裁剪溢出内容 */
  transition: all var(--transition-normal); /* 过渡动画 */
  cursor: pointer;                    /* 鼠标指针变手型 */
}

/* 卡片悬停效果 */
.article-card:hover {
  box-shadow: var(--shadow-xl);       /* 悬停时阴影变大 */
  transform: translateY(-4px);        /* 悬停时上移 */
}

/* ==================== 卡片内容区域 ==================== */
.article-card__content {
  padding: var(--spacing-6);          /* 内边距 */
}

/* ==================== 卡片头部样式 ==================== */
.article-card__header {
  margin-bottom: var(--spacing-4);    /* 底部间距 */
}

.article-card__category {
  display: inline-block;              /* 行内块级显示 */
  padding: var(--spacing-1) var(--spacing-3); /* 内边距 */
  border-radius: var(--radius-full);  /* 完全圆角 */
  font-size: var(--font-size-xs);     /* 小号字体 */
  font-weight: var(--font-weight-medium); /* 中等粗细 */
  background-color: var(--color-primary-light); /* 默认背景色 */
  color: var(--color-primary);        /* 默认文字色 */
}

/* ==================== 卡片标题样式 ==================== */
.article-card__title {
  font-size: var(--font-size-lg);     /* 大号字体 */
  font-weight: var(--font-weight-semibold); /* 半粗体 */
  margin-bottom: var(--spacing-3);    /* 底部间距 */
  line-height: 1.4;                   /* 行高 */
}

.article-card__title a {
  color: var(--color-text-primary);   /* 标题颜色 */
  text-decoration: none;              /* 去掉下划线 */
  transition: color var(--transition-fast); /* 颜色过渡 */
}

.article-card__title a:hover {
  color: var(--color-primary);        /* 悬停时变为主色 */
}

/* ==================== 卡片摘要样式 ==================== */
.article-card__summary {
  font-size: var(--font-size-sm);     /* 小号字体 */
  color: var(--color-text-secondary); /* 次要文字颜色 */
  line-height: 1.6;                   /* 行高 */
  margin-bottom: var(--spacing-4);    /* 底部间距 */
  display: -webkit-box;               /* WebKit弹性盒模型 */
  -webkit-line-clamp: 3;              /* 最多显示3行 */
  -webkit-box-orient: vertical;       /* 垂直排列 */
  overflow: hidden;                   /* 溢出隐藏 */
}

/* ==================== 卡片标签样式 ==================== */
.article-card__tags {
  display: flex;                      /* 弹性布局 */
  flex-wrap: wrap;                    /* 换行 */
  gap: var(--spacing-2);              /* 标签间距 */
  margin-bottom: var(--spacing-4);    /* 底部间距 */
}

.tag--more {
  background-color: var(--color-bg-tertiary); /* 更多标签背景色 */
  color: var(--color-text-secondary); /* 更多标签文字色 */
}

/* ==================== 卡片元信息样式 ==================== */
.article-card__meta {
  display: flex;                      /* 弹性布局 */
  flex-wrap: wrap;                    /* 换行 */
  gap: var(--spacing-4);              /* 元素间距 */
  font-size: var(--font-size-xs);     /* 小号字体 */
  color: var(--color-text-muted);     /* 辅助文字颜色 */
  margin-bottom: var(--spacing-4);    /* 底部间距 */
}

.meta-item {
  display: flex;                      /* 弹性布局 */
  align-items: center;                /* 垂直居中 */
  gap: var(--spacing-1);              /* 图标和文字间距 */
}

.meta-icon {
  font-size: var(--font-size-sm);     /* 图标字号 */
}

/* ==================== 卡片底部样式 ==================== */
.article-card__footer {
  display: flex;                      /* 弹性布局 */
  justify-content: space-between;     /* 两端对齐 */
  align-items: center;                /* 垂直居中 */
  padding-top: var(--spacing-4);      /* 顶部内边距 */
  border-top: 1px solid var(--color-border-light); /* 顶部边框 */
}

/* ==================== 操作按钮样式 ==================== */
.article-card__actions {
  display: flex;                      /* 弹性布局 */
  gap: var(--spacing-4);              /* 按钮间距 */
}

.action-btn {
  display: flex;                      /* 弹性布局 */
  align-items: center;                /* 垂直居中 */
  gap: var(--spacing-1);              /* 图标和文字间距 */
  border: none;                       /* 去掉边框 */
  background: none;                   /* 透明背景 */
  cursor: pointer;                    /* 鼠标指针变手型 */
  font-size: var(--font-size-sm);     /* 小号字体 */
  color: var(--color-text-muted);     /* 辅助文字颜色 */
  padding: var(--spacing-1) var(--spacing-2); /* 内边距 */
  border-radius: var(--radius-md);    /* 圆角 */
  transition: all var(--transition-fast); /* 快速过渡 */
}

.action-btn:hover {
  color: var(--color-primary);        /* 悬停时变为主色 */
  background-color: var(--color-bg-secondary); /* 悬停时背景色 */
}

.action-btn--active {
  color: var(--color-accent);         /* 激活状态使用辅助色 */
}

.action-icon {
  font-size: var(--font-size-base);   /* 图标字号 */
}

.action-count {
  font-weight: var(--font-weight-medium); /* 中等粗细 */
}

/* ==================== 阅读全文链接样式 ==================== */
.article-card__read-more {
  font-size: var(--font-size-sm);     /* 小号字体 */
  font-weight: var(--font-weight-medium); /* 中等粗细 */
  color: var(--color-primary);        /* 主色 */
  text-decoration: none;              /* 去掉下划线 */
  transition: all var(--transition-fast); /* 快速过渡 */
}

.article-card__read-more:hover {
  padding-right: var(--spacing-2);    /* 悬停时右边距增加 */
}

/* ==================== 不同类型文章卡片样式 ==================== */
/* 技术文章类型 */
.article-card--tech {
  border-left: 4px solid var(--color-primary); /* 左侧主色边框 */
}

/* 生活记录类型 */
.article-card--life {
  border-left: 4px solid var(--color-accent); /* 左侧辅助色边框 */
}

/* 技术心得类型 */
.article-card--note {
  border-left: 4px solid var(--color-success); /* 左侧成功色边框 */
}

/* ==================== 响应式调整 ==================== */
@media (max-width: var(--breakpoint-md)) {
  /* 移动端减小卡片内边距 */
  .article-card__content {
    padding: var(--spacing-4);
  }
  
  /* 移动端减小标题字体 */
  .article-card__title {
    font-size: var(--font-size-base);
  }
  
  /* 移动端元信息垂直排列 */
  .article-card__meta {
    flex-direction: column;
    gap: var(--spacing-2);
  }
  
  /* 移动端底部改为垂直排列 */
  .article-card__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-3);
  }
}