/* ============================================================
   Блог — архив (home.php), статья (single.php), проза (page.php)
   Источник: figma-copy-refs/{blog.json,blog-hero.json,blog-card-set.json,blog-mobile.json}
   Токены/грид/кнопки — переиспользованы из main.css, ничего не дублируем.
   ============================================================ */

/* ---------- archive: hero (label "Блог" + зелёный display-заголовок) ----------
   Макет 822:2761: секция 539px под шапкой (62) → 601px от верха страницы,
   контент прижат к y=306, ниже заголовка ~200px воздуха. Заголовок одной строкой. */
.blog-hero{background:var(--dark);color:var(--tw);min-height:601px;
  padding-top:calc(var(--nav-h) + 242px);padding-bottom:40px}
/* ширину не режем: в макете заголовок стоит одной строкой, max-width ломал его на две */
.blog-hero__inner{padding:0 var(--pad) 0 calc(var(--rail) + var(--pad))}
.blog-hero__label{font-size:16px;line-height:1.1;color:var(--gray);margin-bottom:4px}
.blog-hero__title.display{color:var(--green);max-width:none}
@media(max-width:900px){
  /* мобильный макет 1225:4068: секция 462px, отступ сверху 53px от шапки */
  .blog-hero{min-height:462px;padding-top:calc(var(--nav-h) + 53px);padding-bottom:40px}
  .blog-hero__inner{padding:0 var(--pad);max-width:none}
}

/* ---------- archive по макету Figma «блог» 822:2759 ----------
   Вся страница тёмная (#2C3A2B). Секция «Избранные»: карточки 392×580, шаг 400 (gap 8),
   ряд уходит за правый край (bleed) и скроллится. Ниже — список статей строками 1392px. */
body.blog,body.archive.category{background:var(--dark)}

/* избранные публикации */
.blog-feat{background:var(--dark);padding:0 0 64px}
.blog-feat__label{padding:0 var(--pad);font-size:16px;line-height:1.1;color:var(--gray);margin-bottom:24px}
.blog-feat__row{display:flex;gap:8px;padding:0 0 0 var(--pad);overflow-x:auto;scrollbar-width:none;
  cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-x pan-y}
.blog-feat__row::-webkit-scrollbar{display:none}
.blog-feat__row:active{cursor:grabbing}
.blog-feat-card{flex:0 0 392px;display:flex;flex-direction:column;color:var(--tw);-webkit-user-drag:none}
.blog-feat-card__media{width:100%;aspect-ratio:392/490;background:rgba(252,252,252,.06);overflow:hidden}
.blog-feat-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.blog-feat-card:hover .blog-feat-card__media img{transform:scale(1.04)}
.blog-feat-card__text{margin-top:16px;font-size:16px;line-height:1.1;color:var(--tw);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-feat-card__more{margin-top:14px;font-size:14px;line-height:20px;color:var(--green);display:inline-flex;align-items:center;gap:6px}
.blog-feat-card__more .arr{transition:transform .2s}
.blog-feat-card:hover .blog-feat-card__more .arr{transform:translateX(3px)}

/* список статей строками (макет 822:2775: padding 64/24/89, строка 8px сверху / 32px снизу) */
.blog-list-sec{background:var(--dark);padding:64px var(--pad) 89px}
.blog-list{border-top:1px solid var(--line-dark)}
.blog-row{display:grid;grid-template-columns:679px minmax(0,1fr);gap:24px;align-items:start;
  padding:8px 0 32px;border-bottom:1px solid var(--line-dark);color:var(--tw);transition:background .2s}
.blog-row:hover{background:rgba(252,252,252,.03)}
.blog-row__title{font-family:var(--ff-display);font-weight:400;font-size:40px;line-height:44px;letter-spacing:-.02em;color:var(--tw);margin:0;transition:color .2s}   /* Racama — правка клиента */
.blog-row:hover .blog-row__title{color:var(--green)}
.blog-row__aside{display:flex;flex-direction:column;align-items:flex-end;gap:12px;padding-top:8px}
.blog-row__desc{margin:0;font-size:16px;line-height:1.1;color:var(--tw);align-self:stretch}
.blog-row__more{font-size:14px;line-height:20px;color:var(--green);display:inline-flex;align-items:center;gap:6px}
.blog-row__more .arr{transition:transform .2s}
.blog-row:hover .blog-row__more .arr{transform:translateX(3px)}

.blog-pagination{display:flex;align-items:center;justify-content:center;gap:16px;padding:48px 0 0}
.blog-pagination .page-numbers{font-size:16px;line-height:1;color:var(--tw-2);transition:color .2s}
.blog-pagination .page-numbers.current{color:var(--green);font-weight:600}
.blog-pagination a.page-numbers:hover{color:var(--tw)}
.blog-pagination .page-numbers.dots{color:var(--tw-2)}
.blog-pagination .prev,.blog-pagination .next{color:var(--green);font-size:20px}
.blog-pagination .prev:hover,.blog-pagination .next:hover{color:var(--tw)}

@media(max-width:1200px){
  .blog-row{grid-template-columns:minmax(0,1fr) minmax(0,380px)}
}
@media(max-width:900px){
  /* мобильный макет 1225:4073 / 1225:4114: витрина 35/44, карточка 273, шаг 285 (gap 12),
     список 8/56, строка 26/28, описание — в правой колонке с отбивкой от левого края */
  .blog-feat{padding-bottom:44px}
  .blog-feat__row{gap:12px}
  .blog-feat-card{flex-basis:273px}
  .blog-list-sec{padding-top:8px;padding-bottom:56px}
  .blog-row{grid-template-columns:1fr;gap:12px;padding:26px 0 28px}
  .blog-row__title{font-size:28px;line-height:1.2;letter-spacing:-.01em}
  .blog-row__aside{width:62%;margin-left:auto;align-items:flex-start;padding-top:0}
}

/* ============================================================
   Страница статьи — по макету Figma (макеты):
   hero (лид+автор | мета+H1) → цифры → текст → теги → автор → перелинковка
   ============================================================ */
.sf-avatar{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  background:rgba(131,179,53,.18);color:var(--green);font-weight:600;font-size:13px;letter-spacing:.04em}
.sf-avatar--lg{width:56px;height:56px;font-size:16px;background:rgba(36,50,32,.06);color:var(--text-2)}

.blog-post-hero__aside{display:flex;flex-direction:column;justify-content:flex-end;gap:20px}
/* разделитель ровно один — он живёт на блоке автора (ниже). У лида своей линии быть не должно:
   с ней в hero получались две полоски подряд */
.blog-post-hero__lead{font-size:15px;line-height:1.6;color:var(--tw-2);max-width:420px}
.blog-post-hero__name{display:block;font-weight:500;font-size:15px;color:var(--tw)}
.blog-post-hero__role{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--tw-2)}
.blog-post-hero__meta{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-bottom:24px;font-size:13px;color:var(--tw-2)}
.blog-post-hero__cat{padding:5px 10px;border:1px solid var(--green);border-radius:3px;font-size:11px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--green)}

.blog-post-hero__title{color:var(--tw)}

/* «← Ко всем статьям» — липкая ссылка в рейке */
.blog-post-back{position:sticky;top:calc(var(--nav-h) + 32px);display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--text-2);transition:color .2s}
.blog-post-back:hover{color:var(--green)}

/* блок цифр (_sf_metrics) */
/* цифры без рамки и без разделителей — как в блоке цифр на «О компании» (правка по ревью) */
.post-metrics{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:48px}
.post-metric{padding:26px 24px 26px 0;text-align:left}
.post-metric:first-child{border-left:0}
.post-metric__value{font-weight:700;font-size:34px;line-height:1.1;letter-spacing:-.02em;color:var(--text)}
.post-metric__value .u{color:var(--green)}
/* отбивка перед единицей: без неё выходило «0внешних API». Для знака процента
   отбивку снимаем — «40 %» по типографике неверно (правка по ревью) */
.post-metric__value .u{margin-left:.14em}
.post-metric__value .u:is(.is-sign){margin-left:0}
.post-metric__label{margin-top:6px;font-size:13px;line-height:1.4;color:var(--text-2)}

/* теги статьи */
.post-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.post-tag{padding:7px 14px;border:1px solid var(--line-strong);border-radius:3px;font-size:13px;color:var(--text-2);cursor:default}

/* блок автора под статьёй */
.post-author{display:flex;gap:18px;margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
.post-author__name{font-weight:500;font-size:16px;color:var(--text)}
.post-author__role{margin-top:2px;font-size:14px;color:var(--text-3)}
.post-author__bio{margin-top:10px;font-size:14px;line-height:1.6;color:var(--text-2);max-width:60ch}

/* перелинковка: предыдущая | следующая */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:88px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.post-nav__side{padding:28px var(--pad);min-height:104px}
.post-nav__side+.post-nav__side{border-left:1px solid var(--line)}
.post-nav__side--next{text-align:right}
.post-nav__link{display:block}
.post-nav__label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px}
.post-nav__title{display:block;font-weight:500;font-size:18px;line-height:1.3;color:var(--text);transition:color .2s}
.post-nav__link:hover .post-nav__title{color:var(--green)}

@media(max-width:900px){
  .post-metrics{grid-template-columns:1fr}
  .post-metric{padding:20px 0}
  .post-metric:first-child{border-top:0}
  .post-nav{grid-template-columns:1fr;margin-top:56px}
  .post-nav__side+.post-nav__side{border-left:0;border-top:1px solid var(--line)}
  .post-nav__side--next{text-align:left}
  .blog-post-back{position:static}
}

/* Фон hero статьи — как в макете (фрейм 936:5224): тёмно-зелёная заливка + паттерн ПЛИТКОЙ,
   repeat, размер плитки 50% ширины секции, фигуры едва светлее фона (наложены с ~5% прозрачности).
   Общая картинка hero-bg.png с частицами тут не используется — она от главной. */
.blog-post-hero{padding:calc(var(--nav-h) + 56px) var(--pad) 72px;background:#243220;min-height:620px;display:flex;align-items:flex-end}
.blog-post-hero::before{background:url(../img/blog-pattern.webp) left top/50% auto repeat;opacity:.09}
.blog-post-hero__grid{width:100%}
.blog-post-hero__grid{display:grid;grid-template-columns:483fr 891fr;gap:91px;align-items:end}
.blog-post-hero__excerpt p{font-size:16px;line-height:1.35;color:var(--tw-2)}
.blog-post-hero__author{display:flex;align-items:center;gap:16px;margin-top:21px;padding-top:16px;border-top:1px solid var(--gray)}
.blog-post-hero__avatar{flex:0 0 36px;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(122,175,46,.15);border:1px solid rgba(122,175,46,.3);color:var(--green);font-weight:700;font-size:11px}
.blog-post-hero__name{font-weight:500;font-size:13px;color:var(--tw-2)}
.blog-post-hero__role{font-size:11px;color:var(--tw-2);opacity:.65;margin-top:2px}
.blog-post-hero__meta{display:flex;align-items:center;gap:20px;margin-bottom:19px;flex-wrap:wrap}
.blog-post-hero__cat{display:inline-flex;padding:10px 14px;border:1px solid rgba(122,175,46,.35);border-radius:2px;color:var(--green);font-size:10px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.blog-post-hero__cat:hover{background:rgba(122,175,46,.12)}
.blog-post-hero__date,.blog-post-hero__read{font-size:12px;color:var(--tw-2);opacity:.65}
.blog-post-hero__title{color:var(--tw)}
.blog-post-hero__title .accent{color:var(--green)}

@media(max-width:900px){
  .blog-post-hero{padding:calc(var(--nav-h) + 24px) var(--pad) 40px}
  /* на 375px длинные слова заголовка («импортозамещение») вылезали за экран на 150px:
     кегль как у остальных мобильных H1 плюс переносы по слогам */
  .blog-post-hero{min-height:0}
  /* Слово не рвём: hyphens:auto для русского браузер не отрабатывает и резал слово
     посреди («Импортозамещени|е»). Кегль привязан к ширине экрана так, чтобы самые
     длинные слова заголовков влезали целиком; 32px макета — потолок (правка по ревью). */
  .blog-post-hero__title{font-size:clamp(21px,6.4vw,32px);overflow-wrap:normal;word-break:normal;-webkit-hyphens:manual;hyphens:manual}
  .blog-post-hero__meta{gap:10px 14px}
  .blog-post-hero__grid{grid-template-columns:1fr;gap:32px;align-items:start}
  .blog-post-hero__grid{display:flex;flex-direction:column-reverse}
}

.blog-post-cover{margin:0 var(--pad)}
.blog-post-cover img{width:100%;border-radius:2px}
@media(max-width:900px){.blog-post-cover{margin:0 var(--pad)}}

.blog-post-body{padding-top:64px}
.blog-post-body .section__label{padding-top:6px}
.blog-post-body .section__label a{display:inline-flex;align-items:center;gap:6px}
.blog-post-body .section__label a:hover{color:var(--green)}

/* ---------- .prose: читабельная типографика the_content (single.php + page.php) ---------- */
.prose{max-width:780px;font-size:16px;line-height:1.6;color:var(--text-2)}
.prose > *+*{margin-top:20px}
.prose h2{font-weight:500;font-size:32px;line-height:1.2;letter-spacing:-.6px;color:var(--text);margin-top:56px}
.prose h3{font-weight:500;font-size:22px;line-height:1.3;color:var(--text);margin-top:40px}
.prose h2+*,.prose h3+*{margin-top:16px}
.prose p{color:var(--text-2)}
.prose a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--text)}
.prose strong{color:var(--text);font-weight:600}
.prose ul,.prose ol{padding-left:0}
.prose ul li,.prose ol li{list-style:none;position:relative;padding-left:28px;margin-top:12px}
.prose ul li:first-child,.prose ol li:first-child{margin-top:0}
.prose ul li::before{content:'';position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--green)}
.prose ol{counter-reset:prose-ol}
.prose ol li{counter-increment:prose-ol}
.prose ol li::before{content:counter(prose-ol);left:0;top:0;width:20px;height:20px;border-radius:50%;background:none;color:var(--green);font-weight:600;font-size:13px;line-height:20px;text-align:center;border:1px solid var(--line-strong)}
.prose blockquote{border-left:3px solid var(--green);padding:4px 0 4px 24px;color:var(--text);font-weight:500;font-size:20px;line-height:1.4}
.prose img{width:100%;border-radius:2px;margin-top:32px}
.prose figcaption{font-size:14px;color:var(--text-3);margin-top:8px}
.prose hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.prose table{width:100%;border-collapse:collapse;font-size:14px}
.prose table th,.prose table td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.prose table th{color:var(--text);font-weight:600;background:var(--bg)}
.prose code{background:var(--bg);border-radius:3px;padding:2px 6px;font-size:14px}
.prose pre{background:var(--dark);color:var(--tw);border-radius:4px;padding:20px;overflow-x:auto;font-size:14px}
.prose pre code{background:none;padding:0;color:inherit}

/* ---------- page.php: прозаические страницы (Политика/Согласие) ---------- */
.page-prose{padding-top:calc(var(--nav-h) + 64px)}
.page-prose h1{margin-bottom:8px}
.page-prose .page-updated{color:var(--text-3);font-size:14px;margin-bottom:40px}
@media(max-width:900px){.page-prose{padding-top:calc(var(--nav-h) + 32px)}}