/* ============================================================
   应用星 · TAG列表模板 专属样式
   卡片视觉与首页「人气标签」板块的 <a> 完全一致（bg-word / axy-tg-head / axy-tg-apps / axy-card），
   仅布局用网格（首页是横滑）。公共设计系统由 /skin/css/common.css 注入。
   类名沿用全站规范，不引入第三方命名。
   ============================================================ */

/* ---------- 容器 ---------- */
.axy-wrap{max-width:1200px;margin:0 auto;padding:0 16px;}

/* ---------- 标签卡片网格（4 列；与首页人气标签 .axy-tags a 同宽同款，desktop/平板每行 4 张） ---------- */
.axy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:2px;}

/* ---------- 卡片 = 首页 .axy-tags a ---------- */
.axy-grid > a{display:flex;flex-direction:column;align-items:stretch;gap:10px;box-sizing:border-box;padding:14px 16px;border:0;border-radius:12px;font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap;overflow:hidden;position:relative;aspect-ratio:2 / 1;container-type:inline-size;color:#18191c;}
.axy-grid > a .bg-word{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:80cqw;line-height:.85;font-weight:800;color:#fff;opacity:.4;white-space:nowrap;pointer-events:none;z-index:0;transition:transform .18s ease;}
.axy-grid > a .t,.axy-grid > a em{position:relative;z-index:1;}
.axy-grid > a .t{font-size:15px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;transition:color .18s ease;}
.axy-grid > a .axy-tg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;position:relative;z-index:1;}
.axy-grid > a .axy-tg-apps{display:flex;justify-content:flex-start;gap:12px;position:relative;z-index:1;margin-top:auto;align-self:center;width:fit-content;max-width:100%;}
.axy-grid > a .axy-card{padding:0;background:#fff;border-radius:12px;box-shadow:0 1px 4px rgba(22,22,42,.08);line-height:0;}
.axy-grid > a .axy-card img{width:48px;height:48px;border-radius:13px;object-fit:cover;display:block;}
.axy-grid > a em{font-style:normal;color:inherit;opacity:.72;font-size:12px;font-weight:400;flex:none;}
.axy-grid > a:hover .bg-word{transform:scale(1.08);}
.axy-grid > a:hover .t{color:var(--star);}

/* ---------- 12 色调色板（12n+k 循环，第 13+ 张自动复用前 12 色，与首页 .axy-tags a 完全一致） ---------- */
.axy-grid > a:nth-child(12n+1){background:#FFF3CC;color:#9A6A00;}
.axy-grid > a:nth-child(12n+2){background:#E3F1FF;color:#1E6FD0;}
.axy-grid > a:nth-child(12n+3){background:#E4F8EE;color:#1A9C6B;}
.axy-grid > a:nth-child(12n+4){background:#F1E9FF;color:#6E3FB0;}
.axy-grid > a:nth-child(12n+5){background:#FFE9EC;color:#C2185B;}
.axy-grid > a:nth-child(12n+6){background:#FFF0E0;color:#B26A00;}
.axy-grid > a:nth-child(12n+7){background:#E9F7FA;color:#00838F;}
.axy-grid > a:nth-child(12n+8){background:#FDE9F5;color:#A0006D;}
.axy-grid > a:nth-child(12n+9){background:#EDF7E0;color:#5B8C00;}
.axy-grid > a:nth-child(12n+10){background:#EDEFF5;color:#3F51B5;}
.axy-grid > a:nth-child(12n+11){background:#FBEAE0;color:#A0522D;}
.axy-grid > a:nth-child(12n+12){background:#ECEFF1;color:#455A64;}

/* ---------- 翻页（已改为 JS 无限滚动：分页按钮隐藏，仅作下一页地址源，由 list.js 读取） ---------- */
.axy-pager{display:none;}

/* ---------- 响应式 ---------- */
/* 平板：769–1024px，每行 4 张卡片但每张只显示 3 个图标 */
@media (min-width:769px) and (max-width:1024px){
  .axy-grid > a .axy-tg-apps .axy-card:nth-child(4){display:none;}
}

@media (max-width:768px){
  .axy-grid{grid-template-columns:repeat(3,1fr);gap:12px;}
  .axy-grid > a{aspect-ratio:3 / 2;padding:10px 10px;font-size:13px;border-radius:10px;}
  .axy-grid > a .t{font-size:13px;}
  .axy-grid > a .axy-card{padding:0;}
  .axy-grid > a .axy-card img{width:26px;height:26px;border-radius:7px;}
  .axy-grid > a .axy-tg-apps{gap:8px;}
  /* 手机端保持 4 个图标，不再隐藏第 4 个 */
  .axy-grid > a:hover .t{color:var(--star-deep);}
  /* 优化1：面包屑→H2 间距移动端保持 16px（覆盖公共层 .axy-crumb 下内边距归零），与 PC 一致 */
  .axy-wrap > .axy-crumb{padding-bottom:16px;}
}
@media (max-width:480px){
  .axy-grid{grid-template-columns:repeat(2,1fr);}
}