/* ============================================================
   公共「加载中 / 加载失败」样式（v3.61）
   背景（老板口径 m10181）：产品中心是**服务端预渲染**的，页面一打开先看到完整分类 + 产品卡，
   紧接着 js/i18n.js 在 DOMContentLoaded 派发 jiuye:lang，而 js/products.js 的监听**没有守卫**，
   于是用「空数据」重新渲染了一次 → 屏幕闪成「共 0 个产品 / 没有找到相关产品」，随后才铺真内容。
   v3.61 起：脚本一开始就把预渲染的长列表换成**骨架卡 + 正在加载…**，数据到了再正常渲染；
   15 秒还没数据就换成「加载失败，请刷新重试」（加载失败 ≠ 没有找到相关产品）。

   ⚠️ 本文件被 4 个页面共用，其中 catalogue.html **不引 css/style.css**
      ⇒ 这里的 var(--line) / var(--muted) 必须带兜底色，否则那页的骨架会变成透明。
   ⚠️ 骨架的类名一律 sk-* ，**绝不使用 shop-card / pk-card / career-card**
      （_test/_v311-assert.js 等按 `.shop-card` 数卡片，撞名会让它们数到骨架）。
   ⚠️ 骨架元素是**注入各页原有的网格容器里**的（#shopGrid / #pkGrid / #careersGrid），
      所以列数/间距自动跟该页一致，本文件不重写 grid-template-columns。
   ============================================================ */

/* 微光动画的公共底：给 .sk-thumb / .sk-line 用 */
.sk-thumb,
.sk-line {
  background: linear-gradient(90deg, #eef2f0 25%, #e3e9e5 37%, #eef2f0 63%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}
@keyframes sk-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
/* 系统开了「减少动态效果」就静止（无障碍：不要用闪烁折磨人） */
@media (prefers-reduced-motion: reduce) {
  .sk-thumb,
  .sk-line { animation: none; }
}

/* ---------- 产品中心 / 包材参考：图片卡片骨架 ---------- */
.sk-card {
  background: #fff;
  border: 1px solid var(--line, #d4e7d8);
  border-radius: 12px;
  overflow: hidden;
}
.sk-card .sk-thumb { aspect-ratio: 4 / 3; }
.sk-card .sk-body { padding: 14px 16px 18px; }
.sk-line { height: 13px; border-radius: 7px; }
.sk-line + .sk-line { margin-top: 11px; }
.sk-line.w80 { width: 80%; }
.sk-line.w60 { width: 60%; }
.sk-line.w45 { width: 45%; }

/* ---------- 人才招聘：岗位卡骨架（.career-card 是固定 320px 高）---------- */
.sk-row {
  background: #fff;
  border: 1px solid var(--line, #d4e7d8);
  border-radius: 12px;
  padding: 22px 24px;
  height: 320px;
}
.sk-row .sk-line:first-child { height: 18px; border-radius: 9px; width: 62%; margin-top: 0; }
.sk-row .sk-line { margin-top: 14px; }

/* ---------- 「正在加载…」文字 ----------
   grid-column: 1 / -1 → 在网格容器里独占一整行；放在非网格容器（#catRoot）里会被忽略，正好 */
.sk-note {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted, #53637a);
  font-size: 14px;
  padding: 26px 12px;
  margin: 0;
}
.sk-note::before {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid var(--line, #d4e7d8);
  border-top-color: var(--blue, #0a8f47);
  border-radius: 50%;
  animation: sk-spin .8s linear infinite;
}
@keyframes sk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .sk-note::before { animation: none; }
}

/* ---------- 「加载失败，请刷新重试」 ---------- */
.sk-fail {
  grid-column: 1 / -1;
  text-align: center;
  padding: 34px 16px;
  color: var(--muted, #53637a);
}
.sk-fail .sk-fail-icon { font-size: 30px; line-height: 1; }
.sk-fail .sk-fail-text { font-size: 15px; margin: 12px 0 0; }
.sk-fail .sk-fail-btn {
  margin-top: 16px;
  padding: 8px 20px;
  font: inherit;
  font-size: 14px;
  color: #fff;
  background: var(--blue, #0a8f47);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.sk-fail .sk-fail-btn:hover { background: #087a3d; }