/* B449: Standalone public Blog detail editorial layout.
   Shared site typography and gizmo primitives remain in site.css. */
.route-blog-detail .blog-article { width: 100%; max-width: none; min-width: 0; }
.route-blog-detail .blog-article > h1,
.route-blog-detail .blog-article > .publication { max-width: 60rem; }
.route-blog-detail .blog-hero { margin: clamp(1.25rem, 2.8vw, 2.5rem) 0 0; width: 100%; }
.route-blog-detail .blog-hero img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 7;
  object-fit: cover; object-position: center;
}
.route-blog-detail .blog-hero figcaption {
  margin-block-start: .65rem; text-align: center; color: var(--muted); font-size: .9rem;
}
.route-blog-detail .blog-editorial-layout {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(15rem, 3fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: start;
  margin-block: clamp(2rem, 4vw, 3.5rem);
}
.route-blog-detail .blog-editorial-main { min-width: 0; max-width: 72ch; }
.route-blog-detail .blog-editorial-main .page-body { max-width: 100%; }
.route-blog-detail .blog-editorial-sidebar { min-width: 0; margin: 0; }
.route-blog-detail .blog-sidebar-gizmos { display: grid; gap: 1.75rem; min-width: 0; margin-block-start: 1.75rem; }
.route-blog-detail .blog-sidebar-gizmos .gizmo-region { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; gap: 1.75rem; }
.route-blog-detail .blog-sidebar-gizmos .gizmo { min-width: 0; overflow-wrap: anywhere; }
.route-blog-detail .blog-sidebar-gizmos .gizmo img { display: block; max-width: 100%; height: auto; }
.route-blog-detail .blog-sidebar-gizmos .gizmo :is(ul,ol) { list-style: none; padding-inline-start: 0; }
@media (max-width: 52rem) {
  .route-blog-detail .blog-editorial-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .route-blog-detail .blog-editorial-main { max-width: 72ch; }
  .route-blog-detail .blog-hero img { aspect-ratio: 16 / 9; }
  .route-blog-detail .blog-sidebar-gizmos { border-top: 1px solid var(--line); padding-block-start: 1.5rem; }
}
@media print {
  .route-blog-detail .blog-editorial-layout { display: block; }
  .route-blog-detail .blog-editorial-sidebar { margin-top: 2rem; }
  .route-blog-detail .blog-hero img { aspect-ratio: auto; object-fit: contain; }
}