@import url('05-page-shell.css?v=2');

/* Колонки поменяны местами (15.07.2026): текст статьи + hero-картинка
   теперь слева (1fr), "On this page" — справа (220px). Картинка внутри
   .article-body больше не растягивается на всё белое поле — её ширина
   равна ширине текстовой колонки автоматически, т.к. она теперь внутри неё. */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: var(--space-7);
  align-items: start;
}
/* Тема (не в статичном референсе): если в статье нет ни одного <h2>,
   TOC пуст и .toc не рендерится single.php'ом — тогда статья занимает
   всю ширину вместо пустого правого столбца. 15.07.2026 (тема). */
.article-layout--no-toc { grid-template-columns: 1fr; }

/* ---------- Table of Contents (sticky) ----------
   .article-layout теперь заканчивается сразу после FAQ (автор-карточка,
   Related Products/Articles и newsletter вынесены наружу, в полноширинные
   секции .page-body — см. HTML, правка от 15.07.2026). Sticky-позиционирование
   всегда ограничено высотой содержащего grid-блока: раз .article-layout стал
   короче (равен только высоте самой статьи), TOC естественно "отклеивается"
   и прокручивается прочь вместе со страницей, как только читатель проходит
   конец статьи — больше не сопровождает Related Products/Articles/newsletter. */
/* top: 50px — отступ от верхнего края окна браузера при sticky-прилипании
   (было var(--space-6)=32px, затем 10px — по правке от 16.07.2026 скорректировано
   до 50px). Заголовок — чёрный, а не приглушённый серый (было var(--color-text-secondary)). */
.toc { position: sticky; top: 50px; }
.toc h4 {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #000;
  margin: 0 0 var(--space-3);
}
/* .toc > a (не просто ".toc a") — ссылки навигации "On this page" лежат
   прямыми детьми .toc, а баннер в сайдбаре (23.07.2026) рендерится тоже
   внутри .toc (глубже, через .articles-sidebar-banner__clip > a). Широкий
   селектор ".toc a" бил и по ссылке баннера тоже, добавляя ей чужой
   border-left/padding/display:block — это и была та самая "серая полоса
   слева от баннера", а не баг рендеринга sticky+border-radius, как было
   предположено раньше. Прямой child-селектор эту утечку убирает. */
.toc > a {
  display: block;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 6px 0 6px var(--space-3);
  border-left: 2px solid var(--color-border);
  transition: color .15s ease, border-color .15s ease;
}
/* .is-active теперь ставится и снимается динамически (site.js, scrollspy по
   прокрутке) — не только на первую ссылку статично, как в референсе. Клик
   по пункту плавно скроллит к нужному <h2> (site.js). 16.07.2026. */
.toc > a.is-active { color: var(--color-primary); border-left-color: var(--color-primary); font-weight: 600; }
.toc > a:hover:not(.is-active) { color: var(--color-accent-amber); text-decoration: underline; }

.article-meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}
/* Image Architecture v2 (22.07.2026) — aspect-ratio/background/object-fit
   dropped, base look moved to the shared .article-hero-image rule
   (02-cards.css). Source file is uploaded already at the Hero type's
   1920x1080 (16:9) target ratio, so width:100%;height:auto reproduces the
   same 16:9 box with zero cropping, at every screen width. */
.article-hero-image {
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
}

/* ---------- Article body: базовая типографика (h1-h6/p/списки/ссылки/
   blockquote) переехала в 05-page-shell.css (17.07.2026, "стандартизация
   типографики") — она общая для .article-body ГДЕ БЫ он ни использовался
   (статьи, страницы, теперь и Overview на Product/Freebie), а этот файл
   грузится только на Article Detail. Здесь остались только специфичные для
   статей блоки: кастомный figure/.fig-image (color-palette статьи и т.п.). */
.article-body figure { margin: var(--space-6) 0; }
.article-body .fig-image {
  aspect-ratio: 16 / 9;
  background: #DADCE0;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: #B3B6BB;
}
.article-body figcaption { font-size: var(--fs-caption); color: var(--color-text-secondary); text-align: center; margin-top: var(--space-2); }

/* ---------- Mascot episode panel (Professor Multigon + Drone, тест 2026-07-26) ----------
   Картинка генерируется на всю ширину баннера (сцена слева, плавно гаснущая
   в сплошной тёмный фон справа) — текст ложится абсолютным позиционированием
   поверх уже пустой правой части картинки, без отдельного CSS-фона: шов
   не появляется, потому что весь фон уже часть одного файла. */
.mg-episode-panel {
  position: relative;
  width: 100%;
  aspect-ratio: 1004 / 360;
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Bottom margin: var(--space-7) (48px, matches removed .author-card's
     old contribution) - 40px per 2026-07-26 correction (previous +40px
     went the wrong direction — widened the gap instead of tightening it). */
  margin: var(--space-6) 0 calc(var(--space-7) - 40px);
  background: #1b2330;
}
.mg-episode-panel__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mg-episode-panel__text {
  position: absolute;
  top: 0;
  right: 40px;
  height: 100%;
  width: 42%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 16px var(--space-6);
  box-sizing: border-box;
}
.mg-episode-panel__header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #7a8494;
  margin: 0 0 4px;
  /* 61px = avatar width (39px) + row gap (10px) + bubble's own left padding
     (12px) — aligns with the reply TEXT inside the bubble, not the bubble's
     border edge, per 2026-07-26 request. */
  margin-left: 61px;
  /* position:relative + top (not margin-top) — a negative margin on a flex
     child shifts the whole column's layout math, dragging the message
     bubbles up with it. relative positioning keeps this element's original
     space reserved in the flow, so siblings below don't move. */
  position: relative;
  top: -15px;
}
.mg-episode-panel__header span { color: #d8c25a; font-weight: 700; }

/* Chat-bubble message row (2026-07-26) — avatar is a fixed, reusable image,
   never regenerated per scene (see character-bible-professor-multigon.md §13).
   The whole row structure tolerates 1 or 2 messages (solo-character scenes
   just render one .mg-episode-panel__message, not a separate layout). */
.mg-episode-panel__message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.mg-episode-panel__avatar {
  flex: 0 0 auto;
  width: 39px;
  height: 39px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #5f6b7a;
  transition: transform .15s ease, border-color .15s ease;
}
.mg-episode-panel__message--professor .mg-episode-panel__avatar { border-color: #a8e06c; }
.mg-episode-panel__message--drone .mg-episode-panel__avatar { border-color: #6cb8e0; }
.mg-episode-panel__message:hover .mg-episode-panel__avatar { transform: scale(1.08); }

.mg-episode-panel__bubble {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 12px;
  flex: 1 1 auto;
  min-width: 0;
  transition: background .15s ease, border-color .15s ease;
}
.mg-episode-panel__message--professor .mg-episode-panel__bubble { border-color: #a8e06c; }
.mg-episode-panel__message--drone .mg-episode-panel__bubble { border-color: #6cb8e0; }
.mg-episode-panel__message:hover .mg-episode-panel__bubble { background: rgba(255, 255, 255, 0.12); }
/* Specificity fix: .article-body p (typography base, 05-page-shell.css)
   otherwise wins over single-class selectors and forces its own muted
   gray onto these lines. */
.mg-episode-panel .mg-episode-panel__name {
  font-size: 13px;
  font-weight: 500;
  margin: 0 0 2px;
}
.mg-episode-panel__message--professor .mg-episode-panel__name { color: #a8e06c; }
.mg-episode-panel__message--drone .mg-episode-panel__name { color: #6cb8e0; }
.mg-episode-panel .mg-episode-panel__line {
  font-size: 13px;
  line-height: 1.45;
  color: #ffffff;
  margin: 0;
}
.mg-episode-panel .mg-episode-panel__time {
  font-size: 10px;
  color: #5f6b7a;
  text-align: right;
  margin-top: 4px;
}

/* ---------- Color swatch block (для color-palette статей) ---------- */
.swatch-row { display: flex; gap: var(--space-3); margin: var(--space-5) 0; }
.swatch { flex: 1; border-radius: var(--radius-md); overflow: hidden; }
.swatch-color { height: 64px; }
.swatch-label { padding: var(--space-2); font-size: var(--fs-caption); background: #fff; border: 1px solid var(--color-border); border-top: none; text-align: center; }

/* ---------- Inline promo callout ---------- */
.promo-inline {
  background: var(--color-tint-peach);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-7) 0;
}
.promo-inline h4 { margin: 0 0 4px; font-family: var(--font-heading); font-size: var(--fs-h4); }
.promo-inline p { margin: 0; font-size: var(--fs-small); color: var(--color-text-secondary); }
.promo-inline .btn-primary { flex-shrink: 0; }

/* ---------- Author card ---------- */
.author-card {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin: var(--space-7) 0;
}
/* Тема (не в статичном референсе): .author-card лежит вне .article-layout
   (полноширинная секция — см. комментарий вверху файла), поэтому по
   умолчанию растягивается на всю ширину белого тела страницы, а не только
   на ширину текстовой колонки. .author-card--narrow (single.php, только
   когда есть TOC) ограничивает её той же шириной, что и колонка статьи в
   .article-layout: 1fr / 220px с зазором var(--space-7) между ними —
   отсюда именно такая формула. Без TOC (--no-toc) карточка остаётся на
   всю ширину, как и сама статья в этом случае. 16.07.2026. */
.author-card--narrow { max-width: calc(100% - 220px - var(--space-7)); }

.author-card__avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--color-tint-green);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--color-primary-active);
  font-size: var(--fs-h4);
  flex-shrink: 0;
  overflow: hidden;
}
/* Маскот вместо инициалов "PA" (23.07.2026, по прямому запросу). */
.author-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.author-card h4 { margin: 0 0 4px; font-family: var(--font-heading); }

/* ---------- Newsletter "already subscribed" (23.07.2026) ----------
   Тот же компонент/разметка/классы, что на Home (front-page.php,
   04-home.css) — перенесено сюда 1:1 по прямому запросу, продублировано
   (не вынесено в общий файл), т.к. .newsletter на этой странице уже
   исторически дублируется через инлайн-стили в single.php, а не через
   класс из 04-home.css (который на статье вообще не подключается —
   is_singular('post') грузит только этот файл, см. multigonlab_enqueue_styles()
   в functions.php). Держать эти два блока в синхроне при последующих правках.
   .newsletter получает position:relative здесь же — на Home это идёт из
   04-home.css, а здесь .newsletter объявлен только инлайн-стилями в
   single.php (без position), без этого правила абсолютно спозиционированный
   маскот считал бы координаты от неправильного предка. */
.newsletter { position: relative; z-index: 0; }
/* Декоративный фон tubes.svg (23.07.2026) — тот же приём, что в 04-home.css.
   Обёртка-div нужна т.к. tubes.svg не имеет width/height атрибутов (только
   viewBox) — top:0+bottom:0 прямо на <img> у такого файла дают браузеру
   неоднозначный intrinsic size (растягивалось на ширину вместо высоты).
   top:0+bottom:0 на обычном div однозначно растягивают его на высоту
   .newsletter, right:0 — привязка к правому краю. SVG внутри — height:100%;
   width:auto, сохраняет реальную пропорцию из viewBox. z-index:-1 (и
   z-index:0 на .newsletter выше, чтобы создать свой stacking context) —
   уходит под текст/форму, не перекрывая их. */
.newsletter .newsletter-tubes-bg-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  pointer-events: none;
}
.newsletter .newsletter-tubes-bg-wrap .newsletter-tubes-bg {
  display: block;
  height: 100%;
  width: auto;
}
.newsletter-recognized {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  height: 245.4px;
}
/* Баг (23.07.2026), тот же фикс, что в 04-home.css — свой display:flex выше
   побеждал встроенный [hidden]{display:none} браузера (равная специфичность,
   автор побеждает user-agent независимо от порядка), из-за чего форма
   подписки и этот баннер рендерились одновременно, наложенные друг на
   друга. */
.newsletter-recognized[hidden] { display: none; }
.newsletter .newsletter-recognized__mascot {
  position: absolute;
  left: 0;
  bottom: calc(-1 * var(--space-6));
  width: 619.7px;
  height: 353.9px;
  flex-shrink: 0;
  z-index: 1;
  pointer-events: none;
}
.newsletter-recognized__content {
  position: relative;
  z-index: 2;
  margin-left: 545px;
  max-width: 460px;
}
.newsletter-recognized__content h3 { font-size: 44px; margin: 0 0 var(--space-2); }
.newsletter-recognized__content p { font-size: var(--fs-body); margin: 0 0 var(--space-3); }
.newsletter-recognized__accent { color: var(--color-primary-hover); }
.newsletter-recognized__dash {
  display: block;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-primary);
  margin: 0 0 var(--space-4);
}
.author-card p { margin: 0; font-size: var(--fs-small); color: var(--color-text-secondary); }