/* Base skeleton style */
.skeleton {
  background-color: #e2e5e7;
  background-image: linear-gradient(90deg, #e2e5e7 0px, #f8f8f8 40px, #e2e5e7 80px);
  background-size: 600px;
  background-repeat: no-repeat;
  animation: shine 1.2s linear infinite;
  border-radius: 4px;
}

/* Animation */
@keyframes shine {
  0% {
    background-position: -100px;
  }
  100% {
    background-position: 600px;
  }
}

/* Blog Card Skeleton Layout */
.skeleton-blog-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 20px;
  padding: 16px;
  background: #fff;
}

/* Top banner image */
.skeleton-thumbnail {
  height: 150px;
  width: 100%;
  border-radius: 10px;
  margin-bottom: 12px;
}

/* Meta information: avatar, author, date */
.skeleton-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.skeleton-avatar-small {
  height: 24px;
  width: 24px;
  border-radius: 50%;
}

.skeleton-meta-text {
  height: 14px;
  width: 30%;
  border-radius: 4px;
}

/* Blog title */
.skeleton-title {
  height: 20px;
  width: 80%;
  margin-bottom: 10px;
  border-radius: 6px;
}

/* Blog description lines */
.skeleton-text-line {
  height: 14px;
  width: 100%;
  margin-bottom: 6px;
  border-radius: 4px;
}

.skeleton-text-line.short {
  width: 60%;
}

/* CTA Button */
.skeleton-btn {
  height: 36px;
  width: 100px;
  border-radius: 18px;
  margin-top: 12px;
}