/* ── REMOTE GUIDE LISTING PAGE ──────────────────────────────── */
.waj-blog-page { padding:40px 84px 60px; background:#F2F5FF; min-height:60vh; }
.waj-blog-page-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:28px; gap:20px; flex-wrap:wrap; }
.waj-blog-page-title { font-size:40px; font-weight:800; color:#1a1a2e; letter-spacing:-.5px; margin:0 0 6px; font-family:'Inter',-apple-system,sans-serif; }
.waj-blog-page-subtitle { font-size:15px; color:#6b7280; margin:0; }

/* Category filter */
.waj-co-filter-label { display:block; font-size:13px; font-weight:600; color:#374151; margin-bottom:10px; }
.waj-blog-filter-row { margin-bottom:24px; }
.waj-blog-pills { display:flex; flex-wrap:wrap; gap:8px; }
.waj-blog-pill {
  font-size:13px; padding:7px 16px; border-radius:999px;
  border:1px solid #e0e5f0; background:#fff; color:#6b7280;
  cursor:pointer; transition:all .15s; text-decoration:none;
  white-space:nowrap; display:inline-block;
}
.waj-blog-pill:hover { border-color:#6366f1; color:#6366f1; }
.waj-blog-pill.active { background:#6366f1; color:#fff; border-color:#6366f1; }
.waj-blog-pill-count { color:inherit; opacity:.6; font-size:11px; margin-left:3px; }

/* Blog grid on listing page — same 4-col card as homepage, 3 rows = 12 posts */
.waj-blog-grid-page {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:24px;
}

/* Reuse home card styles (.waj-blog-card, .waj-blog-img, .waj-blog-body etc.)
   defined in home.css — no duplication needed */

/* Featured badge on listing cards */
.waj-blog-feat-badge {
  position:absolute; top:10px; left:10px;
  background:#fef3c7; color:#92400e; font-size:11px; font-weight:600;
  padding:3px 10px; border-radius:999px; z-index:1;
}
.waj-blog-card { position:relative; } /* allow feat badge positioning */

/* Pagination */
.waj-blog-pagination { display:flex; align-items:center; justify-content:center; gap:6px; margin:8px 0 32px; flex-wrap:wrap; }
.waj-blog-pag-info { text-align:center; font-size:13px; color:#9ca3af; margin-bottom:6px; }
.waj-blog-pag-btn {
  min-width:36px; height:36px; padding:0 12px; border:1px solid #e0e5f0;
  border-radius:8px; background:#fff; font-size:13px; font-weight:500;
  color:#374151; cursor:pointer; transition:all .15s; font-family:inherit;
  display:flex; align-items:center; justify-content:center;
}
.waj-blog-pag-btn:hover { border-color:#6366f1; color:#6366f1; }
.waj-blog-pag-btn.active { background:#6366f1; color:#fff; border-color:#6366f1; }
.waj-blog-pag-btn:disabled { opacity:.4; cursor:not-allowed; }

/* Empty state */
.waj-blog-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; gap:12px; color:#9ca3af; font-size:15px; text-align:center; }

/* ── SINGLE POST ────────────────────────────────────────────── */
.waj-single-wrap { padding:40px 84px 60px; background:#F2F5FF; min-height:60vh; }
.waj-single-post { width:100%; }
.waj-single-breadcrumb {
  display:flex; align-items:center; gap:8px; margin-bottom:24px;
  font-size:13px; color:#6b7280; flex-wrap:wrap;
  max-width:800px; margin-left:auto; margin-right:auto;
}
.waj-single-breadcrumb a { color:#6366f1!important; text-decoration:none!important; font-weight:500; }
.waj-single-breadcrumb a:hover { text-decoration:underline!important; }
.waj-single-sep { color:#d1d5db; }
.waj-single-head { margin-bottom:24px; max-width:800px; margin-left:auto; margin-right:auto; }
.waj-single-title { font-size:36px; font-weight:800; color:#1a1a2e; line-height:1.2; margin:16px 0 12px; letter-spacing:-.5px; font-family:'Inter',-apple-system,sans-serif; }
.waj-single-meta { display:flex; align-items:center; gap:8px; font-size:13px; color:#9ca3af; flex-wrap:wrap; }
.waj-single-dot { color:#d1d5db; }
.waj-single-hero-img { margin-bottom:32px; border-radius:14px; overflow:hidden; max-width:800px; margin-left:auto; margin-right:auto; }
.waj-single-hero-img img { width:100%; max-height:460px; object-fit:cover; display:block; }

/* Article content typography */
.waj-single-content { font-size:17px; line-height:1.8; color:#374151; max-width:800px; margin-left:auto; margin-right:auto; }
.waj-single-content h2 { font-size:26px; font-weight:700; color:#1a1a2e; margin:40px 0 16px; }
.waj-single-content h3 { font-size:21px; font-weight:700; color:#1a1a2e; margin:32px 0 12px; }
.waj-single-content p { margin:0 0 20px; }
.waj-single-content a { color:#6366f1; text-decoration:underline; }
.waj-single-content ul,.waj-single-content ol { padding-left:24px; margin:0 0 20px; }
.waj-single-content li { margin-bottom:8px; }
.waj-single-content blockquote { border-left:4px solid #6366f1; padding:12px 20px; margin:24px 0; background:#f0f2ff; border-radius:0 8px 8px 0; font-style:italic; color:#4b5563; }
.waj-single-content img { max-width:100%; border-radius:10px; margin:8px 0; }
.waj-single-content pre,.waj-single-content code { background:#f3f4f6; padding:2px 6px; border-radius:4px; font-size:14px; }
.waj-single-content pre { padding:16px; overflow-x:auto; border-radius:8px; }
/* Tags */
.waj-single-tags { display:flex; flex-wrap:wrap; gap:8px; margin:32px 0; max-width:800px; margin-left:auto; margin-right:auto; }
.waj-single-tag { font-size:12px; background:#f3f4f6; color:#6b7280; border-radius:999px; padding:4px 12px; }
/* Back button */
.waj-single-back { margin:32px 0; max-width:800px; margin-left:auto; margin-right:auto; }
.waj-single-back-btn {
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:600; color:#6366f1!important;
  border:1px solid #e0e7ff; border-radius:8px; padding:10px 20px;
  text-decoration:none!important; transition:all .15s; background:#fff;
}
.waj-single-back-btn:hover { background:#6366f1; color:#fff!important; border-color:#6366f1; }
/* Related posts */
.waj-single-related { border-top:1px solid #e0e5f0; padding-top:32px; margin-top:8px; max-width:800px; margin-left:auto; margin-right:auto; }
.waj-single-related-title { font-size:20px; font-weight:700; color:#1a1a2e; margin:0 0 20px; }
.waj-blog-grid-related { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.waj-blog-card-sm {
  background:#fff; border:1px solid #e0e5f0; border-radius:12px;
  overflow:hidden; text-decoration:none!important; color:inherit; transition:all .18s; display:block;
}
.waj-blog-card-sm:hover { border-color:#a5b4fc; transform:translateY(-2px); box-shadow:0 8px 20px rgba(99,102,241,.08); }
.waj-blog-sm-img { width:100%; height:120px; object-fit:cover; display:block; background:#F2F5FF; }
.waj-blog-sm-body { padding:12px; }
.waj-blog-sm-title { font-size:14px; font-weight:600; color:#1a1a2e!important; margin:8px 0 6px; line-height:1.4; }
.waj-blog-sm-meta { font-size:11px; color:#9ca3af; }

/* Mobile */
@media (max-width:768px) {
  .waj-blog-page { padding:28px 20px 40px; }
  .waj-blog-page-head { flex-direction:column; align-items:flex-start; }
  .waj-blog-grid-page { grid-template-columns:1fr 1fr; gap:12px; }
  .waj-single-wrap { padding:28px 20px 40px; }
  .waj-single-title { font-size:26px; }
  .waj-single-content { font-size:16px; }
  .waj-blog-grid-related { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .waj-blog-page { padding:20px 16px 32px; }
  .waj-blog-page-title { font-size:28px; }
  .waj-blog-grid-page { grid-template-columns:1fr; }
  .waj-single-wrap { padding:20px 16px 32px; }
}