/* ═══════════════════════════════════════════════════════════════════════════
   ДИЗАЙН 1 · СПЛИТ-ГЕРОЙ — первый экран: текст слева, фото справа во весь край,
   и на телефоне тоже. Вынуто один-в-один из _demo-main/main_engine.py.
   Канон и почему так — HERO_LIBRARY.md, верхний раздел + Поправки 2–4.

   КУДА ВСТАВЛЯТЬ
     После css/tokens.css. Разметка — sections/hero-split.html.

   ЧТО ДЕРЖИТ ГЕЙТ (hero_gate.js: контраст ≥4.5, пелена <0.08, чистое фото ≥60%)
     · .hero::before — градиентная подложка слева. Она, а не плашка, держит текст
       читаемым на ЛЮБОМ кадре. Убрать нельзя: на тёмном паркете контраст падал до 1.3.
     · .hero-photo — маска, а не полупрозрачный оверлей. Оверлей = «молоко» поверх
       предмета, гейт ловит это как пелену.
     · ширина текстовой колонки (57% / 64% / 50%) — под неё подгоняется КЕГЛЬ H1,
       а не наоборот. Расширишь колонку — длинное слово вылезет на фото.

   ЧТО НЕЛЬЗЯ МЕНЯТЬ
     · Ничего белого и непрозрачного поверх фото. Выгоды — строки «иконка + текст»
       (.chip), без карточек и заливки. Плашки с цифрами живут НИЖЕ фото.
     · Одна кнопка акцентом в первом экране (.hero-act). Вторая белая карточка-дубль
       снята Поправкой 4.
     · Три ступеньки брейкпоинтов: ≤359 → ≤430 → ≥820. Правило было до 389px, и на 414
       заголовок ломался на четыре строки.

   КАКИЕ ДАННЫЕ ПОДСТАВИТЬ В РАЗМЕТКУ
     --h1s  кегль H1 на мобиле (по умолчанию 30px)
     --h1d  кегль H1 на десктопе (44px)
     --h1chars  длина самого длинного слова H1 в символах — из неё считается предел
                кегля, чтобы слово не порвалось. Считать по факту, не на глаз.
   ═══════════════════════════════════════════════════════════════════════════ */

.hero{position:relative;overflow:hidden;background:var(--page)}

/* Белая подложка-градиент поверх фото. Одной маски мало: у светлого цеха текст читается,
   а у тёмного паркета контраст падал до 1.3:1 (замерено 05.09). Подложка держит левую
   колонку чистой при ЛЮБОМ кадре — это про движок, а не про конкретную картинку. */
.hero::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  /* ⚠️ Спад подложки растягивать, а не обрывать: держали .93 до 58% и падали в ноль за 8% —
     глаз читает это вертикальной стенкой поперёк кадра (Denis, Аспект 10.09.2026).
     Правило: ramp не короче ~25% ширины; конец — там же, где начинается правая треть,
     иначе hero_gate ловит пелену. Замерено: молоко 0.106 при обрыве → 0.051 при длинном спаде. */
  background:linear-gradient(to right,var(--page) 0%,var(--page) 44%,
    rgba(254,254,254,.92) 54%,rgba(254,254,254,.28) 62%,transparent 68%)}
/* 10.09.2026, правка Denis по живому экрану: подложка держится ровно под текстовой
   колонкой и обрывается в прозрачность к 68% — правее фото должно быть ЧИСТЫМ,
   без белёсого налёта. Было 41/49/56/61 — молоко доставало до середины предмета. */

/* Фото справа, слева его «съедает» градиентная маска — текст лежит на чистом фоне,
   без плашек. Нижний край уходит в фон второй маской: переход к следующей секции
   плавный, без жёсткой кромки (Поправка 4, эталон E-clean61 Ростов). */
.hero-photo{position:absolute;right:0;top:0;width:74%;height:565px;object-fit:cover;object-position:72% top;z-index:0;
  -webkit-mask-image:linear-gradient(to right,transparent 2%,rgba(0,0,0,.03) 26%,rgba(0,0,0,.10) 42%,rgba(0,0,0,.26) 52%,rgba(0,0,0,.66) 61%,#000 68%),linear-gradient(to bottom,#000 0,#000 54%,rgba(0,0,0,.6) 76%,rgba(0,0,0,.16) 90%,transparent 97%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 2%,rgba(0,0,0,.03) 26%,rgba(0,0,0,.10) 42%,rgba(0,0,0,.26) 52%,rgba(0,0,0,.66) 61%,#000 68%),linear-gradient(to bottom,#000 0,#000 54%,rgba(0,0,0,.6) 76%,rgba(0,0,0,.16) 90%,transparent 97%);mask-composite:intersect}

.hero{min-height:565px}   /* см. предупреждение ниже: контейнер не ниже фото */
.hero .wrap{position:relative;z-index:2;padding:18px var(--pad) 26px}
.hero svg{width:18px;height:18px;flex:0 0 auto}

/* Текст живёт в левой зоне, где маска держит фото прозрачным. Ширину колонки задаём
   явно — иначе длинный H1 уезжает туда, где фото уже проявилось. */
.hero .badge,.hero h1,.hero .lead,.hero .chips,.hero .perks{max-width:min(100%,57%)}
.hero .lead{max-width:min(100%,54%)}

.hero .badge{display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;font-size:13px;font-weight:700;color:var(--ink-2)}
.hero .badge svg{width:15px;height:15px;color:var(--accent)}
.hero h1{font-size:min(var(--h1s,30px), calc((100vw - 44px) * .55 / var(--h1chars,10)))}
/* Цена в заголовке не должна рваться на две строки — «₽/м²» в одиночестве читается как обрубок */
@media(max-width:819px){.hero h1 .accent{white-space:nowrap}}
.hero .lead{margin-top:6px;color:var(--ink-2)}

/* Выгоды — строки «иконка + текст», без карточек и заливки (Поправка 4) */
.chips{display:grid;gap:2px;margin-bottom:14px;margin-top:12px}
.chip{display:flex;gap:10px;align-items:center;padding:5px 0}
.chip-ic{flex:0 0 34px;height:34px;border-radius:11px;background:var(--accent-bg);color:var(--accent);display:flex;align-items:center;justify-content:center}
.chip-ic svg{width:19px;height:19px}
.chip p{font-size:14px;font-weight:700;line-height:1.3}
.chip small{display:block;font-weight:500;color:var(--gray);font-size:12.5px;margin-top:1px}

.hero-act{margin-top:2px}
.perks{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:11px}
.perks span{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--gray)}
.perks svg{width:15px;height:15px;color:var(--accent)}

/* Полоса выгод лежит ВНУТРИ героя, а .hero::before кроет всю его площадь — без своего
   слоя полоса уходила под подложку: светлый фон и светло-серый текст, читать нечем
   (замер 07.09: контраст 1.4). Поднимаем над подложкой. */
.trustbar{position:relative;z-index:2;background:var(--ink);color:#c7cdd8}
.trustbar .wrap{display:flex;flex-wrap:wrap;gap:8px 16px;padding:12px var(--pad)}
.trustbar span{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;white-space:nowrap}
.trustbar span::before{content:'';flex:0 0 6px;height:6px;border-radius:50%;background:var(--accent)}

/* ── ≤430px: узкая колонка и свой кегль. Ступенька тянется до 430, чтобы 375 и 414
      вели себя одинаково: на 414 колонка уже 57%, а кегль был ещё базовый 30. ── */
@media(max-width:430px){
  .hero h1{font-size:min(23px, calc((100vw - 44px) * .62 / var(--h1chars,10)));line-height:1.16}
  .hero .badge,.hero h1,.hero .chips,.hero .perks{max-width:min(100%,64%)}
  /* На мобиле строки лежат прямо на фото (Поправка 4 сняла заливку), а серый выбирался
     под белый фон: замер 07.09 дал 3.5–4.4 при норме 4.5. Темним только тут. */
  .hero .badge,.hero .chip small,.hero .perks span{color:var(--ink-2)}
  .hero .lead{max-width:min(100%,64%);font-size:14px}
}

/* ── ≤359px: самый узкий телефон ─────────────────────────────────────────── */
@media(max-width:359px){
  .hero h1{font-size:min(calc(var(--h1s,30px) - 4px), calc((100vw - 44px) * .62 / var(--h1chars,10)))}
  .sec-h{font-size:20px}
  .logo{font-size:16px}
}

/* ── ≥820px: десктоп. Фото ровно половина, маска мягче, колонка шире ─────── */
@media(min-width:820px){
  .hero-photo{width:50%;height:620px;
    -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.45) 11%,rgba(0,0,0,.9) 24%,#000 34%),linear-gradient(to bottom,#000 0,#000 60%,rgba(0,0,0,.55) 80%,rgba(0,0,0,.14) 92%,transparent 98%);
    mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.45) 11%,rgba(0,0,0,.9) 24%,#000 34%),linear-gradient(to bottom,#000 0,#000 60%,rgba(0,0,0,.55) 80%,rgba(0,0,0,.14) 92%,transparent 98%)}
  /* ⚠️ НЕ ниже высоты фото: .hero{overflow:hidden} срежет кадр вместе с растушёвкой
     и внизу появится жёсткая горизонталь (поймано на Аспекте 10.09.2026). */
  .hero{min-height:620px}
  .hero .wrap{padding-top:34px}
  .hero .badge,.hero h1,.hero .lead,.hero .chips,.hero .hero-act,.hero .perks{max-width:calc(50% - 22px)}
  .hero h1{font-size:min(var(--h1d,44px),40px, calc(300px / var(--h1chars,10)));line-height:1.14;max-width:calc(50% - 22px)}
  .hero .lead{max-width:calc(50% - 22px);font-size:17px}
  .hero .chips{grid-template-columns:1fr}
}