/* ==========================================================================
   Blog
   Loaded after main.css, on the blog pages only. It is built from main.css's
   own tokens and components (the page hero, the points list, the code card,
   the dark "where it stops" section, the questions), so nothing in main.css
   changes. These rules only add what an article needs: a reading column, the
   contents list beside it, numbered steps and a quoted sentence.
   ========================================================================== */

/* ---------- An article: the contents beside the reading column ---------- */
.post__grid { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.post__side { position: sticky; top: 120px; }
.post__side .eyebrow { margin-bottom: 20px; }

.toc { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; border-top: 1px solid var(--line); }
.toc li:last-child { border-bottom: 1px solid var(--line); }
.toc a { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; font-size: .97rem; line-height: 1.35; color: var(--ink-2); transition: color .2s; }
.toc a::before { content: counter(toc, decimal-leading-zero); flex: none; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; color: var(--ink-4); transition: color .2s; }
.toc a:hover, .toc a:hover::before { color: var(--blue); }

.post__meta { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 7px; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- The reading column ---------- */
.prose { min-width: 0; max-width: 44rem; }
.prose .post-sec + .post-sec { margin-top: clamp(56px, 7vw, 84px); }
.prose h2 { margin: 0 0 20px; font-size: clamp(1.6rem, 1.18rem + 1.25vw, 2.2rem); line-height: 1.1; letter-spacing: -0.04em; font-weight: 600; }
.prose h3 { margin: 0 0 8px; font-size: clamp(1.16rem, 1.06rem + .3vw, 1.3rem); line-height: 1.25; letter-spacing: -0.028em; font-weight: 600; }
.prose p { margin: 0 0 1.15em; font-size: 1.06rem; line-height: 1.72; color: var(--ink-2); }
.prose p:last-child { margin-bottom: 0; }
.prose strong, .prose b { color: var(--ink); font-weight: 600; }
.prose :not(pre) > code { padding: 1px 6px; border-radius: 6px; background: var(--paper-2); font-size: .86em; }
.prose .codecard, .prose .notes, .prose .points, .prose .callout { margin-block: 28px; }
.prose .notes { margin-top: 28px; }
.prose .post-sec > h3 { margin-top: 34px; }
.prose ul.bullets, .prose ol.numbers { margin: 0 0 1.15em; padding-left: 1.3em; font-size: 1.06rem; line-height: 1.72; color: var(--ink-2); }
.prose ul.bullets li, .prose ol.numbers li { margin: 0 0 .5em; padding-left: .25em; }
.prose ul.bullets li::marker { color: var(--blue); }
.prose ol.numbers li::marker { color: var(--ink-3); font-family: var(--f-mono); font-size: .86em; }

/* The one sentence, quoted */
.callout { padding: 22px 24px; border-radius: 18px; background: var(--blue-50); box-shadow: inset 0 0 0 1px var(--blue-100); }
.callout p { margin: 0; }
.callout .callout__k { margin-bottom: 8px; font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.callout .callout__q { font-size: 1.12rem; line-height: 1.5; font-weight: 560; letter-spacing: -0.02em; color: var(--ink); }

/* Numbered steps, the number as the same chip the section eyebrows use */
.steps { list-style: none; margin: 32px 0 0; padding: 0; counter-reset: step; display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; }
.steps > li { position: relative; min-width: 0; padding-left: 58px; counter-increment: step; }
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  display: inline-grid; place-items: center;
  height: 28px; min-width: 38px; padding: 0 8px; border-radius: 8px;
  color: var(--blue); background: var(--blue-100);
  font-family: var(--f-mono); font-size: .78rem; font-weight: 500; letter-spacing: .02em;
}
.steps > li > h3 { padding-top: 1px; }

/* A long title, such as an error message used as the page's heading */
.page-hero__title--long { font-size: clamp(2.4rem, 1rem + 4.3vw, 4.8rem); }
.page-hero__title--xlong { font-size: clamp(1.9rem, 1rem + 2.7vw, 3.5rem); line-height: 1.04; letter-spacing: -0.045em; }
.page-hero__title--xlong em { font-size: 1.04em; }

/* A paragraph straight after the steps is a new thought, not part of the last step */
.prose .steps + p { margin-top: 44px; }

/* An error message is text to read: the card is wider, and a long line wraps instead of running out of sight */
.svc-visual--error > .codecard { max-width: 760px; }
.svc-visual--error .codecard__pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* The topic pills under the blog index heading, and guides above a post's platform pills */
.svc-jump { padding-block: 0 clamp(8px, 2vw, 24px); }
.svc-jump .extras { margin-top: 0; }
.svc-more .svc-grid { margin-bottom: 34px; }

/* Long tokens, such as an error name or inline code, wrap instead of widening the page */
.page-hero__title, .page-hero__lede, .svc-card h3, .svc-card p, .toc a, .qa__item summary span, .qa__a,
.prose h2, .prose h3, .prose p, .prose li, .callout p, .notes p, .points li > div, .limit h3, .limit p { overflow-wrap: anywhere; }

/* main.css lays a facts item out as a flex row, which splits inline code from its sentence.
   In an article the item is plain text with its tick in the margin. */
.prose .facts li { display: block; position: relative; padding-left: 30px; line-height: 1.6; }
.prose .facts li svg { position: absolute; left: 0; top: .2em; }

/* A guide's card on the blog index: a small mono line above the title */
.post-card__meta { display: block; margin: 0 0 10px; font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

@media (max-width: 1040px) {
  .post__grid { grid-template-columns: minmax(0, 1fr); }
  .post__side { position: relative; top: 0; }
  .prose { max-width: none; }
}
@media (max-width: 680px) {
  .steps > li { padding-left: 0; padding-top: 42px; }
  .prose p { font-size: 1.02rem; }
  .callout { padding: 18px 18px; }
  .callout .callout__q { font-size: 1.04rem; }
}