/* The blog in the site-v7 design (scripts/port_blog_v7.py, blog_index.go).
   Loaded after /site/style.css on /blog and on every article. The article
   bodies are the ones written for the old site, kept word for word, so this
   file gives their components (callouts, diagrams, layer cards, code, FAQ)
   the new design's look rather than rewriting the articles. */

/* ── Index ──────────────────────────────────────────────────────────────── */
.blog-feeds{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.84rem;margin-top:6px}
.blog-feeds a{color:var(--blue);font-weight:600}
.blog-featured{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:21px;margin-bottom:10px}
.blog-featured .card{background:linear-gradient(135deg,#f6f9ff,white 70%);border-color:#c9d8f5}
.blog-card{min-height:250px}
.blog-card h3{font-size:1.18rem;line-height:1.35}
.blog-card h3 a{color:inherit}
.blog-card h3 a:hover{color:var(--blue)}
.blog-card .tag{margin-bottom:18px}
.blog-card p{font-size:.92rem}
.blog-card .blog-card-meta{font-size:.8rem;color:var(--muted);margin:-6px 0 14px}
.blog-pick{display:inline-flex;margin-left:8px;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--orange)}
#no-results{margin-top:10px;color:var(--muted)}

/* ── Article hero ───────────────────────────────────────────────────────── */
.blog-hero h1{font-size:clamp(2.1rem,4.2vw,3.4rem);max-width:940px;line-height:1.1}
.blog-hero .lede{max-width:780px}
.blog-byline{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.86rem;color:var(--muted);margin-top:18px}
.blog-byline span:not(:last-child):after{content:'·';margin-left:18px;color:#a3afc2}
.blog-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.blog-series{font-size:.88rem;color:var(--muted);margin-top:10px}
.blog-series a{color:var(--blue);font-weight:600}
.blog-article .blog-note{font-size:.82rem;color:var(--muted);margin-top:40px}

/* ── Article body ───────────────────────────────────────────────────────── */
.blog-article{max-width:760px;font-size:1.02rem;
  /* Some bodies carry the old site's colours in inline styles. */
  --border:var(--line);--bg2:var(--wash);--bg3:#f6f8fc;--brand:var(--blue);--accent:var(--orange);--text:var(--ink)}
.blog-article>*:first-child{margin-top:0}
.blog-article h2{font-size:1.75rem;line-height:1.25;letter-spacing:-.025em;margin:56px 0 18px;scroll-margin-top:110px}
.blog-article h3{font-size:1.2rem;line-height:1.35;margin:36px 0 12px;color:var(--ink);scroll-margin-top:110px}
.blog-article h4{font-size:1.02rem;margin:26px 0 10px}
.blog-article p,.blog-article li{color:#34445e;line-height:1.8}
.blog-article p{margin:0 0 20px}
.blog-article ul,.blog-article ol{color:#34445e;padding-left:24px;margin:0 0 22px}
.blog-article li{margin:8px 0}
.blog-article a{color:var(--blue);text-decoration:underline;text-decoration-color:#9bb7ed;text-underline-offset:3px}
.blog-article a:hover{color:var(--blue-deep)}
.blog-article strong,.blog-article b{color:var(--ink);font-weight:650}
.blog-article blockquote{margin:30px 0;padding:6px 0 6px 24px;border-left:3px solid var(--blue);font-size:1.15rem;color:var(--ink)}
.blog-article blockquote p{color:var(--ink);margin:0}
.blog-article hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.blog-article figure{margin:30px 0}
.blog-article figcaption{font-size:.84rem;color:var(--muted);margin-top:10px;text-align:center}
.blog-article img,.blog-article svg{max-width:100%;height:auto}

/* Code: the light code card of the docs, not the old dark block. */
.blog-article code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.blog-article p code,.blog-article li code,.blog-article td code{font-size:.86em;background:#eef2f8;padding:2px 5px;border-radius:4px;color:#264e85;overflow-wrap:anywhere}
/* A long path in a callout or a heading must wrap rather than widen the page. */
.blog-article :not(pre)>code{overflow-wrap:anywhere}
.blog-article pre,.blog-article .code-block{background:#f6f8fc;border:1px solid var(--line);border-radius:13px;color:#243e6d;padding:20px 22px;margin:24px 0;overflow:auto;font-size:.84rem;line-height:1.75;tab-size:2}
.blog-article .code-block{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre}
.blog-article pre code{background:none;padding:0;color:inherit;font-size:inherit}
.blog-article .kw{color:#7c3aed}
.blog-article .str{color:#0f7a4b}
.blog-article .cm{color:#7b879b;font-style:italic}
.blog-article .code-block .tag,.blog-article pre .tag{all:unset;color:#b4410f}

/* Diagrams drawn in text. */
.blog-article .arch-box{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem;line-height:1.6;white-space:pre;overflow-x:auto;background:var(--wash);border:1px solid var(--line);border-radius:13px;padding:20px 22px;margin:26px 0;color:#243e6d}

/* Tables. */
.blog-article .table-wrap{margin:24px 0}
.blog-article .table-wrap>table{margin:0!important}
.blog-article table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:520px}
.blog-article th,.blog-article td{padding:11px 13px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.6}
.blog-article th{background:var(--wash);font-weight:650;color:var(--ink)}
.blog-article tr:last-child td{border-bottom:0}

/* The FEEL tutorial's tables: expressions read as code, the notes as text. */
.blog-article .feel-table td{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84rem;color:#243e6d}
.blog-article .feel-table td:last-child{font-family:inherit;font-size:.88rem;color:#34445e}

/* The butterfly article: its diagram and the default-rate badges. */
.blog-article .bf-diagram{background:var(--wash);border:1px solid var(--line);border-radius:13px;padding:20px;margin:28px 0}
.blog-article .rate-badge{display:inline-block;padding:2px 9px;border-radius:5px;font-size:.78rem;font-weight:700}
.blog-article .rate-high{background:#dcfce7;color:#15803d}
.blog-article .rate-medium{background:#fef9c3;color:#854d0e}
.blog-article .rate-low{background:#fff1f2;color:#c02626}

/* Callouts: blue for a note, orange for a warning, green and red as written. */
.blog-article .callout{background:var(--soft);border-left:3px solid var(--blue);border-radius:0 12px 12px 0;padding:18px 22px;margin:26px 0;font-size:.95rem;color:#34445e;line-height:1.75}
.blog-article .callout>strong:first-child{display:block;margin-bottom:6px;color:var(--ink)}
.blog-article .callout p:last-child{margin-bottom:0}
.blog-article .callout.warning,.blog-article .callout.accent{background:#fff8f2;border-left-color:var(--orange)}
.blog-article .callout.green{background:#f0faf4;border-left-color:#2d7a4f}
.blog-article .callout.red{background:#fff1f2;border-left-color:#c02626}

/* Figures in numbers. */
.blog-article .number-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:26px 0}
.blog-article .number-card{border:1px solid var(--line);border-radius:14px;padding:20px;text-align:center;background:white}
.blog-article .number-card .big{font-size:2rem;font-weight:750;color:var(--blue);letter-spacing:-.03em}
.blog-article .number-card .label{font-size:.82rem;color:var(--muted);margin-top:4px}

/* Layer cards (ArchiMate, two-layer architecture). */
.blog-article .layer-grid{display:grid;gap:14px;margin:26px 0}
.blog-article .layer-card{border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin:16px 0;background:white}
.blog-article .layer-card h4{margin:0 0 8px}
.blog-article .layer-card p{margin:0;font-size:.94rem}
.blog-article .layer-card.l1{border-color:#9bb7ed;background:#f6f9ff}
.blog-article .layer-card.l1 h4{color:var(--blue)}
.blog-article .layer-card.l2{border-color:#f2b892;background:#fff8f2}
.blog-article .layer-card.l2 h4{color:#b4410f}
.blog-article .layer-card .lname{font-weight:700;font-size:.95rem;margin-bottom:4px;color:var(--ink)}
.blog-article .layer-card .lpkg{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;color:var(--blue)}
.blog-article .layer-card .lq{font-size:.9rem;color:var(--muted);margin-top:6px}
.blog-article .ref-row{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.blog-article .ref-badge{display:inline-flex;border:1px solid var(--line);border-radius:30px;padding:4px 12px;font-size:.78rem;color:var(--muted);background:white}

/* Small colour words some articles use. */
.blog-article .dim{color:#64748b}
.blog-article .ok{color:#15803d}
.blog-article .warn{color:#b45309}
.blog-article .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}

/* FAQ and the call to action of the two tutorials. */
.blog-article .faq-section{margin-top:48px}
.blog-article .faq-item{border-bottom:1px solid var(--line);padding:18px 0}
.blog-article .faq-item h3{font-size:1.02rem;margin:0 0 8px}
.blog-article .faq-item p{margin:0;font-size:.95rem}
.blog-article .cta-box{background:var(--wash);border:1px solid var(--line);border-radius:var(--radius);padding:32px;margin:44px 0;text-align:center}
.blog-article .cta-box h3{margin:0 0 10px}
.blog-article .cta-box p{margin:0 auto 20px;max-width:560px}
.blog-article .btn,.blog-article .btn-primary,.blog-article .btn-outline,.blog-article .btn-ghost{display:inline-flex;align-items:center;justify-content:center;border-radius:9px;padding:11px 20px;font-weight:650;font-size:.92rem;background:var(--blue);color:white;text-decoration:none;margin:4px;border:1px solid var(--blue)}
.blog-article .btn:hover,.blog-article .btn-primary:hover{background:var(--blue-deep);color:white}
.blog-article .btn-outline,.blog-article .btn-ghost{background:white;color:var(--blue);border:1px solid #b9cbef}
.blog-article .btn-outline:hover,.blog-article .btn-ghost:hover{background:var(--soft);color:var(--blue-deep)}

/* The magazine-style article (blog-agent-context-network). */
.blog-article .lead-cap{font-size:1.15rem;color:var(--ink)}
.blog-article h2 .no{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:500;font-size:.95rem;color:var(--orange);letter-spacing:.05em;margin-right:12px;vertical-align:middle}
.blog-article .aside{background:var(--wash);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;margin:32px 0}
.blog-article .aside p{margin:8px 0 0;font-size:.95rem}
.blog-article .lbl{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.blog-article .next{border:1px solid var(--line);border-radius:var(--radius);padding:28px 30px;margin:48px 0 0;background:linear-gradient(135deg,#f6f9ff,white 70%)}
.blog-article .next h3{margin:4px 0 10px}
.blog-article .next .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}

/* Who wrote it. */
.blog-article .author-bar{display:flex;gap:16px;align-items:center;border-top:1px solid var(--line);padding:26px 0 0;margin-top:56px}
.blog-article .author-bar h4{margin:0 0 4px}
.blog-article .author-bar p{margin:0;font-size:.9rem;color:var(--muted)}

/* ── More from the blog ─────────────────────────────────────────────────── */
.blog-related .section-head{margin-bottom:28px}

@media(max-width:800px){
  .blog-article{font-size:1rem}
  /* Tables fit the phone and wrap, as they did on the old site. */
  .blog-article table{min-width:0}
  .blog-article th,.blog-article td{padding:9px 10px}
  /* Room for the Copy button, which sits over the first line otherwise. */
  .blog-article pre,.blog-article pre.arch-box{padding-top:46px}
  /* A diagram keeps a size its labels can be read at, and scrolls. */
  .blog-article figure{overflow-x:auto}
  .blog-article figure svg{min-width:640px}
  .blog-byline span:not(:last-child):after{content:none}
  .blog-article h2{font-size:1.45rem;margin-top:44px}
  .blog-article pre,.blog-article .code-block,.blog-article .arch-box{font-size:.78rem;padding:16px}
  .blog-article .cta-box{padding:24px 18px}
  .blog-hero h1{font-size:2.15rem}
}