/* Блог Assetum: стили статьи, хабов и служебных страниц.
   Наследует переменные, шрифты, кнопки, шапку и подвал из /assets/style.css. Только светлая тема. */

.blog-main{padding-block:28px 64px}
.blog-wrap{max-width:1120px}
@media (min-width:1081px){.blog .home-nav a.on{color:var(--blue)}}

/* хлебные крошки */
.crumbs{max-width:780px;margin:0 auto 22px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;font-size:13.5px;color:var(--slate-soft)}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li+li::before{content:"/";margin:0 9px;color:var(--line-strong)}
.crumbs a{color:var(--slate);text-decoration:none}
.crumbs a:hover{color:var(--blue)}
.crumbs span{color:var(--slate-soft)}

/* колонка текста */
.post,.hub{max-width:780px;margin:0 auto}
.post-head{margin-bottom:26px}
.post-head h1{font-size:clamp(28px,4.2vw,42px);line-height:1.15}
.post-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-size:14px;color:var(--slate-soft)}
.post-meta a{color:var(--blue);font-weight:700}
.post-meta a:hover{text-decoration:underline;text-underline-offset:3px}
.post-norms{display:inline-block;margin-top:14px;padding:8px 14px;border-radius:12px;background:var(--blue-tint);
  font-size:14px;font-weight:600;color:var(--navy)}

/* содержание */
.post-toc{margin:0 0 30px;padding:18px 22px;border:1px solid var(--line-strong);border-radius:18px;background:#FAFBFE}
.post-toc-head{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-soft)}
.post-toc ol{margin-top:10px;counter-reset:toc;display:grid;gap:7px}
.post-toc li{counter-increment:toc;display:flex;gap:10px;font-size:15px;line-height:1.4}
.post-toc li::before{content:counter(toc);font-family:var(--mono);font-size:13px;color:var(--blue);min-width:16px;padding-top:2px}
.post-toc a{color:var(--navy)}
.post-toc a:hover{color:var(--blue)}

/* типографика статьи */
.article-body{font-size:17.5px;line-height:1.72;color:var(--slate)}
.article-body>*+*{margin-top:18px}
.article-body h2{font-size:clamp(23px,2.8vw,29px);line-height:1.22;margin-top:46px;scroll-margin-top:90px}
.article-body h3{font-size:clamp(19px,2.2vw,21px);line-height:1.3;margin-top:32px;scroll-margin-top:90px}
.article-body h2+*,.article-body h3+*{margin-top:14px}
.article-body .table-wrap+*{margin-top:22px}
.article-body p{margin-bottom:0}
.article-body p+p{margin-top:16px}
.article-body strong{color:var(--navy);font-weight:700}
.article-body a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;word-break:break-word}
.article-body a:hover{color:var(--blue-2);text-decoration-thickness:2px}
.article-body ul,.article-body ol{padding:0;margin-bottom:0}
.article-body li{position:relative;padding-left:26px}
.article-body li+li{margin-top:9px}
.article-body ul>li::before{content:"";position:absolute;left:6px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.article-body ol{counter-reset:li}
.article-body ol>li{counter-increment:li}
.article-body ol>li::before{content:counter(li) ".";position:absolute;left:0;top:0;font-weight:800;color:var(--blue)}
.article-body li>ul,.article-body li>ol{margin-top:9px}
.article-body blockquote{margin:24px 0;padding:16px 22px;border-left:4px solid var(--blue);background:var(--blue-tint);
  border-radius:0 16px 16px 0;color:var(--navy)}
.article-body hr{border:0;border-top:1px solid var(--line-strong);margin:36px 0}
.article-body code{font-family:var(--mono);font-size:.88em;background:var(--blue-tint);padding:1px 6px;border-radius:6px}

/* таблицы */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:22px;border:1px solid var(--line-strong);border-radius:16px}
.table-wrap table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.5;min-width:520px}
.table-wrap th,.table-wrap td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.table-wrap th{background:var(--navy);color:#fff;font-weight:700;font-size:14.5px}
.table-wrap tr:nth-child(even) td{background:#F7F9FE}
.table-wrap tr:last-child td{border-bottom:0}
.table-wrap td:first-child{color:var(--navy);font-weight:600}

/* схемы и фото */
.post-figure{margin:30px 0 8px}
.post-figure img,.post-figure picture{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--line)}
.post-figure picture img{aspect-ratio:var(--ar)}
@media (max-width:640px){.post-figure picture img{aspect-ratio:var(--ar-m)}}
.post-figure figcaption{margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--slate-soft)}
.post-photo figcaption a{color:var(--slate-soft);text-decoration:underline;text-underline-offset:2px}

/* призыв к действию */
.cta-box{margin:34px 0;padding:24px 26px;border-radius:22px;background:var(--blue-tint);border:1px solid var(--blue-tint-2);
  display:grid;gap:10px;justify-items:start}
.cta-box .cta-title{font-size:19px;font-weight:800;color:var(--navy);line-height:1.3}
.cta-box .cta-text{font-size:16px;line-height:1.6;color:var(--slate)}
.cta-box .btn{margin-top:6px;text-decoration:none;color:#fff}
.cta-box .btn:hover{color:#fff}
.cta-box.cta-soft .btn{background:#fff;color:var(--navy);border-color:var(--line-strong);box-shadow:none}
.cta-box.cta-soft .btn:hover{border-color:var(--blue);color:var(--blue)}

/* подвал статьи */
.post-disclaimer{margin-top:34px;padding:14px 18px;border-radius:14px;background:#FAFBFE;border:1px solid var(--line);
  font-size:14.5px;line-height:1.6;color:var(--slate-soft)}
.post-how{margin-top:18px;font-size:14.5px;color:var(--slate-soft)}
.post-how a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px}

.next-step,.related{max-width:780px;margin:48px auto 0}
.next-step h2,.related h2,.hub-sec h2{font-size:clamp(21px,2.6vw,25px);margin-bottom:16px}
.next-card{display:grid;gap:6px;padding:22px 24px;border-radius:20px;background:var(--navy);color:#fff;box-shadow:var(--shadow-sm);
  transition:transform .15s ease,background .15s ease}
.next-card:hover{background:var(--navy-2);transform:translateY(-1px)}
.next-kicker{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#AFC0FF}
.next-card b{font-size:19px;line-height:1.35}
.next-card b::after{content:" →"}
.next-text{font-size:15px;line-height:1.55;color:#D5DCF2}

/* списки статей */
.card-list{display:grid;gap:12px}
.card-list a{display:grid;gap:5px;padding:16px 20px;border-radius:16px;border:1px solid var(--line-strong);background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease}
.card-list a:hover{border-color:var(--blue);box-shadow:var(--shadow-sm)}
.card-list b{font-size:16.5px;line-height:1.38;color:var(--navy)}
.card-list a:hover b{color:var(--blue)}
.card-list span{font-size:14.5px;line-height:1.5;color:var(--slate-soft)}
.related-hub{margin-top:16px;font-size:15px;color:var(--slate-soft)}
.related-hub a{color:var(--blue);font-weight:700}

/* хабы */
.hub-text{margin-bottom:10px}
.hub-sec{margin-top:44px}
.hub-sec h2 a{color:var(--navy)}
.hub-sec h2 a:hover{color:var(--blue)}
.hub-sub-text{margin:-4px 0 14px;font-size:15.5px;line-height:1.6;color:var(--slate)}
.hub-more{margin-top:14px}
.chip-list{display:flex;flex-wrap:wrap;gap:8px}
.chip-list a{display:inline-block;padding:8px 14px;border-radius:100px;background:var(--blue-tint);color:var(--navy);font-size:14.5px;font-weight:600}
.chip-list a:hover{background:var(--blue);color:#fff}
.cluster-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cluster-card{padding:18px 20px;border-radius:18px;border:1px solid var(--line-strong);background:#fff;display:grid;gap:6px;align-content:start}
.cluster-name{font-size:17px;font-weight:800;color:var(--navy);line-height:1.3}
.cluster-name:hover{color:var(--blue)}
.cluster-count{font-size:13.5px;color:var(--slate-soft)}
.cluster-subs{margin-top:6px;display:grid;gap:5px}
.cluster-subs a{font-size:14.5px;color:var(--blue)}
.cluster-subs a:hover{text-decoration:underline}

/* карта */
.karta-lead{font-size:16.5px;line-height:1.65;color:var(--slate)}
.karta-sec h3{font-size:16px;margin:20px 0 8px;color:var(--slate)}
.karta-sec h3 a{color:var(--slate)}
.karta-list{display:grid;gap:7px;padding:0}
.karta-list li{position:relative;padding-left:18px;font-size:15.5px;line-height:1.45}
.karta-list li::before{content:"";position:absolute;left:3px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.karta-list a{color:var(--navy)}
.karta-list a:hover{color:var(--blue)}

/* страница автора */
.author-photo{float:right;margin:0 0 18px 26px;width:220px}
.author-photo img{width:220px;height:auto;border-radius:20px}

/* мобильная версия */
@media (max-width:760px){
  .blog-main{padding-block:18px 48px}
  .crumbs{margin-bottom:16px}
  .crumbs ol{font-size:13px}
  .article-body{font-size:16.5px;line-height:1.68}
  .article-body h2{margin-top:38px}
  .post-meta{font-size:13.5px;gap:4px 14px}
  .cta-box{padding:20px 18px;border-radius:18px}
  .cta-box .btn{width:100%}
  .cluster-grid{grid-template-columns:1fr}
  .post-figure{margin-inline:calc(-1 * var(--gut) + 8px)}
  .post-figure figcaption{padding-inline:8px}
  .author-photo{float:none;margin:0 0 18px;width:180px}
  .author-photo img{width:180px}
  .next-card{padding:18px}
  .card-list a{padding:14px 16px}
}

/* стабильная высота шапки до загрузки шрифта (CLS): название в две строки */
@media (max-width:560px){.blog-top .brand .txt b{display:block;max-height:2.5em;overflow:hidden}}
@media (max-width:560px){.post-meta{flex-direction:column;gap:3px}}

/* ===== Дизайн 07.10.2026: правая колонка, главная блога по этапам, карта с поиском ===== */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}

/* две колонки: текст + правая колонка (статьи и темы) */
.has-side .crumbs{max-width:none}
.blog-cols{display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:48px;align-items:start}
.blog-cols .post,.blog-cols .hub,.blog-cols .next-step,.blog-cols .related{max-width:760px;margin-left:0;margin-right:0}
.blog-col{min-width:0}
.blog-side{display:grid;gap:18px;align-self:stretch;align-content:start;min-width:0}
.blog-side .lm{padding:22px 20px 20px;margin-top:14px}
.blog-side .lm-h{font-size:20px}
.side-card{padding:18px 20px;border-radius:18px;border:1px solid var(--line-strong);background:#fff;display:grid;gap:8px;justify-items:start}
.side-k{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-soft)}
.side-h{font-size:17px;font-weight:800;line-height:1.3;color:var(--navy)}
.side-t{font-size:14px;line-height:1.5;color:var(--slate)}
.side-card .btn{margin-top:4px}
.side-ch{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:4px}
.side-ch .ch-btn{min-width:0;padding:9px 10px;gap:8px;border-radius:14px}
.side-ch .ch-btn .ic{width:30px;height:30px}
.side-ch .ch-btn .ic svg{width:17px;height:17px}
.side-ch .ch-btn .t{font-size:14.5px}
.blog-side .lm-pts li{padding-left:28px}
.side-sticky{position:sticky;top:88px;display:grid;gap:12px;max-height:calc(100vh - 104px);overflow:auto;
  padding:2px 2px 4px;scrollbar-width:thin}
.side-toc{padding:16px 18px;border-radius:18px;background:#FAFBFE;border:1px solid var(--line)}
.side-toc ol{margin-top:10px;display:grid;gap:2px}
.side-toc a{display:block;padding:5px 10px;border-left:2px solid var(--line);font-size:13.5px;line-height:1.4;color:var(--slate)}
.side-toc a:hover{color:var(--blue)}
.side-toc a.on{border-left-color:var(--coral);color:var(--navy);font-weight:700;background:#fff}
.side-lm{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--navy);color:#fff;
  transition:background .15s ease}
.side-lm:hover{background:var(--navy-2)}
.side-lm-ic{flex:0 0 auto;font-family:var(--mono);font-size:11px;font-weight:700;background:var(--coral);border-radius:7px;padding:6px 7px}
.side-lm b{display:block;font-size:14px;line-height:1.35}
.side-lm small{display:block;font-size:12.5px;color:#C9D3F5;margin-top:2px}
.side-ks{font-size:13.5px;color:var(--slate-soft);padding-inline:4px}
.side-ks a{color:var(--blue);font-weight:700}
.lm-inline-wrap{display:none}
@media (max-width:1023px){
  .blog-cols{grid-template-columns:minmax(0,1fr);gap:40px}
  .blog-cols .post,.blog-cols .hub,.blog-cols .next-step,.blog-cols .related{max-width:780px;margin-inline:auto}
  .blog-side{max-width:780px;width:100%;margin-inline:auto}
  .side-sticky{display:none}
  .article-body .lm-inline-wrap{display:block;margin:34px 0}
  .article-body .lm-inline-wrap .lm-pts li{padding-left:28px}
  .article-body .lm-inline-wrap .lm-pts li+li{margin-top:0}
  .blog .article-body + .post-disclaimer{margin-top:24px}
}
/* в тексте статьи лид-магнит не наследует оформление списков статьи */
.article-body .lm-pts li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border:2px solid var(--blue);
  border-radius:4px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6' fill='none' stroke='%232952E3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 12px no-repeat}
.article-body .lm a{text-decoration:underline}
.article-body .lm .btn{text-decoration:none;color:#fff}
.article-body .lm-form input:not([type=checkbox]){font-size:16px}
@media (max-width:1023px){.has-side .blog-side .lm{margin-top:14px}}

/* хлебные крошки на телефоне: текущая страница — одной строкой */
@media (max-width:760px){
  .crumbs li:last-child{min-width:0;max-width:100%}
  .crumbs li:last-child span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100vw - 40px)}
}

/* главная блога: темы по этапам */
.bi-lead{margin-top:14px;font-size:17px;line-height:1.6;color:var(--slate)}
.blog-index{max-width:1120px}
.blog-index .post-head{max-width:780px}
.bi-stages{display:grid;gap:14px;margin-top:6px}
.bi-stage{display:grid;grid-template-columns:260px 1fr;gap:24px;padding:22px 24px;border-radius:22px;border:1px solid var(--line-strong);background:#fff}
.bi-stage:nth-child(odd){background:#FAFBFE}
.bi-stage-head{display:flex;gap:12px;align-items:flex-start}
.bi-n{font-family:var(--mono);font-size:12px;font-weight:700;color:#fff;background:var(--blue);border-radius:8px;padding:4px 7px;margin-top:2px}
.bi-stage-head h3{font-size:19px;line-height:1.25}
.bi-stage-head p{margin-top:5px;font-size:14px;line-height:1.5;color:var(--slate-soft)}
.bi-themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.bi-themes>li>a{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:12px 14px;border-radius:14px;
  background:#fff;border:1px solid var(--line);transition:border-color .15s ease,box-shadow .15s ease}
.bi-themes>li>a:hover{border-color:var(--blue);box-shadow:var(--shadow-sm)}
.bi-themes b{font-size:15px;line-height:1.35;color:var(--navy)}
.bi-themes>li>a:hover b{color:var(--blue)}
.bi-themes span{flex:0 0 auto;font-size:12.5px;color:var(--slate-soft);white-space:nowrap}
.bi-themes .cluster-subs{padding:6px 14px 0}
.bi-start{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.bi-start small{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--blue)}
.blog-index .hub-sec,.bi-text{max-width:1120px}
.bi-text{margin-top:48px;padding-top:8px;border-top:1px solid var(--line);max-width:780px}
@media (max-width:860px){
  .bi-stage{grid-template-columns:1fr;gap:14px;padding:18px}
  .bi-themes{grid-template-columns:1fr}
  .bi-start{grid-template-columns:1fr}
}

/* карта статей: поиск и свёрнутые темы */
.karta-search{margin:22px 0 18px}
.karta-search input{width:100%;font:inherit;font-size:16px;padding:14px 48px 14px 18px;border-radius:14px;border:1.5px solid var(--line-strong);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%235F6B85' stroke-width='2'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cpath d='m14 14 4 4'/%3E%3C/svg%3E") no-repeat right 16px center;color:var(--navy)}
.karta-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(41,82,227,.1)}
.karta-found{margin-top:8px;font-size:14px;color:var(--slate-soft)}
.karta-found:empty{display:none}
.karta-sec{border:1px solid var(--line-strong);border-radius:16px;background:#fff;margin-top:10px}
.karta-sec summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:15px 18px}
.karta-sec summary::-webkit-details-marker{display:none}
.karta-sec summary::after{content:"+";font-size:22px;line-height:1;color:var(--blue);font-weight:600}
.karta-sec[open] summary::after{content:"−"}
.karta-name{font-size:16.5px;font-weight:800;color:var(--navy);line-height:1.3}
.karta-count{margin-left:auto;font-size:13px;color:var(--slate-soft);white-space:nowrap}
.karta-sec[open]{padding-bottom:16px}
.karta-sec .karta-hub,.karta-sec h3,.karta-sec .karta-list{margin-inline:18px}
.karta-hub{font-size:14.5px;margin-bottom:10px}
.karta-hub a{color:var(--blue);font-weight:700}

/* кнопка шапки: на узком экране короткая подпись, чтобы шапка оставалась в две строки */
.blog-top .cta-s{display:none}
@media (max-width:560px){.blog-top .cta-l{display:none}.blog-top .cta-s{display:inline}}