/* НефтеХимСырье — главная: секции после hero. Владелец: роль «Главная».
   Разметка — modx/chunks/home.*.tpl. Только токены из tokens.css.
   Главная короткая, «каталог-магазин» (DESIGN.md, Орсен 07.10): что поставляем (плитки разделов) → популярные позиции
   (карточки catalog.card) → наши партнёры (ADR-014) → полоса доверия, которая ведёт в подвал (дуга, пузыри и «Запросить цену» — UI, ui.footer).
   Без формул, цепей, зигзагов и декора-«пробирок»: в плитках разделов только данные (число позиций, марки, группы).
   Геометрия (DESIGN.md «Серьёзный тон и единая геометрия»): отступы — только --s-* (4/8), внутренний ≤ внешний
   (padding плитки ≤ gap сетки); скругления — --r-card у плиток и панелей, pill у меток и кнопок, круг у значков;
   наведение — светлее фон и рамка, без свечения и подъёма; янтарь только у кружка-стрелки плитки раздела (.hcat__go, Орсен 08.10).
   Ритм (SPACING.md §2–3): секция --section (64 → 96), соседние секции не удваивают отступ; заголовок → содержимое
   --section-head (24 → 32); сетки --grid-gap = padding карточки --pad-card (16 → 24); блок ↔ блок --block-gap.
   Движение: только появление блока целиком (data-reveal, ui/reveal.js), без построчных заголовков и поочерёдных плашек.
   prefers-reduced-motion — всё в конечном состоянии. */

/* ───────────────────────── шапка секции: метка → заголовок → лид слева, ссылка-действие справа ─────────────────────────
   Типографика — SPACING.md §13: заголовок .t-h2 (base.css), без курсива и <em>-выделения; вертикаль §13.7:
   метка → H2 --gap-eyebrow (12) < H2 → лид --gap-title (16) < лид или заголовок → содержимое --section-head (24 → 32).
   Лид стоит под заголовком с левого края, а не справа на линии H2 (§13.7: мелкий серый текст справа читался как сноска).
   Справа на линии заголовка — только ссылка-действие («Весь каталог»). Отступы не складываются: зазоры — gap, у детей margin нет */

.home-bar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  gap: var(--gap-title) var(--s-7);
  margin-bottom: var(--section-head);
}
.home-bar__main { grid-column: 1; display: flex; flex-direction: column; gap: var(--gap-eyebrow); min-width: 0; }
/* лид — строкой под заголовком во всю шапку, мера --measure-lead: ступень .t-lead (кегль, межстрочный, цвет — те же токены) */
.home-bar__lead {
  grid-column: 1 / -1;
  max-inline-size: var(--measure-lead);
  font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-2); text-wrap: pretty;
}
.home-bar__link { grid-column: 2; grid-row: 1; gap: var(--gap-icon); height: var(--h-md); padding: 0 var(--px-md); }

/* ───────────────────────── 1. Что поставляем: плитки разделов ─────────────────────────
   Слева крупная плитка «Базовые масла» (марки и разбивка по группам), справа во всю ширину правой колонки: 02 — обычная
   плитка, 03–05 — компактные строки «номер · название · короткий лид · стрелка» (09.10: у разделов с 1–2 позициями
   было пустое поле внутри плитки). Чисел позиций в плитках нет (09.10). Строки 03–05 одной высоты (ряды 1fr);
   если крупная плитка выше правой колонки, остаток делят строки 03–05 (текст в них по центру, поля без пустоты).
   Полос оттенков и «флаконов» нет (r1). ≤ 1024 — одна колонка: крупная плитка, под ней 02–05 строками.
   Первая секция после hero: сверху --block-gap (32 → 48), а не --section (r1: 124 px пустоты над надзаголовком).
   Ленты разделов внизу hero нет (09.10): под дугой — тёмное тело «планеты», низ hero уходит в --bg без шва
   (hero.css, .hero::after). Секция на hero не заходит: надзаголовок не должен показываться обрезком внизу первого экрана. */

.home-range { padding-top: var(--block-gap); padding-bottom: var(--section); }

.hcats {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) repeat(2, minmax(0, 1fr));
  grid-template-rows: auto repeat(3, 1fr);
  gap: var(--grid-gap);
}
.hcats__item { display: flex; min-width: 0; }
.hcats__item--lead { grid-row: 1 / -1; }
.hcats__item:not(.hcats__item--lead) { grid-column: 2 / -1; }

.hcat {
  position: relative;
  display: flex; flex-direction: column; width: 100%;
  padding: var(--pad-card);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card);
  color: var(--ink);
  transition: border-color var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out);
}
.hcat__top { display: flex; align-items: center; gap: var(--s-2); min-height: var(--h-xs); }
.hcat__idx { display: none; }   /* номеров 01–05 нет на всех ширинах (day3); правило — страховка до выкладки шаблона */
.hcat__tag {
  flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s-2);   /* метка без действия: 24, 8 / 8 (§4) */
  white-space: nowrap;   /* пилюля в одну строку: при переносе текст вылезал за рамку высотой 24 */
  border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--ink-2);
}
.hcat__go {
  flex: none; display: grid; place-items: center; width: var(--h-xs); height: var(--h-xs); margin-left: auto;
  border: 1px solid var(--line-2); border-radius: var(--r-round); color: var(--ink-2);
  transition: background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
.hcat__go svg { width: var(--ico-sm); height: var(--ico-sm); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* названия плиток — ступень H3 (SPACING.md §13.2): 20/24 → 24/28, 500, --track-h3; не крупнее и не тяжелее H2 секции.
   Метка над названием → название --gap-eyebrow-card (8), название → текст --s-2 (8) (§13.7) */
.hcat__title {
  margin-top: var(--gap-eyebrow-card);
  font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-medium); letter-spacing: var(--track-h3); text-wrap: balance;
}
.hcat__lead { margin-top: var(--s-2); max-inline-size: var(--measure-card); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); text-wrap: pretty; }
/* страховка для разметки до выкладки: старые число позиций, подвал плитки и полосы оттенков */
.hcat__count, .hcat__spec, .hcat__strip, .hcat__foot { display: none; }
/* крупная плитка «Базовые масла» — вариант А (Орсен 10.10, прототип _proto/base-oils): фото сверху, под ним название,
   строка и группы пилюлями. Фото заполняет свободную высоту плитки, но её не задаёт (картинка — absolute): высоту ряда
   по-прежнему дают строки 02–05 справа. Снимок тонирован дуотоном в палитру: ч/б → янтарь умножением, снизу уходит в --surface
   под текст. Стрелка — в правом верхнем углу на подложке. Наведение и фокус — общие .hcat (ниже). */
.hcat--lead { padding: 0; overflow: clip; }
.hcat__photo { position: relative; flex: 1 1 auto; min-height: 180px; background: var(--bg); }
.hcat__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.3) brightness(.78); }
.hcat__photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--amber); mix-blend-mode: multiply; }
.hcat__photo::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, color-mix(in srgb, var(--surface) 0%, transparent) 45%, var(--surface)); }   /* до цвета плитки — без ступеньки по низу фото */
.hcat--lead .hcat__go { position: absolute; top: var(--pad-card); right: var(--pad-card); z-index: 4; background: color-mix(in srgb, var(--bg) 60%, transparent); }
.hcat__info { position: relative; z-index: 3; padding: 0 var(--pad-card) var(--pad-card); margin-top: calc(-1 * var(--s-8)); }
.hcat--lead .hcat__title { margin-top: 0; }
/* группы: пилюля 32 (§4: метка без действия), подпись — подпись 12/16, число — моно (§13.9) */
.hcat__groups { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.hcat__grp {
  display: inline-flex; align-items: center; gap: var(--s-2); height: var(--h-xs); padding: 0 var(--s-3);
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: color-mix(in srgb, var(--bg) 55%, transparent);
  font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink-2); white-space: nowrap;
}
.hcat__grp b { font-family: var(--font-mono); font-weight: var(--fw-medium); color: var(--ink); font-variant-numeric: tabular-nums; }

/* строка раздела (03–05; 02 — на ≤ 1024): название и лид · стрелка, по центру строки. Сверху и снизу 16
   (строка, а не карточка с полем), по бокам — padding карточки. Название 18/24 — ступенью ниже 02 (раздел меньше).
   Широкая строка (≥ 700 px внутри, container query: 1440 справа, 834–1024) — название и лид в одну линию, колонка названий общая.
   Зазоры внутри строки — 16, не больше её поля 16 (SPACING §2, day3: было 24 между названием и лидом) */
.hcat--row, .hcat--mid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-4);
  padding-block: var(--s-4);
  container-type: inline-size;
}
.hcat--row .hcat__go, .hcat--mid .hcat__go { margin-left: 0; }
.hcat__body { display: grid; row-gap: var(--s-2); min-width: 0; }   /* H4 → текст карточки 8 (§13.7) */
/* название строки — ступень H4 (§13.2): 18/24 → 20/24, 600, трекинг 0 */
.hcat__body .hcat__title { margin-top: 0; font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-semibold); letter-spacing: 0; }
.hcat__body .hcat__lead { margin-top: 0; }
@container (min-width: 700px) {
  .hcat__body { grid-template-columns: minmax(0, var(--hcat-tc, 17rem)) minmax(0, 1fr); column-gap: var(--s-4); align-items: baseline; }
}
/* 02 на ≥ 1025 — плитка с полем 24: название и лид слева, стрелка в правом верхнем углу (как у крупной плитки).
   Строки «номер … стрелка» над названием нет (day3: без номера она была пустым полем и растягивала колонку) */
@media (min-width: 1025px) {
  .hcat--mid { align-items: start; padding-block: var(--pad-card); }
  .hcat--mid .hcat__body { display: block; }
  .hcat--mid .hcat__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-medium); letter-spacing: var(--track-h3); }   /* плитка 02 — H3 */
  .hcat--mid .hcat__lead { margin-top: var(--s-2); }
  /* справа от крупной плитки названия 03–05 короткие: колонка названий уже, лид в одну строку */
  .hcat--row { --hcat-tc: 12rem; }
}
/* 1025–1279: крупная плитка шире (1,6 : 1 : 1) — лид и группы не жмутся. Строки справа от этого не ломаются:
   название и лид в них и так друг под другом */
@media (min-width: 1025px) and (max-width: 1279px) {
  .hcats { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); }
}

/* наведение (Орсен 08.10): заливается только кружок со стрелкой — янтарь, стрелка --bg, как у кнопки в шапке;
   плитка фон не меняет, рамка мягко светлеет. Свечения, подъёма и масштаба нет. Фокус — общий из base.css */
@media (hover: hover) {
  .hcat:hover { border-color: var(--line-2); }
  .hcat:hover .hcat__go { background: var(--amber); border-color: var(--amber); color: var(--bg); }
}
.hcat:focus-visible .hcat__go { background: var(--amber); border-color: var(--amber); color: var(--bg); }
.hcat:active .hcat__go { background: var(--amber-hi); border-color: var(--amber-hi); color: var(--bg); }


/* ───────────────────────── 4. Наши партнёры (ADR-014) ─────────────────────────
   Пять официальных знаков (09.10, см. ниже), одноцветные: CSS-маска + currentColor (через <img> нельзя — currentColor в SVG станет
   чёрным). Приглушённый --muted → полный --ink при наведении за 160 мс; без filter, тени и подъёма (SPACING.md §8).
   ≥ 1024 — панель по краю контейнера, пять равных ячеек с волосяными разделителями (как .trust). < 1024 — та же
   панель сеткой: 3 + 2 (640–1023), 2 + 2 + 1 (< 640). Бегущей строки нет (Орсен 09.10).
   Высоты знаков (--logo-h) — размер изображения, не отступ: оптическое выравнивание по высоте заглавных (ниже).
   Ритм: сверху --section даёт низ .home-range («Основные марки» убраны 10.10); до .home-trust — её --block-gap. Заголовок без метки (Орсен 08.10). */
.home-partners { padding-top: 0; padding-bottom: 0; }
.partners {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface);
  overflow: clip;
}
.partners__track { display: flex; }
.partners__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  flex: 1 0 100%;
}
.partners__list[aria-hidden="true"] { display: none; }   /* копия бывшей бегущей строки (в шаблоне удалена; правило — до выкладки) */
.partners__item {
  display: grid; place-items: center; min-width: 0;
  min-height: var(--s-9);                                /* ячейка 96, знак ≤ 56 */
  padding: var(--s-4) var(--s-5);
}
.partners__item + .partners__item { border-left: 1px solid var(--line); }
.partners__logo {
  display: block; height: var(--logo-h); max-width: 100%;
  min-width: 0;   /* у блока с aspect-ratio автоминимум = ширина по пропорции: без 0 знак вылезает из узкой ячейки (сетка 3 + 2) */
  aspect-ratio: var(--logo-ar);
  color: var(--muted);
  background: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat;
          mask: var(--logo) center / contain no-repeat;
  transition: color var(--t-hover) var(--ease-out);
}
/* 09.10: единая система знаков — официальные векторы (img/partners/*.svg, источники — _proto/partners/src-v2/sources.txt),
   одноцветные, обрезаны по краю знака. Кириллица — ЛУКОЙЛ, РОСНЕФТЬ, ГАЗПРОМ НЕФТЬ; TATNEFT и Taif — латиницей
   (кириллического вектора нет: ни на сайте компаний, ни на Commons; нужен от клиента — тогда заменить svg).
   Размер (day3) — оптический: среднее между равной площадью габарита и равной площадью «краски» знака (доля закраски
   габарита: ЛУКОЙЛ .43, Taif .47, ГАЗПРОМ НЕФТЬ .39, РОСНЕФТЬ .21, TATNEFT .20). По высоте заглавных Taif выходил
   втрое легче соседей, а РОСНЕФТЬ 56 — крупнее всех из-за эмблемы. Высоты кратны 4, ≤ 52 при ячейке 96.
   --logo-cap — доля заглавной в высоте знака, для сверки. */
.partners__logo--gazpromneft { --logo: url("../img/partners/gazpromneft.svg"); --logo-ar: 109.5 / 52.3;   --logo-h: 52px; --logo-cap: .338; }
.partners__logo--lukoil      { --logo: url("../img/partners/lukoil.svg");      --logo-ar: 884.33 / 175.95; --logo-h: 32px; --logo-cap: .692; }
.partners__logo--rosneft     { --logo: url("../img/partners/rosneft.svg");     --logo-ar: 2309 / 733;      --logo-h: 48px; --logo-cap: .221; }
.partners__logo--taif        { --logo: url("../img/partners/taif.svg");        --logo-ar: 288.69 / 151.42; --logo-h: 40px; --logo-cap: .949; }
.partners__logo--tatneft     { --logo: url("../img/partners/tatneft.svg");     --logo-ar: 161 / 46;        --logo-h: 44px; --logo-cap: .337; }
@media (hover: hover) {
  .partners__item:hover .partners__logo { color: var(--ink); }
}
/* высокая контрастность: маска остаётся, цвет — системный цвет текста */
@media (forced-colors: active) {
  .partners__logo { forced-color-adjust: none; background: CanvasText; }
}
/* < 1024 — сетка в той же панели, без бегущей строки (Орсен 09.10: лента на телефоне резала знаки краем рамки).
   Разделители — зазор 1 px с фоном --line между ячейками на --surface: линии только внутри, без двойных у рамки.
   640–1023: 3 + 2 (в один ряд пять знаков не помещаются с воздухом), знаки как на десктопе.
   < 640: 2 + 2 + Татнефть на всю ширину, знаки × .75 — те же пропорции между собой. Ряды равной высоты. */
@media (max-width: 1023px) {
  .partners__list {
    grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr;
    gap: 1px; background: var(--line);
  }
  .partners__item { grid-column: span 2; background: var(--surface); }
  .partners__item:nth-child(n + 4) { grid-column: span 3; }
  .partners__item + .partners__item { border-left: 0; }
}
@media (max-width: 639px) {
  .partners__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partners__item, .partners__item:nth-child(n + 4) { grid-column: auto; }
  .partners__item:nth-child(5) { grid-column: 1 / -1; }
  .partners__item { min-height: calc(var(--s-8) + var(--s-4)); padding: var(--s-4) var(--s-3); }   /* ячейка 80, знак ≤ 42 */
  .partners__logo { height: calc(var(--logo-h) * .75); }
}

/* ───────────────────────── 3. Полоса доверия — последний блок, сразу над дугой подвала ─────────────────────────
   От блока партнёров (выше) — --block-gap (32 → 48): отдельный блок, а не ещё один ряд панели. */

/* снизу --block-gap (32 → 48): дуга подвала начинается ниже панели, а не под её углами (r1); фон панели непрозрачный —
   свечение дуги сквозь неё не просвечивает.
   Ячейки без вертикальных разделителей (w1): у панели партнёров выше пять ячеек с линиями, здесь четыре — линии двух
   соседних панелей не совпадали и давали рябь. Ячейки разводит их padding (24 + 24 между фактами), рамка панели остаётся. */
/* Сфера «( )» (Орсен 10.10): от низа панели до вершины дуги подвала — столько же, сколько от вершины дуги hero до надзаголовка
   «Что поставляем»: --hz-apex + --block-gap. Вершина дуги — на --dm-apex ниже верха подвала, остаток — поле секции.
   Ход купола при прокрутке — зеркало hero (fx/liquid.js, footerMotion) */
.home-trust { padding-top: var(--block-gap); padding-bottom: max(var(--block-gap), var(--hz-apex) + var(--block-gap) - var(--dm-apex)); }
.trust {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface);
}
.trust__item { display: flex; align-items: center; gap: var(--s-3); min-width: 0; padding: var(--s-4) var(--s-5); }
.trust__ico {
  flex: none; display: grid; place-items: center; width: var(--h-sm); height: var(--h-sm);
  border: 1px solid var(--line-2); border-radius: var(--r-round);
}
.trust__ico svg { width: var(--ico-md); height: var(--ico-md); fill: none; stroke: var(--amber); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.trust__text { display: flex; flex-direction: column; gap: 0; min-width: 0; }
/* факт — текст 16/24 500, пояснение — подпись 12/16 (§13.2); на телефоне 14/20 и 12/16 */
.trust__k { font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--lh-body); color: var(--ink); }
.trust__v { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--muted); }

/* ───────────────────────── адаптив ───────────────────────── */

@media (max-width: 1180px) {
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ≤ 1024: одна колонка — крупная плитка во всю ширину, под ней 02–05 строками одной высоты */
@media (max-width: 1024px) {
  .hcats { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto; }
  .hcats__item--lead { grid-row: auto; }
  .hcats__item:not(.hcats__item--lead) { grid-column: auto; }
}
/* плитка во всю ширину: фото — полоса фиксированной высоты (свободной высоты у плитки тут нет) */
@media (max-width: 1024px) {
  .hcat__photo { flex: none; min-height: clamp(200px, 36vw, 320px); }
}
@media (min-width: 601px) and (max-width: 1024px) {
  /* строки 02–05 одной высоты (ux 09.10: 84/85/106/104 — лиды 04 и 05 уходили на 2 строки по мере 42ch):
     лид строки без меры — короткий, встаёт в одну строку; ряды 02–05 равные — страховка */
  .hcats { grid-template-rows: auto repeat(4, 1fr); }
  .hcat__body .hcat__lead { max-inline-size: none; }
}

@media (max-width: 600px) {
  .home-bar { align-items: flex-start; }
  .home-bar__link { height: var(--h-sm); padding: 0 var(--px-sm); font-size: var(--fs-small); }

  /* разделы: крупная плитка, под ней строки 02–05 (название и лид · стрелка); padding = gap сетки = 16.
     Кегли названий — токены H3 / H4 своей ступени (< 640: 20/24 и 18/24), своих чисел нет */
}
@media (max-width: 600px) {
  /* доверие 2×2: значок над текстом */
  .trust__item { flex-direction: column; align-items: flex-start; gap: var(--s-2); padding: var(--s-4); }
  .trust__ico { width: var(--h-xs); height: var(--h-xs); }
  .trust__ico svg { width: var(--ico-sm); height: var(--ico-sm); }
  .trust__k { font-size: var(--fs-small); line-height: var(--lh-small); }
}

/* ≤ 400 (320–400): доверие одной колонкой, значок слева от текста (2 × 2 на 320 ломало подписи в четыре строки) */
@media (max-width: 400px) {
  .trust { grid-template-columns: minmax(0, 1fr); }
  .trust__item { flex-direction: row; align-items: center; gap: var(--s-3); }
}