/* Blog Performance Optimization Styles */

/* Prevent CLS for blog content images */
.blog-content-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem 0;
  border-radius: 4px;
}

/* Aspect ratio containers for embeds/iframes */
.blog-content-image + iframe,
.blog-details-text iframe {
  max-width: 100%;
  display: block;
  margin: 1rem 0;
}

/* Reserve space for dynamic content */
.blog-details-text {
  /* Reserve minimum height to prevent CLS */
  min-height: 200px;
}

/* Optimize font loading */
.blog-details-text h1,
.blog-details-text h2,
.blog-details-text h3,
.blog-details-text h4,
.blog-details-text h5,
.blog-details-text h6 {
  font-display: swap;
}

/* Lazy loading placeholder */
.blog-content-image[loading="lazy"] {
  background-color: #f0f0f0;
  background-image: linear-gradient(90deg, #f0f0f0 0px, #f8f8f8 40px, #f0f0f0 80px);
  background-size: 600px;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -600px 0;
  }
  100% {
    background-position: 600px 0;
  }
}

/* Ensure featured image doesn't cause CLS */
.thubmnails-details img.custom-thumbnails {
  width: 100%;
  height: auto;
  display: block;
}

/* Recent post images */
.recent-post-margin img {
  width: 100%;
  height: auto;
  object-fit: cover;
}