/*
 * blog/static/blog/css/blog.css
 * ================================
 * Soultrob Editorial Blog — Entry-point stylesheet.
 *
 * Architecture (split files):
 *   tokens.css     → CSS custom properties / design tokens
 *   layout.css     → Reset, grid layout, typography system
 *   components.css → Header, sidebar, buttons, pills, drawer
 *   content.css    → Hero, cards, article page, post cards
 *   footer.css     → Footer
 *
 * All files share the --blog-* namespace to avoid collisions
 * with the parent Soultrob platform CSS.
 */

@import url("tokens.css");
@import url("layout.css");
@import url("components.css");
@import url("content.css");
@import url("footer.css");

/* ============================================================
   LAZY IMAGE FADE-IN
   ============================================================ */

.blog-wrapper img[data-blog-lazy] {
  opacity: 0;
  transition: opacity var(--blog-trans-base);
}

.blog-wrapper img.blog-img-loaded {
  opacity: 1;
}

/* ============================================================
   FOCUS STYLES (accessibility)
   ============================================================ */

.blog-wrapper :focus-visible {
  outline: 2px solid var(--blog-accent-primary);
  outline-offset: 2px;
}

/* ============================================================
   SELECTION COLOR
   ============================================================ */

.blog-wrapper ::selection {
  background: rgba(157, 92, 237, 0.25);
  color: var(--blog-text-primary);
}