/* ============================================================
   Blog — listing + article pages (blog.html, blog-*.html)
   ============================================================ */

/* ---------- listing: category chips ---------- */
.blog-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(26px,3vw,40px)}
.blog-chip{
  min-height:40px;padding:0 18px;border:1px solid rgba(255,255,255,.22);border-radius:2px;
  background:transparent;color:var(--muted);font:inherit;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.blog-chip:hover{border-color:var(--red);color:#fff}
.blog-chip.is-active{background:var(--red);border-color:var(--red);color:#fff}
.blog-chip .n{opacity:.6;margin-left:6px}
.blog-list .post[hidden]{display:none}
.blog-list .post__tags{display:flex;flex-wrap:wrap;gap:6px}
.blog-empty{color:var(--muted);padding:30px 0}
@media (max-width:1024px) and (min-width:641px){
  .blog-list.grid--3{grid-template-columns:repeat(2,1fr)}
  .blog-list.grid--3 > .post:first-child{grid-column:1 / -1}
}

/* ---------- article helpers ---------- */
.article .blog-lede{color:var(--text);font-size:clamp(17px,1.45vw,20px);line-height:1.7;font-weight:300}
.article figure{margin:clamp(26px,3vw,42px) 0}
.article figure img{margin:0;width:100%;height:auto;display:block}
.article figcaption{margin-top:10px;font-size:12.5px;letter-spacing:.04em;color:var(--muted)}
.article a:not(.btn){color:var(--red-bright);text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.article a:not(.btn):hover{color:#fff}

.blog-figs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.4vw,18px);margin:clamp(26px,3vw,42px) 0}
.blog-figs figure{margin:0}
.blog-figs img{aspect-ratio:4/3;object-fit:cover}
.blog-figs--tall img{aspect-ratio:3/4}

/* award / highlight callout */
.blog-callout{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,26px);align-items:center;
  margin:clamp(26px,3vw,42px) 0;padding:clamp(20px,2.4vw,30px);
  background:var(--card);border:1px solid var(--border);border-left:2px solid var(--red);border-radius:3px;
}
.blog-callout__big{font-size:clamp(30px,3.6vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--text)}
.blog-callout__big small{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--red-bright);margin-top:8px}
.blog-callout p{margin:0}

/* strategy model (volume vs variety) */
.strat{margin:clamp(26px,3vw,42px) 0;padding:clamp(18px,2.4vw,30px);background:var(--card);border:1px solid var(--border);border-radius:3px}
.strat svg{width:100%;height:auto;display:block}
.strat__note{margin-top:16px;display:flex;gap:12px;align-items:flex-start;color:var(--text);font-weight:500;font-size:clamp(14px,1.2vw,16px)}
.strat__note::before{content:"";width:18px;height:2px;background:var(--red);margin-top:.7em;flex:none}

/* robot density bars */
.density{margin:clamp(26px,3vw,42px) 0;padding:clamp(20px,2.4vw,30px);background:var(--card);border:1px solid var(--border);border-radius:3px}
.density__title{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.density__row{display:grid;grid-template-columns:90px 1fr 64px;gap:14px;align-items:center;padding:9px 0}
.density__row + .density__row{border-top:1px solid var(--border)}
.density__c{font-size:14px;color:var(--text);font-weight:500}
.density__bar{height:10px;background:rgba(255,255,255,.06);border-radius:1px;overflow:hidden}
.density__bar i{display:block;height:100%;background:#5A636A;min-width:3px}
.density__row--hl .density__bar i{background:var(--red)}
.density__row--hl .density__c,.density__row--hl .density__v{color:var(--red-bright)}
.density__v{font-size:15px;font-weight:600;text-align:right;color:var(--text);font-variant-numeric:tabular-nums}
.density__src{margin-top:14px;font-size:12px;color:var(--muted)}

/* resource buttons (download / video / external) */
.blog-res{
  margin:clamp(30px,3.6vw,50px) 0 0;padding:clamp(20px,2.4vw,30px);
  background:var(--surface);border:1px solid var(--border);border-radius:3px;
}
.blog-res__h{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.blog-res__row{display:flex;flex-wrap:wrap;gap:12px}
.blog-res .btn{min-height:46px;padding:0 18px;font-size:10.5px;letter-spacing:.1em;gap:10px}
.blog-res .btn svg.ic{width:16px;height:16px;flex:none}
.blog-res .btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed}
.blog-res .btn[aria-disabled="true"]:hover{border-color:rgba(255,255,255,.28)}
.blog-res .soon{font-size:9.5px;letter-spacing:.14em;color:var(--muted);border-left:1px solid var(--border);padding-left:10px;margin-left:2px}

/* "Want to know more?" CTA */
.knowmore{
  position:relative;overflow:hidden;margin-top:clamp(34px,4vw,56px);
  padding:clamp(26px,3.4vw,44px);border:1px solid rgba(227,27,35,.4);border-radius:3px;
  background:radial-gradient(80% 120% at 100% 0%,rgba(227,27,35,.18) 0%,transparent 60%),var(--card);
}
.knowmore h2{font-size:clamp(24px,2.8vw,36px);letter-spacing:-.025em;margin:0 0 12px}
.knowmore p{color:var(--muted);max-width:56ch;margin:0 0 24px}
.knowmore__row{display:flex;flex-wrap:wrap;gap:12px}

/* article footer nav */
.blog-next{display:flex;gap:14px;flex-wrap:wrap}

@media (max-width:640px){
  .blog-figs{grid-template-columns:1fr}
  .blog-callout{grid-template-columns:1fr}
  .density__row{grid-template-columns:72px 1fr 52px;gap:10px}
  .blog-res .btn,.knowmore .btn,.blog-next .btn{width:100%;justify-content:center}
  .blog-res .soon{display:none}
}

/* article hero: long titles */
.phero--post h1{font-size:clamp(30px,4.6vw,64px);line-height:1.05;max-width:22ch}
.strat__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:640px){.strat__scroll svg{min-width:520px}}
.strat__hint{display:none;margin-top:10px;font-size:10px}
@media (max-width:640px){.strat__hint{display:block}}