/* ============================================================
   eVehicle — Blog Listing Page (AJAX filters)
   Separate from archive-post.php which handles category/tag archives
   ============================================================ */

/* ── HERO ── */
.bl-hero { background:linear-gradient(135deg,#0d1117 0%,#1a1f2e 50%,#0f2218 100%); padding:56px 0 0; position:relative; overflow:hidden; }
.bl-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 80% 30%,rgba(0,200,150,.12),transparent 60%); pointer-events:none; }
.bl-hero::after  { content:''; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(0,200,150,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,200,150,.04) 1px,transparent 1px); background-size:52px 52px; }
.bl-hero-content { position:relative; z-index:1; max-width:680px; padding-bottom:0; }
.bl-hero-content h1 { color:var(--white); font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:900; font-family:var(--font-primary); line-height:1.1; margin-bottom:14px; }
.bl-hero-content h1 span { color:var(--primary); }
.bl-hero-content p { color:rgba(255,255,255,.5); font-size:.95rem; line-height:1.75; margin-bottom:24px; max-width:520px; }
.bl-hero-stats { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:32px; }
.bl-hero-stat { font-size:.82rem; color:rgba(255,255,255,.45); }
.bl-hero-stat strong { color:var(--primary); font-weight:900; }
.bl-hero-wave { margin-top:36px; line-height:0; position:relative; z-index:1; }
.bl-hero-wave svg { display:block; width:100%; }

/* ── SEARCH BAR ── */
.bl-search-bar { background:var(--white); padding:16px 0; border-bottom:1px solid var(--border); position:sticky; top:var(--header-height); z-index:90; }
.bl-search-inner { display:flex; gap:10px; align-items:center; }
.bl-search-input-wrap { flex:1; position:relative; }
.bl-search-input-wrap i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:.85rem; pointer-events:none; }
.bl-search-input { width:100%; padding:10px 14px 10px 40px; border:1.5px solid var(--border); border-radius:var(--radius-lg); font-size:.88rem; font-family:var(--font-body); color:var(--text); transition:var(--transition); background:var(--white); box-sizing:border-box; }
.bl-search-input:focus { border-color:var(--primary); outline:none; box-shadow:0 0 0 3px rgba(0,200,150,.1); }
.bl-search-btn { padding:10px 20px; background:var(--primary); color:var(--dark); border:none; border-radius:var(--radius-lg); font-size:.85rem; font-weight:700; cursor:pointer; font-family:var(--font-primary); transition:var(--transition); white-space:nowrap; }
.bl-search-btn:hover { background:var(--primary-dark); color:#fff; }

/* ── FILTER TABS ── */
.bl-filter-section { background:var(--white); border-bottom:2px solid var(--border); }
.bl-filter-inner { display:flex; align-items:stretch; gap:0; overflow-x:auto; scrollbar-width:none; }
.bl-filter-inner::-webkit-scrollbar { display:none; }
.bl-filter-tab { display:flex; align-items:center; gap:7px; padding:14px 18px; font-size:.82rem; font-weight:600; color:var(--text-muted); cursor:pointer; white-space:nowrap; border-bottom:3px solid transparent; margin-bottom:-2px; transition:var(--transition); font-family:var(--font-primary); flex-shrink:0; text-decoration:none; }
.bl-filter-tab:hover { color:var(--primary); }
.bl-filter-tab.active { color:var(--primary); border-bottom-color:var(--primary); }
.bl-filter-tab .bl-tab-count { background:var(--gray-100); color:var(--text-muted); font-size:.62rem; font-weight:700; padding:2px 6px; border-radius:var(--radius-full); transition:var(--transition); }
.bl-filter-tab.active .bl-tab-count { background:var(--primary-light); color:var(--primary-dark); }

/* Mobile filter toggle */
.bl-mobile-filter-btn { display:none; align-items:center; gap:7px; padding:10px 16px; background:var(--primary-light); color:var(--primary-dark); border:none; border-radius:var(--radius-lg); font-size:.82rem; font-weight:700; cursor:pointer; font-family:var(--font-primary); }

/* ── SORT + VIEW ── */
.bl-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; flex-wrap:wrap; }
.bl-result-info { font-size:.82rem; color:var(--text-muted); }
.bl-result-info strong { color:var(--text); }
.bl-toolbar-right { display:flex; align-items:center; gap:10px; }
.bl-sort-select { padding:8px 12px; border:1.5px solid var(--border); border-radius:var(--radius-lg); font-size:.82rem; font-family:var(--font-body); color:var(--text); cursor:pointer; background:var(--white); transition:var(--transition); }
.bl-sort-select:focus { border-color:var(--primary); outline:none; }
.bl-view-toggle { display:flex; gap:3px; }
.bl-view-btn { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--white); color:var(--text-muted); cursor:pointer; transition:var(--transition); font-size:.82rem; }
.bl-view-btn.active,.bl-view-btn:hover { background:var(--primary); color:var(--dark); border-color:var(--primary); }

/* ── GRID ── */
.bl-posts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.bl-posts-grid.view-list { grid-template-columns:1fr; }
.bl-skeleton { background:var(--gray-100); border-radius:var(--radius-xl); height:320px; animation:blSkeleton 1.2s ease infinite; }
@keyframes blSkeleton { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ── POST CARD ── */
.bl-post-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; transition:var(--transition); display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.bl-post-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--primary-light); }
.bl-post-img { aspect-ratio:16/9; overflow:hidden; position:relative; background:var(--gray-100); flex-shrink:0; }
.bl-post-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.bl-post-card:hover .bl-post-img img { transform:scale(1.04); }
.bl-post-cat-badge { position:absolute; top:10px; left:10px; font-size:.65rem; font-weight:700; padding:3px 9px; border-radius:var(--radius-full); font-family:var(--font-primary); }
.bl-post-body { padding:16px 18px; flex:1; display:flex; flex-direction:column; }
.bl-post-title { font-size:.93rem; font-weight:800; color:var(--text); font-family:var(--font-primary); line-height:1.35; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bl-post-excerpt { font-size:.8rem; color:var(--text-muted); line-height:1.65; flex:1; margin-bottom:12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bl-post-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.72rem; color:var(--text-muted); flex-wrap:wrap; margin-top:auto; }
.bl-post-meta-left { display:flex; align-items:center; gap:8px; }
.bl-post-author-av { width:22px; height:22px; border-radius:50%; background:var(--primary-light); display:flex; align-items:center; justify-content:center; font-size:.55rem; font-weight:800; color:var(--primary); flex-shrink:0; overflow:hidden; }
.bl-post-author-av img { width:100%; height:100%; object-fit:cover; }

/* List view card */
.bl-posts-grid.view-list .bl-post-card { flex-direction:row; }
.bl-posts-grid.view-list .bl-post-img { width:240px; aspect-ratio:unset; height:auto; flex-shrink:0; }
.bl-posts-grid.view-list .bl-post-body { padding:18px 20px; }

/* ── FEATURED POST ── */
.bl-featured-post { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; display:grid; grid-template-columns:1.2fr 1fr; margin-bottom:28px; text-decoration:none; color:inherit; transition:var(--transition); }
.bl-featured-post:hover { box-shadow:var(--shadow-lg); }
.bl-featured-post .bl-post-img { aspect-ratio:unset; height:100%; min-height:260px; }
.bl-featured-badge { position:absolute; top:12px; left:12px; background:var(--primary); color:var(--dark); font-size:.65rem; font-weight:800; padding:4px 10px; border-radius:var(--radius-full); font-family:var(--font-primary); letter-spacing:.04em; }
.bl-featured-body { padding:28px 26px; display:flex; flex-direction:column; justify-content:center; }
.bl-featured-tag { font-size:.72rem; font-weight:700; color:var(--primary-dark); background:var(--primary-light); padding:3px 10px; border-radius:var(--radius-full); display:inline-block; margin-bottom:12px; font-family:var(--font-primary); }
.bl-featured-title { font-size:1.25rem; font-weight:900; color:var(--text); font-family:var(--font-primary); line-height:1.25; margin-bottom:12px; }
.bl-featured-excerpt { font-size:.85rem; color:var(--text-muted); line-height:1.75; margin-bottom:18px; flex:1; }
.bl-featured-meta { display:flex; align-items:center; gap:14px; font-size:.75rem; color:var(--text-muted); }

/* ── LOAD MORE ── */
.bl-load-more-wrap { text-align:center; padding:28px 0; }
.bl-load-more-btn { padding:13px 32px; border:2px solid var(--primary); border-radius:var(--radius-full); color:var(--primary); font-weight:700; font-family:var(--font-primary); background:var(--white); cursor:pointer; font-size:.9rem; transition:var(--transition); display:inline-flex; align-items:center; gap:8px; }
.bl-load-more-btn:hover { background:var(--primary); color:var(--dark); }
.bl-load-more-btn:disabled { opacity:.5; cursor:not-allowed; }
.bl-load-more-btn .ev-spinner { display:none; width:14px; height:14px; border:2px solid rgba(0,200,150,.3); border-top-color:var(--primary); border-radius:50%; animation:evSpin .6s linear infinite; }
.bl-load-more-btn.loading .ev-spinner { display:inline-block; }
.bl-load-more-btn.loading span { display:none; }

/* ── EMPTY STATE ── */
.bl-empty { text-align:center; padding:60px 24px; }
.bl-empty i { font-size:3.5rem; color:var(--gray-200); margin-bottom:16px; display:block; }
.bl-empty h3 { font-size:1.1rem; font-weight:800; font-family:var(--font-primary); margin-bottom:8px; }
.bl-empty p { font-size:.88rem; color:var(--text-muted); margin-bottom:20px; }

/* ── RESPONSIVE ── */
@media (max-width:1024px) { .bl-posts-grid { grid-template-columns:repeat(2,1fr); } .bl-featured-post { grid-template-columns:1fr; } .bl-featured-post .bl-post-img { min-height:220px; } }
@media (max-width:768px) {
  .bl-hero-content h1 { font-size:1.8rem; }
  .bl-mobile-filter-btn { display:flex; }
  .bl-filter-section { display:none; }
  .bl-filter-section.mobile-open { display:flex; flex-direction:column; position:fixed; inset:0; z-index:999; background:var(--white); overflow-y:auto; padding:16px; }
  .bl-filter-inner { flex-direction:column; gap:0; overflow-x:unset; }
  .bl-filter-tab { border-bottom:1px solid var(--border); border-left:3px solid transparent; border-bottom-width:1px; margin-bottom:0; }
  .bl-filter-tab.active { border-left-color:var(--primary); border-bottom-color:var(--border); }
  .bl-filter-close { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:2px solid var(--border); margin:-16px -16px 16px; font-weight:800; font-family:var(--font-primary); }
  .bl-posts-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .bl-posts-grid.view-list .bl-post-card { flex-direction:column; }
  .bl-posts-grid.view-list .bl-post-img { width:100%; height:auto; aspect-ratio:16/9; }
}
@media (max-width:480px) { .bl-posts-grid { grid-template-columns:1fr; } }