/**
 * Blog page overrides.
 *
 * Loaded via hook_page_attachments() on blog detail pages and the configured
 * blog landing URL. Selectors are scoped to body.body-blog / .similar-blogs
 * so this CSS is inert on non-blog pages even if the file is cached globally.
 */

body.body-blog {
  /* White through the hero (which paints its own #F4F5FD via
     .blog-hero-layer-bg) and the article content. The page itself carries no
     gradient — the pre-footer band (.blog-post__outro) and the footer provide
     the brand tint, so it never sits behind the hero or tints the content. */
  background: #FFFFFF;
}

/* Pre-footer band: the section after the article content and before the footer
   (similar posts + newsletter) carries the brand gradient, fading from #F2F3FC
   at the top down to white, so the content transitions into the footer's own
   gradient below it. */
.blog-post__outro {
  background: linear-gradient(180deg, #F2F3FC 0%, #FFFFFF 50%);
}

/* Similar-posts cards on blog detail: transparent background lets the page
   gradient (or whatever the surrounding section uses) show through. */
.similar-blogs .card {
  background-color: transparent;
}

/* Match the post body to the hero's readable column on large screens. The hero
   sits in `col-span-10 col-start-2` of the 1200px container ≈ 960px of usable
   width. The content container has 20px side padding, so cap it at 1000px
   (960 + 2×20) to land the same 960px content box. The hero container is
   outside .blog-post__content, so it is unaffected. */
@media (min-width: 1200px) {
  .blog-post__content .container-v3 {
    max-width: 1000px;
  }
}