/* SkeletonCard — shimmer */

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-block {
  border-radius: var(--radius-md);
  background: linear-gradient(
    90deg,
    var(--color-surface-offset) 0%,
    var(--color-surface-dynamic) 40%,
    var(--color-surface-offset) 80%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-divider);
  background-color: var(--color-surface);
}

.skeleton-card__media {
  aspect-ratio: 2.2 / 1;
}

.skeleton-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
}

.skeleton-card__line {
  block-size: 12px;
  border-radius: var(--radius-sm);
}

.skeleton-card__line--lg {
  inline-size: 80%;
}

.skeleton-card__line--md {
  inline-size: 50%;
}

.skeleton-card__line--sm {
  inline-size: 35%;
}

.skeleton-card__btn {
  block-size: 28px;
  margin-block-start: var(--space-2);
  border-radius: var(--radius-md);
}