/* ==========================================================================
   БЛОГ — классы поверх style.css (токены/шрифты/цвета не дублируются,
   переиспользуются переменные :root из style.css: --bg,--paper,--ink*,
   --sage*,--amber*,--line,--radius,--shadow*,--font-head,--font-body).
   Подключается только на страницах блога (blog.html, blog-*.html) отдельным
   <link>, вслед за style.css — остальные 26 страниц сайта этот файл не
   загружают. Источник: orders/annasokolova-studio/blog/02-design-mockup/
   blog.css (макет, одобрен Анной) — перенесено без изменений дизайна.
   ========================================================================== */

/* Весь fade-in от .reveal на страницах блога отключён (2026-10-04, 3-й случай
   подряд). Сначала чинили только .article-body (текст статьи "запаздывал" при
   быстрой прокрутке), потом добавили .infog-wrap/.about-teaser — баг
   повторился на article-hero/article-cover/article-cover-hero/back-link
   (скрины Анны: пустой экран после обложки статьи, текст проявляется только
   со второго скролла — воспроизводится в разных браузерах, значит дело не в
   браузере, а в самой анимации). Похоже на баг перерисовки Chromium: тяжёлые
   blur-орбы в обложке + CSS-transition у .reveal сбивают перерисовку контента
   под ними при скролле, до следующего скролла/repaint. Проще и надёжнее
   выключить анимацию совсем на этих страницах, чем точечно патчить каждый
   следующий класс. Затронуты только страницы блога (этот файл подключается
   только там) — на остальных 26 страницах сайта .reveal работает как раньше. */
.reveal{opacity:1!important;transform:none!important;transition:none!important;}

/* ---------- Хиро раздела (список статей) ---------- */
.blog-hero{max-width:760px;}
.blog-hero .lead{color:var(--ink-soft);font-size:1.08rem;margin-top:20px;max-width:640px;}

/* ---------- Закреплённая (featured) статья — широкая карточка ---------- */
.blog-featured{
  display:grid;grid-template-columns:1.05fr 0.95fr;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-tight);margin-bottom:48px;
  transition:transform .3s,box-shadow .3s;
}
.blog-featured:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);}
.blog-featured-text{padding:44px 44px;display:flex;flex-direction:column;justify-content:center;}
.blog-featured .tag{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-deep);font-weight:700;}
.blog-featured h2{font-size:clamp(1.5rem,2.4vw,2.05rem);margin:16px 0 16px;line-height:1.2;}
.blog-featured p{color:var(--ink-soft);font-size:.98rem;margin:0 0 24px;max-width:440px;}
.blog-featured .more{font-size:.9rem;font-weight:600;color:var(--sage-deep);display:inline-flex;align-items:center;gap:6px;}
.blog-featured:hover .more{color:var(--sage);}
.blog-featured-cover{
  position:relative;min-height:300px;overflow:hidden;
  background:linear-gradient(155deg,#46553E,#5F7355 62%,#3E4A38);
}
.blog-featured-cover .orb{position:absolute;border-radius:50%;mix-blend-mode:multiply;filter:blur(6px);opacity:.85;}
.blog-featured-cover .o-mind{width:220px;height:220px;background:radial-gradient(circle at 35% 35%,#9CB18E,#5F7355);top:-40px;left:-30px;animation:floatA 10s ease-in-out infinite;}
.blog-featured-cover .o-soul{width:180px;height:180px;background:radial-gradient(circle at 65% 40%,#E8B36B,#D99A4E);bottom:-30px;right:-20px;animation:floatB 12s ease-in-out infinite;}
/* Текст-слоган поверх featured-плашки — про блог целиком, не про конкретную
   статью (сама статья уже подписана слева, в .blog-featured-text). Паттерн
   позиционирования унаследован от бывшего .fx-quote, стиль текста ближе к
   .article-cover-content h1 ниже (не курсив-цитата, а прямое утверждение). */
.blog-featured-cover-content{
  position:absolute;left:28px;right:28px;bottom:28px;z-index:2;
}
.blog-featured-cover-content p{
  margin:0;font-family:var(--font-head);font-weight:400;
  font-size:1.3rem;line-height:1.3;color:#FBF9F5;
  text-shadow:0 2px 14px rgba(0,0,0,.4);
}
@media(max-width:760px){.blog-featured{grid-template-columns:1fr;}.blog-featured-cover{min-height:200px;}.blog-featured-text{padding:32px 28px;}}

/* ---------- Сетка обычных карточек ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr;}}

.blog-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-tight);transition:transform .3s,box-shadow .3s;
  display:flex;flex-direction:column;
}
.blog-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft);}
/* Высота уменьшена ~на треть (16/10 → 16/6.5) — обложка декоративная, не
   должна занимать больше места, чем смысловой контент под ней (2026-10-05).
   isolation:isolate — свой стэкинг-контекст для ::after/.cover-title. */
.blog-card-cover{position:relative;aspect-ratio:16/6.5;overflow:hidden;isolation:isolate;}
.blog-card-cover .orb{position:absolute;border-radius:50%;mix-blend-mode:multiply;filter:blur(5px);z-index:0;}
/* 4 тональных варианта обложки-заглушки, крутятся по кругу до появления реальных иллюстраций к статьям */
.blog-card-cover.v1{background:linear-gradient(155deg,#EEF2E6,#D9E2CB);}
.blog-card-cover.v1 .orb{width:120px;height:120px;background:radial-gradient(circle at 35% 35%,#9CB18E,#5F7355);top:-20px;left:60%;opacity:.55;}
.blog-card-cover.v2{background:linear-gradient(155deg,#F8EBD4,#F0D6A8);}
.blog-card-cover.v2 .orb{width:130px;height:130px;background:radial-gradient(circle at 65% 40%,#E8B36B,#D99A4E);bottom:-30px;left:-20px;opacity:.6;}
.blog-card-cover.v3{background:linear-gradient(155deg,#EFEAE0,#E2D6C2);}
.blog-card-cover.v3 .orb{width:100px;height:100px;background:radial-gradient(circle at 35% 35%,#9CB18E,#5F7355);bottom:-10px;right:10%;opacity:.5;}
.blog-card-cover.v4{background:linear-gradient(155deg,#E7ECE0,#CFDAC0);}
.blog-card-cover.v4 .orb{width:150px;height:150px;background:radial-gradient(circle at 65% 40%,#E8B36B,#D99A4E);top:-40px;right:-30px;opacity:.5;}

/* Заголовок статьи — переехал внутрь обложки, ЗАМЕНЯЕТ <h3> под обложкой
   (не дублирует, решение web-developer 2026-10-05, см. site-backlog.md).
   Светлая подложка-градиент (растушёванная снизу ::after) держит контраст
   под текстом вне зависимости от того, где по карточке лёг orb. Реальная
   семантическая <h3> — не aria-hidden (в отличие от .orb), остаётся в DOM
   как настоящий заголовок карточки для скринридеров/структуры страницы. */
.blog-card-cover::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.82) 78%);
}
.blog-card-cover .cover-title{
  position:absolute;inset:0;z-index:2;margin:0;
  display:flex;align-items:flex-end;
  padding:14px 16px;box-sizing:border-box;
  font-family:var(--font-head);font-weight:400;font-size:1.05rem;line-height:1.25;
  color:var(--sage-deep);
}
/* На некликабельных карточках («Скоро появится») заголовок в обложке —
   главный визуальный якорь карточки, поэтому держим его заметнее, чтобы не
   спорить за внимание с тихим .soon-label в теле (см. ниже) — решает тот же
   открытый вопрос из site-backlog.md про сочетание обложки и CTA. */
.blog-card.soon .cover-title{font-weight:600;color:var(--sage-deep);}

.blog-card-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.blog-card .tag{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-deep);font-weight:700;}
/* .blog-card h3 больше не используется напрямую — заголовок карточки
   переехал внутрь .blog-card-cover (.cover-title, выше), под обложкой
   остались только tag/p/meta/CTA. Правило снято 2026-10-05 как мёртвое. */
.blog-card p{color:var(--ink-soft);font-size:.9rem;margin:10px 0 14px;flex:1;}
.blog-meta{display:flex;align-items:center;gap:9px;font-size:.78rem;color:var(--ink-faint);}
.blog-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-faint);flex:none;}
.blog-card .more{font-size:.84rem;font-weight:600;color:var(--sage-deep);display:inline-flex;align-items:center;gap:6px;margin-top:14px;}
.blog-card:hover .more{color:var(--sage);}

/* Карточки тем, по которым статья ещё не написана — визуальный анонс
   плана блога, без ссылки на несуществующую страницу (см. blog.html).
   cursor:default + без hover-подъёма, чтобы не читалось как рабочая ссылка.
   Значок «Скоро обновление» (.update-badge) убран полностью 2026-10-05 —
   этот класс (некликабельная карточка + «Скоро появится» вместо CTA) его
   заменяет, отдельная пометка стала избыточной. */
.blog-card.soon{cursor:default;}
.blog-card.soon:hover{transform:none;box-shadow:var(--shadow-tight);}
.blog-card.soon .soon-label{color:var(--ink-faint);margin-top:14px;}

/* ---------- Низ страницы списка: канал + "На главную" (2026-10-05) ---------- */
.blog-subscribe{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  text-align:center;padding:36px 0 4px;
}
.blog-subscribe p{margin:0;font-size:1rem;color:var(--ink-soft);max-width:560px;}
.blog-subscribe p a{color:var(--sage-deep);font-weight:600;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px;}
.blog-subscribe p a:hover{color:var(--amber-deep);}
.blog-subscribe .back-link{margin-bottom:0;}

/* ---------- Страница одной статьи ---------- */
.article-hero{max-width:760px;}
.article-hero h1{font-size:clamp(2rem,3.8vw,2.9rem);line-height:1.12;}
.article-hero .lead{color:var(--ink-soft);font-size:1.08rem;margin-top:18px;max-width:640px;}
.article-meta{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:.85rem;color:var(--ink-faint);flex-wrap:wrap;}
.article-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-faint);flex:none;}
.article-meta .tag{color:var(--amber-deep);font-weight:700;text-transform:uppercase;font-size:.72rem;letter-spacing:.14em;}

.article-cover{
  margin:36px 0 0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-soft);
  aspect-ratio:16/7;position:relative;
  background:linear-gradient(155deg,#46553E,#5F7355 62%,#3E4A38);
}
.article-cover .orb{position:absolute;border-radius:50%;mix-blend-mode:multiply;filter:blur(8px);opacity:.85;}
.article-cover .o-mind{width:260px;height:260px;background:radial-gradient(circle at 35% 35%,#9CB18E,#5F7355);top:-60px;left:6%;animation:floatA 11s ease-in-out infinite;}
.article-cover .o-soul{width:220px;height:220px;background:radial-gradient(circle at 65% 40%,#E8B36B,#D99A4E);bottom:-50px;right:8%;animation:floatB 13s ease-in-out infinite;}

/* ---------- Редизайн обложки статьи — текст-оверлей на плашке ----------
   Дополнительные классы, НЕ заменяют .article-hero/.article-cover выше —
   те остаются нетронутыми и используются остальными 12 статьями блога без
   изменений. Применено пока только на avtomatizaciya-vmesto-naima.html,
   одобрено Анной 2026-10-02. Источник — мокап
   orders/annasokolova-studio/blog/mockups/article-cover-redesign-v1.html
   (финальная версия v4, см. журнал orders/annasokolova-studio/blog/00-task.md).
   Перенос на другие статьи серии — отдельное решение, не делать по умолчанию
   (дизайнер отмечал риск с орбом o-mind на более длинных заголовках). */
.article-cover-hero{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--radius);box-shadow:var(--shadow-soft);
  background:linear-gradient(155deg,#46553E,#5F7355 62%,#3E4A38);
  margin:18px 0 0;padding:58px 64px 58px;min-height:300px;
}
@media(min-width:761px){
  .article-cover-hero{max-width:900px;margin-left:auto;margin-right:auto;}
}
.article-cover-hero::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(200deg,rgba(20,24,16,.10),rgba(16,20,13,.46) 80%);
}
.article-cover-hero .orb{position:absolute;border-radius:50%;mix-blend-mode:multiply;filter:blur(8px);opacity:.85;z-index:0;}
.article-cover-hero .o-mind{width:230px;height:230px;background:radial-gradient(circle at 35% 35%,#9CB18E,#5F7355);top:-66px;right:-26px;left:auto;animation:floatA 11s ease-in-out infinite;}
.article-cover-hero .o-soul{width:190px;height:190px;background:radial-gradient(circle at 65% 40%,#E8B36B,#D99A4E);bottom:-56px;right:12%;left:auto;animation:floatB 13s ease-in-out infinite;}
.article-cover-content{position:relative;z-index:2;max-width:680px;margin:0 auto;}
.article-cover-content .eyebrow{color:#F2CE93;margin-bottom:18px;text-shadow:0 2px 10px rgba(0,0,0,.35);}
.article-cover-content .eyebrow::before{background:#F2CE93;}
.article-cover-content h1{font-size:clamp(2rem,3.8vw,2.9rem);line-height:1.14;color:#FBF9F5;text-shadow:0 2px 18px rgba(0,0,0,.4);margin:0;}
.article-cover-content .article-meta{margin-top:20px;color:rgba(251,249,245,.8);text-shadow:0 1px 8px rgba(0,0,0,.35);}
.article-cover-content .article-meta .dot{background:rgba(251,249,245,.5);}
.article-cover-content .article-meta .tag{color:#F2CE93;}
.article-lead-after-cover{color:var(--ink-soft);font-size:1.08rem;line-height:1.6;max-width:680px;margin:28px auto 0;}
@media(max-width:760px){
  .article-cover-hero{padding:36px 26px 36px;min-height:0;margin-top:16px;}
  .article-cover-hero .o-mind{width:140px;height:140px;top:-36px;right:-38px;}
  .article-cover-hero .o-soul{width:120px;height:120px;bottom:-34px;right:-10px;}
  .article-cover-content .article-meta{gap:9px;row-gap:6px;}
}

.article-body{max-width:680px;margin:0 auto;}
.article-body p{font-size:1.05rem;line-height:1.75;color:var(--ink);margin:0 0 22px;}
.article-body h2{font-family:var(--font-head);font-weight:400;font-size:1.55rem;color:var(--sage-deep);margin:50px 0 18px;line-height:1.28;}
.article-body h3{font-family:var(--font-head);font-weight:400;font-size:1.2rem;color:var(--ink);margin:34px 0 14px;}
.article-body ul{margin:0 0 24px;padding:0;list-style:none;color:var(--ink-soft);font-size:1.02rem;line-height:1.65;}
.article-body ul li{padding:6px 0 6px 24px;position:relative;}
.article-body ul li::before{content:'';position:absolute;left:0;top:15px;width:6px;height:6px;border-radius:50%;background:var(--amber);}
.article-body ol{margin:0 0 24px;padding-left:22px;color:var(--ink-soft);font-size:1.02rem;line-height:1.65;}
.article-body a{color:var(--sage-deep);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px;}
.article-body a:hover{color:var(--amber-deep);}
.article-body blockquote{
  font-family:var(--font-head);font-style:italic;font-size:1.35rem;line-height:1.5;
  color:var(--sage-deep);border-left:3px solid var(--amber);margin:40px 0;padding:4px 0 4px 26px;
}
.article-byline{max-width:680px;margin:8px auto 0;font-size:.86rem;color:var(--ink-faint);}

.article-case-link{
  max-width:680px;margin:0 auto 22px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 24px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;box-shadow:var(--shadow-tight);
}
.article-case-link p{margin:0;font-size:.92rem;color:var(--ink-soft);}
.article-case-link a{flex:none;}

/* ---------- Инфографика «Было → стало» внутри статьи (кейс торговых ботов) ---------- */
.infog-wrap{
  max-width:680px;margin:40px auto 44px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-tight);padding:34px 36px 30px;
}
.infog-head{margin-bottom:22px;}
.infog-eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber-deep);
  font-weight:700;margin-bottom:10px;
}
.infog-eyebrow::before{content:'';width:18px;height:1.5px;background:var(--amber);}
.infog-title{
  font-family:var(--font-head);font-weight:400;font-size:1.3rem;
  color:var(--sage-deep);margin:0;line-height:1.2;
}
.infog-grid{
  display:grid;grid-template-columns:1fr 46px 1fr;align-items:start;gap:0;
}
.infog-col{padding:4px 6px;}
.infog-col-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.infog-icon{
  width:34px;height:34px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.infog-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.infog-before .infog-icon{background:rgba(217,154,78,.14);color:var(--amber-deep);}
.infog-after .infog-icon{background:rgba(95,115,85,.14);color:var(--sage-deep);}
.infog-col-label{
  font-family:var(--font-head);font-weight:400;font-size:1.02rem;color:var(--ink);
}
.infog-col ul{margin:0;padding:0;list-style:none;}
.infog-col li{
  position:relative;padding:5px 0 5px 18px;font-size:.92rem;line-height:1.5;color:var(--ink-soft);
}
.infog-before li::before{content:'';position:absolute;left:0;top:14px;width:5px;height:5px;border-radius:50%;background:var(--amber);}
.infog-after li::before{content:'';position:absolute;left:0;top:14px;width:5px;height:5px;border-radius:50%;background:var(--sage);}
.infog-arrow{
  display:flex;align-items:center;justify-content:center;height:100%;
  color:var(--ink-faint);min-height:120px;
}
.infog-arrow svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.infog-stack{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
}
.infog-stack-label{display:block;font-size:.8rem;color:var(--ink-faint);margin-bottom:12px;}
.infog-chips{display:flex;flex-wrap:wrap;gap:9px;}
.infog-chip{
  font-size:.82rem;color:var(--ink-soft);background:var(--bg-deep);
  border-radius:999px;padding:7px 14px;line-height:1.2;
}
@media(max-width:600px){
  .infog-wrap{padding:28px 22px 24px;}
  .infog-grid{grid-template-columns:1fr;gap:4px;}
  .infog-arrow{min-height:0;padding:10px 0;transform:rotate(90deg);}
  .infog-col{padding:4px 2px;}
}

/* ---------- «Читайте также» ---------- */
.next-read-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:820px){.next-read-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.next-read-grid{grid-template-columns:1fr;}}