/* ============================================================

   skeleton.css · Our Smart Baby

   骨架屏系统

   加载顺序：6/34

   ============================================================ */



/* 基础骨架屏 */

.skeleton {

  background: linear-gradient(

    90deg,

    var(--skeleton-bg) 0%,

    var(--skeleton-shimmer) 50%,

    var(--skeleton-bg) 100%

  );

  background-size: 200% 100%;

  animation: skeleton-shimmer var(--loading-shimmer) ease-in-out infinite;

  border-radius: var(--radius-sm);

}



/* 1. 文章卡片骨架屏 */

.skeleton-card {

  container-type: inline-size;

  container-name: card;

  background-color: var(--color-surface);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg);

  overflow: hidden;

  padding-bottom: var(--card-padding);

}



.skeleton-card .skeleton-cover {

  aspect-ratio: 16 / 9;

  width: 100%;

  border-radius: 0;

}



.skeleton-card .skeleton-title {

  height: 24px;

  width: 80%;

  margin: var(--rhythm-normal) var(--card-padding) 0;

}



.skeleton-card .skeleton-summary {

  height: 16px;

  width: 100%;

  margin: var(--rhythm-tight) var(--card-padding) 0;

}



.skeleton-card .skeleton-summary:nth-of-type(2) {

  width: 60%;

}



.skeleton-card .skeleton-meta {

  height: 12px;

  width: 40%;

  margin: var(--rhythm-normal) var(--card-padding) 0;

}



/* 2. 文章正文骨架屏 */

.skeleton-article {

  max-width: var(--reading-max-width);

  margin: 0 auto;

}



.skeleton-article .skeleton-h1 {

  height: 40px;

  width: 80%;

  margin-bottom: var(--space-4);

}



.skeleton-article .skeleton-h2 {

  height: 28px;

  width: 60%;

  margin: var(--rhythm-loose) 0 var(--space-4);

}



.skeleton-article .skeleton-line {

  height: 16px;

  width: 100%;

  margin-bottom: var(--space-3);

}



.skeleton-article .skeleton-line:nth-child(3n) { width: 90%; }

.skeleton-article .skeleton-line:nth-child(4n) { width: 70%; }



.skeleton-article .skeleton-image {

  aspect-ratio: 16 / 9;

  width: 100%;

  margin: var(--rhythm-normal) 0;

  border-radius: var(--radius-md);

}



/* 3. 聚合页列表骨架屏 */

.skeleton-list {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: var(--space-5);

}



/* 4. 侧边栏Quick Picks骨架屏 */

.skeleton-sidebar .skeleton-line {

  height: 40px;

  width: 100%;

  margin-bottom: var(--space-2);

  border-radius: var(--radius-sm);

}



/* 5. 对比表格骨架屏 */

.skeleton-table {

  width: 100%;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  padding: var(--space-4);

}



.skeleton-table .skeleton-row {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: var(--space-3);

  margin-bottom: var(--space-3);

}



.skeleton-table .skeleton-cell {

  height: 20px;

  border-radius: var(--radius-sm);

}



/* 6. 评论区骨架屏 */

.skeleton-review {

  padding: var(--space-4);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  margin-bottom: var(--space-3);

}



.skeleton-review .skeleton-avatar {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  margin-bottom: var(--space-3);

}



.skeleton-review .skeleton-line {

  height: 14px;

  width: 100%;

  margin-bottom: var(--space-2);

}



.skeleton-review .skeleton-line:nth-child(3) { width: 70%; }



/* 7. 封面图骨架屏 */

.skeleton-cover {

  aspect-ratio: 16 / 9;

  width: 100%;

  border-radius: var(--radius-md);

  background: linear-gradient(

    90deg,

    var(--skeleton-bg) 0%,

    var(--skeleton-shimmer) 50%,

    var(--skeleton-bg) 100%

  );

  background-size: 200% 100%;

  animation: skeleton-shimmer var(--loading-shimmer) ease-in-out infinite;

}



/* 8. 移动端简化版骨架屏 */

@media (max-width: 768px) {

  .skeleton-card .skeleton-title { height: 20px; }

  .skeleton-card .skeleton-summary { height: 14px; }

  .skeleton-article .skeleton-h1 { height: 32px; }

  .skeleton-article .skeleton-h2 { height: 22px; }

  .skeleton-list { grid-template-columns: 1fr; }

  .skeleton-table .skeleton-row { grid-template-columns: repeat(2, 1fr); }

}