/* Переведено на общий shell (15.07.2026): раньше здесь была своя копия
   body/.page/.page-body/.section-head/.grid-3, отдельная от
   05-page-shell.css, которым пользуются 4 внутренние страницы (Catalog,
   Product Detail, Articles, Article Detail). Из-за этого точечная правка
   этих общих классов требовала правки в двух местах и рисковала разъехаться
   между Home и остальными страницами. Теперь Home тоже подключает общий
   05-page-shell.css — правки .page/.page-body/.section-head/.grid-3/.grid-4
   применяются разом на все 5 страниц. Прежняя самостоятельная версия этого
   файла сохранена как 04-home.css.bak-20260715 на случай отката.
   Проверено: .page-body section:first-child/:last-child (старое, только для
   section) и .page-body > *:first-child/:last-child (общее, для любого
   элемента) дают одинаковый результат на текущей разметке Home — первый и
   последний прямые потомки .page-body здесь всегда <section>. */
@import url('05-page-shell.css');

/* Счётчик total-количества рядом с "Featured Products"/"Latest Articles"
   (22.07.2026, по прямому запросу) — только на Home, внутри самого <h2>
   (font-size: inherit, значит автоматически = размеру заголовка), не трогает
   общий .section-head h2 в 05-page-shell.css (используется и на других
   страницах). Кликабелен — ведёт на ту же общую страницу, что и соседняя
   ссылка "View all …". Селектор специфичнее .section-head a (0,2,0 против
   0,1,0 у голого .section-count) — иначе тот общий правило (цвет/размер/
   text-decoration:none) перебивает это. */
.section-head a.section-count {
  color: var(--color-text-secondary);
  font-size: inherit;
  font-weight: 400;
  text-decoration: underline;
}
.section-head a.section-count:hover { color: var(--color-accent-amber); }

/* ---------- Hero ----------
   Не grid: текст и картинка больше не жёстко привязаны друг к другу.
   Текст течёт в своей колонке фиксированной ширины (.hero__content),
   картинка — position:absolute, приколота к правому/нижнему краю hero.
   При сужении окна картинка не сжимается вместе с текстом, а уходит
   в нахлёст на текстовый блок (текст поверх, z-index выше). */
.hero {
  position: relative;
  background: transparent;
  border-radius: 0;
  margin: 0;
  padding: var(--space-8) var(--space-7);
  min-height: 480px;
  color: var(--color-text-inverse);
}
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 480px;
}
.hero h1 {
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--space-4);
}
.hero h1 .accent { color: var(--color-primary-hover); }
.hero p.lead {
  font-size: var(--fs-body-lg);
  color: #C9CDD3;
  max-width: 460px;
  margin: 0 0 var(--space-5);
  line-height: 1.5;
}
.hero .cta-row { display: flex; gap: var(--space-3); margin-bottom: var(--space-6); }
.hero .btn-secondary { border-color: #fff; color: #fff; }
.hero .btn-secondary:hover { background: rgba(255,255,255,.08); }

.trust-row { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 8px; font-size: var(--fs-caption); color: #C9CDD3; }
.trust-item svg { color: var(--color-primary-hover); flex-shrink: 0; }

/* Картинка со столом: два жёстких якоря.
   top = var(--space-8) — совпадает с верхним краем .hero__content (текст
   начинается сразу после верхнего паддинга hero), поэтому макушка
   профессора оказывается на одной линии с началом текстового блока.
   bottom: 0 — у абсолютного потомка это уже граница padding-box hero,
   т.е. истинный нижний край секции = верхняя граница белого тела.
   Высота элемента = расстояние между этими двумя якорями, ширина
   считается из неё через aspect-ratio картинки (height:100%; width:auto). */
.hero__image {
  position: absolute;
  top: var(--space-8);
  bottom: 0;
  right: var(--space-7);
  z-index: 1;
}
/* .hero__image-inner — обёртка вокруг картинки. Раньше (23.07.2026) здесь
   лежал ещё и слой .hero__image-fx с hero-desk.svg: пробирки, колба,
   молекулы и пузырьки, которые разлетались по ховеру. Весь этот слой
   удалён 2026-07-31 по прямому запросу — в hero остался только
   hero-desk.png. Вместе со слоем ушли position:relative и z-index:0,
   которые существовали исключительно ради его системы координат и
   stacking-контекста. */
.hero__image-inner {
  height: 100%;
}
.hero__image-inner .hero__image-base { height: 100%; width: auto; display: block; }

/* ---------- Freebies promo banner ---------- */
.promo-banner {
  background: var(--color-dark-section);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-text-inverse);
  gap: var(--space-5);
}
.promo-banner h3 { font-family: var(--font-heading); font-size: var(--fs-h3); margin: 0 0 var(--space-2); }
.promo-banner p { color: #C9CDD3; margin: 0; font-size: var(--fs-body); }
.promo-banner .btn-primary { flex-shrink: 0; }

/* ---------- Why choose us ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.why-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.why-item svg { color: var(--color-primary); flex-shrink: 0; }
.why-item h4 { margin: 0 0 4px; font-size: var(--fs-body); font-weight: 700; }
.why-item p { margin: 0; font-size: var(--fs-small); color: var(--color-text-secondary); }

/* ---------- Newsletter ---------- */
.newsletter {
  position: relative;
  /* z-index:0 (23.07.2026) — только чтобы .newsletter создавал свой
     собственный stacking context (position:relative само по себе этого не
     делает): без этого z-index:-1 у .newsletter-tubes-bg ниже "убежал" бы в
     контекст более дальнего предка и мог перекрыться посторонним элементом
     страницы вместо того, чтобы просто уйти под текст/форму внутри баннера. */
  z-index: 0;
  background: var(--color-dark-section);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-7);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  color: var(--color-text-inverse);
}
/* 125px — маскот в баннере подписки, укрупнён 2026-07-31 в два захода
   (90 -> 104 -> 125, суммарно ~+39%). Исходник 868x1002, так что запас
   ещё большой. Тот же размер продублирован инлайном в single.php: на
   страницах статей .newsletter свёрстан инлайн-стилями и 04-home.css туда
   не подключается (см. multigonlab_enqueue_styles) — менять надо оба
   места вместе, иначе баннер разъедется между Home и статьёй. */
.newsletter img { width: 125px; flex-shrink: 0; }
/* Декоративный фон tubes.svg (23.07.2026, по прямому запросу) — только для
   состояния "форма подписки" (data-newsletter-panel-default). Обёртка-div
   нужна т.к. tubes.svg не имеет width/height атрибутов (только viewBox) —
   top:0+bottom:0 прямо на <img> у такого файла дают браузеру неоднозначный
   intrinsic size (проверено вживую: картинка растягивалась на всю ШИРИНУ
   баннера вместо высоты). У обычного div такой проблемы нет — top:0+bottom:0
   однозначно растягивают его ровно на высоту .newsletter (какой бы она ни
   была, даже auto), right:0 — привязка к правому краю. Сам SVG внутри —
   просто height:100%; width:auto — подхватывает реальную пропорцию
   (393.13:214.07) из viewBox, так что при любом масштабировании баннера
   картинка растягивается вместе с ним без потери резкости (в отличие от
   PNG/JPG). z-index:-1 на обёртке — уходит под текст/форму, а не поверх них. */
.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 h3 { font-family: var(--font-heading); font-size: var(--fs-h3); margin: 0 0 4px; }
.newsletter p { color: #C9CDD3; margin: 0 0 var(--space-4); font-size: var(--fs-small); }
.newsletter-form { display: flex; gap: var(--space-2); }
/* Цвет/фон/рамка теперь через модификатор .input--on-dark (01-atoms.css,
   общий для всех полей на тёмном фоне сайта) — здесь остаётся только
   ширина, специфичная для этого блока. 16.07.2026. */
.newsletter-form .input { width: 280px; }

/* "Already subscribed" — редизайн (23.07.2026, по прямому запросу).
   freebie_banner.png — 760x434, прозрачный фон, уже включает все декоративные
   полупрозрачные колбы/пробирки/молекулы (не отдельный слой). Жёсткая
   привязка к НАСТОЯЩЕМУ низу .newsletter (не к краю паджинга — картинка
   намеренно "прорывает" нижний padding через отрицательный bottom). Плашку
   уменьшили на 40px по прямому запросу (23.07.2026) БЕЗ изменения самой
   картинки — картинка как была 434px и привязана к низу, так и осталась,
   просто теперь выступает над верхним краем плашки на 70px вместо
   первоначальных 30px (высота плашки уменьшилась — выступ соответственно
   увеличился, это не отдельная настройка, а прямое следствие той же формулы).
   Плашка (.newsletter) была высотой 364px (=404-40). Картинка + высота
   плашки уменьшены на 15% от этих значений (23.07.2026, по прямому запросу,
   пропорции картинки 760:434 сохранены — масштаб применён к обоим
   измерениям одинаково): картинка 760x434 -> 646x368.9 (x0.85), плашка
   364 -> 309.4 (x0.85). Выступ головы над плашкой автоматически
   уменьшается той же пропорцией (70px -> 59.5px) — это следствие той же
   формулы (bottom-привязка + разница высот), не отдельная настройка.
   .newsletter-recognized выставлен в 245.4px = 309.4 - паддинг .newsletter
   сверху+снизу (var(--space-6)*2 = 64px).
   Высота плашки (309.4px) и позиция текстового блока/кнопки — эталон,
   зафиксированы, больше не трогаем (23.07.2026, по прямому запросу).
   Дальше меняется только картинка: выступ причёски над плашкой уменьшен на
   15px (был 59.5px -> стал 44.5px) — раз плашка больше не меняется, это
   значит просто картинка стала на 15px ниже (368.9 -> 353.9), ширина
   пересчитана по той же пропорции 760:434 (353.9 * 760/434 ≈ 619.7). */
.newsletter-recognized {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  height: 245.4px;
}
/* Баг (23.07.2026): свой display:flex выше — авторский CSS, а [hidden]{display:none}
   встроен браузером как user-agent стиль; при равной специфичности автор
   побеждает UA независимо от порядка объявления, поэтому атрибут [hidden]
   переставал скрывать блок, и оба состояния (форма подписки + этот баннер)
   рендерились одновременно, наложенные друг на друга. Явное правило ниже
   (специфичность выше за счёт [hidden]) возвращает ожидаемое поведение. */
.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;
}
/* margin-left очищает плотный силуэт профессора (замерено по альфа-каналу
   PNG: сплошная фигура/подарки заканчиваются примерно на x=460px из 760) —
   дальше на картинке только лёгкие полупрозрачные декорации, поверх которых
   текст может спокойно ложиться благодаря z-index. Отступ увеличивали дважды
   по прямому запросу (23.07.2026): 470 -> 520 (+50) -> 545 (+25). */
.newsletter-recognized__content {
  position: relative;
  z-index: 2;
  margin-left: 545px;
  max-width: 460px;
}
/* Тот же кегль, что у фирменного .hero h1 этой же страницы (44px, не токен
   --fs-h1/40px) — по прямому запросу (23.07.2026). */
.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);
}

/* .grid-3/.grid-4 теперь в 05-page-shell.css — общий для всех 5 страниц. */

/* ---------- Latest Articles: единая bento-сетка (15.07.2026, v4) ----------
   Прежний вариант — одна карточка article-card--featured на всю ширину белого
   тела — на широком экране растягивался в неудобный тонкий баннер. Далее
   картинка/текст жили в двух отдельных треках 4-колоночной сетки (1fr каждый),
   но у картинки зафиксирован пиксельный размер (390×290) — трек и контент
   разъехались: в треке оставалось пустое место, и текст в соседнем треке
   стартовал с "гуляющим" отступом, а не сразу после реального края картинки.
   v4: картинка + текст обёрнуты в один flex-блок .featured-article-media
   (одна ячейка на колонки 1–3), gap между ними — фиксированный var(--space-5),
   поэтому текст всегда начинается ровно на этом отступе от картинки, независимо
   от её пиксельного размера. Список остальных статей — колонка 4, растянутая
   на обе строки (grid-row: span 2). align-items:start — картинка и текст
   выровнены по верхнему краю.
   .article-card--featured остаётся в 02-cards.css как компонент витрины
   атомов — здесь на Home просто другая композиция для той же featured-статьи. */
.latest-articles-grid {
  display: grid;
  /* Image Architecture v2 (22.07.2026) — columns 1-3 fixed at 286px (the
     row's own real rendered card width, measured live in-browser before this
     change, not derived from token arithmetic) instead of 1fr. Without this,
     the secondary-row cards would stretch/shrink with viewport width, and
     since their images are no longer object-fit:cover (see .article-homecard-image
     below) the image's rendered height would drift with the card's fluid
     width, which the user explicitly rejected (round 2/3 of this decision,
     see project memory). Column 5 (sidebar) stays 1fr and absorbs any
     leftover width instead. */
  grid-template-columns: repeat(3, 286px) 1px 1fr;
  gap: var(--space-5);
  align-items: start;
  margin-bottom: var(--space-6);
}
/* Разделитель — отдельный трек шириной 1px (колонка 4), а не border на
   сайдбаре. Grid-gap (24px) ложится по обе стороны от него абсолютно
   одинаково, само собой — без негативных margin и риска наложения на
   соседнюю карточку (так было в прошлой версии: margin-left вытолкнул
   сайдбар за пределы его ячейки, и он наехал на 3-ю карточку). */
.latest-articles-divider {
  grid-column: 4 / 5;
  grid-row: 1 / 3;
  align-self: stretch;
  background: var(--color-border);
}
.featured-article-media {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  display: flex;
  align-items: stretch;
  gap: var(--space-5);
}
/* Image Architecture v2 (22.07.2026) — was .featured-article-image, fixed
   435x323 + object-fit:cover crop. Now .article-card-image (same class used
   everywhere else the "Card" image type appears — archive/search/related,
   see card-article.php), scoped to this flex context for its width only.
   No forced height/object-fit: the source file is uploaded already at the
   Card type's 1200x900 (4:3) target ratio, so width:100%;height:auto (see
   universal rule near the end of this section) reproduces ~323px tall on
   its own without any cropping. */
.featured-article-media .article-card-image {
  box-sizing: border-box;
  width: 435px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
}
/* align-items:stretch на .featured-article-media растягивает контент-блок
   на всю высоту картинки (323px) — .featured-article-content становится
   flex-колонкой, а мета-строку (Alex Multigon · 14 min read) прижимаем
   к низу через margin-top:auto, так что она выравнивается по нижнему
   краю большой картинки, а заголовок/описание остаются у верхнего края. */
.featured-article-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.featured-article-badges { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.featured-article-content .article-card__title { font-size: var(--fs-h3); margin-top: 0; }
/* У featured-блока картинка высокая (323px) и рядом с ней остаётся много
   пустого места — базовые 2 строки excerpt (см. 02-cards.css) выглядят
   слишком коротко на таком просторе. Здесь одном месте — до 6 строк. 16.07.2026. */
.featured-article-content .article-card__excerpt {
  -webkit-line-clamp: 10;
  min-height: 0;
}
.featured-article-content .article-card__meta { margin-top: auto; }
/* Featured-заголовок не внутри .card (см. .card:hover в 02-cards.css) —
   тот же оранжевый+подчёркивание hover, но триггер — наведение на весь
   featured-блок (картинка+текст), а не только на сам заголовок. */
.featured-article-media:hover .article-card__title {
  color: var(--color-accent-amber);
  text-decoration: underline;
}

.related-articles-list {
  grid-column: 5 / 6;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
}
.latest-articles-grid > .card:nth-child(3) { grid-column: 1 / 2; grid-row: 2 / 3; }
.latest-articles-grid > .card:nth-child(4) { grid-column: 2 / 3; grid-row: 2 / 3; }
.latest-articles-grid > .card:nth-child(5) { grid-column: 3 / 4; grid-row: 2 / 3; }

/* Image Architecture v2 (22.07.2026) — was a .card__image height:130px
   override (object-fit crop to a fixed 130px-tall strip). Now
   .article-homecard-image: no forced height at all — the uploaded source
   file is already exactly 700x320 (the Home Secondary Card type's target
   ratio), so width:100%;height:auto (shared rule, 02-cards.css) reproduces
   ~130px tall on its own, no cropping. The card's own width is fixed (see
   .latest-articles-grid grid-template-columns above) precisely so this
   stays true at every viewport instead of drifting with a fluid column. */

/* excerpt в этих 3 карточках — 3 строки вместо базовых 2 (см. .article-card__excerpt
   в 02-cards.css) — с горизонтальным превью 130px внизу освобождается больше
   места, 2 строки + line-clamp оставляли заметный пустой зазор перед мета-строкой.
   Локальный оверрайд только здесь — Articles listing/Related Articles на 2 строках
   без нареканий, их не трогаем. */
.latest-articles-grid > .card:nth-child(3) .article-card__excerpt,
.latest-articles-grid > .card:nth-child(4) .article-card__excerpt,
.latest-articles-grid > .card:nth-child(5) .article-card__excerpt {
  -webkit-line-clamp: 3;
  min-height: calc(1.4em * 3);
}

.related-article-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.related-article-item:first-child { padding-top: 0; }
.related-article-item:last-child { padding-bottom: 0; border-bottom: none; }
/* Image Architecture v2 (22.07.2026) — width only (fixed, unchanged from
   before); height/object-fit dropped, base look moved to the shared
   .article-thumb-image rule (02-cards.css). Source file is uploaded already
   at the Thumbnail type's 600x600 (1:1) target ratio, so width:100%;
   height:auto reproduces the same 130x130 square with zero cropping. */
.related-article-thumb {
  width: 130px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}
/* Рубрика (тег) прижата к верхнему краю превью, а блок заголовок+дата
   центрируется в оставшемся месте под тегом. Раньше это делалось через
   position:absolute с top:50% — сломалось, т.к. .related-article-body
   без "живого" контента внутри (все дети абсолютные) схлопывался по
   высоте в 0, и 50% от нуля — это тоже 0 (всё наезжало друг на друга).
   Исправлено на обычный flex-column + margin-top:auto/margin-bottom:auto
   на .related-article-mid — классический приём центрирования "в
   оставшемся месте" без position:absolute и без риска подобной поломки. */
.related-article-body { min-width: 0; display: flex; flex-direction: column; }
.related-article-body > .tag { flex-shrink: 0; align-self: flex-start; padding: 2px 8px; margin: 0; }
.related-article-mid { margin-top: auto; margin-bottom: auto; }
.related-article-title {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.related-article-meta { font-size: var(--fs-caption); color: var(--color-text-secondary); }
/* Тот же оранжевый+подчёркивание hover, что и у остальных заголовков
   карточек — триггер: наведение на весь пункт списка (превью+текст). */
.related-article-item:hover .related-article-title {
  color: var(--color-accent-amber);
  text-decoration: underline;
}