/* Skeleton Loading Animation */
.skeleton {
    background: #e2e8f0;
    background: linear-gradient(110deg, #ebebeb 8%, #f5f5f5 18%, #ebebeb 33%);
    border-radius: 5px;
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
  }
  
  @keyframes shine {
    to {
      background-position-x: -200%;
    }
  }
  
  /* Skeleton Loading Classes */
  .skeleton-image {
    width: 100%;
    height: 100%;
  }
  
  .skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
  }
  
  .skeleton-text-sm {
    width: 60%;
  }
  
  .skeleton-text-lg {
    width: 80%;
  }
  
  .skeleton-title {
    height: 1.5rem;
    margin-bottom: 1rem;
    width: 70%;
  }
  
  /* Hide skeleton when content is loaded */
  .loaded .skeleton {
    display: none;
  }

  .prose img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0.5rem;
    margin: 2rem auto;
}

/* Handle images with figure tags */
.prose figure {
    width: 100%;
    margin: 2rem auto;
}

.prose figure img {
    margin: 0;
}

.prose figcaption {
    text-align: center;
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.5rem;
}

/* Ensure images don't overflow on mobile */
@media (max-width: 640px) {
    .prose img, 
    .prose figure {
        width: 100%;
        margin: 1.5rem auto;
    }
}