/* PkOUG Blog (News & Blogs) — modern readable article styles */
.blog-hero{ padding: 34px 0 10px; }
.blog-hero h1{ font-size: clamp(30px, 3.2vw, 44px); margin: 10px 0 6px; letter-spacing:-0.02em; }
.blog-hero p{ color: var(--muted); max-width: 70ch; }

.blog-toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-top: 18px; }
.blog-search{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.blog-search input{ width: min(520px, 72vw); padding: 12px 14px; border-radius: 14px; border:1px solid var(--border); background: var(--surface); }
.blog-chip{ display:inline-flex; padding:6px 10px; border-radius: 999px; border:1px solid var(--border); background: var(--surface); font-weight: 900; font-size: 12px; }
.blog-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 12px; border-radius: 12px; font-weight: 950; border:1px solid rgba(0,0,0,0.10); background:#fff; text-decoration:none; color:inherit; }
html[data-theme="dark"] .blog-btn{ background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.blog-btn.primary{ background: var(--primary); border-color: transparent; color:#fff; }

.blog-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin: 18px 0 30px; }
@media (max-width: 980px){ .blog-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .blog-grid{ grid-template-columns: 1fr; } .blog-search input{ width: 100%; } }

.blog-card{ border:1px solid rgba(0,0,0,0.08); border-radius: 18px; overflow:hidden; background: rgba(255,255,255,0.86); transition: 220ms ease; display:flex; flex-direction:column; min-height: 100%; }
html[data-theme="dark"] .blog-card{ background: rgba(12,18,32,0.72); border-color: rgba(255,255,255,0.10); }
.blog-card:hover{ transform: translateY(-2px); box-shadow: 0 18px 60px rgba(0,0,0,0.08); }
html[data-theme="dark"] .blog-card:hover{ box-shadow: 0 18px 70px rgba(0,0,0,0.35); }

.blog-cover{ aspect-ratio: 16/9; background: radial-gradient(1200px 400px at 20% 10%, rgba(65,105,225,0.35), transparent 60%), radial-gradient(900px 380px at 90% 20%, rgba(0,255,255,0.18), transparent 55%), rgba(0,0,0,0.05); }
.blog-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-body{ padding: 14px 14px 16px; display:flex; flex-direction:column; gap: 10px; flex: 1; }
.blog-title{ font-weight: 1000; font-size: 18px; line-height: 1.2; margin:0; }
.blog-excerpt{ color: var(--muted); margin:0; font-size: 13px; line-height: 1.5; }
.blog-meta{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; color: var(--muted); font-size: 12px; }
.blog-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 2px; }
.blog-tag{ display:inline-flex; padding:5px 9px; border-radius: 999px; border:1px solid var(--border); background: var(--surface); font-size: 12px; font-weight: 900; }
.blog-card a{ text-decoration:none; color:inherit; }
.blog-pagination{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin: 10px 0 40px; }

.article{ max-width: 86ch; margin: 0 auto; }
.article-hero{ border-radius: 18px; overflow:hidden; border:1px solid rgba(0,0,0,0.08); background: rgba(255,255,255,0.86); }
html[data-theme="dark"] .article-hero{ border-color: rgba(255,255,255,0.10); background: rgba(12,18,32,0.72); }
.article-hero .img{ aspect-ratio: 16/9; background: radial-gradient(900px 380px at 20% 10%, rgba(65,105,225,0.35), transparent 60%), radial-gradient(800px 360px at 90% 20%, rgba(0,255,255,0.18), transparent 55%), rgba(0,0,0,0.05); }
.article-hero .img img{ width:100%; height:100%; object-fit:cover; display:block; }
.article-head{ padding: 18px; }
.article-head h1{ margin: 4px 0 8px; font-size: clamp(28px, 3vw, 42px); letter-spacing: -0.02em; }
.article-head .meta{ display:flex; gap:10px; flex-wrap:wrap; color: var(--muted); font-size: 13px; }
.article-content{ padding: 18px; line-height: 1.75; font-size: 16px; }
.article-content h2{ margin-top: 24px; font-size: 22px; }
.article-content h3{ margin-top: 20px; font-size: 18px; }
.article-content blockquote{ margin: 16px 0; padding: 12px 14px; border-left: 4px solid rgba(65,105,225,0.40); background: rgba(65,105,225,0.08); border-radius: 12px; }
.article-content pre{ padding: 12px 14px; border-radius: 14px; overflow:auto; background: rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.08); }
html[data-theme="dark"] .article-content pre{ background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.article-actions{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; padding: 0 6px; margin: 16px 0 36px; }


/* Quill code blocks */
.article-content pre.ql-syntax{
  background: rgba(15, 23, 42, 0.92);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,255,255,0.18);
  box-shadow: 0 0 0 3px rgba(0,255,255,0.06);
}
html[data-theme="light"] .article-content pre.ql-syntax{
  background: rgba(2, 6, 23, 0.92);
  color: rgba(255,255,255,0.92);
}
.article-content pre.ql-syntax, .article-content pre code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.6;
}
.article-content code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: rgba(65,105,225,0.10);
  border: 1px solid rgba(65,105,225,0.18);
  border-radius: 10px;
  padding: 2px 7px;
}
html[data-theme="dark"] .article-content code{
  background: rgba(0,255,255,0.08);
  border-color: rgba(0,255,255,0.16);
}
.article-content img{
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
}
html[data-theme="dark"] .article-content img{
  border-color: rgba(255,255,255,0.12);
}