/* ============================================================
   AI guide pages — /ai/mcp/, /ai/zia/.

   Content/tutorial pages. Unlike the rest of the site they
   don't carry the dark photographic topo hero — they're
   reading pages, not positioning pages. Light hero (cream),
   optional focal image (e.g. the MCP architecture-overview
   SVG) sitting under the H1 and subtitle, then prose body
   below on the same light surface, then the standard
   sitewide dark CTA closes the page.

   The .ai-guide-prose ruleset mirrors .post-prose (see
   pages/blog.css) so guides read consistently with blog
   posts — long-form copy, body links, headings, lists,
   inline code, code fences, images, blockquotes.
   ============================================================ */

/* === HERO ===================================================== */

.ai-guide-hero {
  background: var(--bg-light);
  color: var(--text-dark);
  position: relative;
  /* No navOverHero — the nav stays opaque above. Pad the top of
     the hero so the H1 doesn't crash into the nav bar. */
  padding: calc(var(--nav-h) + 48px) 0 24px;
}

.ai-guide-hero-inner {
  max-width: 820px;
  margin: 0 auto;
}

.ai-guide-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
}

.ai-guide-title {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.018em;
  line-height: 1.12;
  color: var(--text-dark);
  margin: 0 0 18px;
}

.ai-guide-subtitle {
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-dark-2);
  margin: 0 0 28px;
  max-width: 720px;
}

.ai-guide-hero-figure {
  margin: 32px 0 0;
}

.ai-guide-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: contain;
  border-radius: 14px;
}

/* === BODY / PROSE ============================================== */

.ai-guide-body {
  /* Hero already sits on .bg-light. Give the body its own breathing
     room without re-painting the background. */
  padding-top: 32px;
  padding-bottom: 80px;
}

/* The prose column itself reads narrow (~760px), but figures, code
   blocks, tables, and inline images break out into a wider column
   (~1080px). We use a CSS Grid with named lines so each child opts
   into "prose" (default) or "wide" (figures/code/etc.) without
   touching the template — markdown emits the usual <p><img></p> for
   `![alt](url)`, and the `:has()` selector below promotes those
   wrappers to the wide column.

   The min(target, 100%) inside each track makes the layout collapse
   cleanly on narrow viewports: when the parent's content width drops
   below the prose target, every track shrinks to fit and figures
   stop overflowing horizontally. */
.ai-guide-prose {
  display: grid;
  grid-template-columns:
    [full-start]
      minmax(0, 1fr)
    [wide-start]
      minmax(0, calc((min(1080px, 100%) - min(760px, 100%)) / 2))
    [prose-start]
      min(760px, 100%)
    [prose-end]
      minmax(0, calc((min(1080px, 100%) - min(760px, 100%)) / 2))
    [wide-end]
      minmax(0, 1fr)
    [full-end];

  font-size: 17px;
  line-height: 1.75;
  color: var(--text-dark-2);
}

/* Default: every direct child of the prose container sits in the
   narrow prose column. Headings, paragraphs, lists, blockquotes,
   inline code (via its parent <p>), and HRs all inherit this. */
.ai-guide-prose > * {
  grid-column: prose-start / prose-end;
}

/* Break-out elements jump to the wider column. The :has() selector
   targets the <p> that markdown-it emits around a standalone
   `![alt](url)` image — without it, the diagrams stay at prose
   width. Tables included for forward-compatibility even though
   neither guide uses one today. Blockquotes intentionally stay in
   the prose column (no rule here). */
.ai-guide-prose > pre,
.ai-guide-prose > figure,
.ai-guide-prose > img,
.ai-guide-prose > table,
.ai-guide-prose > p:has(> img:only-child) {
  grid-column: wide-start / wide-end;
}

/* The <img> inside a markdown <p><img></p> should fill the wider
   column it was just promoted into. Overrides the auto-margin
   centering and max-width: 100% from the .ai-guide-prose img rule
   below so the image fully occupies the wide track. */
.ai-guide-prose > p:has(> img:only-child) > img {
  width: 100%;
  max-width: 100%;
  margin: 0;
  display: block;
}

.ai-guide-prose h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-h3);
  color: var(--text-dark);
  margin: 48px 0 14px;
}

.ai-guide-prose h3 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.005em;
  color: var(--text-dark);
  margin: 32px 0 10px;
}

.ai-guide-prose p { margin: 0 0 18px; }
.ai-guide-prose ul,
.ai-guide-prose ol { margin: 0 0 18px; padding-left: 22px; }
.ai-guide-prose li { margin-bottom: 6px; }

.ai-guide-prose a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(22, 93, 148, 0.3);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ai-guide-prose a:hover {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

.ai-guide-prose strong {
  color: var(--text-dark);
  font-weight: var(--weight-medium);
}

.ai-guide-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 28px auto;
  display: block;
  /* Inline diagram SVGs look better with a light edge against the
     cream surface. Screenshots will sit on this same treatment. */
  border: 1px solid var(--border-on-light);
  background: var(--bg-light);
}

.ai-guide-prose blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--orange);
  color: var(--text-dark);
  font-style: italic;
}

.ai-guide-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--text-dark);
}

.ai-guide-prose pre {
  background: #15191e;
  color: #e6e6e6;
  padding: 16px 18px;
  border-radius: 10px;
  overflow-x: auto;
  margin: 24px 0;
  font-size: 14px;
  line-height: 1.55;
}
.ai-guide-prose pre code {
  background: none;
  padding: 0;
  color: inherit;
}

/* Markdown horizontal rules (`---`) read as section breaks. Keep
   them subtle — a thin line on the cream surface, not a heavy
   divider. */
.ai-guide-prose hr {
  border: none;
  border-top: 1px solid var(--border-on-light);
  margin: 40px 0;
}

/* Mid-article .cta-section embedded directly in the markdown body
   (e.g. the MCP guide's 15-minute setup offer between Path 2 and
   "Things to keep in mind"). Breaks out of the prose grid AND the
   surrounding .container so the dark band runs viewport-edge to
   viewport-edge, matching how the closing CTA at the bottom of
   every guide renders. Without this, the .cta-section would render
   as a contained card inside the 760px prose column.

   The `.cta-section--mid` modifier slims the closing CTA's 120px
   vertical padding down to 64px (48px on mobile) so a mid-article
   placement doesn't dominate the article's reading rhythm. */
.ai-guide-prose > .cta-section {
  /* Span the full grid (no prose-column inset). */
  grid-column: full-start / full-end;
  /* Width = viewport. The negative margin pulls the element's left
     edge to viewport-left: 50% is half this element's grid track
     (≈ the .container's inner width), 50vw is half the viewport,
     and the difference is the per-side overflow needed to reach
     the viewport edges. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 48px;
  margin-bottom: 48px;
}

.cta-section--mid {
  padding: 64px 0;
}
@media (max-width: 760px) {
  .cta-section--mid { padding: 48px 0; }
}

/* Mid-article CTA has no eyebrow/h2 — just a single sentence and
   the primary button. Tighten the body paragraph spacing since
   it's the lead element, and center the button stack. */
.cta-section--mid .cta-content > p {
  margin-bottom: 24px;
}

@media (max-width: 760px) {
  .ai-guide-hero { padding-top: calc(var(--nav-h) + 28px); }
  .ai-guide-title { font-size: 32px; }
  .ai-guide-subtitle { font-size: 17px; }
  .ai-guide-prose { font-size: 16px; }
  .ai-guide-body { padding-bottom: 56px; }
}