/* blog-hero: container for blog-post hero components.
   Each component is a structured UI mockup in the same visual language as
   stand-hero/* (cards, real-looking screens, subtle animation). */

.blog-hero {
  width: 100%;
  max-width: 740px;
  margin: 0 auto var(--space-xl, 2rem);
  display: flex;
  justify-content: center;
}

.blog-hero > * {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .blog-hero *,
  .blog-hero *::before,
  .blog-hero *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
  .blog-hero svg animate {
    /* SVG native animations honored separately by browser. */
  }
}