/* Blog (index + articles) — page layout on top of the design system. */

/* ---- Index hero: search with hint, result count, topic rail ---- */
.blog-search { display: grid; justify-items: center; gap: var(--space-4); width: 100%; margin-top: var(--space-12); }
.blog-search .chip-rail { max-width: 100%; margin-top: var(--space-4); }
.blog-search__hint {
  position: absolute; left: 0; bottom: calc(100% + 14px); z-index: 2; white-space: nowrap; text-align: left;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.blog-search__hint.is-on { opacity: 1; transform: none; }
@media (max-width: 640px) { .blog-search__hint { display: none; } } /* would wrap over the lead text */

/* ---- Featured story + article list ---- */
.blog-featured { padding-bottom: var(--space-14); }
.blog-list { padding-top: var(--space-14); }
section.blog-list { scroll-margin-top: calc(var(--nav-h) + 66px); } /* navbar + sticky topic bar; beats base section[id] */
.blog-grid { --grid-gap: var(--space-10) var(--space-6); }

/* topic bar that stays under the navbar while the list scrolls */
.blog-filter {
  position: sticky; top: var(--nav-h); z-index: calc(var(--z-nav) - 1);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-block: 1px solid var(--line);
}
.blog-filter__inner { display: flex; gap: var(--space-2); padding-block: var(--space-3); overflow-x: auto; scrollbar-width: none; }
.blog-filter__inner::-webkit-scrollbar { display: none; }

/* ---- Article ---- */
.hero-photo .icon-btn--glass { margin-bottom: var(--space-2); }
.article-layout .share { align-items: center; gap: var(--space-3); margin-top: var(--space-6); padding-inline: var(--space-3); }
.share__msg:empty { display: none; }
.article-layout .prose > :is(.flow, .stats-panel, .quote-block, .case-card, .inline-cta) { margin-block: var(--space-8); }
.blog-related { padding-top: var(--space-12); }

/* ---- CTA band actions ---- */
.cta-band__actions { justify-content: flex-end; }
@media (max-width: 1000px) { .cta-band__actions { justify-content: flex-start; } }