/* ============================================================
   Subalytics — blog index (blog_index.html, app/database/db_blog.py).
   Sidebar filters + list of result cards. Reuses header.html /
   footer.html and v4c-console.css (palette, fonts). Loads after
   v4c-console.css.
   ============================================================ */

.blog-banner { background: var(--gray-band); padding: 64px 0 46px; position: relative; overflow: hidden; }
.blog-banner::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 86% 8%, rgba(36,65,151,.10), transparent 46%), linear-gradient(rgba(13,11,51,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(13,11,51,.04) 1px, transparent 1px); background-size: 100% 100%, 44px 44px, 44px 44px; }
.blog-banner .wrap { position: relative; }
.blog-banner h1 { font-family: var(--serif); font-weight: 700; font-size: 46px; color: var(--ink); margin: 0 0 12px; letter-spacing: -.4px; }
.blog-banner p { font-size: 16px; color: #555; margin: 0; max-width: 640px; }

.blog-main { background: #fff; padding: 40px 0 70px; }
.blog-layout { display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start; }

.filt-title { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--ink); margin: 0 0 16px; }
.filt-group { border-bottom: 1px solid var(--line); padding-bottom: 22px; margin-bottom: 22px; }
.filt-group h4 { font-family: var(--serif); font-weight: 700; font-size: 17px; margin: 0 0 14px; color: var(--ink); }
.filt-row { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink); padding: 6px 0; cursor: pointer; }
.filt-row input { accent-color: var(--blue); width: 15px; height: 15px; }
.filt-row span:first-of-type { flex: 1; }
.filt-count { color: #999; font-size: 12.5px; }
.clear-filters { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--blue); }
.clear-filters:hover { color: var(--blue-deep); text-decoration: underline; }
.plat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.plat-list li { font-size: 14px; padding: 5px 0; }
.plat-list a { color: #555; }
.plat-list a:hover { color: var(--blue); }

.results-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 10px; }
.results-count { font-size: 13.5px; color: #666; }

.post-list { display: flex; flex-direction: column; gap: 16px; }
.post-row { display: block; text-decoration: none; border: 1px solid var(--line); border-radius: 10px; padding: 22px 26px; transition: border-color .15s, box-shadow .15s; }
.post-row:hover { border-color: var(--blue); box-shadow: 0 8px 20px rgba(13,11,51,.06); }
.post-cat { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
.post-row h3 { font-family: var(--serif); font-weight: 700; font-size: 19px; line-height: 1.35; color: var(--ink); margin: 0 0 8px; }
.post-date { font-size: 13px; color: #888; }
.no-results { color: #888; font-size: 14px; }

.pagination { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 40px; }
.pg-num { font-family: var(--sans); font-size: 14px; color: #888; text-decoration: none; }
.pg-num:hover { color: var(--blue); }
.pg-num.active { color: var(--blue); font-weight: 700; }
.pg-next { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--blue); text-decoration: none; }
.pg-next:hover { background: var(--gray-band); }

@media (max-width: 860px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-banner h1 { font-size: 34px; }
}