/* Blog index (blog.html) and post pages (blog/*.html) */

.blog-hero{
  position:relative; padding:56px 0 44px;
  background: var(--indigo-soft); border-bottom:1px solid var(--line);
}
.blog-hero h1{
  font-family:'Instrument Sans', sans-serif; font-weight:600; font-size:clamp(34px, 5vw, 54px); line-height:1.03;
  letter-spacing:-0.01em; margin:16px 0 18px;
}
.blog-hero .lede{ font-size:17px; line-height:1.65; color: var(--ink-soft); max-width:640px; margin:0; }

/* "Learn" in the main nav lands on this page, so it doubles as the hub for the
   site's other learning material. */
.blog-start-here{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:22px; }
.blog-start-label{ font-size:13px; font-weight:700; color: var(--ink-soft); margin-right:4px; }
.blog-start-here a{
  font-size:13px; font-weight:700; padding:6px 14px; border-radius: var(--radius-pill);
  background: var(--white); border:1px solid var(--line); color: var(--indigo-dark);
  transition: background .15s ease, border-color .15s ease;
}
.blog-start-here a:hover{ background: var(--indigo-soft); border-color: var(--indigo); }

.blog-list-section{ padding:48px 0 90px; }
.blog-list{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:22px; }
.blog-list .empty-row{ grid-column:1/-1; text-align:center; padding:48px 16px; color: var(--ink-soft); font-size:15px; }

.blog-card{
  display:flex; flex-direction:column; gap:10px;
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-md);
  padding:26px 28px; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.blog-card:hover, .blog-card:focus-visible{
  transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(255,255,255,0.22);
}
.blog-card-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.blog-tag{
  font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color: var(--indigo-dark); background: var(--indigo-soft); border-radius: var(--radius-pill);
  padding:4px 10px;
}
.blog-card h2{ font-family:'Instrument Sans', sans-serif; font-size:22px; font-weight:600; margin:0; color: var(--ink); }
.blog-card p{ font-size:14.5px; line-height:1.65; color: var(--ink-soft); margin:0; flex:1; }
.blog-card-meta{ font-size:12.5px; color: var(--ink-soft); display:flex; gap:8px; align-items:center; margin-top:4px; }

/* ---------------- Individual post pages ---------------- */
.blog-post-meta{
  display:flex; gap:8px; align-items:center; font-size:13px; color: var(--ink-soft);
  margin-bottom:18px;
}
.blog-post-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px; }

.static-page .blog-post-nav{
  display:flex; gap:10px 20px; flex-wrap:wrap; margin-top:52px; padding-top:26px;
  border-top:1px solid var(--line);
}
.static-page .blog-post-nav a{ font-size:13.5px; font-weight:700; color:var(--ink-soft); }
.static-page .blog-post-nav a:hover{ color:var(--indigo-dark); }

.static-page .static-section ol{ margin:0 0 14px; padding-left:22px; list-style:decimal; }
.static-page .static-section ol li{ font-size:15px; line-height:1.75; color:var(--ink-soft); margin-bottom:10px; }
.static-page .static-section ol li strong{ color:var(--ink); }

.static-page .table-scroll{ margin:18px 0 26px; }
.static-page .blog-table{ width:100%; border-collapse:collapse; font-size:14px; }
.static-page .blog-table th{
  text-align:left; font-family:'Instrument Sans', sans-serif; font-weight:600; font-size:13px; color:var(--ink);
  padding:12px 16px; border-bottom:2px solid var(--line); white-space:nowrap;
}
.static-page .blog-table td{ padding:12px 16px; border-bottom:1px solid var(--line); color:var(--ink-soft); line-height:1.6; }
.static-page .blog-table tr:last-child td{ border-bottom:none; }

.static-page .blog-faq{ margin-top:8px; }
.static-page .blog-faq-item{ margin-bottom:20px; }
.static-page .blog-faq-item h3{ font-size:15.5px; font-weight:700; margin:0 0 6px; color:var(--ink); }
.static-page .blog-faq-item p{ font-size:15px; line-height:1.7; color:var(--ink-soft); margin:0; }

.static-page .blog-post-figure{
  margin:24px 0 30px; background:var(--white); border:1px solid var(--line);
  border-radius: var(--radius-md); padding:20px 16px;
}
.static-page .blog-post-figure svg{ width:100%; height:auto; display:block; }
.static-page .blog-post-figure .table-scroll{ background:transparent; border:none; }
.static-page .blog-post-figure-caption{ text-align:center; font-size:12.5px; color:var(--ink-soft); margin:10px 0 0; }

.static-page .blog-callout{
  background: var(--indigo-soft); border:1px solid rgba(139,127,255,0.35); border-radius: var(--radius-sm);
  padding:16px 18px; margin:0 0 14px; font-size:14.5px; line-height:1.7; color:var(--ink);
}
.static-page .blog-callout strong{ color:var(--indigo-dark); }

@media (max-width: 640px){
  .blog-list{ grid-template-columns: 1fr; }
  .blog-card{ padding:22px 22px; }
}