/* Blog: listing cards, category chips, pagination and the article body (Dialog brand). */
.blog-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:-1rem 0 2.2rem}
.blog-cats a{padding:.45rem .95rem;border-radius:999px;border:1px solid var(--line);background:#fff;font:600 .86rem var(--body);color:var(--ink);transition:border-color .15s,background-color .15s,color .15s}
.blog-cats a:hover{border-color:var(--navy)}
.blog-cats a.on{background:var(--navy);border-color:var(--navy);color:#fff}

.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .15s,border-color .15s,box-shadow .15s}
.post-card:hover{transform:translateY(-3px);border-color:var(--navy);box-shadow:0 24px 50px -34px rgba(0,0,102,.4)}
.post-card-media{display:block;aspect-ratio:16/9;background:var(--mint);overflow:hidden}
.post-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.post-card-ph{display:grid;place-items:center;height:100%;color:var(--teal-dk)}.post-card-ph svg{width:46px;height:46px;opacity:.55}
.post-card-body{display:flex;flex-direction:column;gap:.55rem;padding:1.3rem 1.4rem 1.4rem;flex:1}
.post-card-cats{display:flex;flex-wrap:wrap;gap:.35rem;margin:0}
.post-card-cats .tag{text-decoration:none}
.post-card h3{font-size:1.14rem;line-height:1.3}
.post-card h3 a:hover{color:var(--teal-dk)}
.post-card-ex{color:var(--muted);font-size:.94rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-meta{margin-top:auto;color:var(--muted);font-size:.8rem}
.blog-empty{text-align:center;padding:3rem 1rem;border:1px dashed var(--line);border-radius:var(--r);background:#fff}
.blog-empty a{color:var(--teal-dk);text-decoration:underline}

.pager{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-top:2.6rem;flex-wrap:wrap}
.pager ol{list-style:none;display:flex;gap:.35rem;margin:0;padding:0}
.pg{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 .8rem;border-radius:10px;border:1px solid var(--line);background:#fff;font:600 .88rem var(--body);color:var(--ink)}
a.pg:hover{border-color:var(--navy)}
.pg.on{background:var(--navy);border-color:var(--navy);color:#fff}
.pg-dis{opacity:.4}
.pg-gap{display:inline-grid;place-items:center;height:40px;padding:0 .2rem;color:var(--muted)}

/* article */
.post-edbar{display:flex;gap:.6rem;align-items:center;justify-content:flex-end;padding-top:12px}
.post-head{padding-top:2.6rem;padding-bottom:1.6rem}
.post-head h1{font-size:calc(clamp(2rem,4.6vw,3.2rem) * var(--fs,1));margin:.9rem 0 0}
.post-lead{font-size:1.2rem;color:var(--muted);margin-top:1rem}
.post-head .post-meta{margin-top:1.2rem;font-size:.88rem}
.post-cover{margin:0 auto 2.4rem;max-width:1040px}
.post-cover img{width:100%;height:auto;border-radius:20px;display:block;aspect-ratio:16/9;object-fit:cover}
.prose{font-size:1.08rem;line-height:1.75;color:var(--text);padding-bottom:1rem}
.prose>*+*{margin-top:1.15em}
.prose h2{font-size:1.75rem;margin-top:2em;font-weight:800;letter-spacing:-.015em}
.prose h3{font-size:1.32rem;margin-top:1.7em}
.prose h4{font-size:1.1rem;margin-top:1.5em;color:var(--ink)}
.prose a{color:var(--teal-dk);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.4em}.prose li+li{margin-top:.4em}
.prose ul li::marker{color:var(--teal)}
.prose blockquote{margin-left:0;padding:.4em 0 .4em 1.2em;border-left:4px solid var(--teal);color:var(--ink);font-size:1.15rem;font-weight:500}
.prose img{max-width:100%;height:auto;border-radius:14px;display:block}
.prose figure{margin-left:0;margin-right:0}
.prose figcaption{margin-top:.6rem;font-size:.86rem;color:var(--muted);text-align:center}
.prose code{font:500 .9em var(--mono);background:var(--panel);padding:.1em .35em;border-radius:5px}
.prose pre{background:var(--navy);color:#fff;padding:1.1rem 1.2rem;border-radius:14px;overflow-x:auto;font:500 .9rem/1.6 var(--mono)}
.prose pre code{background:none;padding:0;color:inherit}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:.6rem .8rem;text-align:left;vertical-align:top}
.prose th{background:var(--panel);color:var(--ink);font-weight:700}
.post-foot{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding-top:2rem;padding-bottom:3rem;border-top:1px solid var(--line);margin-top:2.4rem}

@media (max-width:900px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .blog-grid{grid-template-columns:1fr}
  .blog-cats{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin:-.6rem -16px 1.6rem;padding:0 16px .3rem}
  .blog-cats a{white-space:nowrap}
  .prose{font-size:1.02rem}.prose h2{font-size:1.45rem}
  .post-cover img{border-radius:14px}
}