.path-articles .section-title { margin-top: 8px; }
.article-card { display:flex; flex-direction:column; overflow:hidden; }
.article-card .article-cover { width:100%; height:160px; object-fit:cover; display:block; }
.article-card .article-title { margin:0 0 6px; }
.article-hero { width:100%; max-height:380px; object-fit:cover; border-radius:12px; }
.article-body :is(h2,h3,h4){ margin-top:1.25em; }
.article-body img { max-width:100%; height:auto; border-radius:8px; }
.pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:.85rem; background: var(--panel); border:1px solid var(--surface-border); }
.pill-soft { background: rgba(127,127,255,.12); border-color: rgba(127,127,255,.25); }
.pill-ghost { background: transparent; border-color: var(--surface-border); }


.article-body {
  line-height: 1.65;
  font-size: 1.02rem;
}
.article-body pre {
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  overflow: auto;
}
.article-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.95em;
}
.article-body pre code {
  display: block;
  white-space: pre;
}
.article-body blockquote {
  padding: 8px 12px;
  border-left: 4px solid var(--surface-border);
  background: var(--surface);
  margin: 1em 0;
}
.article-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
}
.article-body th, .article-body td {
  border: 1px solid var(--surface-border);
  padding: 6px 8px;
  text-align: left;
}
.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}


/* --- Markdown / article media: never overflow --- */
.article-body {
  /* long URLs/codes won't force the container wider */
  overflow-wrap: anywhere;
}

.article-body img {
  display: block;               /* avoids stray baseline gaps */
  max-width: 100% !important;   /* hard stop at container edge */
  height: auto !important;      /* keep aspect ratio */
}

/* Figures behave too */
.article-body figure { margin: 1.25em 0; }
.article-body figure > img {
  display: block;
  width: 100%;                  /* stretch to container, but capped by max-width above */
  height: auto;
  object-fit: contain;          /* if a fixed-height parent is ever applied */
}

/* Safety for images inside tables or other blocks */
.article-body table { display: block; overflow-x: auto; }
.article-body td img, .article-body th img {
  max-width: 100% !important;
  height: auto !important;
}

/* (Optional) anywhere you render markdown outside article_view */
.prose img, .md img { 
  display: block;
  max-width: 100% !important;
  height: auto !important;
}

.article-body { overflow-wrap: anywhere; }

/* Make sure block-level children can't exceed the container */
.article-body > * {
  max-width: 100% !important;
}

/* Images: never overflow; don't upscale small images */
.article-body img,
.article-body a > img,
.article-body figure > img,
.article-body td img,
.article-body th img {
  display: block;
  max-width: 100% !important;
  height: auto !important;
  min-width: 0 !important;      /* fixes flex/min-width edge cases */
}

/* Neutralize hard HTML attributes if any slipped through */
.article-body img[width]  { width: auto !important; }
.article-body img[height] { height: auto !important; }

/* Figures shouldn't overflow either */
.article-body figure { max-width: 100% !important; margin: 1.25em 0; }

/* Code blocks should scroll, not expand the layout */
.article-body pre {
  max-width: 100% !important;
  overflow: auto !important;
}

/* Tables: allow horizontal scroll if needed */
.article-body table {
  display: block;
  max-width: 100% !important;
  overflow-x: auto !important;
}