/* ==== Блог: перенос генератора и вёрстки Креатека (crea-tec.ru/blog) ====
   Скелет буквально повторяет kreatek-site (~/Desktop/claude/kreatek-site/scripts/blog.css
   и build-blog.py): hero-плашка, лента карточек + сайдбар, пагинация мятной плашкой
   (у нас - акцентной), статья с читаемой колонкой ~700px, «следующая статья»,
   «продолжить чтение». Изменены только токены (structure-v2.md «Блог: перекраска») и два
   компонента, которых у нас физически нет: форма в сайдбаре/хвосте статьи заменена на
   кнопку, открывающую существующий модал сайта (`data-lead-cta`, см. src/js/main.js) -
   свою форму с нуля не строим; узкий футер блога снят - используется общий site-footer
   (бриф: «заменить только хром... шапка/подвал/попап»). Шрифт - системный гротеск
   (наследуется от body, отдельной --font переменной в style.css нет).
   Контейнер уже сайта Креатека (1120px против 1320) - ширина сайдбара и грид уменьшены
   пропорционально, структура (лента+сайдбар, 3 колонки карточек) не менялась.
   27.09.2026 (доска #99): общий .wrap вырос до 1360 (контент 1296) на всех страницах, в т.ч.
   блоге - число 1120 в этом абзаце и ниже осталось историческим (от чего считали пропорцию),
   актуальный контент блога теперь 1296. */

.blog-body{background:var(--bg)}
.blog-page{padding-top:32px;padding-bottom:10px}

.blog-brow{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-ink)}
a.blog-brow--link{display:inline-block;text-decoration:none}
a.blog-brow--link:hover{text-decoration:underline;text-underline-offset:3px}
.blog-h1{margin:0;font-weight:700;line-height:1.1;font-size:clamp(26px,3.2vw,44px);color:var(--text)}
.blog-h2{margin:0;font-weight:700;line-height:1.2;font-size:clamp(19px,1.8vw,26px);color:var(--text)}
.blog-h2 a{color:inherit;text-decoration:none}
.blog-h2 a:hover{color:var(--accent-ink)}

/* ---- крошки ---- */
.blog-bc{margin:0 0 20px}
.blog-bc ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.blog-bc li{display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.4;color:var(--text-2)}
.blog-bc li+li:before{content:"/";color:var(--blog-muted)}
.blog-bc a{color:var(--text-2);text-decoration:none}
.blog-bc a:hover{color:var(--accent-ink)}
.blog-bc li:last-child span{color:var(--blog-muted);max-width:min(60ch,100%);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ---- переключатель «Новости сервиса / Блог» (blog-split-0924) ---- */
.blog-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.blog-tabs__item{display:inline-flex;align-items:center;justify-content:center;min-height:40px;
  padding:0 18px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:600;
  color:var(--text-2);text-decoration:none;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease}
@media(hover:hover){.blog-tabs__item:hover{color:var(--text)}}
.blog-tabs__item.is-active{background:var(--accent);border-color:var(--accent);color:var(--graphite)}
@media(max-width:479px){.blog-tabs__item{padding:0 14px;font-size:12.5px}}

/* ---- hero-плашка листинга ---- */
.blog-hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:center;
  margin-top:6px;padding:40px 44px;border-radius:var(--radius);background:var(--card);
  box-shadow:var(--shadow)}
.blog-hero__main{min-width:0}
.blog-hero__h1{margin:12px 0 0}
.blog-hero__side{padding-left:36px;border-left:1px solid var(--line)}
.blog-hero__promise{margin:0;font-size:clamp(14px,1.1vw,16px);line-height:1.6;color:var(--text-2)}
@media(max-width:1023px){
  .blog-hero{grid-template-columns:minmax(0,1fr);gap:20px;padding:30px 26px}
  .blog-hero__side{padding-left:0;padding-top:20px;border-left:none;border-top:1px solid var(--line)}
}
@media(max-width:639px){.blog-hero{padding:24px 18px;border-radius:var(--radius-sm)}}

/* ---- манифест рубрики ---- */
.blog-manifest{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start;
  padding-bottom:30px;border-bottom:1px solid var(--line)}
.blog-manifest__main{min-width:0}
.blog-rubric__intro{margin:14px 0 0;max-width:640px;font-size:15px;line-height:1.6;color:var(--text-2)}
.blog-manifest--solo{grid-template-columns:minmax(0,1fr)}
@media(max-width:1023px){.blog-manifest{grid-template-columns:minmax(0,1fr);gap:22px}}

/* пульт рубрик - переключатель между рубриками */
.blog-pult{display:flex;flex-direction:column;margin-top:36px}
.blog-pult__label{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--blog-muted)}
.blog-pult__row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 0 14px 14px;min-height:44px;border-bottom:1px solid var(--line);
  border-left:2px solid var(--accent-soft);text-decoration:none;
  transition:background-color .15s ease,border-color .15s ease}
.blog-pult__row:first-of-type{border-top:1px solid var(--line)}
.blog-pult__row:hover{background:var(--accent-soft);border-left-color:var(--accent-ink)}
.blog-pult__n{font-size:14px;font-weight:600;color:var(--text)}
.blog-pult__c{font-size:15px;color:var(--accent-ink)}
@media(max-width:767px){
  .blog-pult{flex-direction:row;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:6px}
  .blog-pult__label{display:none}
  .blog-pult__row{flex:0 0 auto;border:1px solid var(--line);border-left:2px solid var(--accent-soft);
    border-radius:var(--radius-sm);padding:12px 14px}
}

/* ---- лента + сайдбар (контейнер был 1120, с 27.09.2026 - 1296, пропорция всё ещё уже,
   чем у эталона 843+361/1320) ---- */
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;
  align-items:start;margin-top:36px}
.blog-layout__side{min-width:0}
@media(max-width:1023px){.blog-layout{grid-template-columns:minmax(0,1fr);gap:32px}}

.blog-layout--feed{grid-template-rows:auto 1fr;grid-template-areas:"head ." "main side"}
.blog-layout--feed .blog-reg__head{grid-area:head}
.blog-layout--feed .blog-layout__main{grid-area:main}
.blog-layout--feed .blog-layout__side{grid-area:side}
@media(max-width:1023px){.blog-layout--feed{grid-template-areas:"head" "main" "side"}}

.blog-reg__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 18px}
.blog-reg__count{font-size:13px;color:var(--blog-muted);white-space:nowrap}

/* ---- сетка карточек ---- */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:1023px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:639px){.blog-grid{grid-template-columns:minmax(0,1fr)}}

.blog-card{display:flex;flex-direction:column}
.blog-card__cover{position:relative;display:block;border-radius:var(--radius-sm);overflow:hidden}
.blog-card__cover img{display:block;width:100%;height:auto;aspect-ratio:270/170;
  object-fit:cover;background:var(--field)}
.blog-card__num{position:absolute;top:12px;left:14px;font-size:22px;font-weight:700;color:#fff;
  padding:2px 10px;border-radius:8px;background:#1d2436}
.blog-card__tag{position:absolute;right:10px;bottom:10px;padding:5px 10px;border-radius:999px;
  background:#1d2436;font-size:11px;font-weight:700;letter-spacing:.03em;color:#fff}
.blog-card__body{padding-top:14px;display:flex;flex-direction:column;gap:8px}
.blog-card__meta{display:flex;gap:12px;font-size:12px;color:var(--blog-muted)}
.blog-card__title{margin:0;font-weight:700;font-size:16px;line-height:1.3}
.blog-card__title a{color:var(--text);text-decoration:none}
.blog-card:hover .blog-card__title a{color:var(--accent-ink)}
.blog-card__lead{margin:0;font-size:14.5px;line-height:1.5;color:var(--text-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-card__go{margin-top:2px;font-size:14px;font-weight:600;color:var(--accent-ink);text-decoration:none;display:inline-flex;align-items:center;padding:6px 0;min-height:24px}
.blog-card__go:hover{text-decoration:underline;text-underline-offset:3px}

/* карточка последней статьи крупнее + список остальных без рамки (row 130) */
.blog-featured{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-bottom:28px}
@media(min-width:768px){.blog-featured{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:28px}}
.blog-featured__cover{position:relative;display:block;border-radius:var(--radius-sm);overflow:hidden}
.blog-featured__cover img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover}
.blog-featured__tag{position:absolute;right:12px;bottom:12px;padding:5px 10px;border-radius:999px;
  font-size:12px;font-weight:700;background:var(--dark-bg);color:#fff}
.blog-featured__body{display:flex;flex-direction:column;gap:10px}
.blog-featured__title{margin:0;font-weight:700;font-size:clamp(20px,2.2vw,28px);line-height:1.25}
.blog-featured__title a{color:var(--text);text-decoration:none}
.blog-featured:hover .blog-featured__title a{color:var(--accent-ink)}

.blog-compact-list{display:flex;flex-direction:column;gap:4px}
.blog-compact{display:flex;align-items:center;gap:14px;padding:10px 8px;text-decoration:none;
  border-top:1px solid var(--line)}
.blog-compact:last-child{border-bottom:1px solid var(--line)}
.blog-compact img{flex:0 0 auto;width:96px;height:60px;border-radius:8px;object-fit:cover;display:block}
.blog-compact__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.blog-compact__meta{display:flex;gap:10px;font-size:12px;color:var(--blog-muted)}
.blog-compact__tag{color:var(--accent-ink);font-weight:700}
.blog-compact__title{font-size:15px;font-weight:700;color:var(--text);line-height:1.35}
.blog-compact:hover .blog-compact__title{color:var(--accent-ink)}

/* ---- пагинация ---- */
.blog-pag{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:32px 0 10px}
.blog-pag__scale{display:flex;align-items:center;gap:6px;flex:1 1 auto;justify-content:center}
.blog-pag__tick{min-width:36px;min-height:36px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:var(--radius-sm);font-size:13px;font-weight:600;
  color:var(--blog-muted);text-decoration:none}
.blog-pag__tick:hover{color:var(--text)}
.blog-pag__tick.is-active{background:var(--accent);color:var(--graphite)}
.blog-pag__nav{font-size:18px;color:var(--text);text-decoration:none;min-width:44px;
  min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.blog-pag__nav.is-off{color:var(--blog-muted);opacity:.4}

/* ---- пустое состояние рубрики ---- */
.blog-empty{padding:26px;border-radius:var(--radius);border:1px dashed var(--line)}
.blog-empty p{margin:12px 0 20px;font-size:14.5px;color:var(--text-2)}

/* ---- статья: читаемая колонка ---- */
.blog-artcol{max-width:680px;margin:36px auto 0}
@media(max-width:767px){.blog-artcol{margin-top:24px}}

.blog-art__head{padding-bottom:24px}
.blog-art__back{display:flex;width:fit-content;align-items:center;gap:6px;margin-bottom:16px;
  font-size:13px;font-weight:600;color:var(--text-2);text-decoration:none;min-height:44px}
.blog-art__back:hover{color:var(--accent-ink)}
.blog-art__h1{margin:12px 0 0}
.blog-art__meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:18px 0 0;
  padding-bottom:20px;border-bottom:1px solid var(--line);font-size:13px;color:var(--blog-muted)}
.blog-art__readpill{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;
  border:1px solid var(--line);font-size:12px}

.blog-art__body{font-size:18px;line-height:1.65;color:var(--text)}
.blog-art__cover{position:relative;display:block;margin:24px 0 48px;border-radius:var(--radius);
  overflow:hidden;background:var(--field)}
.blog-art__cover img{display:block;width:100%;height:auto;aspect-ratio:841/480;object-fit:cover}
.blog-art__coverTag{position:absolute;right:14px;bottom:14px;padding:6px 12px;border-radius:999px;
  background:#1d2436;font-size:11px;font-weight:700;letter-spacing:.03em;color:#fff}
.blog-art__lead{margin:24px 0 22px;font-weight:700;font-size:18px;line-height:1.5;color:var(--text)}
.blog-art__body p{margin:0 0 18px}
.blog-art__body h2{margin:44px 0 14px;font-weight:700;font-size:clamp(20px,2vw,25px);
  line-height:1.25;color:var(--text);scroll-margin-top:24px}
.blog-art__body h3{margin:26px 0 10px;font-weight:600;font-size:18px;line-height:1.35;color:var(--text)}
.blog-art__body ul{list-style:disc;margin:0 0 18px;padding-left:22px}
.blog-art__body ol{list-style:decimal;margin:0 0 18px;padding-left:22px}
.blog-art__body li{margin-bottom:8px}
.blog-art__body li::marker{color:var(--accent-ink)}
.blog-art__body a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.blog-art__body a:hover{text-decoration:none}
.blog-art__body strong{font-weight:700;color:var(--text)}
.blog-art__tablewrap{margin:0 0 22px;overflow-x:auto}
.blog-art__body table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.4}
.blog-art__body th{padding:11px 13px;text-align:left;font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink);
  border-bottom:1px solid var(--line);white-space:nowrap}
.blog-art__body td{padding:11px 13px;vertical-align:top;color:var(--text-2);
  border-bottom:1px solid var(--line)}
.blog-art__body tr td:first-child{color:var(--text);font-weight:600}
.blog-art__body blockquote{margin:0 0 22px;padding:18px 20px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  border-left:4px solid var(--accent);background:var(--field);font-size:16.5px;line-height:1.5;color:var(--text)}
.blog-art__body blockquote p{margin:0}
@media(max-width:1023px){.blog-art__body{font-size:17px}}
@media(max-width:767px){.blog-art__body{font-size:16px}
  .blog-art__body h2{font-size:18px}
  .blog-art__body table{font-size:13.5px}
  .blog-art__body th,.blog-art__body td{padding:9px}}
@media(max-width:479px){.blog-art__body{font-size:15px}.blog-art__body h2{font-size:15px}}
@media(max-width:340px){.blog-art__body{font-size:14px}.blog-art__body h2{font-size:14px}}

/* FAQ на нативных details */
.blog-faq{margin:0 0 22px;border-top:1px solid var(--line)}
.blog-faq__item{border-bottom:1px solid var(--line)}
.blog-faq__item summary{cursor:pointer;list-style:none;padding:15px 32px 15px 0;position:relative;
  font-weight:600;font-size:16px;line-height:1.35;color:var(--text);min-height:44px}
.blog-faq__item summary::-webkit-details-marker{display:none}
.blog-faq__item summary:after{content:"+";position:absolute;right:6px;top:13px;font-size:18px;color:var(--accent-ink)}
.blog-faq__item[open] summary:after{content:"-"}
.blog-faq__item p{margin:0 0 15px;font-size:15.5px;color:var(--text-2)}

/* ---- следующая статья ---- */
.blog-next{display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin:40px 0 0;padding:22px 24px;border-radius:var(--radius);text-decoration:none;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.blog-next,.blog-next *{text-decoration:none}
.blog-next__col{display:flex;flex-direction:column;gap:8px;min-width:0}
.blog-next .blog-brow{margin:0}
.blog-next__t{font-weight:700;font-size:clamp(15px,1.5vw,19px);line-height:1.3;color:var(--text)}
.blog-next__arrow{flex:0 0 auto;font-size:20px;color:var(--accent-ink)}
.blog-next:hover .blog-next__t{color:var(--accent-ink)}
@media(max-width:639px){.blog-next{padding:18px}}

/* ---- CTA-плашка вместо встроенной формы: кнопка открывает общий модал сайта
   (data-lead-cta, popup уже есть в render_popup из build.py) ---- */
.blog-cta{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px}
.blog-cta__sub{margin:10px 0 18px;font-size:14px;line-height:1.5;color:var(--text-2)}
/* page-lint «заголовок: h2 в 4 строк» на 1440/1920: карточка узкая и не растёт с вьюпортом,
   а .blog-h2 растёт (clamp до 26px) - фикс кеглем, не текстом (Никита 24.09.2026, «короче
   текст или меньше кегль»), пин к нижней границе того же clamp, новый уровень шкалы не вводим. */
.blog-cta .blog-h2{font-size:19px}
.blog-cta .btn{width:100%}
.blog-cta:not(.blog-hform) .btn + .btn{margin-top:8px}
.blog-cta__links{margin-top:14px;padding-top:14px;box-shadow:inset 0 1px 0 var(--line);
  display:flex;flex-direction:column;gap:8px}
.blog-cta__links a{font-size:13px;font-weight:600;color:var(--accent-ink);text-decoration:none;min-height:24px}
.blog-cta__links a:hover{text-decoration:underline}
.blog-hform .blog-cta__links{margin-top:0;padding-top:0;border-top:0;flex-direction:row;gap:16px}
/* 390: 24px паддинга с обеих сторон карточки поверх .wrap(16px) сжимало
   текстовую колонку ниже 80% ширины экрана (page-lint.py «узко», замер
   300-308px при пороге 312px) - на мобильном сужаем внутренний паддинг. */
@media(max-width:639px){.blog-cta{padding:18px}}
.blog-hform{margin-top:30px;display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding:26px 28px}
.blog-hform__head{min-width:200px}
.blog-hform .blog-cta__sub{margin:8px 0 0}
.blog-hform .btn{width:auto;padding:0 26px}
@media(max-width:639px){.blog-hform{flex-direction:column;align-items:stretch}
  .blog-hform .btn{width:100%}}

/* ---- «продолжить чтение» ---- */
.blog-recommend{margin-top:32px;padding:26px 24px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--card)}
.blog-recommend__list{margin-top:14px;padding:0 16px;border-top:1px solid var(--line)}
.blog-recommend__row{display:grid;grid-template-columns:24px minmax(0,1fr) 18px;gap:10px;
  align-items:center;padding:13px 0;border-bottom:1px solid var(--line);text-decoration:none}
.blog-recommend__n{font-size:13px;color:var(--accent-ink)}
.blog-recommend__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.blog-recommend__date{font-size:11.5px;color:var(--blog-muted)}
.blog-recommend__t{font-size:14px;font-weight:600;line-height:1.35;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-recommend__arrow{font-size:15px;color:var(--accent-ink)}
.blog-recommend__row:hover .blog-recommend__t{color:var(--accent-ink)}

@media(max-width:767px){.blog-bc li:last-child span{max-width:60vw}}

/* 390: боковые блоки не сжимают колонку (qa 06.09: .blog-recommend__list 308px, .blog-cta__sub 300px) */
@media(max-width:479px){.blog-recommend{padding:18px 10px}.blog-cta{padding:16px}.blog-hform{padding:16px}}

/* Волна 3 цикла v5 (10.09.2026) */
/* 85, 88: правый блок хиро блога прилипал к краям на всех ширинах */
.blog-hero__side{padding:20px 0 20px 36px}
@media (max-width:767px){.blog-hero__side{padding:20px 0 4px}}
/* 86: блоку рекомендаций не хватало ширины из-за лишнего вложенного отступа. 24.09.2026 (report-qa.md
   defect 5): 8px всё ещё было мало на 320-390 (238/293/308px из нужных 256/300/312, 80% ширины) -
   вместе с .blog-recommend padding 18/10 (выше) убираем свой паддинг __list совсем, инсет уже
   даёт карточка. */
@media (max-width:479px){.blog-recommend__list{padding:0}}

/* #109: составное слово в заголовке/карточке блога (build-blog.py nobr()) не рвётся на
   дефисе на узких экранах - браузер иначе переносит строку сразу после "-". */
.nobr{white-space:nowrap}