/* 1. 公共网格布局（容器样式）
   所有卡片列表共用同一套网格规则，避免重复 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  /* 自动适应列数 */
  gap: 20px;
  /* 卡片间距 */
  margin-top: 20px;
  /* 与上方内容的距离 */
}

/* 2. 公共卡片样式（所有卡片的基础样式）
   提取相同样式到基础类，所有卡片共享 */
.base-card {
  background-color: #EFEBE9;
  /* 统一背景色 */
  border-radius: 10px;
  /* 统一圆角 */
  padding: 20px;
  /* 统一内边距 */
  color: #0F172A;
  /* 统一文字色 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* 统一阴影 */
  transition: transform 0.3s ease;
  /* 统一动画过渡 */
}

/* 公共hover效果（所有卡片共用） */
.base-card:hover {
  transform: translateY(-5px);
  /* 统一悬浮上移效果 */
}

/* 公共标题样式（所有卡片标题共用） */
.base-card h2 {
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: #0F172A;
  /* 继承或单独定义 */
}

/* 公共按钮样式（所有卡片链接共用） */
.base-card .card-link {
  background-color: #3B82F6;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  margin-top: 10px;
  transition: background-color 0.3s ease;
}

/* 网格容器（原music-grid效果） */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

/* 基础卡片样式（原music-card视觉效果） */
.base-card {
  background-color: #fff;
  /* 原bg-white */
  padding: 16px;
  /* 原p-4 */
  border-radius: 8px;
  /* 原rounded */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* 原shadow */
}

/* 卡片标题（原text-xl font-bold等效果） */
.card-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 12px;
}

/* 分页按钮（原按钮视觉效果） */
.pagination-btn {
  background-color: #e5e7eb;
  /* 原bg-gray-300 */
  color: #374151;
  /* 原text-gray-700 */
  padding: 6px 12px;
  /* 原p-2 */
  border-radius: 4px;
  /* 原rounded */
  margin: 0 4px;
  /* 原mx-1 */
  cursor: pointer;
}

.pagination-btn-active {
  background-color: #3b82f6;
  /* 原bg-blue-500 */
  color: white;
  /* 原text-white */
}

/* 下载按钮（原按钮效果） */
.card-link {
  background-color: #3b82f6;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  margin-top: 8px;
  display: inline-block;
  text-decoration: none;
}

.card-link:hover {
  background-color: #2563eb;
}

.base-card .card-link:hover {
  background-color: #2563EB;
  /* 按钮hover统一变色 */
}

/* 3. 不同类型卡片的差异化样式
   只写与其他卡片不同的样式，没有差异就不写 */

/* 音乐卡片：需要音频控件，单独定义音频样式 */
.music-card .audio-player {
  width: 100%;
  /* 音频控件占满宽度 */
  margin: 15px 0;
  /* 上下间距 */
  filter: hue-rotate(180deg) brightness(0.9);
  /* 音频控件样式 */
}

/* 视频卡片：如果有视频控件，单独定义（示例） */
.video-card .video-player {
  width: 100%;
  /* 视频占满宽度 */
  border-radius: 6px;
  /* 视频圆角（差异化） */
  margin-bottom: 15px;
}

@media (max-width: 768px) {

  /* 网格布局统一调整为单列 */
  .music-grid,
  .video-grid,
  .anime-grid,
  .sketch-grid,
  .software-grid {
    grid-template-columns: 1fr;
  }

}