/* ═══════════════════════════════════════
   MEDIA OMNI — BLOG CSS
═══════════════════════════════════════ */
#main-nav { background:rgba(5,15,44,.95); backdrop-filter:blur(20px); border-bottom-color:rgba(255,255,255,.08); }

/* ── PAGES ── */
#list-page, #post-page { max-width:1180px; margin:0 auto; padding:100px 24px 60px; }
#post-page { display:none; }

/* ── BLOG HEADER ── */
.blog-hdr { margin-bottom:48px; }
.blog-hdr h1 { font-family:var(--f-display); font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; letter-spacing:-.03em; margin-bottom:10px; }
.blog-hdr p  { font-size:.95rem; color:var(--muted); max-width:480px; line-height:1.75; }

/* ── SEARCH + FILTER ── */
.blog-controls { display:flex; gap:12px; align-items:center; margin-bottom:36px; flex-wrap:wrap; }
.search-wrap { position:relative; flex:1; min-width:220px; }
.search-wrap svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:15px; height:15px; stroke:var(--faint); stroke-width:2; fill:none; stroke-linecap:round; pointer-events:none; }
.blog-search { width:100%; padding:11px 14px 11px 40px; background:var(--white); border:1.5px solid var(--border); border-radius:var(--r-pill); font-family:var(--f-body); font-size:.88rem; outline:none; color:var(--ink); transition:border-color .2s,box-shadow .2s; }
.blog-search:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.tag-filters { display:flex; gap:6px; flex-wrap:wrap; }
.tf { padding:.42rem .9rem; border-radius:var(--r-pill); border:1.5px solid var(--border); background:var(--white); font-family:var(--f-body); font-size:.78rem; font-weight:600; color:var(--muted); cursor:pointer; transition:all .18s; }
.tf:hover { border-color:rgba(37,99,235,.4); color:var(--blue); }
.tf.active { background:var(--blue); border-color:var(--blue); color:var(--white); }

/* ── GRID ── */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; cursor:pointer; transition:transform .3s var(--ease),box-shadow .3s,border-color .3s; }
.blog-card:hover { transform:translateY(-5px); box-shadow:0 16px 48px rgba(37,99,235,.1); border-color:rgba(37,99,235,.25); }
.blog-card:hover .bc-title { color:var(--blue); }
.bc-thumb { height:180px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.bc-thumb-emoji { font-size:2.5rem; }
.bc-body { padding:22px; flex:1; display:flex; flex-direction:column; }
.bc-meta { display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.bc-date { font-family:var(--f-mono); font-size:.62rem; color:var(--faint); letter-spacing:.04em; }
.bc-title { font-family:var(--f-display); font-size:.96rem; font-weight:700; letter-spacing:-.02em; line-height:1.45; color:var(--ink); margin-bottom:8px; transition:color .18s; }
.bc-excerpt { font-size:.8rem; color:var(--muted); line-height:1.7; flex:1; margin-bottom:16px; }
.bc-footer { display:flex; align-items:center; justify-content:space-between; }
.bc-read { font-family:var(--f-mono); font-size:.62rem; color:var(--faint); letter-spacing:.04em; }
.bc-arrow { width:28px; height:28px; border-radius:50%; background:var(--border2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; transition:background .18s,transform .18s; }
.blog-card:hover .bc-arrow { background:var(--blue); transform:rotate(45deg); }
.blog-card:hover .bc-arrow svg { stroke:white; }
.bc-arrow svg { width:12px; height:12px; stroke:var(--blue); stroke-width:2.5; fill:none; stroke-linecap:round; }

/* ── FEATURED ── */
.blog-featured-card { grid-column:1/-1; display:grid; grid-template-columns:1.4fr 1fr; cursor:pointer; }
.blog-featured-card .bc-thumb { height:280px; }
.blog-featured-card .bc-title { font-size:1.25rem; }

/* ── EMPTY ── */
.blog-empty { grid-column:1/-1; text-align:center; padding:64px 24px; color:var(--muted); font-size:.95rem; }

/* ── SINGLE POST ── */
.post-back { display:inline-flex; align-items:center; gap:6px; font-size:.84rem; font-weight:600; color:var(--blue); margin-bottom:36px; cursor:pointer; transition:gap .2s; background:none; border:none; }
.post-back:hover { gap:10px; }
.post-back svg { width:14px; height:14px; stroke:currentColor; stroke-width:2.5; fill:none; stroke-linecap:round; }
.post-hdr { margin-bottom:40px; }
.post-tag-row { display:flex; gap:8px; align-items:center; margin-bottom:16px; }
.post-title { font-family:var(--f-display); font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:800; letter-spacing:-.03em; line-height:1.15; margin-bottom:16px; }
.post-meta-row { display:flex; gap:16px; align-items:center; font-size:.82rem; color:var(--muted); flex-wrap:wrap; }
.post-author { font-weight:600; color:var(--ink); }
.post-thumb { width:100%; max-height:400px; border-radius:var(--r-xl); overflow:hidden; display:flex; align-items:center; justify-content:center; margin-bottom:40px; font-size:5rem; }
.post-body { max-width:720px; }
.post-body h2 { font-family:var(--f-display); font-size:1.4rem; font-weight:800; margin:32px 0 12px; letter-spacing:-.02em; color:var(--ink); }
.post-body h3 { font-family:var(--f-display); font-size:1.1rem; font-weight:700; margin:24px 0 10px; color:var(--ink); }
.post-body p  { font-size:.95rem; line-height:1.85; color:var(--muted); margin-bottom:16px; }
.post-body ul,.post-body ol { padding-left:20px; margin-bottom:16px; }
.post-body li { font-size:.95rem; line-height:1.8; color:var(--muted); margin-bottom:4px; }
.post-body strong { color:var(--ink); font-weight:700; }
.post-callout { background:var(--border2); border-left:4px solid var(--blue); border-radius:0 var(--r-md) var(--r-md) 0; padding:16px 20px; margin:24px 0; }
.post-callout p { margin:0; color:var(--ink); font-weight:500; }
.post-table { width:100%; border-collapse:collapse; margin:24px 0; font-size:.88rem; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); }
.post-table th { background:var(--paper2); padding:12px 16px; text-align:left; font-family:var(--f-mono); font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:700; }
.post-table td { padding:11px 16px; border-top:1px solid var(--border); color:var(--muted); }
.post-table tr:hover td { background:var(--paper); }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .blog-grid { grid-template-columns:1fr 1fr; }
  .blog-featured-card { grid-column:1/-1; grid-template-columns:1fr; }
  .blog-featured-card .bc-thumb { height:200px; }
}
@media (max-width:768px) {
  .blog-grid { grid-template-columns:1fr; }
  #list-page,#post-page { padding:84px 16px 40px; }
}