/* 产品页面专用样式 */

:root{
  --bg-primary:#ffffff;
  --surface-color:#ffffff;
  --text-primary:#2b2f36;
  --text-secondary:#7a828f;
  --border-color:#e6e8eb;
  --accent-color:#1a73e8;
  --card-bg: var(--surface-color);
}
.dark-mode,
.dark-theme{
  --bg-primary:#0f1115;
  --surface-color:#16181d;
  --text-primary:#e3e5e9;
  --text-secondary:#9aa0a6;
  --border-color:#2b3138;
  --accent-color:#8ab4f8;
  --card-bg: var(--surface-color);
}

/* —— 这里是关键：与 .container.nav 对齐 —— */
.cards-page .container{ max-width:1200px; margin-left:auto; margin-right:auto; padding-left:0 !important; padding-right:0 !important; }
.cards-page .row{ margin-left:0 !important; margin-right:0 !important; }
.cards-page .col-xs-12, .cards-page .col-sm-12, .cards-page .col-md-12, .cards-page .col-lg-12{ padding-left:0 !important; padding-right:0 !important; }

/* 标题区 */
.section-header{ display:flex; align-items:center; justify-content:space-between; margin:8px 0 12px; }
.section-header h4{ margin:0; color:var(--text-primary); font-weight:600; }
.section-header a.more{ color:var(--accent-color); text-decoration:none; }
.section-header a.more:hover{ text-decoration:underline; }

/* 网格：lg=4列（保持一行 4 个） */
.cards-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:768px){  .cards-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:992px){  .cards-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1200px){ .cards-grid{ grid-template-columns:repeat(4,1fr); } }

/* 卡片（扁平、无边线） */
.mcp-card{
  display:flex; flex-direction:column; text-decoration:none; color:var(--text-primary);
  border: 1px solid var(--border-color) !important; overflow: hidden !important;
  background:var(--card-bg); border:none; border-radius:16px;
  padding:14px 14px 12px; box-shadow:0 6px 14px rgba(17,17,26,.06);
  min-height:180px; /* 设置最小高度，确保卡片高度一致 */
}
.mcp-card:hover{ box-shadow:0 8px 18px rgba(17,17,26,.10); }
.mcp-card:focus{ outline:none; }

.mcp-card .card-head{ display:flex; align-items:center; gap:12px; margin-bottom:6px; flex-shrink:0; }
.mcp-card .card-logo{ width:40px; height:40px; border-radius:10px; object-fit:cover; background:#fff; flex-shrink:0; }
.dark-mode .mcp-card .card-logo,
.dark-theme .mcp-card .card-logo{ background:#0b0c0f;border-radius: 20px; }
.mcp-card .card-title{ font-size:18px; font-weight:600; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;color: var(--text-primary); flex:1; }
.mcp-card .card-desc{ margin-top:4px; font-size:13px; color:var(--text-secondary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex-shrink:0; min-height:36px; /* 设置最小高度，即使内容很短也保持空间 */ }

/* 标签：扁平无边线 */
.mcp-card .tags{ 
  display:flex; 
  flex-wrap:wrap; 
  gap:8px; 
  flex-shrink:0; 
  min-height:28px; /* 即使没有标签也保持最小高度，避免布局跳动 */
}
.tag-chip{ font-size:12px; line-height:1; padding:6px 10px; border-radius:999px; border:none; }
.mcp-card .meta{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; font-size:12px; color:var(--text-secondary); flex-shrink:0; margin-top:auto; /* 将meta信息推到底部，确保所有卡片的meta都在同一水平线 */ }
.mcp-card .meta .left .item{ margin-right:10px; white-space:nowrap; }
.mcp-card .meta i{ margin-right:4px; }
.product-tag-0{ background:#fff8e1; color:#f57c00; }
.product-tag-1{ background:#e8f5e8; color:#2e7d32; }
.product-tag-2{ background:#fce4ec; color:#c2185b; }
.product-tag-3{ background:#e3f2fd; color:#1976d2; }
.dark-mode .product-tag-0,
.dark-theme .product-tag-0{ background:rgba(255,183,77,.18); color:#ffcf93; }
.dark-mode .product-tag-1,
.dark-theme .product-tag-1{ background:rgba(76,175,80,.18); color:#9be7a3; }
.dark-mode .product-tag-2,
.dark-theme .product-tag-2{ background:rgba(233,30,99,.18); color:#f48fb1; }
.dark-mode .product-tag-3,
.dark-theme .product-tag-3{ background:rgba(33,150,243,.18); color:#9ecbff; }

/* 热议话题：扁平无边线 */
.hot-tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px 12px; }
.hot-tags li{ margin:0; padding:0; }
.hot-tags .chip{
  display:inline-flex; align-items:center; height:36px; padding:0 16px;
  font-size:14px; border-radius:999px; text-decoration:none; border:none;
  background:#e8f0fe; color:#1a73e8;
  transition:background .2s ease, transform .1s ease;
}
.hot-tags .chip:hover{ background:#dbe7fd; text-decoration:none; }
.dark-mode .hot-tags .chip,
.dark-theme .hot-tags .chip{ background:rgba(138,180,248,.22); color:#c7d7ff; }
.dark-mode .hot-tags .chip:hover,
.dark-theme .hot-tags .chip:hover{ background:rgba(138,180,248,.30); }

/* 分类条：扁平无边框，留白与首页一致 */
.cards-category{ margin-top:14px; margin-bottom:14px; }
.cards-category .list{ display:flex; flex-wrap:wrap; gap:10px 14px; margin:0; padding:0; list-style:none; }
.cards-category .list > li{ margin:0; }
.cards-category .list a{
  display:inline-flex; align-items:center; height:36px; line-height:36px; padding:0 12px;
  border-radius:10px; background:transparent; color:var(--text-primary); text-decoration:none;
}
.cards-category .list a:hover{ background:rgba(26,115,232,.08); color:var(--accent-color); }
.cards-category .active a{ background:var(--accent-color); color:#fff; }
.dark-mode .cards-category .list a:hover,
.dark-theme .cards-category .list a:hover{ background:rgba(138,180,248,.12); }

.cards-tabs{ margin:10px 0 12px; }

/* 分页响应式修复：防止横向滚动 */
.channel-main .text-center,
.pagination-wrapper {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

/* 分页容器：允许换行 */
.channel-main .pagination {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  margin: 21px 0;
  padding-left: 0;
  list-style: none;
  width: 100%;
  max-width: 100%;
}

.channel-main .pagination > li {
  display: inline-block;
  float: none !important;
}

/* 移动端：适当大小的分页按钮 */
@media (max-width: 767px) {
  .channel-main .pagination > li > a,
  .channel-main .pagination > li > span {
    padding: 6px 10px;
    font-size: 13px;
    margin: 3px;
    float: none;
    min-width: 36px;
    text-align: center;
  }
  
  /* 确保分页不会溢出 */
  .channel-main .pagination {
    margin: 15px 0;
  }
}

/* 超小屏幕：稍小但仍可点击 */
@media (max-width: 480px) {
  .channel-main .pagination > li > a,
  .channel-main .pagination > li > span {
    padding: 5px 8px;
    font-size: 12px;
    margin: 2px;
    float: none;
    min-width: 32px;
    text-align: center;
  }
}

/* 深色模式适配：频道主内容区 */
.dark-mode .channel-main,
.dark-theme .channel-main {
  background-color: #1e1f20;
  color: var(--text-primary);
}

/* 深色模式适配：内容包装器 */
.dark-mode .content-wrapper,
.dark-theme .content-wrapper {
  background-color: #1e1f20;
}

/* 深色模式适配：分页按钮 */
.dark-mode .channel-main .pagination > li > a,
.dark-mode .channel-main .pagination > li > span,
.dark-theme .channel-main .pagination > li > a,
.dark-theme .channel-main .pagination > li > span {
  color: var(--text-primary);
  background-color: var(--surface-color);
  border-color: var(--border-color);
}

.dark-mode .channel-main .pagination > li > a:hover,
.dark-mode .channel-main .pagination > li > span:hover,
.dark-theme .channel-main .pagination > li > a:hover,
.dark-theme .channel-main .pagination > li > span:hover {
  background-color: var(--border-color);
  color: var(--text-primary);
}

.dark-mode .channel-main .pagination > .active > a,
.dark-mode .channel-main .pagination > .active > span,
.dark-theme .channel-main .pagination > .active > a,
.dark-theme .channel-main .pagination > .active > span {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
}

/* 深色模式适配：分类按钮 */
.dark-mode .category-pill,
.dark-theme .category-pill {
  color: var(--text-primary);
  border-color: var(--border-color);
  background-color: transparent;
}

.dark-mode .category-pill:hover,
.dark-theme .category-pill:hover {
  background-color: rgba(138, 180, 248, 0.12);
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.dark-mode .category-pill.active,
.dark-theme .category-pill.active {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
}