/* ============================================================================
   STAFFIVA — Blog (staffiva.com/blog): index cards, pager, article prose.
   Loaded AFTER staffiva-guides.css and BEFORE staffiva-landing.css (the
   layout links its own sheet last), so the article shell, crumbs, header and
   foot CTA come from the guides sheet and this file only adds what a stored
   article needs. Selectors that must beat a single-class landing rule use a
   combined class, the same convention the guides sheet documents.

   ARTICLE BODY HTML ARRIVES WITHOUT CLASSES. The ingest sanitizer
   (BlogHtmlSanitizer) strips class and style from every element, so the prose
   rules below style BARE tags under .blog-prose: every tag the allowlist lets
   through (p, h2 to h4, ul, ol, li, a, strong, em, b, i, blockquote, pre,
   code, table parts, figure, figcaption, img, hr, br) has a rule here.
   ============================================================================ */

/* ---- INDEX HERO ---- */
.blog-hub-hero.sec{padding:56px 0 8px;}
.blog-hub-hero h1{font-size:clamp(2rem,3.8vw,2.9rem); line-height:1.06; margin:0 0 16px; max-width:760px;}
.blog-hub-hero .lead{max-width:640px;}

/* ---- INDEX CARDS ---- */
.blog-hub-list.sec{padding:28px 0 84px;}
.blog-cards{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px;}
.blog-card{display:flex; min-width:0;}
.blog-card-link{display:flex; flex-direction:column; width:100%; overflow:hidden;
  background:color-mix(in srgb, var(--surface-card) 70%, transparent);
  border:1px solid var(--ghost-border-strong); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.blog-card-link:hover{transform:translateY(-3px); box-shadow:var(--shadow-card-hover);
  border-color:color-mix(in srgb, var(--purple-400) 45%, transparent);}
.blog-card-media{display:block; aspect-ratio:1200 / 630; background:var(--surface-low); overflow:hidden;}
.blog-card-media img{display:block; width:100%; height:100%; object-fit:cover;}
.blog-card-body{display:flex; flex-direction:column; align-items:flex-start; gap:9px; padding:22px 24px 22px; flex:1 1 auto;}
.blog-card-date{font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted);}
.blog-card-title{font-size:1.24rem; line-height:1.22; color:var(--text-primary); margin:0;}
.blog-card-summary{margin:0; font-size:14px; color:var(--text-secondary); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.blog-card-cta{margin-top:auto; padding-top:8px; font-family:var(--font-display); font-weight:700;
  font-size:13.5px; color:var(--primary-accent); transition:color .18s ease;}
.blog-card-link:hover .blog-card-cta{color:#fff;}

/* ---- PAGER ---- */
.blog-pager{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px; margin-top:36px;}
.blog-pager-status{font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted);}

/* ---- EMPTY STATE + GONE PAGE ---- */
.blog-empty{text-align:center; padding:40px 24px; border:1px dashed var(--ghost-border-strong);
  border-radius:var(--radius-xl); background:color-mix(in srgb, var(--surface-card) 45%, transparent);}
.blog-empty h2{font-size:1.4rem; margin:0 0 10px;}
.blog-empty p{max-width:480px; margin:0 auto 20px; color:var(--text-secondary);}
.blog-gone.sec{padding:72px 0 96px;}
.blog-gone-actions{justify-content:flex-start; margin-top:26px;}

/* ---- ARTICLE HEADER ---- */
.blog-article-meta{display:flex; flex-wrap:wrap; align-items:center; gap:4px 9px;}
.blog-hero{margin:0 0 34px;}
.blog-hero img{display:block; width:100%; height:auto; border-radius:var(--radius-lg);
  border:1px solid var(--ghost-border); background:var(--surface-low);}

/* ---- TABLE OF CONTENTS (ArticleChromeBuilder.BuildToc markup) ---- */
.blog-article .article-toc{margin:0 0 34px; padding:18px 22px; border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--surface-card) 62%, transparent);
  border:1px solid var(--ghost-border); border-left:3px solid var(--purple-400);}
.blog-article .article-toc-heading{font-family:var(--font-body); font-size:.75rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--purple-300); margin:0 0 10px;}
.blog-article .article-toc-list{margin:0; padding-left:1.3rem; display:grid; gap:6px; font-size:.96rem;}
.blog-article .article-toc-list a{color:var(--text-on-variant); font-weight:600;}
.blog-article .article-toc-list a:hover{color:#fff;}

/* ---- PROSE ---- */
.blog-prose{color:var(--text-secondary); font-size:1.04rem; line-height:1.75; overflow-wrap:break-word;}
.blog-prose > :first-child{margin-top:0;}
.blog-prose > :last-child{margin-bottom:0;}
/* The nav is sticky, so a heading reached by a table-of-contents anchor would land under it. */
.blog-prose h2, .blog-prose h3, .blog-prose h4{scroll-margin-top:96px;}
.blog-prose h2{font-size:1.5rem; color:var(--text-primary); margin:2.6rem 0 .9rem; line-height:1.2;}
.blog-prose h3{font-size:1.18rem; color:var(--text-on-surface); margin:2rem 0 .65rem; line-height:1.3;}
.blog-prose h4{font-size:1.02rem; color:var(--text-on-surface); margin:1.6rem 0 .5rem; line-height:1.35;}
.blog-prose p{margin:0 0 1.2rem;}
.blog-prose strong, .blog-prose b{color:var(--text-on-surface); font-weight:700;}
.blog-prose em, .blog-prose i{font-style:italic;}
.blog-prose a{color:var(--primary); font-weight:600; text-decoration:underline;
  text-decoration-color:color-mix(in srgb, var(--primary) 45%, transparent); text-underline-offset:2px;}
.blog-prose a:hover{color:var(--purple-300);}

/* lists: real markers (Markdig output carries no classes to hang custom bullets on) */
.blog-prose ul, .blog-prose ol{margin:0 0 1.3rem; padding-left:1.5rem;}
.blog-prose ul{list-style:disc;}
.blog-prose ol{list-style:decimal;}
.blog-prose li{margin:0 0 .5rem; padding-left:.2rem;}
.blog-prose li::marker{color:var(--purple-300);}
.blog-prose li > ul, .blog-prose li > ol{margin:.5rem 0 0;}
.blog-prose li > p{margin:0 0 .5rem;}

.blog-prose blockquote{margin:1.6rem 0; padding:14px 20px; border-radius:0 var(--radius-md) var(--radius-md) 0;
  border-left:3px solid var(--purple-400); background:color-mix(in srgb, var(--surface-card) 62%, transparent);
  color:var(--text-on-variant);}
.blog-prose blockquote > :last-child{margin-bottom:0;}

.blog-prose code{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.86em;
  background:color-mix(in srgb, var(--surface-high) 55%, transparent); border:1px solid var(--ghost-border);
  border-radius:6px; padding:2px 6px; color:var(--text-on-surface);}
.blog-prose pre{margin:0 0 1.4rem; padding:16px 18px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:var(--surface-lowest); border:1px solid var(--ghost-border-strong); border-radius:var(--radius-md);
  font-size:.9rem; line-height:1.6;}
.blog-prose pre code{background:none; border:0; padding:0; font-size:inherit; white-space:pre;}

/* Tables: the sanitizer allows no wrapper div, so the table itself becomes the scroll box on a phone. */
.blog-prose table{display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:0 0 1.5rem; border-collapse:collapse; font-size:14px;
  border:1px solid var(--ghost-border-strong); border-radius:var(--radius-md);
  background:color-mix(in srgb, var(--surface-card) 68%, transparent);}
.blog-prose th, .blog-prose td{padding:11px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--divider);}
.blog-prose thead th{font-family:var(--font-display); color:var(--text-primary); font-size:13.5px;
  background:color-mix(in srgb, var(--surface-low) 92%, transparent); border-bottom:1px solid var(--ghost-border-strong);}
.blog-prose tbody tr:last-child td{border-bottom:0;}

.blog-prose figure{margin:1.8rem 0;}
.blog-prose img{display:block; max-width:100%; height:auto; margin:1.6rem auto; border-radius:12px;}
.blog-prose figure img{margin:0 auto;}
.blog-prose figcaption{margin-top:10px; font-size:.86rem; color:var(--text-muted); text-align:center;}
.blog-prose hr{border:0; height:1px; margin:2.4rem 0; background:var(--ghost-border-strong);}

/* ---- MOTION SAFETY ---- */
@media (prefers-reduced-motion:reduce){
  .blog-card-link{transition:none;}
  .blog-card-link:hover{transform:none;}
}

/* ---- RESPONSIVE ---- */
@media (max-width:760px){
  .blog-cards{grid-template-columns:1fr;}
  .blog-prose{font-size:1rem;}
  .blog-prose h2{font-size:1.32rem;}
}
@media (max-width:480px){
  .blog-card-body{padding:18px 18px 20px;}
  .blog-pager .btn{width:100%;}
  .blog-gone-actions .btn{width:100%;}
}