/* ============================================================
   时光云 shiguangyun - 骨架屏 Skeleton
   设计令牌：继承 modern.css 的 --sg-* 变量
   用法：
     <div class="skel skel-list" data-skel-row="5"></div>
     JS: SGskel.mount(el, 'list', 5);  SGskel.replace(el, htmlString, true);
   ============================================================ */

.skel {
  position: relative;
  background: #e3e9f2;
  border-radius: var(--sg-radius, 6px);
  overflow: hidden;
  isolation: isolate;
}

/* 微光扫过：主色 #165dff 的斜向渐变 */
.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(22, 93, 255, 0.25) 40%,
    rgba(22, 93, 255, 0.45) 50%,
    rgba(22, 93, 255, 0.25) 60%,
    transparent 100%
  );
  animation: skel-shimmer 1.4s ease-in-out infinite;
}

@keyframes skel-shimmer {
  100% { transform: translateX(100%); }
}

/* ---- 形态：文本行 ---- */
.skel-line {
  height: 14px;
  margin: 8px 0;
  border-radius: 3px;
}
.skel-line--sm  { height: 12px; }
.skel-line--lg  { height: 18px; }
.skel-line--title { height: 22px; width: 40%; }
.skel-line--w75 { width: 75%; }
.skel-line--w50 { width: 50%; }
.skel-line--w25 { width: 25%; }

/* ---- 形态：卡片 ---- */
.skel-card {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--sg-border, #e5eaf3);
  border-radius: var(--sg-radius, 6px);
  box-shadow: var(--sg-shadow-sm, 0 2px 10px rgba(15,23,42,.04));
}
.skel-card .skel { background: var(--sg-bg-soft, #f8fafc); }

/* ---- 形态：头像/图标 ---- */
.skel-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}
.skel-icon {
  width: 40px; height: 40px;
  border-radius: var(--sg-radius, 6px);
  flex-shrink: 0;
}

/* ---- 形态：图片 ---- */
.skel-img {
  width: 100%;
  background: linear-gradient(180deg, #eef2f7 0%, #e3eaf5 100%);
}

/* ---- 形态：列表行（左文右日期，对应 .news-item） ---- */
.skel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--sg-border-light, #eef2f7);
  background: transparent;
  border-radius: 0;
}
.skel-row:last-child { border-bottom: none; }
.skel-row::after { display: none; }
.skel-row .skel-line { margin: 0; }
.skel-row .skel-row__date {
  width: 80px;
  height: 12px;
  flex-shrink: 0;
}

/* ---- 形态：网格卡片（合作伙伴/证书/方案） ---- */
.skel-grid {
  display: grid;
  gap: 20px;
}
.skel-grid--3 { grid-template-columns: repeat(3, 1fr); }
.skel-grid--4 { grid-template-columns: repeat(4, 1fr); }
.skel-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* ---- Hero 区骨架 ---- */
.skel-hero {
  height: 380px;
  border-radius: 0;
  background: linear-gradient(135deg, #e8efff 0%, #d6e4ff 100%);
}
.skel-hero::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); }

/* ---- 骨架退场 / 真实内容入场 ---- */
.skel-fadeout {
  animation: skel-out .25s ease forwards;
}
@keyframes skel-out {
  to { opacity: 0; visibility: hidden; }
}

.skel-real {
  animation: skel-in .35s ease both;
}
@keyframes skel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 逐行 stagger 由 JS 加 inline animation-delay 控制 */

/* ---- 图片懒加载占位：<img class="sg-lazy"> 未加载时灰底 ---- */
img.skel-ph {
  background: var(--sg-border-light, #eef2f7);
  color: transparent;
  min-height: 60px;
}

/* ---- 尊重系统减弱动效 ---- */
@media (prefers-reduced-motion: reduce) {
  .skel::after { animation: none; }
  .skel-real, .skel-fadeout { animation: none; }
}

/* ---- 移动端适配 ---- */
@media (max-width: 768px) {
  .skel-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .skel-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .skel-hero { height: 260px; }
}