/* blog.css — long-form article layout for /blog and /blog/*.
   Loaded *after* tools.css and reuses its tokens (--t-*), so the guides
   sit in the same visual system as the free-tool pages they feed.
   Light theme only, like tools.css — these pages ship no theme toggle. */

/* ── Index ───────────────────────────────────────────────── */
.b-list {
  max-width: 780px;
  margin: 0 auto;
  padding: 8px 20px 72px;
  display: grid;
  gap: 16px;
}

.b-item {
  display: block;
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius);
  padding: 22px 24px;
  box-shadow: var(--t-shadow);
  color: inherit;
  transition: transform .12s ease, box-shadow .12s ease;
}
.b-item:hover {
  transform: translateY(-2px);
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(17, 21, 28, .1);
}
.b-item h2 {
  margin: 0 0 8px;
  font-size: 20px;
  letter-spacing: -.01em;
  color: var(--t-ink);
}
.b-item p { margin: 0; color: var(--t-ink-soft); font-size: 15px; }
.b-item__meta {
  margin-top: 12px;
  font-size: 13px;
  color: var(--t-muted);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.b-tag {
  background: #eef0ff;
  color: var(--t-accent-ink);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
}

/* ── Article ─────────────────────────────────────────────── */
.b-article {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 20px 80px;
}

.b-crumbs { font-size: 13px; color: var(--t-muted); margin-bottom: 18px; }
.b-crumbs a { color: var(--t-ink-soft); }

.b-article__head { margin-bottom: 28px; }
.b-article__head h1 {
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}
.b-article__lede { font-size: 18px; color: var(--t-ink-soft); margin: 0 0 12px; }
.b-article__meta { font-size: 13px; color: var(--t-muted); }

/* Body typography. Sized for reading a full page of prose, not for
   skimming a marketing block — hence the larger line-height and the
   generous space above headings. */
.b-body { font-size: 16.5px; line-height: 1.68; color: var(--t-ink); }
.b-body h2 {
  font-size: 24px;
  letter-spacing: -.01em;
  margin: 42px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--t-border);
}
.b-body h3 { font-size: 18px; margin: 28px 0 10px; }
.b-body p { margin: 0 0 16px; }
.b-body ul, .b-body ol { margin: 0 0 16px; padding-left: 22px; }
.b-body li { margin: 6px 0; }
.b-body strong { font-weight: 650; }

.b-body pre {
  background: #1f2430;
  color: #e8ebf2;
  border-radius: 10px;
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0 0 18px;
}
.b-body pre code { background: none; padding: 0; color: inherit; }
.b-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
}
.b-body :not(pre) > code {
  background: #eef0f5;
  border: 1px solid var(--t-border);
  padding: .1em .38em;
  border-radius: 5px;
}

.b-body table { border-collapse: collapse; width: 100%; margin: 0 0 18px; font-size: 15px; }
.b-body th, .b-body td { border: 1px solid var(--t-border-strong); padding: 8px 12px; text-align: left; }
.b-body th { background: #f0f2f7; font-weight: 650; }

.b-body blockquote {
  border-left: 3px solid var(--t-accent);
  margin: 0 0 18px;
  padding: 2px 0 2px 16px;
  color: var(--t-ink-soft);
}

/* Callout — the "try it now" nudge dropped mid-article. */
.b-cta {
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-left: 3px solid var(--t-accent);
  border-radius: var(--t-radius);
  padding: 18px 20px;
  margin: 26px 0;
  box-shadow: var(--t-shadow);
}
.b-cta p { margin: 0 0 12px; font-size: 15px; color: var(--t-ink-soft); }
.b-cta p:last-child { margin: 0; }

/* Wide content must scroll inside itself, never the page. */
.b-scroll { overflow-x: auto; }

/* ── Foot links ──────────────────────────────────────────── */
.b-next {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--t-border);
}
.b-next__title { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--t-muted); margin-bottom: 12px; }
.b-next__links { display: grid; gap: 10px; }
.b-next__links a { font-size: 15px; }

@media (max-width: 760px) {
  .b-article__head h1 { font-size: 27px; }
  .b-body { font-size: 16px; }
  .b-item h2 { font-size: 18px; }
}

/* Screenshot with a caption. Bordered because these are UI captures on a
   near-white ground — without an edge they bleed into the page. */
.b-figure { margin: 24px 0; }
.b-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--t-border);
  border-radius: 10px;
  box-shadow: var(--t-shadow);
}
.b-figure figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--t-ink-soft);
  text-align: center;
}