/* Переведено на общий 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>. */

/* Счётчик 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, так что запас
   ещё большой. Тот же размер продублирован в 08-article-detail.css: на
   страницах статей 04-home.css не подключается (см.
   multigonlab_enqueue_styles) — менять надо оба места вместе, иначе баннер
   разъедется между Home и статьёй. (03.08.2026: там это теперь такое же
   правило в классе, а не инлайн-стиль в single.php, как было раньше.) */
.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;
}
/* ==========================================================================
   Адаптив главной: блок Hero (02.08.2026).

   По прямому решению: на узком экране картинка со столом НЕ уменьшается и
   не переносится под текст — она просто исчезает. Причина в том, как hero
   устроен (см. комментарий к .hero__image выше): картинка позиционирована
   абсолютно и привязана к правому краю, её ширина считается из высоты через
   пропорции файла. Любая попытка «вписать» её в узкую колонку ломает эту
   привязку и даёт либо наползание на текст, либо пустую полосу.

   Взамен текстовый блок получает всю ширину — то, ради чего hero и нужен
   на телефоне: крупный заголовок, подзаголовок, кнопки.
   ========================================================================== */
@media (max-width: 768px) {

  /* Верхний отступ уменьшен (03.08.2026, по прямому запросу: «сократить на
     30%»). Уменьшать надо весь просвет между логотипом и заголовком, а не
     одно это число: его набирают ещё нижнее поле шапки и верхнее поле белого
     тела страницы. Замерено на 375px: было 66px, стало 42px — то есть минус
     36%, чуть больше запрошенного. 48 -> 24 это шаг по шкале токенов; ровно
     30% дали бы 28px, а такого значения в шкале нет, и заводить его ради
     четырёх пикселей неверно — за одним произвольным числом обычно приходят
     остальные. Соседний шаг вверх (32px) дал бы минус 24%.
     Нижнее поле не трогаем — речь была про разрыв над заголовком. */
  .hero {
    padding: var(--space-5) var(--space-5) var(--space-7);
    min-height: 0;              /* 480px держали под высоту картинки, её больше нет */
  }

  /* display:none, а не visibility/opacity — картинка большая (1901×946),
     незачем заставлять браузер её грузить и держать в памяти ради
     невидимого элемента. */
  .hero__image { display: none; }

  .hero__content {
    max-width: none;            /* колонка 480px больше ничего не обходит */
  }

  /* Заголовок остаётся крупным: нижняя граница 32px, верхняя — десктопные
     44px, между ними тянется по ширине экрана. clamp вместо ступенек в
     несколько брейкпоинтов — плавно и без «прыжков» на промежуточных
     ширинах. Свой размер, а не токен --fs-h1: на десктопе тут тоже 44px,
     мимо токенов, и разводить их было бы неверно. */
  .hero h1 {
    font-size: clamp(32px, 9vw, 44px);
  }
  .hero p.lead {
    max-width: none;
    font-size: var(--fs-body);
  }
}

@media (max-width: 480px) {
  /* Кнопки в столбик и во всю ширину: рядом они на 375px не помещаются,
     а ужимать их до нечитаемых — хуже, чем поставить одна под другой. */
  .hero .cta-row { flex-direction: column; align-items: stretch; }
  .hero .cta-row .btn { width: 100%; text-align: center; }
  /* Строка доверия: два коротких пункта в ряд читаются, три — уже нет. */
  .trust-row { gap: var(--space-3) var(--space-4); }
}

/* ==========================================================================
   Latest Articles: снятие горизонтального переполнения (02.08.2026).

   Это НЕ дизайн-проход по блоку — он будет отдельно, когда дойдём до
   главной по порядку. Здесь только то, без чего нельзя оценить шапку:
   сетка задана как repeat(3, 286px) 1px 1fr, то есть её минимальная ширина
   около 950px независимо от экрана. Из-за неё документ на телефоне
   расползался до 1222px, браузер отдалял макет — и position:fixed у
   выехавшего меню цеплялся за эту ширину вместо ширины экрана, из-за чего
   панель уезжала за край. Пока сетка не сложена, шапку проверить нельзя.
   ========================================================================== */
@media (max-width: 900px) {
  .latest-articles-grid {
    grid-template-columns: minmax(0, 1fr);   /* фиксированные треки — главный источник переполнения; minmax(0,…) см. 05-page-shell.css */
  }
  /* Вертикальная линейка между рядом карточек и сайдбаром: в одну колонку
     разделять нечего. */
  .latest-articles-divider { display: none; }

  /* Всё, что было разложено по номерам колонок и строк, встаёт в поток.
     grid-column/grid-row: auto — иначе элементы продолжают ссылаться на
     треки 4 и 5, которых в одноколоночной сетке уже нет. */
  .featured-article-media,
  .related-articles-list,
  .latest-articles-grid > .card:nth-child(3),
  .latest-articles-grid > .card:nth-child(4),
  .latest-articles-grid > .card:nth-child(5) {
    grid-column: auto;
    grid-row: auto;
  }

  /* Картинка избранной статьи и текст — друг под другом, картинка во всю
     ширину вместо жёстких 435px. */
  .featured-article-media { flex-direction: column; }
  .featured-article-media .article-card-image { width: 100%; }

  /* Поле подписки шире экрана на 375px вместе с паддингами. */
  .newsletter-form .input { width: 100%; }
}

/* ==========================================================================
   Главная на телефоне — правки по живому просмотру (02.08.2026).
   Всё по прямому списку после проверки страницы сверху вниз.
   ========================================================================== */
@media (max-width: 900px) {

  /* «View all products →» / «View all articles →» убраны: они прямые дети
     .section-head, а счётчик «(5)» лежит внутри <h2>, поэтому селектор с
     дочерним комбинатором снимает только ссылку и не трогает число. Без
     ссылки заголовок получает всю ширину и счётчик встаёт в ту же строку,
     а не переносится с разрывом. */
  .section-head > a { display: none; }

  /* Боковой список статей с квадратными превью — на телефоне убран целиком.
     Он повторяет те же статьи, что и обычные карточки ниже, а в одну
     колонку превращается во второй, визуально другой список того же самого.
     Разделитель рядом с ним уже скрыт выше. */
  .related-articles-list { display: none; }

  /* Преимущества: по одному в строку, каждый на всю ширину. */
  .why-grid { grid-template-columns: minmax(0, 1fr); }

  /* Блок подписки: маскот сверху, текст и форма под ним, всё по центру.
     Кнопка и поле в столбик — рядом они на 375px не помещаются. */
  .newsletter {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-5);
  }
  /* Именно маскот из состояния «форма», а не любая картинка внутри блока:
     у состояния «уже подписан» своя картинка с собственной привязкой к
     нижнему краю, её эта ширина сломала бы. */
  [data-newsletter-panel-default] > img { width: 120px; }
  .newsletter-form { flex-direction: column; width: 100%; }
  .newsletter-form .input,
  .newsletter-form .btn { width: 100%; }
  /* Согласие оставляем по левому краю: галочка с длинной строкой текста по
     центру читается хуже, чем обычный флажок с подписью. */
  .newsletter-consent { text-align: left; }

  /* ---------- Состояние «уже подписан» (03.08.2026, по прямому решению) ----------
     Профессор с коробками убран целиком. Картинка шириной 619.7px и
     привязана к НАСТОЯЩЕМУ низу плашки абсолютным позиционированием (см.
     формулу выше по файлу) — вписать её в 340px, не сломав эту привязку,
     нельзя: получается либо наползание на текст, либо пустая полоса.
     display:none, а не прозрачность: файл 760×434, незачем заставлять
     браузер грузить его ради невидимого элемента.
     Фон с пробирками отдельно убирать не нужно — он лежит внутри
     [data-newsletter-panel-default] и в этом состоянии не выводится вовсе.
     Остаётся тёмная плашка, заголовок и кнопка на Freebies — по левому
     краю, во всю доступную ширину. */
  .newsletter .newsletter-recognized__mascot { display: none; }
  .newsletter-recognized {
    width: 100%;
    height: auto;          /* 245.4px держали высоту под картинку, её больше нет */
    text-align: left;      /* перебивает центрирование, заданное .newsletter выше */
  }
  .newsletter-recognized__content {
    margin-left: 0;        /* 545px обходили картинку */
    max-width: none;
  }
  /* 44px — размер под широкую плашку рядом с крупной картинкой. Здесь
     заголовок остался один и в две строки, ему хватает обычного h2. */
  .newsletter-recognized__content h3 { font-size: var(--fs-h2); }
}