/* Public blog extras: tag chips, topic lists, tag pages, draft preview banner, body images and tables.
   Loaded on /blog, /blog/{slug} and /blog/tag/{slug} after cogxim.css. */

/* Tag chips */
.tag-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 14px;
  border-radius: var(--r-pill); background: var(--tint); color: var(--navy);
  font-size: .875rem; font-weight: 500; line-height: 1.3; transition: background .2s var(--ease), color .2s var(--ease);
}
.tag-chip:hover, .tag-chip:focus-visible { background: var(--blue); color: #fff; text-decoration: none; }
.tag-chips--sm { gap: 6px; margin-top: 14px; }
.tag-chips--sm .tag-chip { min-height: 26px; padding: 2px 10px; font-size: .8125rem; background: #fff; border: 1px solid var(--line); color: var(--graphite); }
.section--cloud .tag-chips--sm .tag-chip { background: var(--cloud); border-color: transparent; }
.tag-chips--sm .tag-chip:hover, .tag-chips--sm .tag-chip:focus-visible { background: var(--blue); border-color: var(--blue); color: #fff; }
.tag-count { font-size: .75rem; font-weight: 600; opacity: .7; }

/* Post page */
.article-head .tag-chips { justify-content: center; margin-top: 20px; }
.article-tags { margin-top: 3em; padding-top: 28px; border-top: 1px solid var(--line); }
.prose .article-tags-title { margin: 0 0 14px; font-size: 1rem; font-weight: 600; color: var(--graphite); letter-spacing: 0; }
.prose .tag-chips { margin-top: 0; padding-left: 0; list-style: none; }
.prose .tag-chips li + li { margin-top: 0; }
.prose .tag-chips li::marker { content: none; }
.prose .tag-chip { text-decoration: none; }
.prose img { display: block; max-width: 100%; height: auto; border-radius: var(--r-md); }
.prose figure { margin: 2em 0; }
.prose figcaption { margin-top: 10px; font-size: .875rem; color: var(--graphite); text-align: center; }
.prose table { width: 100%; border-collapse: collapse; font-size: 1rem; display: block; overflow-x: auto; }
.prose th, .prose td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { background: var(--cloud); font-weight: 600; color: var(--ink); }
.prose pre { padding: 16px 20px; border-radius: var(--r-sm); background: var(--cloud); overflow-x: auto; font-size: .9375rem; line-height: 1.55; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.prose :not(pre) > code { padding: 2px 6px; border-radius: 6px; background: var(--cloud); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }

/* Topic list on the blog home and tag pages */
.topic-cloud { margin-top: clamp(48px, 7vw, 80px); padding-top: clamp(32px, 4vw, 44px); border-top: 1px solid var(--line); }
.topic-cloud-title { margin: 0 0 18px; font-size: 1.3125rem; font-weight: 700; letter-spacing: -.01em; }
.topic-cloud-all { margin-top: 18px; font-weight: 500; }
.post-feature .tag-chips--sm { margin-top: 18px; }
.blog-empty { padding: 48px 0; text-align: center; color: var(--graphite); }

/* Tag page product CTA */
.tag-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.tag-cta .h2 { margin-top: 6px; }
.tag-cta .lede { margin-top: 10px; max-width: 34em; }
.tag-cta .cta-row { margin-top: 0; flex: none; }

/* Draft preview (editors only) */
.draft-banner { position: sticky; top: var(--header); z-index: 20; background: #FFF4DE; color: #6B4000; border-bottom: 1px solid #F3D9A6; font-size: .9375rem; }
.draft-banner .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding-top: 10px; padding-bottom: 10px; }
.draft-banner strong { display: inline-flex; align-items: center; gap: 8px; }
.draft-banner strong::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #C77700; }
.draft-banner a { margin-left: auto; color: #6B4000; font-weight: 600; text-decoration: underline; }

@media (max-width: 760px) {
  .tag-cta { flex-direction: column; align-items: flex-start; gap: 20px; }
  .tag-cta .cta-row { width: 100%; }
  .draft-banner a { margin-left: 0; }
}