/*
 * 主站皮肤 · orange — 卓采汇橙 · 工业贸易现代主义
 *
 * 与 default 的关系：
 *   default 是历史橙皮肤（hue 48 / radius 偏紧），样式偏经典 BS5 卡片版。
 *   orange 是面向新首页（templates/orange）的升级版橙皮肤：
 *     - 主色更高饱和（hue 48 → 50，chroma .17 → .19），与 #FF6A1A 对齐
 *     - 圆角恢复中性（6/8px），适合 Hero 大块面 + 工业方正风
 *     - 容器宽度从 1220 拉到 1280，给 Hero / 行业 silo 更多呼吸
 *
 * 加载顺序（base.html.twig 控制）：
 *   1. /build/tailwind.css        ← Tailwind utility 池 + @theme 默认 token
 *   2. /build/skin_site_orange.css← 本文件，覆盖 :root token
 *   3. <style>{ --bs-primary }</style> 终局兜底（base.html.twig 里 inline；orange 里在子模板中以橙色覆盖）
 */

:root {
  /* ===== 文本 ===== */
  --color-fg: #0E1620;
  --color-fg-muted: #475569;
  --color-fg-subtle: #94A3B8;
  --color-fg-on-primary: #FFFFFF;
  --color-fg-on-accent: #FFFFFF;

  /* ===== 背景 ===== */
  --color-bg: #FFFFFF;
  --color-bg-muted: #F5F7FA;          /* 雾白 — section 底 */
  --color-bg-subtle: #EEF1F6;
  --color-card: #FFFFFF;
  --color-input: #F5F7FA;

  /* ===== 主色：卓采汇橙 (oklch ≈ #FF6A1A) ===== */
  --color-primary: oklch(70% 0.19 50);
  --color-primary-hover: oklch(63% 0.19 50);
  --color-primary-active: oklch(55% 0.19 50);
  --color-primary-soft: #FFF1E6;       /* 主色 8% — chip / hover bg */

  /* Bootstrap 5 兜底（base.html.twig inline override 也读这两个变量） */
  --bs-primary: #FF6A1A;
  --bs-primary-rgb: 255, 106, 26;

  /* ===== 强调蓝（链接 / 表格 active） ===== */
  --color-accent: oklch(50% 0.18 258);  /* ≈ #1554D1 */
  --color-accent-hover: oklch(43% 0.18 258);

  /* ===== 状态色 ===== */
  --color-danger: oklch(58% 0.22 25);   /* 中国红，克制使用 */
  --color-success: oklch(62% 0.16 145);
  --color-warning: oklch(78% 0.15 80);
  --color-gold: #C8932E;

  /* ===== 边框 / 分隔 ===== */
  --color-border: #E5E9F0;              /* hairline */
  --color-border-strong: #CBD5E1;
  --color-ring: oklch(70% 0.19 50);

  /* ===== 圆角（B2B 偏方正） ===== */
  --radius-input: 6px;
  --radius-button: 6px;
  --radius-card: 8px;
  --radius-pill: 9999px;

  /* ===== 字体（Hero 用宋体、UI 用 HarmonyOS / PingFang、数字用 mono） ===== */
  --font-sans:
      "HarmonyOS Sans SC", "PingFang SC", "Hiragino Sans GB",
      "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-heading:
      "Noto Serif SC", "Source Han Serif SC", "Songti SC",
      "STSong", "SimSun", serif;
  --font-mono:
      "JetBrains Mono", "IBM Plex Mono", ui-monospace,
      "SFMono-Regular", Menlo, Consolas, monospace;

  /* ===== 阴影 ===== */
  --shadow-card:    0 1px 2px rgba(15,22,32,.04), 0 4px 12px rgba(15,22,32,.06);
  --shadow-popover: 0 2px 6px rgba(15,22,32,.06), 0 14px 28px rgba(15,22,32,.10);
  --shadow-modal:   0 12px 32px rgba(15,22,32,.16);
  --shadow-cta:     0 6px 16px rgba(255,106,26,.32);

  /* ===== 容器 ===== */
  --container-content: 1280px;
  --container-narrow: 980px;
}

/* ───── orange 皮肤专属 utilities（语义化补强，避免在模板里写魔法值） ───── */

/* 模块标题前的橙色指示条（::before 写法太啰嗦，用 class 收敛） */
.zc-section-bar::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  background: var(--color-primary);
  margin-right: 12px;
  vertical-align: -3px;
  border-radius: 1px;
}

/* 英文小标 micro-label（顶在中文 H2 上方） */
.zc-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--color-primary);
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* 印章式认证 chip（金牌 / 实地 / VIP） */
.zc-stamp {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 11px;
  letter-spacing: 0.12em;
  background: #fff;
  border-radius: 2px;
  white-space: nowrap;
}
.zc-stamp.is-gold { border-color: var(--color-gold); color: var(--color-gold); }
.zc-stamp.is-success { border-color: var(--color-success); color: var(--color-success); }

/* 工业蓝图栅格底纹（section 上叠加，弱透明度） */
.zc-blueprint {
  background-image:
    linear-gradient(to right, rgba(15,22,32,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,22,32,.04) 1px, transparent 1px);
  background-size: 80px 80px;
}

/* 等宽数字（数据背书条 / 价格 / ticker 时间） */
.zc-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Hero 主标题（宋体 + 高对比 + 微紧字距） */
.zc-display {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--color-fg);
}

/* CTA 主按钮（橙底 + 阴影 + 锐边） */
.zc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  background: var(--color-primary);
  color: var(--color-fg-on-primary);
  font-weight: 600;
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-cta);
  transition: background-color .15s, transform .15s, box-shadow .15s;
}
.zc-cta:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
.zc-cta:active { background: var(--color-primary-active); transform: translateY(0); }

.zc-cta-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  background: transparent;
  color: var(--color-fg);
  font-weight: 600;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-button);
  transition: border-color .15s, color .15s;
}
.zc-cta-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* 实时撮合 ticker 条目入场闪光 */
@keyframes zc-tick-flash {
  0%   { background-color: var(--color-primary-soft); }
  100% { background-color: transparent; }
}
.zc-tick-row { animation: zc-tick-flash 1s ease-out; }

/* 数字滚动入场（DataBackbone 用） */
@keyframes zc-num-rise {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.zc-num-rise { animation: zc-num-rise .6s ease-out both; }

/* ═══════════════════════════════════════════════════════════════════
   H5 移动端响应式补齐 — orange 皮肤通用
   ─────────────────────────────────────────────────────────────────
   作用范围:
     · chrome (topbar/header/nav/footer) —— 模板里只用 Tailwind 原子类无断点
     · 首页 12 个 home section —— Tailwind 自带 lg/md 断点,大多自动塌缩,
       这里只补几个还在用 grid-cols-3 不收敛的局部网格
     · 5 个二级页 (products / search_product / search_company /
       product_new_list / product_new_detail / company / news_detail / newslist)
       —— 共享同样的 1280px 容器,统一收紧内边距
   ─────────────────────────────────────────────────────────────────── */

/* ─── 平板及以下: 容器内边距收紧 ─── */
@media (max-width: 1024px) {
  .zc-header-row,
  .zc-header-nav-inner,
  .zc-topbar > div,
  .zc-footer > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .zc-header-cta .zc-cta-ghost { display: none !important; }  /* 「免费发产品」让位 */
}

/* ─── ≤768px: 主要 H5 断点 ─── */
@media (max-width: 768px) {
  /* TopBar —— 隐藏非关键文案,保留电话 + 登录注册 */
  .zc-topbar > div { height: auto !important; padding: 6px 12px !important; gap: 4px; flex-wrap: wrap; }
  .zc-topbar-left { gap: 6px !important; flex-wrap: wrap; }
  .zc-topbar-right { gap: 6px !important; flex-wrap: wrap; }
  .zc-topbar-tag,
  .zc-topbar-mute,
  .zc-topbar-extra,
  .zc-topbar-lang,
  .zc-topbar-sep { display: none !important; }

  /* Header —— 两行布局: 1) Logo + CTA, 2) 搜索条整行 */
  .zc-header-row {
    height: auto !important;
    flex-wrap: wrap;
    gap: 10px !important;
    padding: 10px 12px !important;
  }
  .zc-header-logo { order: 0; flex: 1 1 auto; min-width: 0; }
  .zc-header-logo .zc-display { font-size: 20px !important; }
  .zc-logo-sub { display: none !important; }
  .zc-header-cta { order: 1; gap: 6px !important; flex-shrink: 0; }
  .zc-header-cta .zc-cta-ghost { display: none !important; }
  .zc-header-cta .zc-cta { height: 34px !important; padding: 0 10px !important; font-size: 12px !important; }
  .zc-search-form {
    order: 2;
    width: 100%;
    height: 40px !important;
    flex-basis: 100%;
  }
  .zc-search-tabs { padding-left: 6px !important; padding-right: 2px !important; }
  .zc-search-tab { padding: 0 4px !important; font-size: 11px !important; }
  .zc-search-input { font-size: 12px !important; padding: 0 8px !important; }
  .zc-search-input::placeholder { font-size: 11px; }
  .zc-search-btn { height: 40px !important; padding: 0 10px !important; }
  .zc-search-btn-text { display: none; }
  .zc-search-btn .zc-search-icon { display: inline-block !important; }

  /* Nav —— 横向滚动 */
  .zc-header-nav-inner {
    height: 40px !important;
    gap: 18px !important;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .zc-header-nav-inner::-webkit-scrollbar { display: none; }
  .zc-header-nav-inner a { font-size: 13px; flex-shrink: 0; }
  .zc-header-live { display: none !important; }

  /* Hero & 通用 display 标题缩小 */
  .zc-display { letter-spacing: 0; }
  section .zc-display[class*="text-[44px]"],
  section h2.zc-display,
  section h1.zc-display { font-size: 26px !important; line-height: 1.25 !important; }
  /* Tailwind 任意值类 text-[44px]/[56px] 在小屏溢出 */
  [class*="text-\\[44px\\]"],
  [class*="text-\\[56px\\]"] { font-size: 28px !important; line-height: 1.25 !important; }
  [class*="text-\\[28px\\]"],
  [class*="text-\\[32px\\]"] { font-size: 22px !important; line-height: 1.3 !important; }

  /* 行业 silo 行 / hero 信任 chip 数据条 —— 缩字号 */
  .zc-stamp { height: 20px; padding: 0 6px; font-size: 10px; letter-spacing: .04em; }
  .zc-eyebrow { font-size: 10px; letter-spacing: .18em; }
  .zc-cta, .zc-cta-ghost { height: 42px; padding: 0 16px; }

  /* 全站容器 —— 收紧 1280 内边距 + 减少纵向 padding */
  [style*="max-width: 1280px"] { padding-left: 14px !important; padding-right: 14px !important; }
  section [style*="max-width: 1280px"][class*="py-20"],
  section [style*="max-width: 1280px"][class*="py-16"],
  section [style*="max-width: 1280px"][class*="py-14"] { padding-top: 36px !important; padding-bottom: 36px !important; }

  /* 实时撮合 ticker —— 内文挤压 */
  .zc-ticker-time { font-size: 11px !important; }
  .zc-ticker-tag { font-size: 10px !important; padding: 0 4px !important; }

  /* Footer —— 5 列已是 md:5,自动塌缩成 1 列,只调内边距 + logo 字号 */
  .zc-footer > div { padding: 32px 14px !important; }
  .zc-footer .zc-display { font-size: 20px !important; }
  .zc-footer .grid { gap: 28px !important; }
  .zc-footer .border-t > div { padding: 14px !important; gap: 8px !important; font-size: 11px !important; }
}

/* ─── ≤480px: 极小屏精修 ─── */
@media (max-width: 480px) {
  .zc-header-logo .zc-display { font-size: 18px !important; }
  .zc-header-cta .zc-cta { padding: 0 8px !important; font-size: 11px !important; }
  .zc-search-tab { padding: 0 3px !important; font-size: 10px !important; }
  .zc-search-input { font-size: 11px !important; }

  [class*="text-\\[44px\\]"],
  [class*="text-\\[56px\\]"] { font-size: 22px !important; }
  [class*="text-\\[28px\\]"] { font-size: 18px !important; }
  [class*="text-\\[26px\\]"] { font-size: 18px !important; }
  [class*="text-\\[24px\\]"] { font-size: 17px !important; }
  [class*="text-\\[20px\\]"] { font-size: 16px !important; }

  /* Hero 数据条 26px 数字 -> 18 */
  [class*="text-\\[26px\\]"] { font-size: 18px !important; }

  /* 4 / 3 / 2 col grid 全部强制 1 col(避免极小屏挤碎) */
  section .grid-cols-3:not([class*="lg:"]):not([class*="md:"]) { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 8px !important; }
  section .grid-cols-2:not([class*="lg:"]):not([class*="md:"]) { grid-template-columns: 1fr !important; gap: 8px !important; }

  .zc-footer > div { padding: 24px 12px !important; }
}