/* =====================================================
   IM Powerhouse Blog Plugin — impblog.css v1.0.0
   Blog List  (.bl-*)  +  Blog Post  (.bv-*)
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Serif+Display:ital@0;1&display=swap');

/* ── Reset ── */
.bl *, .bv * { box-sizing: border-box; margin: 0; padding: 0; }
.bl a, .bv a { color: inherit; }

/* ════════════════════════════════════════
   BLOG LIST
   ════════════════════════════════════════ */
.bl-wrap {
  background: #f8faff;
  font-family: 'DM Sans', sans-serif;
  padding: 0 0 5rem;
}

/* Hero */
.bl-hero {
  background: linear-gradient(150deg, #0f172a 0%, #1e293b 100%);
  padding: 4rem 2rem 3.5rem;
  position: relative;
  overflow: hidden;
}
.bl-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.bl-hero-inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; }

.bl-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(37,99,235,.12); border: 0.5px solid rgba(37,99,235,.3);
  color: #93c5fd; padding: 4px 14px; border-radius: 9999px;
  font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; margin-bottom: 1.1rem;
}
.bl-hero-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(24px, 3.5vw, 38px);
  color: #fff; line-height: 1.15; margin-bottom: .625rem;
}
.bl-hero-sub { font-size: 15px; color: rgba(255,255,255,.45); line-height: 1.7; }

/* Layout */
.bl-layout {
  max-width: 900px; margin: 0 auto;
  padding: 2.5rem 2rem 0;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2.5rem;
  align-items: start;
}

/* Search */
.bl-search-form { display: flex; gap: .5rem; margin-bottom: 1.75rem; }
.bl-search-input {
  flex: 1; height: 44px;
  background: #fff; border: 0.5px solid #e2e8f0;
  border-radius: 10px; padding: 0 1rem;
  font-family: 'DM Sans', sans-serif; font-size: 14px; color: #0f172a;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.bl-search-input:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.bl-search-input::placeholder { color: #94a3b8; }
.bl-search-btn {
  height: 44px; padding: 0 1.25rem;
  background: #2563EB; color: #fff;
  border: none; border-radius: 10px;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  transition: background .15s;
}
.bl-search-btn:hover { background: #1d4ed8; }
.bl-search-btn svg { width: 14px; height: 14px; }

/* Active filters */
.bl-active-filters {
  display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap; margin-bottom: 1.25rem;
  font-size: 13px; color: #64748b;
}
.bl-filter-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: #dbeafe; color: #1e40af;
  padding: 3px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 600; text-decoration: none;
}
.bl-filter-tag-x { font-size: 14px; line-height: 1; }

/* Post list */
.bl-posts { display: flex; flex-direction: column; gap: 1.25rem; }

/* Post card */
.bl-card {
  background: #fff; border: 0.5px solid #e2e8f0;
  border-radius: 16px; overflow: hidden;
  display: flex; transition: all .25s; text-decoration: none;
}
.bl-card:hover {
  border-color: #bfdbfe;
  box-shadow: 0 8px 32px rgba(37,99,235,.08);
  transform: translateY(-2px);
}
.bl-card-thumb {
  width: 220px; flex-shrink: 0;
  background: linear-gradient(135deg,#1e293b,#0f172a);
  position: relative; overflow: hidden;
}
.bl-card-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; transition: transform .4s ease;
}
.bl-card:hover .bl-card-thumb img { transform: scale(1.04); }
.bl-card-thumb-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; min-height: 160px;
}
.bl-card-thumb-placeholder svg { width: 40px; height: 40px; color: rgba(255,255,255,.1); }
.bl-card-body {
  flex: 1; padding: 1.5rem;
  display: flex; flex-direction: column; gap: .5rem; min-width: 0;
}
.bl-card-top {
  display: flex; align-items: center;
  gap: .625rem; flex-wrap: wrap;
}
.bl-card-cat {
  display: inline-flex; align-items: center; gap: 4px;
  background: #eff6ff; color: #1e40af;
  font-size: 10px; font-weight: 700;
  padding: 2px 9px; border-radius: 20px;
  text-decoration: none; transition: background .15s;
}
.bl-card-cat:hover { background: #dbeafe; }
.bl-card-date { font-size: 12px; color: #94a3b8; }
.bl-card-title {
  font-family: 'DM Serif Display', serif;
  font-size: 18px; color: #0f172a; line-height: 1.3;
  text-decoration: none; display: block; transition: color .15s;
}
.bl-card:hover .bl-card-title { color: #2563EB; }
.bl-card-excerpt {
  font-size: 13.5px; color: #64748b; line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.bl-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-top: auto; padding-top: .5rem;
}
.bl-card-author {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: #64748b;
}
.bl-card-author-av {
  width: 24px; height: 24px; border-radius: 50%;
  overflow: hidden; background: #dbeafe;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #1e40af; flex-shrink: 0;
}
.bl-card-author-av img { width: 24px; height: 24px; object-fit: cover; border-radius: 50%; }
.bl-read-more {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; color: #2563EB;
  text-decoration: none; transition: gap .2s;
}
.bl-read-more:hover { gap: 7px; }
.bl-read-more svg { width: 12px; height: 12px; }

/* Empty */
.bl-empty {
  text-align: center; padding: 4rem 2rem;
  background: #fff; border: 0.5px solid #e2e8f0;
  border-radius: 16px; color: #94a3b8;
}
.bl-empty svg { width: 48px; height: 48px; margin-bottom: 1rem; color: #e2e8f0; display: block; margin-left: auto; margin-right: auto; }
.bl-empty h3 { font-family: 'DM Serif Display', serif; font-size: 20px; color: #0f172a; margin-bottom: .5rem; }
.bl-empty p  { font-size: 14px; }

/* Pagination */
.bl-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; margin-top: 2rem; flex-wrap: wrap;
}
.bl-page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 .5rem;
  border-radius: 9px; font-size: 13px; font-weight: 500;
  text-decoration: none; color: #475569;
  border: 0.5px solid #e2e8f0; background: #fff;
  transition: all .15s; font-family: 'DM Sans', sans-serif;
}
.bl-page-btn:hover  { border-color: #2563EB; color: #2563EB; }
.bl-page-btn.active { background: #2563EB; color: #fff; border-color: #2563EB; }
.bl-page-btn.dots   { border: none; background: none; cursor: default; color: #94a3b8; }

/* Sidebar */
.bl-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.bl-widget { background: #fff; border: 0.5px solid #e2e8f0; border-radius: 14px; overflow: hidden; }
.bl-widget-head {
  padding: 1rem 1.25rem; border-bottom: 0.5px solid #f1f5f9;
  font-family: 'DM Serif Display', serif; font-size: 16px; color: #0f172a;
}
.bl-widget-body { padding: 1.25rem; }
.bl-cat-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.bl-cat-item a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-radius: 8px;
  font-size: 13px; color: #475569; text-decoration: none;
  transition: all .15s; font-family: 'DM Sans', sans-serif;
}
.bl-cat-item a:hover { background: #eff6ff; color: #1e40af; }
.bl-cat-item a.active { background: #eff6ff; color: #1e40af; font-weight: 600; }
.bl-cat-count {
  background: #f1f5f9; color: #64748b;
  font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: 20px;
}
.bl-cat-item a.active .bl-cat-count { background: #dbeafe; color: #1e40af; }
.bl-recent-list { list-style: none; display: flex; flex-direction: column; gap: .875rem; }
.bl-recent-item a {
  display: flex; gap: .75rem; text-decoration: none;
  align-items: flex-start; transition: opacity .15s;
}
.bl-recent-item a:hover { opacity: .8; }
.bl-recent-thumb {
  width: 56px; height: 56px; border-radius: 8px;
  background: #f1f5f9; flex-shrink: 0; overflow: hidden;
}
.bl-recent-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bl-recent-thumb-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#1e293b,#0f172a);
}
.bl-recent-thumb-ph svg { width: 18px; height: 18px; color: rgba(255,255,255,.15); }
.bl-recent-meta { flex: 1; min-width: 0; }
.bl-recent-title {
  font-size: 12.5px; font-weight: 600; color: #0f172a; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 3px; font-family: 'DM Sans', sans-serif;
}
.bl-recent-date { font-size: 11px; color: #94a3b8; }

/* ════════════════════════════════════════
   BLOG POST VIEW
   ════════════════════════════════════════ */
.bv-wrap {
  background: #f8faff;
  font-family: 'DM Sans', sans-serif;
}

/* Hero */
.bv-hero {
  background: linear-gradient(150deg,#0f172a 0%,#1e293b 100%);
  padding: 4rem 2rem 3rem;
  position: relative; overflow: hidden;
}
.bv-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 32px 32px; pointer-events: none;
}
.bv-hero-inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }

/* Breadcrumb */
.bv-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: rgba(255,255,255,.4);
  margin-bottom: 1.25rem; flex-wrap: wrap;
}
.bv-breadcrumb a { color: rgba(255,255,255,.4); text-decoration: none; transition: color .15s; }
.bv-breadcrumb a:hover { color: rgba(255,255,255,.75); }
.bv-breadcrumb svg { width: 10px; height: 10px; flex-shrink: 0; }

/* Meta */
.bv-hero-top {
  display: flex; align-items: center; gap: .75rem;
  flex-wrap: wrap; margin-bottom: 1rem;
}
.bv-cat-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(37,99,235,.2); border: 0.5px solid rgba(37,99,235,.4);
  color: #93c5fd; font-size: 10px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px; text-decoration: none;
}
.bv-meta {
  display: flex; align-items: center; gap: .5rem;
  font-size: 12px; color: rgba(255,255,255,.4); flex-wrap: wrap;
}
.bv-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.2); }

/* Title */
.bv-hero-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(24px,3.5vw,38px);
  color: #fff; line-height: 1.15; margin-bottom: 1.25rem;
}

/* Author hero */
.bv-hero-author { display: flex; align-items: center; gap: 10px; }
.bv-hero-av {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  background: #2563EB; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: #fff; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.15);
}
.bv-hero-av img { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; }
.bv-hero-author-name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.75); display: block; }
.bv-hero-author-role { font-size: 11px; color: rgba(255,255,255,.35); }

/* Featured image */
.bv-featured-img { max-width: 760px; margin: 0 auto; }
.bv-featured-img img { width: 100%; max-height: 440px; object-fit: cover; display: block; }

/* Article layout */
.bv-article-layout {
  max-width: 760px; margin: 0 auto;
  padding: 2.5rem 2rem 5rem;
  display: grid;
  grid-template-columns: 1fr 48px;
  gap: 2rem; align-items: start;
}

/* Content prose */
.bv-content {
  background: #fff; border: 0.5px solid #e2e8f0;
  border-radius: 16px; padding: 2.5rem;
  font-size: 15px; color: #374151; line-height: 1.85;
}
.bv-content h2 { font-family:'DM Serif Display',serif; font-size:24px; color:#0f172a; margin:2rem 0 .875rem; line-height:1.25; }
.bv-content h3 { font-family:'DM Serif Display',serif; font-size:19px; color:#0f172a; margin:1.75rem 0 .75rem; line-height:1.3; }
.bv-content h4 { font-size:16px; font-weight:700; color:#0f172a; margin:1.5rem 0 .625rem; }
.bv-content p  { margin-bottom:1.25rem; }
.bv-content p:last-child { margin-bottom:0; }
.bv-content a  { color:#2563EB; text-decoration:underline; text-underline-offset:2px; transition:color .15s; }
.bv-content a:hover { color:#1d4ed8; }
.bv-content ul,
.bv-content ol  { padding-left:1.5rem; margin-bottom:1.25rem; display:flex; flex-direction:column; gap:.5rem; }
.bv-content li  { line-height:1.7; }
.bv-content blockquote {
  border-left:3px solid #2563EB; padding:.875rem 1.25rem;
  background:#eff6ff; border-radius:0 10px 10px 0;
  margin:1.5rem 0; font-style:italic; color:#1e40af;
}
.bv-content strong { font-weight:700; color:#0f172a; }
.bv-content code {
  background:#f1f5f9; color:#be185d;
  padding:1px 6px; border-radius:5px;
  font-size:13.5px; font-family:ui-monospace,monospace;
}
.bv-content pre {
  background:#0f172a; color:#e2e8f0;
  padding:1.25rem 1.5rem; border-radius:10px;
  overflow-x:auto; font-size:13px; line-height:1.7; margin:1.5rem 0;
}
.bv-content pre code { background:none; color:inherit; padding:0; }
.bv-content img { max-width:100%; height:auto; border-radius:10px; margin:1rem 0; }
.bv-content table { width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:14px; }
.bv-content table th { padding:.625rem .875rem; background:#f8faff; border:0.5px solid #e2e8f0; font-weight:700; color:#0f172a; text-align:left; }
.bv-content table td { padding:.625rem .875rem; border:0.5px solid #e2e8f0; color:#475569; }
.bv-content hr { border:none; border-top:0.5px solid #e2e8f0; margin:2rem 0; }

/* Tags */
.bv-tags {
  display:flex; align-items:center; gap:.5rem;
  flex-wrap:wrap; margin-top:2rem; padding-top:1.5rem;
  border-top:0.5px solid #f1f5f9;
}
.bv-tag {
  display:inline-flex; background:#f1f5f9; color:#475569;
  font-size:12px; font-weight:500; padding:3px 10px;
  border-radius:20px; text-decoration:none; transition:all .15s;
}
.bv-tag:hover { background:#eff6ff; color:#1e40af; }

/* Share sidebar */
.bv-share-sidebar {
  position:sticky; top:100px;
  display:flex; flex-direction:column;
  align-items:center; gap:.625rem;
}
.bv-share-label {
  font-size:10px; font-weight:700; color:#94a3b8;
  text-transform:uppercase; letter-spacing:.07em;
  writing-mode:vertical-rl; margin-bottom:.25rem;
}
.bv-share-btn {
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; transition:all .2s; flex-shrink:0;
}
.bv-share-btn:hover { transform:translateY(-2px); }
.bv-share-btn svg { width:16px; height:16px; }
.bv-share-btn.tw { background:#000; color:#fff; }
.bv-share-btn.tw:hover { background:#333; }
.bv-share-btn.fb { background:#1877f2; color:#fff; }
.bv-share-btn.fb:hover { background:#1564d3; }
.bv-share-btn.li { background:#0a66c2; color:#fff; }
.bv-share-btn.li:hover { background:#0958a8; }
.bv-share-btn.wa { background:#25d366; color:#fff; }
.bv-share-btn.wa:hover { background:#1db954; }
.bv-share-copy {
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:#f1f5f9; color:#64748b;
  border:none; cursor:pointer; transition:all .2s;
}
.bv-share-copy:hover { background:#e2e8f0; transform:translateY(-2px); }
.bv-share-copy svg { width:15px; height:15px; }
.bv-copy-tip {
  position:absolute; left:-70px;
  background:#0f172a; color:#fff;
  font-size:11px; font-weight:600;
  padding:4px 10px; border-radius:6px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s;
}
.bv-share-copy-wrap { position:relative; }
.bv-share-copy-wrap.copied .bv-copy-tip { opacity:1; }

/* Prev / Next */
.bv-prevnext {
  max-width:760px; margin:0 auto;
  padding:0 2rem; display:grid;
  grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:2.5rem;
}
.bv-pn-card {
  background:#fff; border:0.5px solid #e2e8f0;
  border-radius:14px; padding:1.25rem;
  text-decoration:none; transition:all .2s;
  display:flex; flex-direction:column; gap:.375rem;
}
.bv-pn-card:hover { border-color:#bfdbfe; box-shadow:0 4px 20px rgba(37,99,235,.08); transform:translateY(-2px); }
.bv-pn-dir {
  font-size:11px; font-weight:600; color:#94a3b8;
  text-transform:uppercase; letter-spacing:.07em;
  display:flex; align-items:center; gap:4px;
}
.bv-pn-dir svg { width:12px; height:12px; }
.bv-pn-title { font-family:'DM Serif Display',serif; font-size:15px; color:#0f172a; line-height:1.35; }
.bv-pn-card.next { text-align:right; }
.bv-pn-card.next .bv-pn-dir { justify-content:flex-end; }

/* Related */
.bv-related {
  background:#fff; border-top:0.5px solid #e2e8f0;
  padding:3rem 2rem 4rem;
}
.bv-related-inner { max-width:760px; margin:0 auto; }
.bv-related-title { font-family:'DM Serif Display',serif; font-size:24px; color:#0f172a; margin-bottom:1.5rem; }
.bv-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.bv-related-card {
  background:#f8faff; border:0.5px solid #e2e8f0;
  border-radius:14px; overflow:hidden;
  text-decoration:none; display:flex; flex-direction:column; transition:all .25s;
}
.bv-related-card:hover { border-color:#bfdbfe; box-shadow:0 6px 20px rgba(37,99,235,.08); transform:translateY(-2px); }
.bv-related-thumb { height:140px; background:linear-gradient(135deg,#1e293b,#0f172a); overflow:hidden; position:relative; }
.bv-related-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.bv-related-card:hover .bv-related-thumb img { transform:scale(1.05); }
.bv-related-thumb-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.bv-related-thumb-ph svg { width:28px; height:28px; color:rgba(255,255,255,.1); }
.bv-related-body { padding:1rem; flex:1; display:flex; flex-direction:column; gap:.375rem; }
.bv-related-cat { font-size:10px; font-weight:700; color:#2563EB; text-transform:uppercase; letter-spacing:.06em; }
.bv-related-post-title {
  font-family:'DM Serif Display',serif; font-size:14px; color:#0f172a; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  transition:color .15s;
}
.bv-related-card:hover .bv-related-post-title { color:#2563EB; }
.bv-related-date { font-size:11px; color:#94a3b8; margin-top:auto; }

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */
@media (max-width: 820px) {
  .bl-layout { grid-template-columns:1fr; }
  .bl-sidebar { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  .bv-related-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 760px) {
  .bv-article-layout { grid-template-columns:1fr; padding:1.5rem 1.25rem; gap:1.25rem; }
  .bv-share-sidebar {
    flex-direction:row; position:static;
    flex-wrap:wrap; justify-content:center; margin-bottom:1.5rem;
  }
  .bv-share-label { writing-mode:horizontal-tb; }
  .bv-prevnext { padding:0 1.25rem; grid-template-columns:1fr; }
  .bv-related { padding:2.5rem 1.25rem; }
  .bv-content { padding:1.5rem; }
  .bv-hero { padding:2.5rem 1.25rem; }
  .bv-related-grid { grid-template-columns:1fr; }
}

@media (max-width: 600px) {
  .bl-hero { padding:3rem 1.25rem; }
  .bl-layout { padding:1.5rem 1.25rem 0; gap:1.5rem; }
  .bl-card { flex-direction:column; }
  .bl-card-thumb { width:100%; height:180px; }
  .bl-card-body { padding:1.1rem; }
  .bl-card-title { font-size:16px; }
  .bl-sidebar { grid-template-columns:1fr; }
}