/* =========================================================
   WEBGROWCRAFT — BLOG EXTRAS
   Loads after styles-v6.css. This is NOT a redesign.
   It only styles elements the long-form guides introduced
   that v4 never had: code blocks, ordered lists, wide
   article layout, featured images. Everything inherits the
   existing v5 bright palette.
   ========================================================= */

/* v4 reserves a sidebar column; the long guides run full width. */
.article-shell { display: block; max-width: 760px; margin-left: auto; margin-right: auto; }

.article-content h2 { margin-top: 2.75rem; }
.article-content h3 { margin-top: 1.9rem; }
.article-content p,
.article-content li,
.article-content ul,
.article-content ol { max-width: none; }

.article-content ul,
.article-content ol {
  padding-left: 1.35rem;
  margin: 1.1rem 0 1.5rem;
}
.article-content li { margin-bottom: .55rem; }
.article-content li::marker {
  color: var(--lime-strong);
  font-weight: 700;
}

.article-content a {
  color: var(--lime-strong);
  box-shadow: inset 0 -1px 0 currentColor;
}
.article-content a:hover { color: var(--green); }

/* Inline code and code blocks. */
.article-content code {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: #3d6b28;
  padding: .12em .42em;
  border-radius: 5px;
  font-size: .89em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.article-content pre {
  background: #20332a;
  color: #e6f0e4;
  padding: 1.2rem 1.4rem;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: .89rem;
  line-height: 1.65;
  margin: 1.4rem 0 1.8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.article-content pre code {
  background: none;
  border: 0;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

/* Featured image on the new guides. */
.article-featured { margin: 2.5rem 0 0; }
.article-featured img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

/* Blog index cards: keep the grid tidy at 16 posts. */
.blog-art img { width: 100%; height: auto; display: block; }
.blog-card { display: flex; flex-direction: column; }
.blog-card .blog-body { display: flex; flex-direction: column; flex: 1; }
.blog-card .btn-link { margin-top: auto; }

/* Reveal animations are JS-driven; without JS the content is invisible.
   Make visibility the default so a script failure can't blank a page. */
.reveal { opacity: 1; transform: none; }

/* Article FAQ section spacing. */
.article-content + section .faq { margin-top: 1.5rem; }

@media (max-width: 700px) {
  .article-content pre { font-size: .82rem; padding: 1rem; }
}