/* ============================================================================
   JNZ Insurance — Blog hub page styles
   ============================================================================
   Loaded only on /blog/. Depends on /styles.css being loaded first.
   Hero, header, footer, buttons, section backgrounds, section-head (and the
   --center modifier via the shared pattern), quote-cta, and scroll-reveal all
   come from /styles.css.

   This file owns: the empty-state panel shown before any articles publish,
   the "what we'll cover" topic-card grid, and the post-grid / post-card
   pattern that article cards will use once posts go live.
============================================================================ */

/* ============ Centered section-head modifier (mirror of about.css/coverage.css
   so /blog/ doesn't depend on either) ============ */
.section-head--center {
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.section-head--center .lede {
  margin-left: auto;
  margin-right: auto;
}

/* ============ Empty state (pre-launch) ============
   Remove this block's markup (between the BLOG-POSTS markers in index.html)
   when the first article publishes; these styles can stay harmlessly. */
.blog-empty {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-xl);
  padding: 56px 40px;
  background: var(--bg);
}
.blog-empty-icon {
  width: 56px; height: 56px;
  margin: 0 auto 20px;
  border-radius: 999px;
  background: rgba(23, 143, 139, 0.10);
  color: var(--jnz-teal);
  display: flex; align-items: center; justify-content: center;
}
.blog-empty-icon svg { width: 26px; height: 26px; }
.blog-empty h3 {
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--jnz-navy);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.blog-empty p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--jnz-slate);
  max-width: 460px;
  margin: 0 auto 28px;
}
.blog-empty-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============ Topic cards ("what we'll cover") ============ */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.topic-card {
  background: var(--bg);
  border: 1px solid rgba(18, 58, 92, 0.06);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.topic-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3);
}
.topic-card-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: rgba(46, 111, 149, 0.10);
  color: var(--jnz-blue);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.topic-card-icon svg { width: 20px; height: 20px; }
.topic-card h3 {
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--jnz-navy);
  letter-spacing: -0.005em;
  margin: 0 0 8px;
}
.topic-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--jnz-slate);
  margin: 0;
}

/* ============ Post grid (used once articles publish) ============
   Drop cards shaped like this between the BLOG-POSTS markers in index.html:

   <div class="post-grid reveal-stagger">
     <article class="post-card">
       <a href="/blog/article-slug/" class="post-card-image">
         <img src="/images/blog/article-slug.webp" alt="" loading="lazy" width="1200" height="675">
       </a>
       <div class="post-card-body">
         <div class="post-card-meta"><time datetime="2026-07-21">July 21, 2026</time> · Category</div>
         <h3 class="post-card-title"><a href="/blog/article-slug/">Article title</a></h3>
         <p class="post-card-excerpt">One- or two-sentence excerpt.</p>
         <a href="/blog/article-slug/" class="post-card-more">Read article &rarr;</a>
       </div>
     </article>
   </div>
*/
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.post-card {
  background: var(--bg);
  border: 1px solid rgba(18, 58, 92, 0.06);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3);
}
.post-card-image {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--bg-alt);
  overflow: hidden;
}
.post-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.post-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.post-card-meta {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--jnz-slate);
  margin-bottom: 10px;
}
.post-card-title {
  font-size: 19px;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.post-card-title a {
  color: var(--jnz-navy);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.post-card-title a:hover { color: var(--jnz-blue); }
.post-card-excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--jnz-slate);
  margin: 0 0 16px;
}
.post-card-more {
  margin-top: auto;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--jnz-blue);
  text-decoration: none;
}
.post-card-more:hover { color: var(--jnz-navy); text-decoration: underline; text-underline-offset: 2px; }

/* ============ Responsive ============ */
@media (max-width: 980px) {
  .topic-grid, .post-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (max-width: 600px) {
  .topic-grid, .post-grid { grid-template-columns: 1fr; }
  .blog-empty { padding: 40px 24px; }
  .blog-empty-actions .btn { width: 100%; justify-content: center; }
}