/* ==========================================================================
   netts.io — Blog & Article styles
   /blog/css/blog.css
   Requires: /css/terminal.css (--tm-* tokens, .tm-win, .tm-section, etc.)
   ========================================================================== */


/* ==========================================================================
   BLOG LISTING  (.bl-*)
   ========================================================================== */

/* ----- filter bar ----- */
.bl-filter{padding:18px 22px;border-bottom:1px solid var(--tm-line);background:var(--tm-bg)}
.bl-filter__row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:var(--tm-mono);font-size:12px}
.bl-filter__row + .bl-filter__row{margin-top:12px;padding-top:12px;border-top:1px dashed var(--tm-line)}
.bl-filter__lbl{color:var(--tm-muted);text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;min-width:72px}

.bl-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--tm-line);border-radius:999px;background:var(--tm-bg-white);color:var(--tm-text);font-family:var(--tm-mono);font-size:11px;text-decoration:none;cursor:pointer;transition:all .15s}
.bl-chip:hover{border-color:var(--tm-blue);color:var(--tm-blue)}
.bl-chip.on{background:var(--tm-ink);color:#fff;border-color:var(--tm-ink)}
.bl-chip .count{color:var(--tm-muted);font-size:10px}
.bl-chip.on .count{color:#9aa4cc}
.bl-chip--tag{padding:4px 9px;font-size:10.5px}
.bl-chip--tag::before{content:"#";color:var(--tm-muted);margin-right:2px}
.bl-chip--tag.on::before{color:#7a96ff}

/* ----- column header ----- */
.bl-header{padding:14px 22px;display:grid;grid-template-columns:110px 90px 1.2fr 2fr 90px 28px;gap:18px;font-family:var(--tm-mono);font-size:10px;color:var(--tm-muted);text-transform:uppercase;letter-spacing:.12em;border-bottom:1px solid var(--tm-line);background:var(--tm-bg)}

/* ----- rows ----- */
.bl-listing{padding:0}
.bl-row{display:grid;grid-template-columns:110px 90px 1.2fr 2fr 90px 28px;gap:18px;align-items:center;padding:16px 22px;border-bottom:1px solid var(--tm-line);text-decoration:none;color:inherit;transition:background .12s;position:relative}
.bl-row:hover{background:var(--tm-bg)}
.bl-row:last-child{border-bottom:0}

.bl-row__date{font-family:var(--tm-mono);font-size:11px;color:var(--tm-muted);letter-spacing:.04em;white-space:nowrap}
.bl-row__cat{font-family:var(--tm-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;padding:3px 8px;border-radius:3px;display:inline-block;white-space:nowrap;text-align:center}
.bl-row__cat--tutorial {background:rgba(45,75,219,.1);  color:var(--tm-blue)}
.bl-row__cat--news     {background:rgba(14,159,110,.1); color:var(--tm-green)}
.bl-row__cat--changelog{background:rgba(139,92,246,.12);color:#8b5cf6}
.bl-row__cat--guide    {background:rgba(245,158,11,.12);color:#c97a0d}
.bl-row__cat--insight  {background:rgba(236,72,153,.1); color:#d9317a}

.bl-row__title{font-size:15px;font-weight:700;color:var(--tm-ink);letter-spacing:-.005em;line-height:1.35;text-wrap:balance}
.bl-row:hover .bl-row__title{color:var(--tm-blue)}
.bl-row__desc{font-size:13px;color:var(--tm-text-soft);line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bl-row__tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.bl-row__tag{font-family:var(--tm-mono);font-size:10px;color:var(--tm-muted)}
.bl-row__tag::before{content:"#"}
.bl-row__views{font-family:var(--tm-mono);font-size:11px;color:var(--tm-muted);text-align:right;white-space:nowrap}
.bl-row__views i{margin-right:3px;font-size:10px}
.bl-row__arrow{color:var(--tm-muted);font-size:14px;transition:transform .15s,color .15s}
.bl-row:hover .bl-row__arrow{color:var(--tm-blue);transform:translateX(2px)}

.bl-row--featured{background:linear-gradient(90deg,rgba(45,75,219,.03),transparent 40%)}
.bl-row--featured::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tm-blue)}
.bl-row--featured .bl-row__title::after{content:"FEATURED";margin-left:8px;font-family:var(--tm-mono);font-size:9px;background:var(--tm-blue);color:#fff;padding:2px 6px;border-radius:3px;letter-spacing:.1em;font-weight:700;vertical-align:middle}

/* ----- empty state ----- */
.bl-empty{padding:72px 22px;text-align:center;color:var(--tm-muted)}
.bl-empty i{font-size:42px;color:var(--tm-line);display:block;margin-bottom:14px}
.bl-empty h3{font-size:18px;font-weight:700;color:var(--tm-ink);margin:0 0 6px}
.bl-empty p{font-size:14px;margin:0 0 20px}

/* ----- pagination ----- */
.bl-pagination{display:flex;justify-content:center;gap:4px;margin-top:28px;font-family:var(--tm-mono);font-size:12px}
.bl-page{min-width:36px;height:36px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--tm-line);border-radius:var(--tm-radius-sm);color:var(--tm-text);text-decoration:none;background:var(--tm-bg-white);transition:all .15s}
.bl-page:hover{border-color:var(--tm-blue);color:var(--tm-blue)}
.bl-page.on{background:var(--tm-ink);color:#fff;border-color:var(--tm-ink)}
.bl-page.disabled{opacity:.4;pointer-events:none}
.bl-dots{display:inline-flex;align-items:center;padding:0 6px;color:var(--tm-muted)}


/* ==========================================================================
   ARTICLE PAGE  (.at-*)
   ========================================================================== */

/* ----- breadcrumb ----- */
.at-breadcrumb{padding:16px 22px;border-bottom:1px solid var(--tm-line);font-family:var(--tm-mono);font-size:11.5px;color:var(--tm-muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--tm-bg)}
.at-breadcrumb a{color:var(--tm-text);text-decoration:none}
.at-breadcrumb a:hover{color:var(--tm-blue)}
.at-breadcrumb .sep{color:var(--tm-line)}
.at-breadcrumb .cur{color:var(--tm-ink);font-weight:600;max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ----- header ----- */
.at-head{padding:36px 48px 30px;border-bottom:1px solid var(--tm-line)}
.at-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px;font-family:var(--tm-mono);font-size:11.5px;color:var(--tm-muted)}
.at-meta .cat{padding:4px 10px;border-radius:3px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;background:rgba(45,75,219,.1);color:var(--tm-blue)}
.at-meta .cat--tutorial {background:rgba(45,75,219,.1);  color:var(--tm-blue)}
.at-meta .cat--news     {background:rgba(14,159,110,.1); color:var(--tm-green)}
.at-meta .cat--changelog{background:rgba(139,92,246,.12);color:#8b5cf6}
.at-meta .cat--guide    {background:rgba(245,158,11,.12);color:#c97a0d}
.at-meta .cat--insight  {background:rgba(236,72,153,.1); color:#d9317a}
.at-meta i{margin-right:4px;opacity:.7}
.at-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--tm-line);display:inline-block}

.at-title{font-size:40px;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--tm-ink);margin:0 0 20px;text-wrap:balance;max-width:22ch}
.at-excerpt{font-size:18px;line-height:1.55;color:var(--tm-text);margin:0;max-width:62ch}

.at-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:22px}
.at-tag{font-family:var(--tm-mono);font-size:11px;color:var(--tm-muted);padding:3px 8px;border:1px solid var(--tm-line);border-radius:3px;text-decoration:none;background:var(--tm-bg)}
.at-tag:hover{border-color:var(--tm-blue);color:var(--tm-blue)}
.at-tag::before{content:"#";opacity:.55;margin-right:1px}

/* ----- featured image ----- */
.at-hero-img{padding:0;border-bottom:1px solid var(--tm-line);background:linear-gradient(135deg,#0b1020 0%,#1a2240 50%,#2d4bdb 100%);height:360px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.35);font-family:var(--tm-mono);font-size:12px;text-transform:uppercase;letter-spacing:.18em;position:relative;overflow:hidden}
.at-hero-img::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:32px 32px}
.at-hero-img span{position:relative;z-index:1;border:1px dashed rgba(255,255,255,.3);padding:14px 22px;border-radius:4px;background:rgba(0,0,0,.2)}

/* ----- body layout (prose + sticky TOC) ----- */
.at-body{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:60px;padding:40px 48px 52px;max-width:100%}

/* ----- prose ----- */
.at-prose{font-size:16.5px;line-height:1.7;color:var(--tm-text);max-width:72ch}
.at-prose > *+*{margin-top:1.1em}
.at-prose h2{font-size:26px;font-weight:800;color:var(--tm-ink);letter-spacing:-.015em;margin-top:1.8em;margin-bottom:.5em;line-height:1.25;scroll-margin-top:80px}
.at-prose h2::before{content:"§ ";color:var(--tm-muted);font-family:var(--tm-mono);font-size:16px;font-weight:600;margin-right:6px}
.at-prose h3{font-size:19px;font-weight:700;color:var(--tm-ink);margin-top:1.6em;margin-bottom:.4em;scroll-margin-top:80px}
.at-prose p{margin:0;text-wrap:pretty}
.at-prose a{color:var(--tm-blue);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.at-prose a:hover{text-decoration-thickness:2px}
.at-prose strong{color:var(--tm-ink);font-weight:700}
.at-prose code{font-family:var(--tm-mono);font-size:13.5px;background:var(--tm-bg);padding:2px 6px;border-radius:4px;color:var(--tm-ink);border:1px solid var(--tm-line)}
.at-prose pre{background:var(--tm-ink);color:#d4dafd;font-family:var(--tm-mono);font-size:13px;line-height:1.6;padding:18px 22px;border-radius:var(--tm-radius);overflow-x:auto;border:1px solid var(--tm-ink-soft)}
.at-prose pre code{background:transparent;border:0;color:inherit;padding:0;font-size:inherit}
.at-prose blockquote{border-left:3px solid var(--tm-blue);padding:6px 0 6px 20px;color:var(--tm-text);font-style:italic;background:linear-gradient(90deg,rgba(45,75,219,.04),transparent 70%);margin-left:0}
.at-prose ul,.at-prose ol{padding-left:22px}
.at-prose li{margin-top:.4em}
.at-prose li::marker{color:var(--tm-muted)}
.at-prose hr{border:0;border-top:1px dashed var(--tm-line);margin:2.2em 0}
.at-prose figure{margin:1.6em 0}
.at-prose figure img{width:100%;border-radius:var(--tm-radius);border:1px solid var(--tm-line)}
.at-prose figcaption{font-family:var(--tm-mono);font-size:11.5px;color:var(--tm-muted);margin-top:8px;text-align:center}
.at-prose table{width:100%;border-collapse:collapse;font-size:14px}
.at-prose th,.at-prose td{padding:10px 14px;border-bottom:1px solid var(--tm-line);text-align:left}
.at-prose th{font-family:var(--tm-mono);font-size:11px;color:var(--tm-muted);text-transform:uppercase;letter-spacing:.08em;background:var(--tm-bg)}
.at-prose img{max-width:100%;height:auto;border-radius:var(--tm-radius);border:1px solid var(--tm-line)}

/* ----- sticky TOC ----- */
.at-aside{position:sticky;top:20px;align-self:start;font-family:var(--tm-mono);font-size:12px}
.at-aside__lbl{font-size:10px;color:var(--tm-muted);text-transform:uppercase;letter-spacing:.14em;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--tm-line);display:flex;align-items:center;gap:7px}
.at-aside__lbl .dot{width:6px;height:6px;border-radius:50%;background:var(--tm-green)}
.at-toc{list-style:none;padding:0;margin:0}
.at-toc li{padding:4px 0;line-height:1.45}
.at-toc a{color:var(--tm-text-soft);text-decoration:none;display:block;padding:4px 8px;border-left:2px solid transparent;border-radius:0 4px 4px 0;transition:all .12s}
.at-toc a:hover{color:var(--tm-ink);background:var(--tm-bg)}
.at-toc a.on{color:var(--tm-blue);border-left-color:var(--tm-blue);background:var(--tm-bg);font-weight:600}
.at-toc li.l2 a{padding-left:18px;font-size:11.5px}

/* ----- share bar ----- */
.at-share{padding:28px 48px;border-top:1px solid var(--tm-line);border-bottom:1px solid var(--tm-line);display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--tm-bg)}
.at-share__lbl{font-family:var(--tm-mono);font-size:11px;color:var(--tm-muted);text-transform:uppercase;letter-spacing:.12em}
.at-share__btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--tm-line);border-radius:var(--tm-radius-sm);color:var(--tm-text);text-decoration:none;background:var(--tm-bg-white);font-family:var(--tm-mono);font-size:11.5px;transition:all .15s}
.at-share__btn:hover{border-color:var(--tm-blue);color:var(--tm-blue)}
.at-share__btn i{font-size:13px}
.at-share__copy{margin-left:auto;font-family:var(--tm-mono);font-size:11px;color:var(--tm-muted);display:flex;align-items:center;gap:7px;padding:8px 12px;border:1px dashed var(--tm-line);border-radius:var(--tm-radius-sm);background:var(--tm-bg);cursor:pointer}
.at-share__copy:hover{border-color:var(--tm-blue);color:var(--tm-blue);border-style:solid}

/* ----- prev / next ----- */
.at-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:24px 48px}
.at-nav a{display:block;padding:16px 20px;border:1px solid var(--tm-line);border-radius:var(--tm-radius);text-decoration:none;background:var(--tm-bg-white);transition:all .15s}
.at-nav a:hover{border-color:var(--tm-blue);background:var(--tm-bg)}
.at-nav a .lbl{font-family:var(--tm-mono);font-size:10.5px;color:var(--tm-muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px;display:block}
.at-nav a .ttl{font-size:14px;font-weight:700;color:var(--tm-ink);line-height:1.35;text-wrap:balance;display:block}
.at-nav a:hover .ttl{color:var(--tm-blue)}
.at-nav .next{text-align:right}

/* ----- related ----- */
.at-related{padding:36px 48px 44px;background:var(--tm-bg);border-top:1px solid var(--tm-line)}
.at-related__head{font-family:var(--tm-mono);font-size:11px;color:var(--tm-muted);text-transform:uppercase;letter-spacing:.14em;margin-bottom:18px;display:flex;align-items:center;gap:8px}
.at-related__head::before{content:"";width:6px;height:6px;background:var(--tm-blue);display:inline-block;border-radius:50%}
.at-related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.at-related__card{padding:18px 20px;background:var(--tm-bg-white);border:1px solid var(--tm-line);border-radius:var(--tm-radius);text-decoration:none;color:inherit;transition:all .15s;display:flex;flex-direction:column;gap:8px;min-height:140px}
.at-related__card:hover{border-color:var(--tm-blue);transform:translateY(-1px)}
.at-related__meta{font-family:var(--tm-mono);font-size:10.5px;color:var(--tm-muted);display:flex;gap:10px;align-items:center}
.at-related__meta .c{color:var(--tm-blue);text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.at-related__title{font-size:14.5px;font-weight:700;color:var(--tm-ink);line-height:1.35;margin-top:2px}
.at-related__card:hover .at-related__title{color:var(--tm-blue)}
.at-related__desc{font-size:12.5px;color:var(--tm-text-soft);line-height:1.5;margin-top:auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:980px){
  /* article */
  .at-body{grid-template-columns:1fr;gap:32px;padding:32px 28px}
  .at-aside{position:static;order:-1;border:1px solid var(--tm-line);padding:16px;border-radius:var(--tm-radius);background:var(--tm-bg)}
  .at-head{padding:28px 28px 24px}
  .at-share,.at-nav,.at-related{padding-left:28px;padding-right:28px}
  .at-title{font-size:30px}
  .at-related__grid{grid-template-columns:1fr}
  .at-hero-img{height:240px}
}

@media (max-width:960px){
  /* listing */
  .bl-row,.bl-header{grid-template-columns:90px 80px 1fr 32px}
  .bl-row__desc,.bl-row__views,.bl-header :nth-child(4),.bl-header :nth-child(5){display:none}
}

@media (max-width:640px){
  .bl-row,.bl-header{grid-template-columns:80px 1fr 24px;gap:12px;padding:14px 16px}
  .bl-row__cat,.bl-header :nth-child(2){display:none}
  .at-head{padding:24px 20px 20px}
  .at-breadcrumb{padding:12px 20px}
  .at-body{padding:24px 20px 32px}
  .at-share,.at-nav,.at-related{padding-left:20px;padding-right:20px}
  .at-nav{grid-template-columns:1fr}
  .at-nav .next{text-align:left}
  .at-title{font-size:26px}
  .at-excerpt{font-size:16px}
}