/* =============================================================================
   Status Downloader — blog stylesheet

   Loaded after style.css on /blog pages only, so every token it uses
   (--primary, --radius, --border, --shadow, --text, --bg-card, …) is already
   defined there. No palette is redeclared here, and there is no dark mode:
   the site is light-only (see the Design Tokens note in style.css).

   Every class is prefixed `blog-` so nothing collides with the tool pages.
   ============================================================================= */

/* ── Layout ────────────────────────────────────────────────────────────── */
.blog-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

/* ── Breadcrumbs ───────────────────────────────────────────────────────── */
.blog-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.blog-crumbs li+li::before {
  content: "/";
  margin-right: 6px;
  color: var(--text-muted);
}

.blog-crumbs a {
  color: var(--text-secondary);
  text-decoration: none;
}

.blog-crumbs a:hover {
  color: var(--platform-color-accessible);
  text-decoration: none;
}

/* Remove underlines on hover on all blog pages (both list and detail pages) */
body[data-platform="blog"] a:hover,
body[data-platform="blog"] a:focus {
  text-decoration: none;
}

/* ── Pills ─────────────────────────────────────────────────────────────── */
.blog-pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: var(--transition);
}

.blog-pill-category {
  background: rgba(var(--platform-color-rgb), 0.1);
  color: var(--platform-color-accessible);
}

.blog-pill-category:hover {
  background: rgba(var(--platform-color-rgb), 0.18);
}

/* ── Post hero ─────────────────────────────────────────────────────────── */
.blog-hero {
  margin: 20px 0 24px;
}

.blog-byline .blog-pill-category {
  margin-left: auto;
}

.blog-title {
  font-size: 1.9rem;
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.blog-lede {
  font-size: 1.05rem;
  color: var(--text-secondary);
}

/* ── Byline ────────────────────────────────────────────────────────────── */
.blog-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.blog-byline-meta {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.blog-copy {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.blog-copy:hover {
  border-color: rgba(var(--platform-color-rgb), 0.45);
  color: var(--platform-color-accessible);
}

.blog-copy-done {
  border-color: var(--success);
  color: var(--success);
}

/* ── Banner ────────────────────────────────────────────────────────────── */
.blog-banner {
  margin: 0 -16px 28px;
}

.blog-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.blog-banner figcaption {
  padding: 8px 16px 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.blog-banner figcaption:empty {
  display: none;
}

/* ── Article body ──────────────────────────────────────────────────────── */
.blog-body {
  font-size: 1.02rem;
  color: var(--text);
  overflow-wrap: break-word;
  word-break: break-word;
}

.blog-body>*+* {
  margin-top: 1.1em;
}

.blog-body h2 {
  font-size: 1.45rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-top: 2em;
  scroll-margin-top: 90px;
}

.blog-body h3 {
  font-size: 1.15rem;
  line-height: 1.35;
  margin-top: 1.6em;
  scroll-margin-top: 90px;
}

.blog-body h4 {
  font-size: 1rem;
  line-height: 1.4;
  margin-top: 1.4em;
  color: var(--text-secondary);
  scroll-margin-top: 90px;
}

.blog-body a {
  color: var(--platform-color-accessible);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.blog-body ul,
.blog-body ol {
  padding-left: 1.35em;
}

.blog-body li+li {
  margin-top: 0.4em;
}

.blog-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.blog-body figure {
  margin: 1.6em 0;
}

.blog-body figcaption {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
}

.blog-body blockquote {
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--platform-color);
  color: var(--text-secondary);
  font-style: italic;
}

.blog-body code {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  word-break: break-word;
}

.blog-body pre {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg2);
  overflow-x: auto;
}

.blog-body pre code {
  padding: 0;
  background: none;
  white-space: pre;
  word-break: normal;
}

/* display:block is what gives a wide table its own scrollbar instead of
   pushing the page sideways; the rows still lay out as a table inside it. */
.blog-body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.blog-body th,
.blog-body td {
  padding: 9px 12px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.blog-body th {
  background: var(--bg2);
  font-weight: 600;
}

.blog-body hr {
  border: 0;
  border-top: 1px solid var(--border);
}

/* ── Archive / index header ────────────────────────────────────────────── */
.blog-archive-head {
  margin: 20px 0 28px;
}

.blog-archive-kind {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--platform-color-accessible);
}

.blog-archive-title {
  font-size: 1.8rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 6px 0 12px;
}

.blog-archive-intro {
  color: var(--text-secondary);
}

.blog-archive-count {
  margin-top: 8px;
  font-size: 0.84rem;
  color: var(--text-muted);
}

/* ── Listing cards ─────────────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  overflow: hidden;
  transition: var(--transition);
}

.blog-card:hover {
  border-color: rgba(var(--platform-color-rgb), 0.35);
  box-shadow: var(--shadow-lg);
}

.blog-card-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.blog-card-eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--platform-color-accessible);
}

.blog-card-title {
  font-size: 1.1rem;
  line-height: 1.35;
}

.blog-card-title a {
  color: var(--text);
  text-decoration: none;
}

.blog-card-title a:hover {
  color: var(--platform-color-accessible);
}

.blog-card-excerpt {
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.blog-card-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.blog-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--text-secondary);
}

/* ── Pagination ────────────────────────────────────────────────────────── */
.blog-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}

.blog-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
}

a.blog-page:hover {
  border-color: rgba(var(--platform-color-rgb), 0.45);
  color: var(--platform-color-accessible);
}

.blog-page-current {
  border-color: var(--platform-color);
  background: rgba(var(--platform-color-rgb), 0.1);
  color: var(--platform-color-accessible);
}

.blog-page-gap {
  border-color: transparent;
  background: none;
  pointer-events: none;
}

/* ── Wider viewports ───────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .blog-main {
    padding: 32px 24px 80px;
  }

  .blog-title {
    font-size: 2.4rem;
  }

  .blog-archive-title {
    font-size: 2.1rem;
  }

  .blog-banner {
    margin-left: 0;
    margin-right: 0;
  }

  .blog-banner img {
    border-radius: var(--radius-lg);
  }

  .blog-banner figcaption {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 900px) {
  .blog-main {
    max-width: 1100px;
  }

  .blog-article {
    max-width: 760px;
    margin: 0 auto;
  }

  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  
}

/* ── Embeds and WYSIWYG leftovers ──────────────────────────────────────────
   The editor's media button inserts a fixed-size iframe, which overflows a
   phone unless it is told to scale. 16:9 covers YouTube and Vimeo, the only
   hosts the sanitiser lets through. */
.blog-body iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 1.75rem 0;
  border: 0;
  border-radius: var(--radius);
}

/* TinyMCE writes alignment as an inline style on the block itself; these only
   matter for the figure/image case where the element also needs centring. */
.blog-body img[style*="text-align"],
.blog-body figure[style*="text-align: center"] img {
  margin-inline: auto;
}

.blog-body sub,
.blog-body sup {
  font-size: .75em;
  line-height: 0;
}

.blog-body mark {
  background: hsl(48 100% 85%);
  padding: 0 .2em;
}

.blog-body dl {
  margin: 1.25rem 0;
}

.blog-body dt {
  font-weight: 600;
  margin-top: .75rem;
}

.blog-body dd {
  margin: 0 0 0 1.25rem;
  color: var(--text-secondary);
}

/* ── Author colour and callouts ───────────────────────────────────────────
   The editor can set a background on a block. Without padding that reads as a
   stripe behind the text rather than a panel, so any block carrying one gets
   the shape to go with it. */
.blog-body p[style*="background-color"],
.blog-body div[style*="background-color"] {
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  margin: 1.5rem 0;
}

/* An inline background is a highlighter, not a panel — keep it tight to the
   text and let it wrap across lines. */
.blog-body span[style*="background-color"] {
  padding: .1em .3em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.blog-body figure {
  margin: 1.75rem 0;
}

.blog-body figure img {
  margin: 0;
}

.blog-body figcaption {
  margin-top: .5rem;
  font-size: .875rem;
  color: var(--text-muted);
  text-align: center;
}

/* ── Sticky header over long-form text ────────────────────────────────────
   .header is transparent sitewide, which is invisible on a tool page because a
   hero sits under it. An article scrolls paragraphs beneath it instead, and the
   text shows through. Scoped to blog pages so the existing pages keep the look
   they were signed off with. */
body[data-platform="blog"] .header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}