/* Стили для статей блога. Используется в /landing/blog/*.html */

.art-wrap{max-width:760px;margin:0 auto;padding:48px 28px 80px;}
@media(max-width:760px){.art-wrap{padding:32px 20px 48px;}}

.art-meta{
  display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--mute);
}
.art-meta .tag{
  display:inline-block;padding:4px 10px;border-radius:999px;
  background:var(--paper);color:var(--ink-soft);
  border:1px solid var(--line);
}

.art-title{
  font-family:'Newsreader',Georgia,serif;font-weight:500;
  font-size:clamp(34px,4.5vw,52px);line-height:1.08;letter-spacing:-0.02em;
  margin:0 0 16px;color:var(--ink);
}
.art-title em{font-style:italic;color:var(--accent-deep);font-weight:500;}

.art-lede{
  font-size:19px;line-height:1.55;color:var(--ink-soft);
  margin:0 0 36px;font-weight:400;
}

.art-body h2{
  font-family:'Newsreader',Georgia,serif;font-weight:500;
  font-size:clamp(26px,3.2vw,34px);line-height:1.18;letter-spacing:-0.015em;
  margin:48px 0 16px;color:var(--ink);
  padding-top:12px;border-top:1px solid var(--line);
}
.art-body h2:first-of-type{padding-top:0;border-top:0;margin-top:36px;}
.art-body h2 em{font-style:italic;color:var(--accent-deep);font-weight:500;}

.art-body h3{
  font-family:'Manrope',sans-serif;font-weight:700;font-size:18px;
  margin:28px 0 10px;color:var(--ink);
}

.art-body p{font-size:17px;line-height:1.65;color:var(--ink);margin:0 0 16px;}

.art-body ul, .art-body ol{padding-left:22px;margin:0 0 18px;}
.art-body li{font-size:17px;line-height:1.6;color:var(--ink);margin-bottom:8px;}
.art-body li strong{color:var(--ink);}

.art-body a{color:var(--accent-deep);border-bottom:1px solid var(--line-strong);}
.art-body a:hover{color:var(--accent);}

.art-body blockquote{
  margin:24px 0;padding:18px 26px;background:var(--paper);
  border-left:3px solid var(--accent);border-radius:6px;
  font-size:17px;line-height:1.55;color:var(--ink-soft);
}
.art-body blockquote em{color:var(--ink);font-style:italic;}

/* Inline callouts */
.callout{
  margin:28px 0;padding:22px 26px;border-radius:14px;
  background:var(--paper);border:1px solid var(--line-strong);
}
.callout .lbl{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--accent-deep);margin-bottom:8px;font-weight:600;
}
.callout p{margin:0;font-size:16px;line-height:1.55;color:var(--ink);}
.callout.warn{background:#FDEDE8;border-color:#F5C9BD;}
.callout.warn .lbl{color:var(--accent-deep);}
.callout.tip{background:#E8F4EA;border-color:#B6DBC1;}
.callout.tip .lbl{color:var(--ok);}

/* CTA-блок внутри статьи */
.art-cta{
  margin:48px 0;padding:36px 32px;border-radius:18px;
  background:var(--ink);color:var(--canvas);
  display:flex;gap:24px;align-items:center;flex-wrap:wrap;
}
.art-cta .text{flex:1;min-width:220px;}
.art-cta .text h3{
  font-family:'Newsreader',serif;font-weight:500;font-size:24px;
  margin:0 0 8px;color:var(--canvas);letter-spacing:-0.01em;
}
.art-cta .text p{margin:0;font-size:15px;color:rgba(245,240,230,.7);line-height:1.5;}
.art-cta .btn{
  background:#2F6B4A;color:#fff;padding:16px 26px;border-radius:999px;
  font-weight:600;font-size:15px;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
  transition:background .2s,transform .2s;
}
.art-cta .btn:hover{background:#245238;transform:translateY(-2px);}

/* FAQ внутри статьи (с JSON-LD FAQPage) */
.art-faq{margin:36px 0;}
.art-faq details{
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:18px 22px;margin-bottom:12px;
}
.art-faq summary{
  font-family:'Newsreader',serif;font-size:18px;cursor:pointer;
  color:var(--ink);font-weight:500;line-height:1.3;
}
.art-faq details[open] summary{margin-bottom:12px;}
.art-faq p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-soft);}

/* Содержание (TOC) */
.art-toc{
  margin:0 0 36px;padding:22px 26px;background:var(--canvas-2);
  border-radius:14px;font-size:15px;
}
.art-toc .lbl{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--mute);margin-bottom:10px;
}
.art-toc ol{margin:0;padding-left:22px;}
.art-toc li{margin-bottom:6px;line-height:1.4;}
.art-toc a{color:var(--ink-soft);}
.art-toc a:hover{color:var(--accent);}

/* Низ статьи: related */
.art-related{
  margin-top:64px;padding-top:48px;border-top:2px solid var(--line);
}
.art-related h3{
  font-family:'Newsreader',serif;font-weight:500;font-size:24px;
  margin:0 0 24px;color:var(--ink);letter-spacing:-0.01em;
}
.art-related ul{list-style:none;padding:0;margin:0;display:grid;gap:16px;}
.art-related li a{
  display:block;padding:18px 22px;background:var(--paper);
  border:1px solid var(--line);border-radius:12px;color:var(--ink);
  transition:border-color .2s,transform .2s;
}
.art-related li a:hover{border-color:var(--ink);transform:translateX(4px);}
.art-related li a .lbl{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--mute);margin-bottom:6px;display:block;
}
.art-related li a .ttl{
  font-family:'Newsreader',serif;font-size:18px;font-weight:500;
  color:var(--ink);line-height:1.3;letter-spacing:-0.01em;
}

/* Индексная страница блога */
.blog-index{max-width:960px;margin:0 auto;padding:48px 32px 80px;}
.blog-grid{display:grid;gap:28px;margin-top:32px;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
.blog-card{
  display:block;background:var(--paper);border:1px solid var(--line);
  border-radius:18px;padding:32px 28px;color:var(--ink);
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.blog-card:hover{
  transform:translateY(-4px);border-color:var(--ink);
  box-shadow:0 20px 48px rgba(15,26,46,.10);
}
.blog-card .tag{
  display:inline-block;margin-bottom:14px;padding:4px 10px;border-radius:6px;
  background:var(--canvas-2);color:var(--ink-soft);
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:0.16em;text-transform:uppercase;font-weight:500;
}
.blog-card h3{
  font-family:'Newsreader',serif;font-weight:500;font-size:24px;line-height:1.2;
  margin:0 0 12px;color:var(--ink);letter-spacing:-0.01em;
}
.blog-card p{
  margin:0 0 16px;font-size:14.5px;color:var(--ink-soft);line-height:1.55;
}
.blog-card .meta{
  display:flex;gap:10px;font-size:12px;color:var(--mute);
}