/* ===========================================================
   Insurance Life Galaxy — blog system components
   Loaded alongside calc-base.css (+ pages.css on article pages).
   Reuses existing tokens; adds only what those files don't
   already cover: article-grid cards (mirrors the homepage's
   .article-card), key-takeaway box, author block, tag chips,
   prev/next nav, and the blog hero.
   =========================================================== */

/* Blog hero (mirrors the main homepage hero, smaller) */
.blog-hero{padding:8px 0 12px;}
.blog-hero h1{font-size:clamp(30px,4vw,42px);line-height:1.1;margin:10px 0 14px;}
.blog-hero p.lede{color:var(--text-muted);font-size:16.5px;max-width:600px;}

/* Article card grid (same visual language as the homepage cards) */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.blog-grid.two-col{grid-template-columns:repeat(2,1fr);}
.blog-card{background:var(--card);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);transition:transform .18s ease, box-shadow .18s ease;}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(22,35,26,.25);}
.blog-card-thumb{aspect-ratio:16/10;background:linear-gradient(135deg,#dfe6d9,#eef0e6);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:12px;}
.blog-card-body{padding:22px;}
.blog-card-cat{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dark);font-weight:500;margin-bottom:10px;display:block;}
.blog-card-body h3{font-size:18px;line-height:1.3;margin-bottom:10px;font-family:var(--serif);}
.blog-card-meta{font-size:12.5px;color:var(--text-muted);margin-bottom:12px;}
.blog-card-excerpt{font-size:13.5px;color:var(--text-muted);line-height:1.55;margin-bottom:14px;}
.blog-card-read{font-size:13.5px;font-weight:700;}
.blog-card.placeholder{opacity:.72;}
.blog-card.placeholder .blog-card-read{color:var(--text-muted);}

/* Featured article — larger single card */
.featured-article{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:40px;}
.featured-article .blog-card-thumb{aspect-ratio:auto;height:100%;min-height:260px;}
.featured-article .blog-card-body{padding:32px;display:flex;flex-direction:column;justify-content:center;}
.featured-article .blog-card-body h3{font-size:24px;margin-bottom:12px;}
.featured-article .blog-card-excerpt{font-size:14.5px;margin-bottom:18px;}

/* Category navigation (reused topic-hub pattern) */
.cat-nav-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.cat-nav-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 16px;text-align:center;font-weight:600;font-size:14.5px;transition:border-color .15s ease, transform .15s ease;}
.cat-nav-card:hover{border-color:var(--gold);transform:translateY(-2px);}
.cat-nav-card.current{background:var(--ink);color:#fff;border-color:var(--ink);}

/* Key takeaway box (same visual family as disclaimer-box, different tone) */
.key-takeaway{background:var(--ivory-2);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--radius);padding:22px 26px;margin:28px 0;max-width:760px;}
.key-takeaway .eyebrow{margin-bottom:8px;}
.key-takeaway p{font-size:14.5px;color:var(--ink-soft);line-height:1.7;margin:0;}
.key-takeaway ul{margin:8px 0 0;padding-left:20px;}
.key-takeaway li{font-size:14.5px;color:var(--ink-soft);line-height:1.7;margin-bottom:6px;}

/* Author block (reusable, same on every article + About page) */
.author-block{display:flex;gap:18px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin:32px 0;max-width:760px;}
.author-block img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 20%;flex-shrink:0;}
.author-block .name{font-family:var(--serif);font-weight:600;font-size:16px;margin-bottom:2px;}
.author-block .role{font-size:12.5px;color:var(--text-muted);margin-bottom:8px;}
.author-block .bio{font-size:13px;color:var(--text-muted);line-height:1.55;margin-bottom:8px;}
.author-block a.link{font-size:13px;font-weight:700;}

/* Article meta row */
.article-meta-row{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--text-muted);margin:14px 0 24px;}
.article-meta-row span{display:inline-flex;align-items:center;gap:6px;}
.article-meta-row .dot{width:4px;height:4px;border-radius:50%;background:var(--text-muted);}

/* Tag chips */
.tag-chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0;}
.tag-chip{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--gold-dark);background:var(--ivory-2);border:1px solid var(--line);border-radius:20px;padding:6px 12px;font-weight:500;}
a.tag-chip:hover{border-color:var(--gold);}

/* Prev/next article nav */
.prev-next-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:40px 0;max-width:760px;}
.prev-next-nav a{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;transition:border-color .15s ease;}
.prev-next-nav a:hover{border-color:var(--gold);}
.prev-next-nav .direction{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);display:block;margin-bottom:6px;}
.prev-next-nav .title{font-size:14px;font-weight:700;color:var(--ink);}
.prev-next-nav.next{text-align:right;}

/* Placeholder-content banner (used only on the template-preview article) */
.template-notice{background:#fbf1ee;border:1px solid #f0d5cd;border-radius:var(--radius);padding:16px 22px;margin-bottom:28px;max-width:760px;}
.template-notice p{margin:0;font-size:13.5px;color:#9a3b28;line-height:1.6;}

@media (max-width:980px){
  .blog-grid{grid-template-columns:1fr;}
  .blog-grid.two-col{grid-template-columns:1fr;}
  .featured-article{grid-template-columns:1fr;}
  .cat-nav-grid{grid-template-columns:repeat(2,1fr);}
  .author-block{flex-direction:column;text-align:center;}
  .prev-next-nav{grid-template-columns:1fr;}
  .prev-next-nav.next{text-align:left;}
}