/* blog-article-2617.css — оглавление и типографика статей блога/новостей
   в духе yusmpgroup.ru (art-layout / art-toc / art-prose), в токенах тёмной
   темы new.yusmpgroup.com. Подключается ПОСЛЕ blog.css только на статьях,
   которые обработал projects/new-com-2617/c/apply.py (маркер x2617-blog).
   Скроллспай и мобильное сворачивание — assets/js/blog-toc-2617.js. */

/* ---------- Двухколоночный макет: текст + липкая правая колонка ---------- */
.article-wrap{grid-template-columns:minmax(0,1fr) 300px;gap:52px}
.x2617-wrap{max-width:none;padding:0}            /* шаблон blog-post: уже внутри .container */
.article-aside{position:sticky;top:calc(var(--header-h,72px) + 16px);min-width:0;
  display:flex;flex-direction:column;gap:20px;max-height:calc(100vh - var(--header-h,72px) - 36px)}
.article-aside > .x2617-toc{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0}
.article-aside > .aside-card{flex:0 0 auto}

/* ---------- Оглавление (карточка «Содержание») ---------- */
nav.x2617-toc{display:block;height:auto;background:var(--bg-2,#0b0f1a);border:1px solid var(--line,#212a3d);
  border-radius:16px;padding:18px 18px 20px;color:var(--ink,#e8ecf6)}
.x2617-toc .article-toc__title{display:flex;align-items:center;gap:10px;margin:0 0 12px;
  font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft,#a3accb)}
.x2617-toc .article-toc__title::before{content:"";width:20px;height:2px;background:var(--blue,#3f6bff);flex:0 0 auto}
.x2617-toc__btn{display:none}
.x2617-toc ol{list-style:none;margin:0;padding:0;counter-reset:x2617;display:flex;flex-direction:column;gap:3px}
.x2617-toc li{margin:0;padding:0 0 0 28px;position:relative;counter-increment:x2617;list-style:none}
.x2617-toc li::before{content:counter(x2617,decimal-leading-zero);position:absolute;left:0;top:5px;
  font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--blue,#3f6bff);opacity:.7}
.x2617-toc li a{display:block;padding-block:3px;font-size:14.5px;font-weight:500;line-height:1.35;
  color:var(--blue-ink,#8aa5ff);text-decoration:none;transition:color .15s}
.x2617-toc li a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.x2617-toc li a:focus-visible{outline:2px solid var(--blue-text,#6E90FF);outline-offset:2px;border-radius:4px}
.x2617-toc li a.is-active{color:#fff;font-weight:600}
.x2617-toc li:has(a.is-active)::before{opacity:1;color:var(--blue-text,#6E90FF)}
.x2617-toc::-webkit-scrollbar{width:6px}
.x2617-toc::-webkit-scrollbar-thumb{background:var(--line,#212a3d);border-radius:3px}

/* ---------- Главная карточка-CTA правой колонки (как .art-aside-cta) ---------- */
.article-aside .aside-card.x2617-cta{background:var(--card,#0f1420);
  background-image:radial-gradient(130% 130% at 100% 0,rgba(46,92,242,.50),transparent 58%);
  border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:24px 22px;box-shadow:none}
.x2617-cta .aside-card__title{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--blue-ink,#8aa5ff);margin:0 0 10px}
.x2617-cta h3{font-size:21px;line-height:1.22;font-weight:600;letter-spacing:-.01em;margin:0 0 10px;color:#fff}
.x2617-cta p{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.72);margin:0 0 18px}
.x2617-cta a.btn{display:flex!important;justify-content:center;width:100%;text-align:center}

/* ---------- Вторичные карточки колонки («Related / Read next») — под статьёй ---------- */
.x2617-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px;margin:40px 0 8px}
.x2617-more .aside-card{background:var(--bg-2,#0b0f1a);border:1px solid var(--line,#212a3d);border-radius:16px;box-shadow:none;padding:20px 22px}
.x2617-more .aside-card h3{font-size:18px;font-weight:600;margin:0 0 10px}
.x2617-more .aside-card p{margin:0;font-size:15px;line-height:1.7}
.x2617-more .aside-card a.btn{display:inline-flex!important}

/* ---------- Типографика статьи (как .art-prose) ---------- */
.article-body{font-size:17.5px;line-height:1.7;color:var(--ink-soft,#a3accb);overflow-wrap:anywhere}
.article-body > p,.article-body .faq-item p,.article-body li{color:var(--ink-soft,#a3accb)}
.article-body p{margin:0 0 18px}
.article-body strong,.article-body b{color:var(--ink,#e8ecf6);font-weight:600}
.article-body h2{font-family:var(--ff-display,inherit);font-weight:600;font-size:clamp(24px,3vw,31px);
  line-height:1.22;letter-spacing:-.02em;margin:44px 0 14px;color:var(--ink,#e8ecf6);scroll-margin-top:8px}
.article-body h3{font-family:var(--ff-display,inherit);font-weight:600;font-size:21px;line-height:1.3;
  letter-spacing:-.02em;margin:30px 0 10px;color:var(--ink,#e8ecf6);scroll-margin-top:8px}
.article-body h4{font-size:17px;font-weight:600;margin:22px 0 8px;color:var(--ink,#e8ecf6)}
.article-body a:not(.btn){color:var(--blue-ink,#8aa5ff);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.article-body a:not(.btn):hover{color:#fff}
.article-body pre,.article-body pre code{overflow-wrap:normal}

/* списки: маркированные — «галочка в кружке», нумерованные — компактный столбец */
.article-body > ul,.article-body .tldr ul,.article-body .x2617-list{list-style:none;margin:0 0 20px;padding:0;
  display:flex;flex-direction:column;gap:11px}
.article-body > ul > li,.article-body .tldr ul > li{position:relative;margin:0;padding-left:30px;font-size:16.5px}
.article-body > ul > li::before,.article-body .tldr ul > li::before{content:"";position:absolute;left:0;top:.3em;
  width:18px;height:18px;border-radius:50%;background:var(--tint,rgba(63,107,255,.12));border:1px solid var(--blue,#3f6bff);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238aa5ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:12px;background-repeat:no-repeat;background-position:center}
.article-body > ol{margin:0 0 20px;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.article-body > ol > li{margin:0}
.article-body > ol > li::marker{color:var(--blue-ink,#8aa5ff);font-weight:700}

/* цитаты, TL;DR, выноски */
.article-body blockquote{margin:22px 0;padding:16px 22px;border-left:3px solid var(--blue,#3f6bff);
  background:var(--tint,rgba(63,107,255,.12));border-radius:0 12px 12px 0;color:var(--ink,#e8ecf6)}
.article-body blockquote p{margin:0;color:var(--ink,#e8ecf6)}
.article-body .tldr{margin:8px 0 24px;padding:20px 24px;background:var(--bg-2,#0b0f1a);border:1px solid var(--line,#212a3d);
  border-left:3px solid var(--blue,#3f6bff);border-radius:0 16px 16px 0}
.article-body .tldr > :last-child,.article-body .tldr ul{margin-bottom:0}
.article-body .callout{background:var(--tint,rgba(63,107,255,.12));border-left:3px solid var(--blue,#3f6bff);
  border-radius:0 12px 12px 0;padding:16px 22px;margin:24px 0}
.article-body .callout p{color:var(--ink,#e8ecf6)}

/* таблицы — сетка тонких линий, шапка на тинте, зебра (перебивают инлайн-стили светлой темы) */
.article-body table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15.5px;line-height:1.55;display:block;overflow-x:auto}
.article-body .table-wrap{overflow-x:auto;margin:22px 0}
.article-body .table-wrap table{margin:0}
.article-body th,.article-body td{padding:12px 16px!important;border:1px solid var(--line,#212a3d)!important;
  text-align:left;vertical-align:top;overflow-wrap:break-word;word-break:normal;min-width:120px}
.article-body td{color:var(--ink-soft,#a3accb)!important}
.article-body thead tr,.article-body thead th,.article-body tr:first-child > th{background:var(--tint,rgba(63,107,255,.12))!important;
  color:var(--ink,#e8ecf6)!important;font-weight:600}
.article-body tbody tr,.article-body tr{background:transparent!important}
.article-body tbody tr:nth-child(even){background:var(--bg-2,#0b0f1a)!important}

/* картинки и подписи */
.article-body img{border-radius:14px}
.article-body .article-figure,.article-body figure{margin:26px 0}
.article-figure img{box-shadow:none}
.article-body figcaption{margin-top:10px;font-size:14px;font-style:normal;color:var(--ink-soft,#a3accb);text-align:center}

/* врезка-CTA внутри текста (как .art-inline-cta) */
.article-body .article-cta{background:var(--bg-2,#0b0f1a);
  background-image:radial-gradient(120% 170% at 100% 0,rgba(46,92,242,.22),transparent 62%);
  border:1px solid var(--line,#212a3d);border-radius:16px;padding:22px 26px;margin:32px 0;box-shadow:none;gap:20px}
.article-body .article-cta__title{font-family:var(--ff-display,inherit);font-size:20px;line-height:1.25;font-weight:600;color:var(--ink,#e8ecf6);margin:0 0 6px}
.article-body .article-cta__sub{font-size:15px;line-height:1.5;color:var(--ink-soft,#a3accb)}

/* автор, FAQ */
.article-body .author-card{background:var(--card,#0f1420);border-color:var(--line,#212a3d);padding:14px 18px;margin:0 0 28px}
.article-body .author-card__avatar{width:52px;height:52px;border-width:2px}
.article-body .faq-item{padding:18px 22px;margin:0 0 12px;background:var(--bg-2,#0b0f1a);border-color:var(--line,#212a3d)}
.article-body .faq-item h3{margin:0 0 8px;font-size:18px}
.article-body .faq-item p:last-child{margin-bottom:0}

/* ---------- ≤980px: одна колонка; «Содержание» над текстом, CTA под ним ---------- */
@media (max-width:980px){
  .article-wrap{grid-template-columns:minmax(0,1fr);gap:8px}
  .article-aside{display:contents}
  .article-aside > .x2617-toc{order:-1;max-height:none;overflow:visible;margin:0 0 20px}
  .article-aside > .aside-card{order:1;margin-top:20px}
  .x2617-toc li::before{top:9px}
  .x2617-toc ol{gap:2px}
  .x2617-toc li a{padding-block:7px;font-size:15px}
  /* сворачивание: заголовок-кнопка вешается скриптом только на длинное оглавление */
  .x2617-toc.is-collapsible .article-toc__title{display:none}
  .x2617-toc.is-collapsible .x2617-toc__btn{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;margin:-6px 0;padding:0;
    background:none;border:0;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
    color:var(--ink-soft,#a3accb);text-align:left}
  .x2617-toc__btn::before{content:"";width:20px;height:2px;background:var(--blue,#3f6bff);flex:0 0 auto}
  .x2617-toc__count{margin-left:auto;letter-spacing:.04em;text-transform:none;font-weight:600;color:var(--blue-ink,#8aa5ff)}
  .x2617-toc__btn::after{content:"";width:9px;height:9px;flex:0 0 auto;margin:0 4px 4px 2px;border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
  .x2617-toc.is-collapsible:not(.is-collapsed) .x2617-toc__btn{margin-bottom:8px}
  .x2617-toc.is-collapsible:not(.is-collapsed) .x2617-toc__btn::after{transform:rotate(-135deg);margin-bottom:-4px}
  .x2617-toc.is-collapsed ol{display:none}
  .x2617-toc__btn:focus-visible{outline:2px solid var(--blue-text,#6E90FF);outline-offset:4px;border-radius:6px}
}
@media (max-width:560px){
  .article-body{font-size:17px}
  .article-body .article-cta{padding:20px;gap:16px}
  .article-body .article-cta .btn{width:100%;justify-content:center;white-space:normal}
}
@media (prefers-reduced-motion:reduce){.x2617-toc li a,.x2617-toc__btn::after{transition:none}}