/* ==========================================================================
   category.css — 分类列表页样式（分类头部 / 筛选 / 排序 / 卡片 / 分页）
   ========================================================================== */

/* ---------- 1. 首屏轮播（与首页一致：只留 banner-viewport，无外框、无标题区）
   宽度靠 calc 自己算，不再需要 .cat-hero-wrap 这层容器：
   左右各让出一个 --page-gutter，最大不超过 --max-width 内容区。 ---------- */
.banner-viewport.hero-banner {
  width: calc(100% - var(--page-gutter) * 2);
  max-width: calc(var(--max-width) - var(--page-gutter) * 2);
  margin: 24px auto 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}

/* ---------- 2. 筛选标签（已并入下方排序栏，紧跟“共 N 款工具”之后） ----------
   控件来自控件库（.ui-choice-btn，按钮式单选组），这里只调本页的尺寸与胶囊外形；
   选中态由原生 radio + .ui-choice-btn:has(input:checked) 负责，不需要 JS 维护。 */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; min-width: 0; }
.filters .ui-choice-btn { height: 34px; padding: 0 16px; border-radius: 999px; font-size: 13px; }

/* ---------- 3. 排序栏（左侧计数 + 筛选标签，右侧分段控制器） ---------- */
.sort-bar {
  max-width: var(--max-width); margin: 0 auto; padding: 28px var(--page-gutter) 20px;
  display: flex; justify-content: flex-start; align-items: center; gap: 12px;
  flex-wrap: wrap; font-size: 13px; color: var(--gray-600);
}
.sort-bar .count { font-weight: 500; color: var(--gray-900); }
.sort-seg { margin-left: auto; }
.sort-seg button { padding: 0 15px; }

/* ---------- 4. 工具卡片区 ---------- */
.tools-section { max-width: var(--max-width); min-height: 480px; margin: 0 auto; padding: 0 var(--page-gutter) 64px; }
/* grid-auto-rows: 1fr —— 让每一行卡片同高（不只是行内同高），页面纵向不出台阶 */
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 20px; }
.tool-card {
  --card-accent: var(--primary); --card-soft: var(--surface-3);
  --card-icon-bg: var(--surface-3);
  background: var(--card-surface-bg);
  border-radius: var(--radius-md); border: 1px solid var(--gray-200);
  padding: 24px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; cursor: pointer; position: relative;
  /* 竖向 flex：描述固定占三行，页脚用 margin-top:auto 贴底，短文案的卡片不会矮一截 */
  display: flex; flex-direction: column;
  box-shadow: var(--card-shadow); isolation: isolate; overflow: hidden;
}
.tool-card::before { content: ''; position: absolute; z-index: -1; inset: 0 0 auto; height: 3px; background: transparent; opacity: var(--card-line-opacity); transition: opacity .2s ease, height .2s ease; }
.tool-card:hover { border-color: var(--gray-200); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.tool-card:hover::before { opacity: .9; height: 4px; }
.tool-card-top { display: flex; gap: 14px; margin-bottom: 14px; }
.tool-icon {
  width: 50px; height: 50px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 24px;
  background: var(--card-icon-bg);
  border: 1px solid var(--gray-200);
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 var(--surface-glow);
  transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease;
}
.tool-card:hover .tool-icon { transform: translateY(-2px) scale(1.035); }
.accent-blue { --card-accent: var(--primary); --card-soft: var(--surface-3); }
.accent-green, .accent-lime { --card-accent: var(--primary); --card-soft: var(--surface-3); }
.accent-yellow, .accent-amber { --card-accent: var(--primary); --card-soft: var(--surface-3); }
.accent-red { --card-accent: var(--primary); --card-soft: var(--surface-3); }
.accent-purple { --card-accent: var(--primary); --card-soft: var(--surface-3); }
.accent-cyan { --card-accent: var(--primary); --card-soft: var(--surface-3); }
.accent-orange { --card-accent: var(--primary); --card-soft: var(--surface-3); }
.tool-info { flex: 1; min-width: 0; }
/* 标题/描述都锁死行数：标题 1 行、描述 3 行，超出的隐藏并显示省略号。
   高度用 em 跟着字号走，改字号不用改数字。 */
.tool-name { font-size: 17px; font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-cat { font-size: 13px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-desc {
  font-size: 14px; color: var(--gray-600); line-height: 1.7; margin-bottom: 16px;
  height: calc(1.7em * 3);                       /* 固定三行高度：文案短的卡片也占满三行 */
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.tool-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto;                              /* 页脚贴底，卡片高度不齐时也不会浮在中间 */
  padding-top: 14px; border-top: 1px solid var(--gray-100);
}
.tool-rating { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--gray-600); }
.tool-rating .star { color: var(--yellow-500); }
.tool-users { font-size: 12px; color: var(--gray-500); }

/* ---------- 5. 分页 ----------
   控件来自控件库（.ui-pagination），这里只做居中和上下留白。 */
.pagination-wrap {
  margin-top: 40px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.pagination-wrap .ui-pagination { justify-content: center; }
.pagination-wrap .page-out { font-size: 12px; color: var(--gray-500); }

/* ---------- 6. 响应式 ---------- */
@media (max-width: 1024px) {
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .tools-grid { grid-template-columns: 1fr; }
  .sort-bar { padding: 20px 20px 16px; }
  .tools-section { padding: 0 20px 40px; }
}
@media (max-width: 480px) {
  /* 分段控制器在窄屏等分撑满，避免 4 个选项横向溢出 */
  .sort-bar .ui-segmented { width: 100%; }
  .sort-bar .ui-segmented button { flex: 1; padding: 0 6px; font-size: 12px; }
  .filters .ui-choice-btn { height: 32px; padding: 0 13px; font-size: 12.5px; }
}

/* ==========================================================================
   7. 栏目页卡片（图块式：彩色头图 + 同色浅底说明）
   参考 tools.bugscaner.com 栏目页的实际做法：卡片无边框、固定高度、彩色块
   自带投影、说明区用同色系的极浅底。只作用于 .cat-page，收藏页 / 最近使用页
   共用本文件但走上面的原样式，不受影响。
   ========================================================================== */
.cat-page .tools-grid { grid-template-columns: repeat(5, 1fr); gap: 14px; }

.cat-card {
  --tone: #2f7e82;
  display: block;                               /* 不用 flex：flex 子项会被块级化，-webkit-box 截断会失效 */
  padding: 5px;                                 /* 色块四周留 5px 底色，与参考一致 */
  border: 1px solid var(--gray-200);
  border-radius: 3px;
  background: var(--card-surface-bg);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .10);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.cat-card::before { content: none; }          /* 去掉原来的顶部色条 */
.cat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15, 23, 42, .2); }
.cat-card .tool-cat { display: none; }        /* 分类名仅供筛选读取，不上屏 */

/* 头图：纯色块自带投影，图标在上、标题贴底，高度固定保证卡片整齐 */
.cat-head {
  height: 152px;
  padding: 12px 10px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  background: var(--tone);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);   /* 只留 1px 极淡的边，不糊住四周留白 */
  text-align: center;
}
.cat-icon {
  width: 72px; height: 72px; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #191f27;                                  /* 深色图标压在亮色块上，没有白色底板 */
  background: none; box-shadow: none;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.cat-ico { width: 72px; height: 72px; display: block; stroke-width: 1.6; }
.cat-card:hover .cat-icon { transform: translateY(-2px); }
.cat-name {
  width: 100%;
  margin-top: auto;                             /* 标题贴底，图标位置不随标题行数浮动 */
  color: #fff; font-size: 18px; font-weight: 700; font-style: italic; line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* 说明：与卡片同底色（参考图里描述区和卡片底一致），文字居中三行，超出省略。
   高度用 content-box 锁死三行；只写 -webkit-line-clamp，同时写标准的 line-clamp
   会让截断失效。 */
.cat-desc {
  box-sizing: content-box;
  height: calc(1.55em * 3);
  padding: 9px 6px 10px;
  font-size: 13.5px; line-height: 1.55; color: var(--gray-700);
  text-align: center;
  background: transparent;
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* 右上角点赞（装饰，与参考图一致） */
.cat-like { position: absolute; top: 10px; right: 12px; color: rgba(255, 255, 255, .92); pointer-events: none; }
.cat-like svg { width: 18px; height: 18px; display: block; }
/* 左上角 HOT / NEW 小标 */
.cat-badge {
  position: absolute; top: 10px; left: 10px;
  padding: 1px 6px; border-radius: 2px;
  font-size: 10px; font-weight: 700; letter-spacing: .5px; line-height: 1.5;
  color: #fff; background: rgba(255, 255, 255, .28);
}

/* 十八色调色板：色相不均匀分布（压缩绿区），亮度按人眼感知统一（黄区提亮）；
   一页 15 张卡片按步长取色，15 个色号互不重复。 */
.cat-card.tone-0  { --tone: #db7a6f; }
.cat-card.tone-1  { --tone: #d38050; }
.cat-card.tone-2  { --tone: #cb9333; }
.cat-card.tone-3  { --tone: #b09e2c; }
.cat-card.tone-4  { --tone: #61b12c; }
.cat-card.tone-5  { --tone: #33ab2b; }
.cat-card.tone-6  { --tone: #2baa55; }
.cat-card.tone-7  { --tone: #2aa78e; }
.cat-card.tone-8  { --tone: #2ca3b1; }
.cat-card.tone-9  { --tone: #419dd2; }
.cat-card.tone-10 { --tone: #6896dc; }
.cat-card.tone-11 { --tone: #8090e1; }
.cat-card.tone-12 { --tone: #938ae4; }
.cat-card.tone-13 { --tone: #a983e2; }
.cat-card.tone-14 { --tone: #c078df; }
.cat-card.tone-15 { --tone: #db67db; }
.cat-card.tone-16 { --tone: #db70b4; }
.cat-card.tone-17 { --tone: #dc7494; }

/* 响应式：5 → 4 → 3 → 2 → 1 列 */
@media (max-width: 1279px) {
  .cat-page .tools-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1023px) {
  .cat-page .tools-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .cat-page .tools-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 559px) {
  .cat-page .tools-grid { grid-template-columns: 1fr; }
  .cat-head { height: 172px; padding: 14px 12px 12px; }
  .cat-icon { width: 80px; height: 80px; }
  .cat-ico { width: 80px; height: 80px; }
  .cat-name { font-size: 18px; }
  .cat-desc { font-size: 14px; line-height: 1.6; height: calc(1.6em * 3); padding: 10px 14px 14px; }
}