/* ════════════════════════════════════════════════════════════════
   BLOG / INSIGHTS — liquid-glass components
   Builds on css/style.css design tokens (:root) + Inter font.
   Used by: index.html (Home), category.html (Listing), article.html (Detail)
   ════════════════════════════════════════════════════════════════ */

/* ── shared section rhythm ── */
.bl-section{padding:64px 0}
.bl-section--tight{padding:40px 0 0}

/* ──────────────────────────────────────────────────────────
   BLOG HERO  (Home + Category share this)
   ────────────────────────────────────────────────────────── */
.bl-hero{padding:64px 0 28px;position:relative}
.bl-hero-inner{max-width:880px}
.bl-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-violet);
  padding:7px 14px;border-radius:999px;
  background:var(--glass-bg-soft);border:1px solid var(--glass-border);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  margin-bottom:18px;
}
.bl-eyebrow .dot{width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent-cyan),var(--accent-violet))}
.bl-hero h1{
  font-size:clamp(32px,4.6vw,54px);line-height:1.05;
  letter-spacing:-0.03em;font-weight:800;color:var(--accent-blue);
  margin:0 0 16px;
}
.bl-hero h1 .accent{
  background:linear-gradient(120deg,var(--accent-violet),var(--accent-cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.bl-hero-sub{
  font-size:clamp(15px,1.5vw,18px);line-height:1.6;color:var(--text-2);
  max-width:660px;margin:0;
}

/* ── breadcrumb (category + article) ── */
.bl-crumb{
  display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:13px;color:var(--text-2);margin-bottom:18px;
}
.bl-crumb a{color:var(--text-2);text-decoration:none;transition:color .2s}
.bl-crumb a:hover{color:var(--accent-violet)}
.bl-crumb svg{width:13px;height:13px;stroke:var(--text-2);stroke-width:2;
  fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
.bl-crumb .cur{color:var(--accent-blue);font-weight:600}

/* ──────────────────────────────────────────────────────────
   CATEGORY CHIPS  (filter row)
   ────────────────────────────────────────────────────────── */
.bl-cats{
  display:flex;flex-wrap:wrap;gap:10px;
  padding:26px 0 6px;
}
.bl-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:999px;
  font-size:13.5px;font-weight:600;letter-spacing:-0.005em;
  color:var(--text-2);text-decoration:none;
  background:var(--glass-bg-soft);border:1px solid var(--glass-border);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .25s ease,color .25s ease,box-shadow .25s ease;
}
.bl-chip:hover{transform:translateY(-2px);color:var(--accent-blue);
  box-shadow:var(--glass-shadow-soft)}
.bl-chip.is-active{
  color:#fff;border-color:transparent;
  background:linear-gradient(135deg,var(--accent-blue),var(--accent-violet));
  box-shadow:0 10px 24px -10px rgba(37,129,196,0.5);
}
.bl-chip .ct{font-size:11px;opacity:.65;font-weight:700}

/* ──────────────────────────────────────────────────────────
   POST GRID  (uniform, responsive)
   ────────────────────────────────────────────────────────── */
.bl-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  padding-top:30px;
}

/* ── post card ── */
.bl-card{
  display:flex;flex-direction:column;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);overflow:hidden;
  backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);
  box-shadow:var(--glass-shadow-soft);
  text-decoration:none;color:inherit;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;
  opacity:0;transform:translateY(22px);
}
.bl-card.in{opacity:1;transform:none}
.bl-card:hover{transform:translateY(-6px);box-shadow:var(--glass-shadow)}
.bl-card-media{position:relative;aspect-ratio:16/10;overflow:hidden}
.bl-card-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.bl-card:hover .bl-card-media img{transform:scale(1.06)}
.bl-card-tag{
  position:absolute;top:14px;left:14px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
  color:var(--accent-blue);
  background:rgba(255,255,255,0.82);border:1px solid var(--glass-border);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.bl-card-tag .dot{width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent-cyan),var(--accent-violet))}
.bl-card-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.bl-card-meta{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12.5px;color:var(--text-2);margin-bottom:11px;
}
.bl-card-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--text-2);opacity:.45}
.bl-card-title{
  font-size:19px;line-height:1.28;font-weight:700;letter-spacing:-0.02em;
  color:var(--accent-blue);margin:0 0 10px;
}
.bl-card-excerpt{
  font-size:14px;line-height:1.6;color:var(--text-2);margin:0 0 18px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.bl-card-more{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:700;color:var(--accent-violet);
}
.bl-card-more svg{width:14px;height:14px;stroke:var(--accent-violet);stroke-width:2.2;
  fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
.bl-card:hover .bl-card-more svg{transform:translateX(4px)}

/* ── featured (optional, used only if a card gets .bl-card--feat) ── */
.bl-card--feat{grid-column:span 2;flex-direction:row}
.bl-card--feat .bl-card-media{aspect-ratio:auto;flex:1.05;min-height:320px}
.bl-card--feat .bl-card-body{flex:1;justify-content:center;padding:34px 36px}
.bl-card--feat .bl-card-title{font-size:26px}
.bl-card--feat .bl-card-excerpt{-webkit-line-clamp:4;font-size:15px}

/* ──────────────────────────────────────────────────────────
   PAGINATION
   ────────────────────────────────────────────────────────── */
.bl-pagination{
  display:flex;justify-content:center;align-items:center;gap:8px;
  padding-top:50px;
}
.bl-page{
  min-width:42px;height:42px;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border-radius:12px;font-size:14px;font-weight:600;
  color:var(--text-2);text-decoration:none;
  background:var(--glass-bg-soft);border:1px solid var(--glass-border);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .25s ease,color .25s ease;
}
.bl-page:hover{transform:translateY(-2px);color:var(--accent-blue)}
.bl-page.is-active{color:#fff;border-color:transparent;
  background:linear-gradient(135deg,var(--accent-blue),var(--accent-violet))}
.bl-page svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.bl-page.is-disabled{opacity:.4;pointer-events:none}

/* ──────────────────────────────────────────────────────────
   CTA BLOCK  (closing band, all pages)
   ────────────────────────────────────────────────────────── */
.bl-cta-wrap{padding:30px 0 76px}
.bl-cta{
  position:relative;overflow:hidden;
  border-radius:var(--radius-xl);
  padding:54px 56px;
  background:linear-gradient(135deg,rgba(2,19,32,0.97),rgba(37,129,196,0.92));
  box-shadow:0 30px 70px -30px rgba(20,40,90,0.5);
  display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
}
.bl-cta::before{
  content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(168,230,240,0.35),transparent 70%);
  top:-120px;right:-60px;pointer-events:none;
}
.bl-cta-text{position:relative;z-index:1;max-width:560px}
.bl-cta-text .eb{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.65);margin:0 0 12px;
}
.bl-cta-text h2{
  font-size:clamp(24px,3vw,34px);line-height:1.12;letter-spacing:-0.025em;
  font-weight:800;color:#fff;margin:0 0 10px;
}
.bl-cta-text h2 .accent{color:#a8e6f0}
.bl-cta-text p{font-size:15px;line-height:1.6;color:rgba(255,255,255,0.8);margin:0}
.bl-cta-btn{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:10px;flex-shrink:0;
  padding:16px 30px;border-radius:999px;
  background:#fff;color:var(--accent-blue);text-decoration:none;
  font-size:15px;font-weight:700;letter-spacing:-0.01em;
  box-shadow:0 14px 30px -10px rgba(0,0,0,0.35);
  transition:transform .3s ease;
}
.bl-cta-btn:hover{transform:translateY(-3px)}
.bl-cta-btn svg{width:15px;height:15px;stroke:var(--accent-blue);stroke-width:2.4;
  fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ──────────────────────────────────────────────────────────
   ARTICLE  (detail page)
   ────────────────────────────────────────────────────────── */
.bl-art-hero{padding:48px 0 8px}
.bl-art-hero .bl-crumb{display:flex;justify-content:center}
.bl-art-head{max-width:800px;margin:0 auto;text-align:center}
.bl-art-cat{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.02em;
  color:#fff;border:1px solid transparent;
  background:linear-gradient(135deg,var(--accent-blue),var(--accent-violet));
  margin-bottom:18px;
}
.bl-art-cat .dot{width:6px;height:6px;border-radius:50%;background:#a8e6f0}
.bl-art-title{
  font-size:clamp(30px,4.2vw,50px);line-height:1.07;letter-spacing:-0.03em;
  font-weight:800;color:var(--accent-blue);margin:0 0 20px;
}
.bl-art-meta{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  max-width:800px;margin:0 auto;justify-content:center;padding-bottom:6px;
}
.bl-art-meta .bl-share{margin-left:0}
.bl-art-author{display:flex;align-items:center;gap:11px}
.bl-art-avatar{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent-cyan),var(--accent-violet));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:15px;
  box-shadow:var(--glass-shadow-soft);
}
.bl-art-author .nm{font-size:14px;font-weight:700;color:var(--accent-blue);line-height:1.2}
.bl-art-author .rl{font-size:12.5px;color:var(--text-2)}
.bl-art-dot{width:4px;height:4px;border-radius:50%;background:var(--text-2);opacity:.4}
.bl-art-metaitem{font-size:13px;color:var(--text-2)}

/* ── share buttons ── */
.bl-share{display:flex;align-items:center;gap:9px;margin-left:auto}
.bl-share-lbl{font-size:12.5px;color:var(--text-2);margin-right:2px}
.bl-share a{
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--glass-bg-soft);border:1px solid var(--glass-border);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .25s ease,box-shadow .25s ease;
}
.bl-share a:hover{transform:translateY(-2px);box-shadow:var(--glass-shadow-soft)}
.bl-share svg{width:16px;height:16px;fill:var(--accent-blue)}

/* ── featured image (wider than text, centered) ── */
.bl-art-media{max-width:1100px;margin:34px auto 8px}
.bl-art-media img{
  width:100%;border-radius:var(--radius-lg);display:block;
  box-shadow:var(--glass-shadow);
  aspect-ratio:16/8;object-fit:cover;
}
.bl-art-cap{font-size:12.5px;color:var(--text-2);text-align:center;margin-top:12px}

/* ── article body layout (single centered column) ── */
.bl-art-layout{padding:40px 0 0}

/* ── prose typography (centered column, text left-aligned) ── */
.bl-prose{max-width:800px;margin:0 auto;font-size:16.5px;line-height:1.75;color:#222b3d}
.bl-prose > *:first-child{margin-top:0}
.bl-prose p{margin:0 0 22px}
.bl-prose h2{
  font-size:27px;line-height:1.2;letter-spacing:-0.02em;font-weight:800;
  color:var(--accent-blue);margin:42px 0 16px;
}
.bl-prose h3{
  font-size:20px;line-height:1.3;letter-spacing:-0.015em;font-weight:700;
  color:var(--accent-blue);margin:32px 0 12px;
}
.bl-prose a{color:var(--accent-violet);text-decoration:underline;text-underline-offset:3px}
.bl-prose ul,.bl-prose ol{margin:0 0 22px;padding-left:24px}
.bl-prose li{margin-bottom:9px}
.bl-prose strong{color:var(--accent-blue);font-weight:700}
.bl-prose img{width:100%;border-radius:var(--radius);margin:14px 0 26px;box-shadow:var(--glass-shadow-soft)}
.bl-prose blockquote{
  margin:30px 0;padding:22px 26px;
  border-left:4px solid var(--accent-violet);
  background:var(--glass-bg-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:18px;line-height:1.6;color:var(--accent-blue);font-style:italic;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.bl-prose blockquote p:last-child{margin-bottom:0}
.bl-prose hr{border:0;height:1px;background:var(--line);margin:38px 0}

/* ── pull / info callout inside prose ── */
.bl-callout{
  display:flex;gap:16px;align-items:flex-start;
  padding:22px 24px;margin:30px 0;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:var(--radius);box-shadow:var(--glass-shadow-soft);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.bl-callout-ico{
  flex-shrink:0;width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent-blue),var(--accent-violet));
}
.bl-callout-ico svg{width:20px;height:20px;stroke:#fff;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.bl-callout p{margin:0;font-size:14.5px;line-height:1.6;color:var(--text-2)}
.bl-callout b{color:var(--accent-blue)}

/* ── aside / sticky TOC + meta ── */
.bl-aside{position:sticky;top:90px;display:flex;flex-direction:column;gap:20px}
.bl-aside-card{
  background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:var(--radius);padding:22px;box-shadow:var(--glass-shadow-soft);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.bl-aside-card h4{
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-2);margin:0 0 14px;
}
.bl-toc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.bl-toc a{
  display:block;padding:8px 12px;border-radius:10px;
  font-size:13.5px;line-height:1.4;color:var(--text-2);text-decoration:none;
  border-left:2px solid transparent;transition:all .2s ease;
}
.bl-toc a:hover{color:var(--accent-blue);background:var(--glass-bg-soft);
  border-left-color:var(--accent-violet)}
.bl-aside-cta{
  background:linear-gradient(135deg,var(--accent-blue),var(--accent-violet));
  border-radius:var(--radius);padding:24px;color:#fff;
  box-shadow:0 18px 40px -18px rgba(37,129,196,0.5);
}
.bl-aside-cta h4{color:rgba(255,255,255,0.7);margin-bottom:8px}
.bl-aside-cta p{font-size:15px;font-weight:700;line-height:1.35;margin:0 0 16px;color:#fff}
.bl-aside-cta a{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:999px;background:#fff;color:var(--accent-blue);
  font-size:13.5px;font-weight:700;text-decoration:none;transition:transform .25s ease;
}
.bl-aside-cta a:hover{transform:translateY(-2px)}
.bl-aside-cta svg{width:14px;height:14px;stroke:var(--accent-blue);stroke-width:2.4;
  fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ── tags + back row under article ── */
.bl-art-foot{
  max-width:800px;margin:44px auto 0;padding-top:28px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.bl-tags{display:flex;gap:9px;flex-wrap:wrap}
.bl-tag{
  font-size:12.5px;font-weight:600;color:var(--text-2);text-decoration:none;
  padding:7px 13px;border-radius:999px;
  background:var(--glass-bg-soft);border:1px solid var(--glass-border);
  transition:color .2s ease;
}
.bl-tag:hover{color:var(--accent-violet)}
.bl-back{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:700;color:var(--accent-blue);text-decoration:none;
}
.bl-back svg{width:15px;height:15px;stroke:var(--accent-blue);stroke-width:2.2;
  fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ── related posts ── */
.bl-related{padding:64px 0 0}
.bl-related-head{margin-bottom:8px}
.bl-related-head .eb{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-violet);margin:0 0 8px;
}
.bl-related-head h2{
  font-size:clamp(22px,2.6vw,30px);line-height:1.12;letter-spacing:-0.025em;
  font-weight:800;color:var(--accent-blue);margin:0;
}

/* ──────────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .bl-grid{grid-template-columns:repeat(2,1fr);gap:22px}
  .bl-card--feat{grid-column:span 2}
}
@media (max-width:780px){
  .bl-hero{padding:44px 0 18px}
  .bl-section{padding:46px 0}
  .bl-grid{grid-template-columns:1fr}
  .bl-card--feat{flex-direction:column}
  .bl-card--feat .bl-card-media{min-height:220px}
  .bl-cta{padding:38px 30px;flex-direction:column;align-items:flex-start;gap:26px}
  .bl-art-layout{padding-top:30px}
  .bl-prose{font-size:16px}
  .bl-share{margin-left:0;width:100%;margin-top:6px}
  .bl-art-foot{flex-direction:column;align-items:flex-start}
}
@media (max-width:480px){
  .bl-cta-btn{width:100%;justify-content:center}
  .bl-art-media img{aspect-ratio:16/11}
}

/* ════════════════════════════════════════════════════════════════
   WORDPRESS OVERRIDES
   Maps native WP output to the blog design system.
   ════════════════════════════════════════════════════════════════ */

/* WP paginate_links() output → pill buttons */
.bl-pagination .page-numbers{
  min-width:42px;height:42px;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border-radius:12px;font-size:14px;font-weight:600;
  color:var(--text-2);text-decoration:none;
  background:var(--glass-bg-soft);border:1px solid var(--glass-border);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .25s ease,color .25s ease;
}
.bl-pagination a.page-numbers:hover{transform:translateY(-2px);color:var(--accent-blue)}
.bl-pagination .page-numbers.current{
  color:#fff;border-color:transparent;
  background:linear-gradient(135deg,var(--accent-blue),var(--accent-violet));
}
.bl-pagination .page-numbers.dots{
  background:transparent;border:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* placeholder media (post without featured image) */
.bl-card-media.is-empty{background:linear-gradient(135deg,#dbeafe,#ede9fe)}
.bl-card-media.is-empty.alt{background:linear-gradient(135deg,#cffafe,#dbeafe)}
.bl-card-media.is-empty.alt2{background:linear-gradient(135deg,#ede9fe,#fce7f3)}

/* WP alignment helpers inside prose */
.bl-prose .aligncenter{display:block;margin-left:auto;margin-right:auto}
.bl-prose .alignright{float:right;margin:6px 0 18px 24px}
.bl-prose .alignleft{float:left;margin:6px 24px 18px 0}
.bl-prose .wp-caption-text,.bl-prose figcaption{font-size:13px;color:var(--text-2);text-align:center;margin-top:8px}
.bl-prose img{height:auto}

/* sticky-post / category badge tweaks already covered by .bl-card-tag */

/* empty state + page links */
.bl-empty{
  margin:30px 0 10px;padding:48px 32px;text-align:center;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);box-shadow:var(--glass-shadow-soft);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  color:var(--text-2);font-size:16px;
}
.bl-pagelinks{margin:28px 0 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  font-size:13px;font-weight:600;color:var(--text-2)}
.bl-pagelinks a{
  padding:6px 12px;border-radius:10px;text-decoration:none;color:var(--accent-blue);
  background:var(--glass-bg-soft);border:1px solid var(--glass-border);
}

/* simple page (static WP Page) hero spacing */
.bl-page-hero{padding:56px 0 8px}
.bl-page-hero .bl-art-title{margin-bottom:8px}