/* =========================================================
   NoMore · единый шаблон статьи (2026-08-20)
   Контракт классов совпадает со старыми статьями блога
   (.article-shell / .breadcrumbs / .article-body / .seo-module /
    .card-grid / .link-card), но палитра — брендбучная.
   Используется публикатором core-next и, после миграции,
   существующими статьями.
   ========================================================= */

@import url("/assets/fonts/exo2.css");

:root{
  --article-accent: var(--nm-magenta, #f52f82);
  --article-ink: rgba(248,250,252,.94);
  --article-dim: rgba(226,232,240,.72);
  --article-line: rgba(148,163,184,.22);
  --article-card: rgba(0,31,69,.55);
}

/* акцент по вертикали — как на остальном сайте */
body[data-vertical="crypto"]{ --article-accent: var(--nm-emerald, #06b282); }
body[data-vertical="health"]{ --article-accent: var(--nm-lime, #8eb608); }
body[data-vertical="development"]{ --article-accent: var(--nm-cyan, #0dd8f5); }
body[data-vertical="ai"]{ --article-accent: var(--nm-purple-lt, #c689ea); }
body[data-vertical="travel"]{ --article-accent: var(--nm-blue-lt, #0e9bf4); }
body[data-vertical="entertainment"]{ --article-accent: var(--nm-magenta, #f52f82); }
body[data-vertical="education"]{ --article-accent: var(--nm-amber, #f99f06); }

body{
  margin:0;
  background: var(--bg, #001530);
  color: var(--article-ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height:1.6;
}

h1,h2,h3{
  font-family:"Exo 2", system-ui, sans-serif;
  font-weight:800;
  letter-spacing:-.02em;
}

.article-shell{
  max-width:1060px;
  margin:auto;
  padding:28px 20px 96px;
}

/* ---------- хлебные крошки ---------- */
.breadcrumbs ol{
  display:flex; flex-wrap:wrap; gap:8px;
  list-style:none; padding:0; margin:0 0 26px;
  color: var(--article-dim); font-size:14px;
}
.breadcrumbs li:not(:last-child)::after{
  content:"›"; margin-left:8px; opacity:.55;
}
.breadcrumbs a,
.article-body a,
.source-note a,
.article-foot a{ color: var(--article-accent); text-decoration:none; }
.breadcrumbs a:hover,
.article-body a:hover{ text-decoration:underline; }

/* ---------- переключатель языков ---------- */
.article-langs{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:0 0 30px;
  font-size:12px; color: var(--article-dim);
}
.article-langs__label{ text-transform:uppercase; letter-spacing:.12em; opacity:.75; }
.article-langs a,
.article-langs span[aria-current]{
  display:inline-flex; align-items:center;
  padding:5px 12px; border-radius:999px;
  border:1px solid var(--article-line);
  background: rgba(0,31,69,.42);
  color: var(--article-dim);
  font-weight:700; text-decoration:none;
}
.article-langs a:hover{ border-color: var(--article-accent); color: var(--article-ink); }
.article-langs span[aria-current]{
  border-color: var(--article-accent);
  color: var(--article-ink);
}

/* ---------- шапка статьи ---------- */
.article-header,
.article-body{ max-width:820px; }

.article-header h1{
  font-size:clamp(34px,6vw,64px);
  line-height:1.04;
  letter-spacing:-.045em;
  margin:12px 0 22px;
  color:#fff;
}
.article-header .lead{
  font-size:clamp(17px,2.4vw,21px);
  line-height:1.65;
  color: var(--article-dim);
  margin:0;
}
.article-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.article-meta span{
  padding:7px 11px;
  border:1px solid var(--article-line);
  border-radius:999px;
  color: var(--article-dim);
  font-size:13px;
}

/* ---------- тело статьи ---------- */
.article-body{ margin-top:52px; }
.article-body h2{
  font-size:clamp(25px,4vw,33px);
  line-height:1.2;
  margin:52px 0 18px;
  color:#fff;
}
.article-body h3{ font-size:22px; margin:34px 0 12px; }
.article-body p,
.article-body li{
  font-size:17px;
  line-height:1.82;
  color: rgba(226,232,240,.86);
}
.article-body blockquote{
  margin:28px 0;
  padding:14px 18px;
  border-left:3px solid var(--article-accent);
  background: rgba(0,31,69,.45);
  border-radius:0 14px 14px 0;
  color: var(--article-dim);
}
.article-body code{
  background: rgba(0,11,31,.75);
  padding:.15em .35em;
  border-radius:5px;
  font-size:.92em;
}
.article-body ul,.article-body ol{ padding-left:22px; }

.source-note{
  max-width:780px; margin:36px 0;
  padding:16px 18px;
  border:1px solid var(--article-line);
  border-radius:14px;
  background: var(--article-card);
  color: var(--article-dim);
  overflow-wrap:anywhere;
}

/* ---------- медиа-слоты публикатора ---------- */
figure{ margin:0; }
.media-card,.article-video-slot{ margin:26px 0; }
.media-box{
  border:1px solid var(--article-line);
  border-radius:18px;
  padding:24px;
  background: var(--article-card);
  color: var(--article-ink);
}
.media-placeholder .media-box{
  border-style:dashed;
  color: var(--article-dim);
}
.media-meta{ font-size:12px; opacity:.75; margin-top:6px; }
.media-note{ font-size:13px; margin-top:10px; opacity:.8; }
figcaption{ font-size:13px; color: var(--article-dim); margin-top:8px; }

/* ---------- SEO-модули (контракт старых статей) ---------- */
.seo-module{
  margin-top:70px;
  padding-top:34px;
  border-top:1px solid var(--article-line);
}
.seo-module h2{ font-size:28px; }
.card-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.link-card{
  display:flex; flex-direction:column; gap:10px;
  min-height:160px; padding:20px;
  border:1px solid var(--article-line);
  border-radius:18px;
  background: var(--article-card);
  color:inherit; text-decoration:none;
  transition: border-color .18s ease, transform .18s ease;
}
.link-card:hover{ border-color: var(--article-accent); transform:translateY(-2px); }
.link-card strong{ font-size:18px; color:#fff; }
.link-card span{ color: var(--article-dim); line-height:1.55; }
.link-card em{ margin-top:auto; color: var(--article-accent); font-style:normal; }
/* карточка инструмента — акцентная подложка */
.link-card.tool-card{
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--article-accent) 12%, rgba(0,31,69,.55)),
      rgba(0,11,31,.72));
}
body.theme-light .link-card.tool-card{
  background: linear-gradient(145deg,
      color-mix(in srgb, var(--article-accent) 10%, rgba(255,255,255,.85)),
      rgba(255,255,255,.72));
}

/* врезка внутри текста: предупреждение, уточнение, важная оговорка */
.article-body .note{
  margin:30px 0;
  padding:18px 20px;
  border:1px solid color-mix(in srgb, var(--article-accent) 34%, transparent);
  border-left-width:3px;
  border-radius:18px;
  background: color-mix(in srgb, var(--article-accent) 7%, var(--article-card));
  color: var(--article-ink);
  line-height:1.75;
}
.article-body .note-title{ font-weight:700; margin-bottom:4px; }
body.theme-light .article-body .note{
  background: color-mix(in srgb, var(--article-accent) 8%, rgba(255,255,255,.9));
}

/* карточка инструмента посреди текста, а не в сетке .card-grid */
.article-body .cta-card{
  display:flex;
  margin:36px 0;
  min-height:0;
}

/* код-блоки: горизонтальная прокрутка внутри блока,
   иначе длинная строка кода растягивает всю страницу на мобильных */
.article-body pre,
.article-body .sourceCode{
  margin:26px 0;
  padding:16px 18px;
  border:1px solid var(--article-line);
  border-radius:14px;
  background: rgba(0,11,31,.72);
  overflow-x:auto;
  max-width:100%;
}
.article-body pre code,
.article-body .sourceCode code{
  background:none;
  padding:0;
  font-size:14px;
  line-height:1.65;
  white-space:pre;
}
.article-body .sourceCode pre{
  margin:0; padding:0; border:0; background:none;
}
body.theme-light .article-body pre,
body.theme-light .article-body .sourceCode{
  background: rgba(2,6,23,.06);
  border-color: rgba(2,6,23,.12);
}

.faq-module details{ padding:17px 0; border-bottom:1px solid var(--article-line); }
.faq-module summary{ cursor:pointer; font-weight:700; }
.faq-module p{ margin-bottom:0; }

.article-foot{ margin-top:56px; font-size:14px; }

/* ---------- светлая тема ---------- */
body.theme-light[data-vertical="education"]{ --article-accent:#8f5c00; }
body.theme-light[data-vertical="health"]{ --article-accent:#526a04; }

body.theme-light{
  background:#e5f0ff;
  color: rgba(2,6,23,.88);
}
body.theme-light .article-header h1,
body.theme-light .article-body h2,
body.theme-light .link-card strong{ color:#04122b; }
body.theme-light .article-body p,
body.theme-light .article-body li,
body.theme-light .article-header .lead,
body.theme-light .article-meta span,
body.theme-light .breadcrumbs ol{ color: rgba(2,6,23,.74); }
body.theme-light .media-box,
body.theme-light .link-card,
body.theme-light .source-note,
body.theme-light .article-langs a{
  background: rgba(255,255,255,.72);
  border-color: rgba(2,6,23,.12);
}
body.theme-light .article-body code{ background: rgba(2,6,23,.08); }

/* ---------- мобильные ---------- */
@media (max-width:760px){
  .breadcrumbs{ overflow:hidden; }
  .breadcrumbs ol{ flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; }
  .article-header h1{ font-size:34px; }
  .card-grid{ grid-template-columns:1fr; }
  .article-shell{ padding-inline:16px; }
  .article-body p,.article-body li{ font-size:16px; }
}

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