/* The base skeleton class */

/* Ensure skeleton cards have the same padding/border as real cards */
.skeleton-card {
    border-color: #f0f0f0;
    pointer-events: none; /* Prevent clicking while loading */
}

/* Make sure the text lines don't all look the same length */
.skeleton-text:last-child {
    width: 60%;
}

/* Optional: Subtle fade-in when real content replaces skeletons */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.post-grid-item {
    animation: fadeIn 0.4s ease-out;
}

.skeleton {
  background-color: #e2e5e7;
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  animation: skeleton-load 1.5s infinite;
}

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

/* Specific shapes */
.skeleton-text { height: 1rem; margin-bottom: 0.5rem; border-radius: 4px; }
.skeleton-rect { height: 150px; width: 100%; border-radius: 8px; }


/* List View Skeleton Layout */
.list-view-skeleton {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    background: #fff;
}

.skeleton-list-left {
    flex: 1;
}

.skeleton-list-right {
    width: 100px;
    text-align: right;
    margin-left: 20px;
}

/* Adjust skeleton-text for tighter list rows */
.list-view-skeleton .skeleton-text {
    margin-bottom: 8px;
}