/* ============================================================
   AguTéc — Insights / Blog styles (the acquisition engine)
   Load after tokens.css + agutec.css
   ============================================================ */

/* ---------- Insights masthead ---------- */
.ins-head { padding:148px 0 8px; }
.ins-head .h1 { margin-top:18px; max-width:18ch; }
.ins-head .lead { margin-top:18px; max-width:60ch; }

/* pillar filter bar */
.filter-bar { display:flex; flex-wrap:wrap; gap:8px; margin-top:34px; padding-bottom:30px; border-bottom:1px solid var(--border); }
.filter-bar button { font:700 13.5px/1 var(--font-sans); color:var(--ink-600); background:var(--surface);
  border:1px solid var(--border-strong); border-radius:var(--radius-pill); padding:10px 16px; cursor:pointer;
  transition: all var(--dur-fast); }
.filter-bar button:hover { border-color:var(--agutec-blue); color:var(--agutec-blue); }
.filter-bar button.on { background:var(--ink-900); border-color:var(--ink-900); color:#fff; }

/* ---------- Featured article ---------- */
.featured { display:grid; grid-template-columns:1.15fr .85fr; gap:0; margin-top:40px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl);
  overflow:hidden; box-shadow:var(--shadow-sm); transition: box-shadow var(--dur-base); }
.featured:hover { box-shadow:var(--shadow-lg); }
.featured .f-visual { position:relative; background:var(--ink-900); min-height:340px; overflow:hidden; }
.featured .f-visual canvas { position:absolute; inset:0; }
.featured .f-tag { position:absolute; left:22px; top:20px; z-index:2; display:inline-flex; align-items:center; gap:8px;
  font:700 11px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:#fff;
  background:rgba(0,121,193,.9); border-radius:var(--radius-pill); padding:7px 13px; }
.featured .f-body { padding:44px; display:flex; flex-direction:column; justify-content:center; }
.featured .f-cat { font:700 11.5px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--agutec-blue); }
.featured h2 { margin:14px 0 0; font:var(--w-black) clamp(1.6rem,1.2rem+1.2vw,2.2rem)/1.14 var(--font-sans); letter-spacing:-.022em; }
.featured .f-ex { margin:16px 0 0; font:var(--text-body); color:var(--fg-2); }
.featured .f-meta { display:flex; align-items:center; gap:10px; margin-top:24px; font:400 12.5px/1 var(--font-mono); color:var(--fg-3); }
.featured .f-meta .dot { width:3px; height:3px; border-radius:50%; background:var(--ink-300); }

/* ---------- Insights body layout ---------- */
.ins-body { display:grid; grid-template-columns:1fr 312px; gap:56px; align-items:start; padding:64px 0 96px; }
.feed-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:24px; }
.feed-head h3 { font:var(--w-black) 20px/1 var(--font-sans); letter-spacing:-.01em; }
.feed-head .kicker { color:var(--fg-3); }

/* post cards */
.post-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.post-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; cursor:pointer;
  transition: box-shadow var(--dur-base), transform var(--dur-base), border-color var(--dur-base); }
.post-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--ink-200); }
.post-card .pc-visual { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--ink-900); }
.post-card .pc-visual canvas { position:absolute; inset:0; }
.post-card .pc-visual.grad-1 { background:linear-gradient(135deg,var(--deep-blue),var(--agutec-blue)); }
.post-card .pc-visual.grad-2 { background:linear-gradient(135deg,#2C3A4B,#18212E); }
.post-card .pc-visual.grad-3 { background:linear-gradient(135deg,var(--agutec-blue),var(--circuit-sky)); }
.post-card .pc-glyph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.post-card .pc-glyph svg { width:40px; height:40px; color:rgba(255,255,255,.85); stroke-width:1.6; }
.post-card .pc-body { padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.post-card .pc-cat { font:700 10.5px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--agutec-blue); }
.post-card h4 { margin:10px 0 0; font:700 17.5px/1.3 var(--font-sans); letter-spacing:-.012em; color:var(--fg); }
.post-card .pc-ex { margin:9px 0 0; font:400 13.5px/1.55 var(--font-sans); color:var(--fg-2); flex:1; }
.post-card .pc-meta { display:flex; align-items:center; gap:9px; margin-top:16px; font:400 11.5px/1 var(--font-mono); color:var(--fg-3); }
.post-card .pc-meta .dot { width:3px; height:3px; border-radius:50%; background:var(--ink-300); }

/* compact list rows (sidebar / category) */
.mini-list { display:grid; gap:2px; }
.mini-row { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--border); cursor:pointer; }
.mini-row:last-child { border-bottom:none; }
.mini-row .rank { font:var(--w-black) 16px/1 var(--font-mono); color:var(--ink-300); flex:none; width:22px; }
.mini-row .m-cat { font:700 10px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--agutec-blue); }
.mini-row h5 { margin:6px 0 0; font:700 14px/1.35 var(--font-sans); color:var(--fg); letter-spacing:-.01em; transition:color var(--dur-fast); }
.mini-row:hover h5 { color:var(--agutec-blue); }

/* ---------- Sidebar ---------- */
.side { position:sticky; top:96px; display:grid; gap:28px; }
.side-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; }
.side-card.sub { background:var(--ink-900); border-color:var(--ink-900); color:#fff; position:relative; overflow:hidden; }
.side-card.sub .banner-bg { position:absolute; inset:0; opacity:.1; background:url("../assets/agutec-banner.svg") center/cover no-repeat; }
.side-card.sub > * { position:relative; z-index:1; }
.side-h { font:700 11.5px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); margin:0 0 16px; }
.side-card.sub .side-h { color:var(--electric-blue); }
.pillar-list { display:grid; gap:2px; }
.pillar-link { display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--border); font:700 14.5px/1.2 var(--font-sans); color:var(--fg); transition:color var(--dur-fast); }
.pillar-link:last-child { border-bottom:none; }
.pillar-link:hover { color:var(--agutec-blue); }
.pillar-link .ct { font:500 12px/1 var(--font-mono); color:var(--ink-300); }
.side-card.sub h4 { font:var(--w-black) 20px/1.18 var(--font-sans); letter-spacing:-.02em; color:#fff; }
.side-card.sub p { margin:10px 0 18px; font:400 13.5px/1.55 var(--font-sans); color:var(--ink-300); }
.sub-form { display:flex; flex-direction:column; gap:10px; }
.sub-form input { width:100%; font:400 14px/1.4 var(--font-sans); padding:12px 13px; border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff; }
.sub-form input::placeholder { color:var(--ink-400); }
.sub-form input:focus { outline:none; border-color:var(--electric-blue); }
.tag-cloud { display:flex; flex-wrap:wrap; gap:8px; }
.tag-cloud a { font:500 12px/1 var(--font-mono); color:var(--fg-2); background:var(--surface-sunken);
  border-radius:var(--radius-pill); padding:7px 12px; transition: all var(--dur-fast); }
.tag-cloud a:hover { background:var(--info-bg); color:var(--agutec-blue); }

/* ---------- Article ---------- */
.article-wrap { display:grid; grid-template-columns:minmax(0,1fr); }
.art-hero { padding:140px 0 0; }
.crumb { display:inline-flex; align-items:center; gap:8px; font:700 13px/1 var(--font-mono); color:var(--agutec-blue); }
.crumb svg { width:15px; height:15px; }
.art-head { margin:22px 0 0; }
.art-head .a-cat { font:700 12px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--agutec-blue); }
.art-head h1 { margin:16px 0 0; font:var(--w-black) clamp(2.1rem,1.5rem+2vw,3.1rem)/1.08 var(--font-sans); letter-spacing:-.03em; max-width:20ch; }
.art-head .a-dek { margin:20px 0 0; font:var(--text-body-lg); color:var(--fg-2); max-width:56ch; }
.byline { display:flex; align-items:center; gap:14px; margin:28px 0 0; flex-wrap:wrap; }
.byline .avatar { width:46px; height:46px; border-radius:50%; background:var(--ink-900); display:flex; align-items:center; justify-content:center; overflow:hidden; flex:none; }
.byline .avatar img { width:34px; }
.byline .who { font:700 14.5px/1.3 var(--font-sans); color:var(--fg); }
.byline .role { font:400 12.5px/1.3 var(--font-mono); color:var(--fg-3); margin-top:3px; }
.byline .sep { width:1px; height:30px; background:var(--border); }
.byline .meta { font:400 12.5px/1.5 var(--font-mono); color:var(--fg-3); }
.art-tags { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 0; }
.art-tags a { font:500 12px/1 var(--font-mono); color:var(--fg-2); background:var(--surface-sunken); border-radius:var(--radius-pill); padding:7px 12px; transition: all var(--dur-fast); }
.art-tags a:hover { background:var(--info-bg); color:var(--agutec-blue); }
.art-cover { margin:34px 0 0; aspect-ratio:21/9; border-radius:var(--radius-xl); overflow:hidden; position:relative; background:var(--ink-900); }
.art-cover canvas { position:absolute; inset:0; }
.art-cover .cap { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 22px; font:400 12px/1.4 var(--font-mono); color:var(--ink-300); background:linear-gradient(0deg,rgba(14,21,30,.85),transparent); }

/* article layout: TOC rail + prose */
.art-grid { display:grid; grid-template-columns:1fr; gap:0; padding:48px 0 0; }
.toc-rail { display:none; }
@media (min-width:1100px) {
  .art-grid { grid-template-columns:230px minmax(0,720px); gap:64px; justify-content:center; }
  .toc-rail { display:block; }
}
.toc { position:sticky; top:104px; }
.toc .side-h { margin-bottom:14px; }
.toc ul { list-style:none; margin:0; padding:0; display:grid; gap:2px; border-left:2px solid var(--border); }
.toc a { display:block; padding:7px 0 7px 16px; margin-left:-2px; border-left:2px solid transparent;
  font:500 13px/1.4 var(--font-sans); color:var(--fg-3); transition: color var(--dur-fast), border-color var(--dur-fast); }
.toc a:hover, .toc a.active { color:var(--agutec-blue); border-left-color:var(--agutec-blue); }

/* prose */
.prose { max-width:720px; }
.prose > * { margin-inline:auto; }
.prose p { font:400 19px/1.78 var(--font-sans); color:var(--ink-800); margin:0 0 24px; }
.prose p.intro { font:400 22px/1.7 var(--font-sans); color:var(--fg); }
.prose h2 { font:var(--w-black) 28px/1.2 var(--font-sans); letter-spacing:-.022em; color:var(--fg); margin:52px 0 16px; scroll-margin-top:100px; }
.prose h3 { font:700 21px/1.3 var(--font-sans); letter-spacing:-.012em; color:var(--fg); margin:36px 0 12px; scroll-margin-top:100px; }
.prose ul, .prose ol { margin:0 0 24px; padding-left:24px; }
.prose li { font:400 18px/1.7 var(--font-sans); color:var(--ink-800); margin:0 0 10px; }
.prose li::marker { color:var(--agutec-blue); }
.prose a.link { color:var(--agutec-blue); border-bottom:1.5px solid color-mix(in srgb,var(--agutec-blue) 30%,transparent); transition: border-color var(--dur-fast); }
.prose a.link:hover { border-bottom-color:var(--agutec-blue); }
.prose strong { font-weight:700; color:var(--fg); }
.prose code.inl { font:500 .85em/1 var(--font-mono); background:var(--surface-sunken); color:var(--deep-blue); padding:.15em .4em; border-radius:var(--radius-xs); }

.pullquote { margin:40px 0; padding:6px 0 6px 28px; border-left:3px solid var(--agutec-blue); }
.pullquote blockquote { margin:0; }
.pullquote p { font:700 italic 25px/1.42 var(--font-sans); letter-spacing:-.012em; color:var(--fg); margin:0; }
.pullquote figcaption { margin-top:14px; }
.pullquote cite { display:block; margin-top:14px; font:400 13.5px/1 var(--font-mono); color:var(--fg-3); font-style:normal; }
.pullquote figcaption cite { margin-top:0; }

/* key-takeaways callout */
.callout { margin:38px 0; border:1px solid var(--border); border-left:3px solid var(--agutec-blue);
  border-radius:var(--radius-md); background:var(--surface-2); padding:24px 28px; }
.callout .c-h { display:flex; align-items:center; gap:9px; font:700 12px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--agutec-blue); }
.callout .c-h svg { width:16px; height:16px; }
.callout .c-body { margin-top:14px; }
.callout .c-body > :first-child { margin-top:0; }
.callout .c-body > :last-child { margin-bottom:0; }
.callout p { font:400 16px/1.6 var(--font-sans); color:var(--ink-800); margin:0 0 10px; }
.callout ul { margin:0; padding-left:20px; }
.callout li { font:400 16px/1.6 var(--font-sans); color:var(--ink-800); margin:0 0 8px; }

/* code block */
.codeblock { margin:30px 0; background:#0E151E; border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-md); overflow:hidden; }
.codeblock .cb-bar { display:flex; align-items:center; gap:8px; padding:11px 16px; border-bottom:1px solid rgba(255,255,255,.07); font:500 12px/1 var(--font-mono); color:var(--ink-300); }
.codeblock .cb-lang { margin-left:auto; color:var(--circuit-sky); }
.codeblock .highlight { margin:0; background:transparent; }
.codeblock pre { margin:0; padding:18px 20px; font:var(--text-code); color:#cdd6e0; overflow-x:auto; }
.codeblock code { font:inherit; }
.codeblock .kw{color:#68BFFF;} .codeblock .fn{color:#5EC8F2;} .codeblock .str{color:#FFC72C;} .codeblock .cm{color:#7C8DA0;} .codeblock .nm{color:#fff;} .codeblock .ok{color:#5fd6a0;}

/* pipeline diagram */
.figure { margin:34px 0; }
.diagram { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-md); padding:30px 24px; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.dnode { display:flex; flex-direction:column; align-items:center; gap:9px; min-width:84px; }
.dnode .db { width:60px; height:60px; border-radius:var(--radius-md); background:var(--info-bg); display:flex; align-items:center; justify-content:center; }
.dnode .db svg { width:26px; height:26px; color:var(--agutec-blue); }
.dnode span { font:700 11.5px/1.3 var(--font-sans); color:var(--fg-2); text-align:center; }
.darrow { color:var(--ink-300); display:flex; }
.darrow svg { width:22px; height:22px; }
.figcap { text-align:center; font:400 13px/1.5 var(--font-mono); color:var(--fg-3); margin-top:14px; }

/* author bio + share */
.art-foot { max-width:720px; margin:56px auto 0; }
.author-card { display:flex; gap:18px; padding:26px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface-2); }
.author-card .avatar { width:60px; height:60px; border-radius:50%; background:var(--ink-900); display:flex; align-items:center; justify-content:center; flex:none; }
.author-card .avatar img { width:42px; }
.author-card .a-name { font:700 16px/1.2 var(--font-sans); color:var(--fg); }
.author-card .a-role { font:400 12.5px/1.3 var(--font-mono); color:var(--fg-3); margin-top:4px; }
.author-card .a-bio { font:400 14px/1.6 var(--font-sans); color:var(--fg-2); margin:10px 0 0; }

/* related */
.related { padding:72px 0 96px; background:var(--ink-50); margin-top:64px; }

/* ---------- Category header ---------- */
.cat-head { padding:148px 0 56px; position:relative; overflow:hidden; }
.cat-head.navy { background:var(--ink-900); color:#fff; }
.cat-head.navy canvas { position:absolute; inset:0; z-index:0; opacity:.7; }
.cat-head .wrap { position:relative; z-index:1; }
.cat-head .c-eyebrow { font:700 12px/1 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--electric-blue); }
.cat-head h1 { margin:18px 0 0; font:var(--w-black) clamp(2.2rem,1.6rem+2vw,3.4rem)/1.06 var(--font-sans); letter-spacing:-.03em; color:#fff; }
.cat-head p { margin:18px 0 0; font:var(--text-body-lg); color:var(--ink-300); max-width:60ch; }
.cat-stats { display:flex; gap:34px; margin-top:32px; }
.cat-stats .cs .n { font:var(--w-black) 1.6rem/1 var(--font-sans); color:#fff; }
.cat-stats .cs .l { font:400 12px/1.3 var(--font-mono); color:var(--ink-400); margin-top:6px; }

@media (max-width: 980px) {
  .ins-body { grid-template-columns:1fr; gap:48px; }
  .side { position:static; }
  .featured { grid-template-columns:1fr; }
  .featured .f-visual { min-height:220px; }
}
@media (max-width: 640px) {
  .post-grid { grid-template-columns:1fr; }
  .featured .f-body { padding:30px 24px; }
}