/* =========================================================
   Blog module — listing cards + article typography
   Loaded after style.min.css, uses existing design tokens
   ========================================================= */

/* ---- Listing grid ---- */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px,1fr));
  gap:32px;
}

.blog-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.blog-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md,0 20px 40px rgba(4,17,37,.12)); }
.blog-card .blog-card-img{
  display:block; width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--gray-100);
}
.blog-card .blog-card-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
.blog-card:hover .blog-card-img img{ transform:scale(1.05); }
.blog-card-body{ padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; }
.blog-card-meta{ display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--gold-dark); margin-bottom:12px; }
.blog-card-meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--border); }
.blog-card-meta .read-time{ color:var(--ink-soft); text-transform:none; font-weight:600; letter-spacing:0; }
.blog-card h3{ font-size:22px; line-height:1.3; margin-bottom:12px; }
.blog-card h3 a{ color:var(--ink); }
.blog-card h3 a:hover{ color:var(--navy); }
.blog-card p.excerpt{ color:var(--ink-soft); font-size:15px; margin-bottom:20px; flex:1; }
.blog-card .link{ font-size:14px; font-weight:700; color:var(--navy); display:inline-flex; align-items:center; gap:6px; }
.blog-card .link svg{ width:15px; height:15px; transition:transform .25s var(--ease); }
.blog-card:hover .link svg{ transform:translateX(4px); }

/* ---- Article page ---- */
.article-wrap{ max-width:780px; margin:0 auto; }
.article-meta-row{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-bottom:28px; margin-bottom:36px; border-bottom:1px solid var(--border);
}
.article-meta-row .avatar-sm{ width:52px; height:52px; border-radius:50%; overflow:hidden; flex-shrink:0; }
.article-meta-row .avatar-sm img{ width:100%; height:100%; object-fit:cover; display:block; }
.article-meta-row .who{ font-weight:700; color:var(--ink); font-size:15px; }
.article-meta-row .sub{ color:var(--ink-soft); font-size:13.5px; }

.article-body{ font-size:17px; line-height:1.75; color:var(--ink); }
.article-body h2{ font-size:28px; margin:44px 0 18px; }
.article-body h3{ font-size:21px; margin:34px 0 14px; }
.article-body p{ margin-bottom:20px; color:var(--ink-soft); }
.article-body ul, .article-body ol{ margin:0 0 20px 22px; color:var(--ink-soft); }
.article-body li{ margin-bottom:8px; }
.article-body a{ color:var(--navy); text-decoration:underline; text-decoration-color:var(--border); text-underline-offset:2px; }
.article-body a:hover{ text-decoration-color:var(--navy); }
.article-body strong{ color:var(--ink); }

.article-callout{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--gold-light); border:1px solid rgba(242,169,59,.35); border-left:4px solid var(--gold);
  border-radius:var(--radius-md); padding:18px 20px; margin:8px 0 32px; color:var(--ink);
  font-size:15.5px; line-height:1.65;
}
.article-callout svg{ width:22px; height:22px; flex-shrink:0; color:var(--gold-dark); margin-top:2px; }
.article-callout strong{ color:var(--navy-darker); }

.article-table-wrap{ overflow-x:auto; margin:0 0 28px; border:1px solid var(--border); border-radius:var(--radius-md); }
table.article-table{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px; }
table.article-table th{ background:var(--navy-darker); color:#fff; text-align:left; padding:12px 16px; font-weight:700; }
table.article-table td{ padding:12px 16px; border-top:1px solid var(--border); color:var(--ink-soft); }
table.article-table tr:nth-child(even) td{ background:var(--gray-50); }

.article-comparison-wrap{ overflow-x:auto; margin:0 0 28px; border:1px solid var(--border); border-radius:var(--radius-md); }

.source-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.source-list li{ font-size:14px; color:var(--ink-soft); padding-left:22px; position:relative; }
.source-list li::before{ content:"—"; position:absolute; left:0; color:var(--gold-dark); }
.source-list a{ color:var(--navy); font-weight:600; }

.article-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:36px; }
.article-tags span{ font-size:12.5px; font-weight:700; letter-spacing:.02em; background:var(--gray-100); color:var(--ink-soft); padding:6px 14px; border-radius:999px; }

.back-to-blog{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--navy); font-size:14.5px; margin-bottom:24px; }
.back-to-blog svg{ width:16px; height:16px; }