/* ============================================================
   skeleton.css — Skeleton Loading System
   Load order: 6
   ============================================================ */

.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);
}

.skeleton-line {
  height: 1em;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.skeleton-title {
  height: 1.4em;
  width: 70%;
  margin-bottom: var(--space-3);
}

.skeleton-text-sm { height: 0.85em; width: 100%; }
.skeleton-text-md { height: 1em; width: 90%; }
.skeleton-text-lg { height: 1.2em; width: 80%; }

/* ────────────────────────────────────────
   ARTICLE CARD SKELETON
   ──────────────────────────────────────── */

.skeleton-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  container-type: inline-size;
  container-name: card;
}

.skeleton-card .skeleton-cover {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 0;
}

.skeleton-card .skeleton-card-body {
  padding: var(--space-5);
}

.skeleton-card .skeleton-card-title {
  height: 1.4em;
  width: 85%;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-sm);
  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;
}

.skeleton-card .skeleton-card-summary {
  height: 0.9em;
  width: 100%;
  margin-bottom: var(--space-2);
}

.skeleton-card .skeleton-card-summary.short { width: 60%; }

/* ────────────────────────────────────────
   ARTICLE PAGE SKELETON
   ──────────────────────────────────────── */

.skeleton-article {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: var(--space-8) var(--space-4);
}

.skeleton-article .skeleton-h1 {
  height: 2.2em;
  width: 90%;
  margin-bottom: var(--space-5);
}

.skeleton-article .skeleton-lead {
  height: 1.2em;
  width: 100%;
  margin-bottom: var(--space-3);
}

.skeleton-article .skeleton-paragraph {
  height: 1em;
  width: 100%;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  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;
}

.skeleton-article .skeleton-paragraph.short { width: 65%; }

/* ────────────────────────────────────────
   LIST SKELETON
   ──────────────────────────────────────── */

.skeleton-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding: var(--space-6) 0;
}
@media (min-width: 640px) {
  .skeleton-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .skeleton-list { grid-template-columns: repeat(3, 1fr); }
}

/* ────────────────────────────────────────
   SIDEBAR QUICK PICKS SKELETON
   ──────────────────────────────────────── */

.skeleton-sidebar-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.skeleton-sidebar-item:last-child { border-bottom: none; }
.skeleton-sidebar-item .skeleton-line:last-child { width: 40%; }

/* ────────────────────────────────────────
   COMPARISON TABLE SKELETON
   ──────────────────────────────────────── */

.skeleton-table {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
}
.skeleton-table .skeleton-cell {
  height: 24px;
  border-radius: var(--radius-sm);
  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;
}

/* ────────────────────────────────────────
   COMMENT SKELETON
   ──────────────────────────────────────── */

.skeleton-comment {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}
.skeleton-comment:last-child { border-bottom: none; }
.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  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;
}
.skeleton-comment-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ────────────────────────────────────────
   COVER IMAGE SKELETON
   ──────────────────────────────────────── */

.skeleton-cover-container {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--radius-lg);
  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;
}

/* ────────────────────────────────────────
   INLINE SKELETON (for small areas)
   ──────────────────────────────────────── */

.skeleton-inline {
  display: inline-block;
  height: 1em;
  width: 4em;
  vertical-align: middle;
  border-radius: var(--radius-sm);
  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;
}

/* ────────────────────────────────────────
   MOBILE SIMPLIFICATION
   ──────────────────────────────────────── */

@media (max-width: 768px) {
  .skeleton-card .skeleton-card-title { height: 1.2em; }
  .skeleton-card .skeleton-card-summary { height: 0.8em; }
  .skeleton-article .skeleton-h1 { height: 1.8em; }
  .skeleton-comment { gap: var(--space-2); }
  .skeleton-avatar { width: 40px; height: 40px; }
}

/* ────────────────────────────────────────
   REDUCED MOTION
   ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .skeleton-card .skeleton-card-title,
  .skeleton-article .skeleton-paragraph,
  .skeleton-table .skeleton-cell,
  .skeleton-avatar,
  .skeleton-cover-container,
  .skeleton-inline {
    animation: none !important;
    background: var(--skeleton-bg);
  }
}