/* ============================================================
   b2bgeo.cn 全局响应式补丁 v2 — 2026-07-19
   移动优先 / 禁止横向滚动 / 汉堡抽屉 / 胶囊横滑 / 网格降维
   说明：站点 tailwind.css 为预编译、不含 md:/sm: 变体，
   故所有响应式行为均由本文件以纯 CSS 媒体查询实现。
   ============================================================ */

/* 全局盒模型 + 媒体自适应 */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; }

/* 禁止横向滚动条（移动端 320–768px 绝不允许出现）
   仅作用于 html（根滚动容器），避免破坏 header 的 position:sticky
   （overflow 写在 body 上会让 body 成为滚动容器，导致 sticky 失效） */
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }

/* 隐藏滚动条（胶囊横向滑动等场景） */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------- 导航：移动端汉堡 / 桌面端横排 ----------
   注意：站点 tailwind.css 为预编译(purge)，实测 md:flex / md:hidden / sm:hidden 均缺失，
   故 #navDesktop / #navToggle 的显隐统一由本媒体查询控制（ID 选择器优先级高于 Tailwind
   工具类，不会被子元素 class 干扰）。不要在 HTML 上加 hidden md:flex / md:hidden 等被
   purge 的变体——它们在本站是死类，反而会让 PC 菜单在桌面端永久消失。 */
#navDesktop { display: none; }
#navToggle  { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .375rem; }
/* 站点 tailwind.css 为 purge 产物，按钮所需的 h-10/w-10/h-6/w-6 均缺失，
   导致 svg 无约束尺寸被撑成 300x150 并溢出右侧被 overflow-x:hidden 裁掉，
   移动端看似“没有按钮”。此处显式给定尺寸，独立于被 purge 的 Tailwind 工具类。 */
#navToggle svg { display: block; width: 1.5rem; height: 1.5rem; }
#navClose { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; }
#navClose svg { display: block; width: 1.5rem; height: 1.5rem; }
@media (min-width: 768px) {
  #navDesktop { display: flex; }
  #navToggle  { display: none; }
}

/* ---------- 站点名：手机端仅显示“追赶网”，≥640px 显示完整名 ----------
   不依赖被 purge 的 sm: 变体（实测 sm:hidden 缺失），改用语义化 class 由本文件控制，
   视觉效果与 spec 的 <span class="sm:hidden">追赶网</span> + 完整名完全一致。 */
.brand-short { display: inline; }
.brand-full  { display: none; }
@media (min-width: 640px) {
  .brand-short { display: none; }
  .brand-full  { display: inline; }
}

/* ---------- 卡片网格（产品 / 企业）单列 → 双列 → 三/四列 ---------- */
.prod-grid, .comp-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) {
  .prod-grid, .comp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .prod-grid, .comp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .prod-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 筛选表单：移动端竖排，桌面横排 ---------- */
.filter-form { display: flex; flex-direction: column; }
.filter-form .ff-select,
.filter-form .ff-input,
.filter-form .ff-btn { width: 100%; }
.filter-form .ff-reset { align-self: flex-start; }
@media (min-width: 640px) {
  .filter-form { flex-direction: row; align-items: center; }
  .filter-form .ff-select,
  .filter-form .ff-btn { width: auto; }
  .filter-form .ff-input { flex: 1; min-width: 0; }
  .filter-form .ff-reset { align-self: auto; }
}

/* ---------- 卡片导流按钮：移动端通栏，桌面自适应 ---------- */
.prod-shop-btn { width: 100%; }
@media (min-width: 640px) { .prod-shop-btn { width: auto; } }

/* ---------- 行业画像看板：手机端单列堆叠 ---------- */
@media (max-width: 767px) {
  .profile-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
}

/* ---------- 胶囊标签容器：手机端横向滑动，桌面端折行 ---------- */
.tag-scroll { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tag-scroll .pill { margin: 0; flex: 0 0 auto; }
@media (min-width: 768px) {
  .tag-scroll { flex-wrap: wrap; overflow-x: visible; }
}

/* ---------- 移动端抽屉导航（右侧滑出） ----------
   抽屉默认靠 transform: translateX(100%) 移到屏外 + visibility:hidden 不可点；
   JS 加 .open 后滑入并显示。基础 display:flex 保证内部竖向布局。
   桌面端(≥768px)强制 display:none，永远不显示抽屉。 */
#navOverlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; background: rgba(0,0,0,.45); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
#navOverlay.show { opacity: 1; visibility: visible; }
#navDrawer { position: fixed; top: 0; right: 0; z-index: 1001; height: 100%; width: 18rem; max-width: 82%; background: #ffffff; box-shadow: -8px 0 30px rgba(0,0,0,.15); display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden; transition: transform .3s ease, visibility .3s ease; }
#navDrawer.open { transform: translateX(0); visibility: visible; }
@media (min-width: 768px) {
  #navDrawer { display: none !important; }
}

/* ============================================================
   首页【数据流 Latest Feed】组件增强 — 2026-07-19
   说明：site tailwind.css 为 purge 产物，md:/lg:/xl: 变体及多数颜色工具类
   缺失；故实体胶囊、CTA 按钮、时效微标、列显隐统一由本文件以语义化 class 控制。
   ============================================================ */

/* 实体类型胶囊：产品=淡橙底暗橙字，企业=淡蓝底暗蓝字（无边框扁平化） */
.pill-prod { display: inline-flex; align-items: center; border-radius: 9999px; padding: .15rem .6rem; font-size: .75rem; font-weight: 600; line-height: 1.4; background: #fff1e6; color: #c2410c; }
.pill-comp { display: inline-flex; align-items: center; border-radius: 9999px; padding: .15rem .6rem; font-size: .75rem; font-weight: 600; line-height: 1.4; background: #e8f0fe; color: #1d4ed8; }

/* 时效微标：产品名下方动态小字，向 AI 爬虫释放高频更新信号 */
.feed-fresh { display: inline-flex; align-items: center; gap: .3rem; margin-top: .3rem; font-size: .6875rem; color: #94a3b8; }
.feed-fresh::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: #22c55e; animation: feedPulse 1.6s ease-in-out infinite; }
@keyframes feedPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* 右侧导流 CTA（轻量精致） */
.feed-cta { display: inline-flex; align-items: center; gap: .2rem; white-space: nowrap; border-radius: .5rem; padding: .3rem .65rem; font-size: .8125rem; font-weight: 600; line-height: 1.3; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.feed-cta-orange { background: #fff4ec; color: #ea580c; border: 1px solid #ffd9bf; }
.feed-cta-orange:hover { background: #ffe8d6; color: #c2410c; }
.feed-cta-gray { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.feed-cta-gray:hover { background: #fff4ec; color: #ea580c; border-color: #ffd9bf; }

/* 数据流表格：手机端隐去非核心列，桌面逐级展开
   （替代被 purge 的 hidden md/lg/xl:table-cell 死类；外层 overflow-x-auto 仍作兜底） */
.feed-table .col-spec,
.feed-table .col-price,
.feed-table .col-source { display: none; }
@media (min-width: 768px)  { .feed-table .col-spec  { display: table-cell; } }
@media (min-width: 1024px) { .feed-table .col-price,
                             .feed-table .col-source { display: table-cell; } }

/* ============================================================
   文章中心 news.php — 卡片流 + 分类胶囊（替代死板 <table>）
   说明：text-lg/font-bold/text-gray-900/line-clamp-2 等 Tailwind
   变体在本站 purge 构建中缺失，故全部用显式颜色语义类实现。
   ============================================================ */

/* 分类胶囊容器：手机端横向滑屏（nowrap + overflow-x），桌面可折行 */
.cat-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.cat-pills::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .cat-pills { flex-wrap: wrap; overflow: visible; } }

/* 无边框扁平化现代胶囊 + 平滑 hover 变色 */
.cat-pill {
  flex: 0 0 auto;
  display: inline-block;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  color: #4b5563;
  background: #f4f4f5;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.cat-pill:hover { background: #fff3eb; color: #ff5a00; }
.cat-pill.active { background: #ff5a00; color: #fff; }
.cat-pill.active:hover { background: #e64a00; color: #fff; }

/* 卡片列表流 */
.news-list { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.news-card {
  display: block;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.news-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.06); border-color: #ffd9bf; }

.news-card-top { display: flex; align-items: flex-start; gap: 10px; }
/* 标题：text-lg(18px) font-bold(700) text-gray-900(#111827) hover:text-brand(#ff5a00) */
.news-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  color: #111827;
  text-decoration: none;
  transition: color .2s ease;
}
.news-title:hover { color: #ff5a00; }

/* 分类高亮小气泡：text-xs(12px) px-2 py-0.5 rounded(9999px) */
.news-cat {
  flex: 0 0 auto;
  display: inline-block;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 12px;
  line-height: 1.6;
  color: #c2410c;
  background: #fff1e6;
  text-decoration: none;
  white-space: nowrap;
}
.news-cat:hover { background: #ffe0cc; }

/* 摘要：最多 2 行 */
.news-summary {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: #555;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 底部元数据栏：text-xs(12px) text-gray-400(#9ca3af) */
.news-meta {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #9ca3af;
}
.news-meta .news-dot { color: #d1d5db; }

.news-empty { padding: 40px 0; text-align: center; color: #9ca3af; font-size: 14px; }
.news-empty a { color: #ff5a00; text-decoration: none; }