/* ============================================================
   Blog editorial reading view (PBM-19)

   Loaded ONLY by blog_post.php (via $extraHeadHtml). Every rule is
   scoped under `.blog-body` (or the .blog-reading wrapper) so it never
   touches mod-detail pages, which share skill-body.css (.card /
   .feat-list / .faq). Goal: clean long-form reading — body prose flows
   directly on the page background (no contrasting cards), an ~800px
   measure, line-height 1.7, and generous heading rhythm.

   Cards survive ONLY where intended:
   - .aside callouts INSIDE the body (e.g. the green "Pro tip") — they
     are .aside, not .card, so the flatten rule below leaves them alone;
   - the disclosure callout + "Related on Proton Bus Mods" block, which
     live OUTSIDE .blog-body and keep full DS card styling.

   Depends on PRO-271 tokens (--bg-*, --line, --blue, --blue-2, --good,
   --warn, --t-1/2/3) loaded globally in includes/header.php.
   ============================================================ */

/* Reading measure — self-contained (no Tailwind arbitrary value, so no
   css:build dependency). Centered. */
.blog-reading {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Flatten prose cards: a .card wrapping paragraphs / headings / lists
   becomes plain flowing text. .aside callouts are NOT .card, so accent
   blocks (Pro tip etc.) keep their styling. */
.blog-body .card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

/* ── Typography — editorial rhythm ─────────────────────────── */
.blog-body {
  color: var(--t-2);
}

.blog-body p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--t-2);
  margin: 0 0 1.5em;
}

.blog-body h2 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--t-1);
  margin: 2.2em 0 .7em;
}

.blog-body h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--t-1);
  margin: 1.8em 0 .6em;
}

/* No giant gap above the first heading of the article. */
.blog-body > .card:first-child > h2:first-child,
.blog-body > h2:first-child,
.blog-body > *:first-child {
  margin-top: 0;
}

.blog-body a {
  color: var(--blue-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s;
}
.blog-body a:hover {
  color: var(--blue);
}

/* Standard reading lists (not the compact pill feat-list). */
.blog-body ul:not(.feat-list),
.blog-body ol {
  margin: 0 0 1.5em;
  padding-left: 1.4em;
}
.blog-body ul:not(.feat-list) li,
.blog-body ol li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--t-2);
  margin-bottom: .5em;
}

/* feat-list keeps its custom square bullet but inherits editorial size. */
.blog-body .feat-list {
  margin: 0 0 1.5em;
  gap: .7em;
}
.blog-body .feat-list li {
  font-size: 16px;
  line-height: 1.6;
  padding-left: 26px;
}
.blog-body .feat-list li::before {
  top: 10px;
}

/* Inline figures (illustrations). Full-measure image, rounded, with a quiet
   caption + even quieter credit line beneath. */
.blog-body figure {
  margin: 2em 0;
}
.blog-body figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.blog-body figcaption {
  margin-top: .6em;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-3);
  text-align: center;
}
.blog-body figcaption .credit {
  display: block;
  margin-top: .15em;
  font-size: 12px;
  color: var(--t-3);
  opacity: .8;
}

/* Pull quotes. */
.blog-body blockquote {
  margin: 1.8em 0;
  padding: .2em 0 .2em 1.2em;
  border-left: 3px solid var(--blue-2);
  font-size: 18px;
  line-height: 1.6;
  font-style: italic;
  color: var(--t-1);
}

/* Callouts inside the flow get a little more air. */
.blog-body .aside {
  margin: 1.8em 0;
}

/* FAQ: the .card wrapper flattens (above); keep the accordion lines and
   give them readable type. */
.blog-body .faq {
  margin-top: 2em;
}
.blog-body .faq summary {
  font-size: 16px;
}
.blog-body .faq .ans {
  font-size: 15px;
  line-height: 1.7;
}

@media (max-width: 720px) {
  .blog-body p,
  .blog-body ul:not(.feat-list) li,
  .blog-body ol li,
  .blog-body .feat-list li {
    font-size: 15.5px;
  }
  .blog-body h2 {
    font-size: 22px;
  }
  .blog-body h3 {
    font-size: 18px;
  }
}