/* ==========================================================================
   V2Ray Mac客户端 · glossary.css
   术语表页专属:页头与索引 / 分类区块 / 术语卡网格 / 对照表 / 页尾入口
   ========================================================================== */

/* ---------- 1. 页头 ---------- */
.gloss-head{padding-top:52px;padding-bottom:0;}
.gloss-head h1{margin-top:12px;max-width:900px;}
.gloss-head__lede{margin-top:16px;max-width:860px;}
.gloss-head__note{margin-top:24px;max-width:860px;}

/* ---------- 2. 页顶索引 ---------- */
.gloss-index{
  margin-top:26px;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}
.gloss-index .toc__list a{background:var(--bg);}

/* ---------- 3. 分类区块 ---------- */
.cat-block{scroll-margin-top:20px;}
.cat-block .section-head p{max-width:760px;}

/* ---------- 4. 术语卡网格 ---------- */
.term-grid{
  margin-top:30px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(324px,1fr));
  gap:20px;
  min-width:0;
}
.term-grid > *{min-width:0;}
.term-card--gloss{
  display:flex;
  flex-direction:column;
  scroll-margin-top:24px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.term-card--gloss:hover{transform:translateY(-2px);box-shadow:var(--sh-card);}
.term-card--gloss .term-card__desc{flex:1 1 auto;}
.term-card--gloss .term-card__tags{margin-top:16px;}
.term-card--gloss .tag{background:var(--bg);}

/* ---------- 5. 对照表与页尾入口 ---------- */
.gloss-map{margin-top:28px;}
.gloss-map .data-table td code{font-size:12.5px;}
.gloss-foot{
  margin-top:26px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 30px;
}

/* ---------- 6. 响应式 ---------- */
@media (max-width:1024px){
  .term-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
}
@media (max-width:768px){
  .gloss-head{padding-top:34px;}
  .term-grid{margin-top:24px;grid-template-columns:minmax(0,1fr);gap:16px;}
  .cat-block .section-head p{max-width:none;}
}
@media (max-width:560px){
  .gloss-head__lede{font-size:15.5px;}
  .gloss-foot{gap:14px 22px;}
}

@media (prefers-reduced-motion:reduce){
  .term-card--gloss:hover{transform:none;}
}