/* Blog page — compact .cta header, two-column layout, dark-theme Soro overrides */

.blog-content {
  padding: var(--space-12) 0;
}

/* Two-column: articles + sticky sidebar (matches the contact layout) */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-12);
  align-items: start;
}

.blog-main__heading {
  color: var(--text);
  margin: 0 0 var(--space-6);
}

.blog-aside {
  position: sticky;
  top: var(--space-8);
  display: grid;
  gap: var(--space-6);
  height: fit-content;
}

.blog-aside__lead {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin: 0 0 var(--space-4);
}

.blog-aside__actions {
  display: grid;
  gap: var(--space-3);
}

/* Reserve space so the page doesn't jump before the embed renders */
.blog-embed {
  min-height: 50vh;
}

.blog-embed__loading {
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-12) 0;
  margin: 0;
}

/* Stack the sidebar under the articles on tablet/mobile */
@media (max-width: 1024px) {
  .blog-layout {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .blog-aside {
    position: static;
  }
}

@media (max-width: 768px) {
  .blog-content {
    padding: var(--space-8) 0;
  }
}

/* ===========================================================================
   Soro widget — force the dark theme + borderless cards.
   Soro injects <style id="soro-blog-styles-light"> with hardcoded light colors;
   these #soro-blog-scoped rules out-specify its class-only selectors.
   =========================================================================== */
#soro-blog,
#soro-blog .soro-blog-content {
  color: var(--text);
}

/* Borderless articles (no boxes/shadows), separated by spacing only */
#soro-blog .soro-blog-list {
  display: grid;
  gap: var(--space-8);
}

#soro-blog .soro-blog-card,
#soro-blog .soro-blog-article {
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

/* Titles + article headings */
#soro-blog .soro-blog-card-title,
#soro-blog .soro-blog-article-title,
#soro-blog .soro-blog-article-content h1,
#soro-blog .soro-blog-article-content h2,
#soro-blog .soro-blog-article-content h3 {
  color: var(--text);
}

/* Body / excerpts */
#soro-blog .soro-blog-card-excerpt,
#soro-blog .soro-blog-article-content,
#soro-blog .soro-blog-article-content p,
#soro-blog .soro-blog-article-content li {
  color: var(--text-muted);
}

/* Meta / dates */
#soro-blog .soro-blog-card-date,
#soro-blog .soro-blog-article-date {
  color: var(--text-muted);
}

/* Links + back button → steel accent */
#soro-blog a,
#soro-blog .soro-blog-back {
  color: var(--color-primary-600);
}

#soro-blog a:hover,
#soro-blog .soro-blog-back:hover,
#soro-blog .soro-blog-card:hover .soro-blog-card-title {
  color: var(--color-primary-700);
}

/* Images: drop the light border, keep them clean */
#soro-blog .soro-blog-card-image,
#soro-blog .soro-blog-article-image {
  border: 0;
}