/* 交通标志图鉴(biaozhi.php:总览 / 分类)专用样式。
   全部使用 style.css 里的 CSS 变量;类名统一 sg- 前缀,不与
   landing.css(.lp-*)、schools.css(.school-card/.jx-*/.jd-*/.sc-*/.flt-*/.ce-*)、
   admin.css(.adm-*)冲突。

   本栏目只引 style.css + sign.css 两个文件(不像 jiaxiao.php 还要带 schools.css),
   所以面包屑、空状态这些和 landing.css 长得一样的东西这里得再写一份 ——
   为少几十行 CSS 去多加载一整个 schools.css 不划算。 */

/* ===== 面包屑 ===== */
.sg-crumb {
  font-size: 13px; color: var(--text-sub); margin-bottom: 14px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.5;
}
.sg-crumb a { color: var(--text-sub); text-decoration: none; }
.sg-crumb a:hover { color: var(--blue); text-decoration: underline; }
.sg-crumb-sep { color: var(--border); }
.sg-crumb-cur { color: var(--text); font-weight: 600; }

/* ===== 页头 ===== */
.sg-hero {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px 22px; margin-bottom: 18px;
}
.sg-hero h1 { font-size: 25px; line-height: 1.35; margin-bottom: 6px; }
.sg-hero-desc { color: var(--text-sub); font-size: 14px; line-height: 1.8; }
.sg-hero-desc b { color: var(--orange); font-weight: 700; }
.sg-hero-meta { color: var(--text-sub); font-size: 13px; margin-top: 6px; }
.sg-hero-meta b { color: var(--orange); font-size: 15px; }

/* 区块小标题 */
.sg-sec {
  font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.3;
  margin: 26px 0 12px; padding-left: 9px; border-left: 4px solid var(--blue);
}

/* ===== 提示条 / 空状态 ===== */
.sg-note {
  background: var(--blue-light); color: #1e40af; border-radius: 10px;
  padding: 12px 15px; font-size: 13.5px; line-height: 1.7; margin: 18px 0;
}
.sg-note a { color: var(--blue); font-weight: 600; }

.sg-empty {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 38px 24px; text-align: center;
}
.sg-empty-title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.sg-empty p {
  color: var(--text-sub); font-size: 14px; line-height: 1.9;
  max-width: 560px; margin: 0 auto;
}
.sg-empty-acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* ===== 总览页:分类卡片 ===== */
.sg-cats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px;
}
.sg-cat {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 15px 16px 13px; text-decoration: none; color: var(--text);
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .12s, transform .06s, box-shadow .15s;
}
.sg-cat:hover { border-color: var(--blue); transform: translateY(-1px); box-shadow: var(--shadow); }
.sg-cat-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sg-cat-name { font-size: 16px; font-weight: 700; }
.sg-cat:hover .sg-cat-name { color: var(--blue); }
.sg-cat-count { flex: none; font-size: 12.5px; color: var(--orange); font-weight: 700; white-space: nowrap; }
.sg-cat-intro {
  color: var(--text-sub); font-size: 13px; line-height: 1.65;
  /* 导语长短不一,统一截到两行,免得卡片高度参差不齐 */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 封面缩略图:一行铺开,溢出的直接裁掉(不横向滚动,它只是个预览) */
.sg-cat-cover { display: flex; gap: 6px; overflow: hidden; margin-top: auto; padding-top: 4px; }
.sg-cat-cover img {
  width: 38px; height: 38px; object-fit: contain; flex: none;
  background: var(--bg); border-radius: 6px; padding: 2px;
}

/* ===== 分类页:标志网格 ===== */
.sg-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px;
}
.sg-item {
  background: var(--card); border-radius: 10px; box-shadow: var(--shadow);
  padding: 12px 12px 13px; display: flex; flex-direction: column; gap: 8px;
}
/* 图片框固定比例 + contain:标志的宽高比差异极大(圆牌 1:1、指路牌能到 4:1),
   给个统一的框才不会让网格高度乱跳;有 width/height 属性时浏览器还能提前占位,避免 CLS。 */
.sg-pic {
  width: 100%; aspect-ratio: 4 / 3; background: var(--bg); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 6px;
}
.sg-pic img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.sg-name { font-size: 13.5px; font-weight: 700; line-height: 1.45; display: block; }
.sg-desc {
  color: var(--text-sub); font-size: 12.5px; line-height: 1.65;
  /* 释义长短差很多(指路标志能写 80 字),截到 4 行保持网格整齐;
     文字本身完整存在于 HTML 里,爬虫读得到,截断只是视觉上的 */
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* ===== 相关分类 ===== */
.sg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-chip {
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px; font-size: 13.5px; color: var(--text); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 6px;
  transition: border-color .12s, color .12s;
}
.sg-chip:hover { border-color: var(--blue); color: var(--blue); }
.sg-chip span { font-size: 11.5px; color: var(--text-sub); }
.sg-chip:hover span { color: var(--blue); }

/* ===== 底部出口 ===== */
.sg-more { margin: 24px 0 4px; text-align: center; font-size: 14px; line-height: 2; }
.sg-more a { color: var(--blue); text-decoration: none; }
.sg-more a:hover { text-decoration: underline; }

/* ===== 移动端 ===== */
@media (max-width: 560px) {
  .sg-hero { padding: 16px 16px; }
  .sg-hero h1 { font-size: 21px; }
  .sg-cats { grid-template-columns: 1fr; }
  /* 手机上一行两个:再窄就看不清标志图案了,不退成单列 */
  .sg-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
  .sg-item { padding: 10px 10px 11px; }
  .sg-empty { padding: 30px 16px; }
  .sg-empty-acts .btn { width: 100%; }
}