/* ==========================================================================
   Мобильная главная (≤767px): баннеры каруселью, как у lemanapro.kz.

   На десктопе слайды лежат друг на друге (position:absolute + opacity) и
   меняются по таймеру из home.js. На телефоне это не работает: полоса
   4,25:1 складывается в 80 px, а свайпа нет. Здесь дорожка становится
   обычной горизонтальной лентой с scroll-snap: все слайды видимы, следующий
   выглядывает справа, листается пальцем. Точек под лентой больше нет —
   заказчик их снял; mobile/hero.js остановил чужую автопрокрутку.

   Единицы --u/--d на 375 px упираются в минимум (≈0,7 px), поэтому здесь
   только явные пиксели. Файл грузится последним; правила site.css, которые
   перебиваем, весят до (0,2,1) — берём на класс больше, без !important.

   С 17.09.2026 ЛЕНТА ОСТАЛАСЬ ТОЛЬКО ТЕЛЕФОНУ НАБОК. В портрете баннер
   сделан по макету Figma 52:4469 — одна плашка со стрелками и точками
   (раздел в конце файла), и он перебивает правила ленты ниже.
   ========================================================================== */
/* Телефонный слой: узкий экран ИЛИ телефон, повёрнутый набок
   (ширина до планшетной, высота меньше 520px — у планшета в альбоме
   высота 768 и больше, он сюда не попадает). Условие одно и то же
   во всех файлах mobile/ и в их скриптах — менять только всё сразу. */
@media (max-width:767px), (max-width:1023px) and (max-height:520px){

  /* Секция перестаёт быть «коробкой» баннера: форму и фон переносим на
     сами слайды, а обрезку снимаем — иначе лента, выходящая за поля
     страницы, отрежется по краю секции. site.css: .hero-b (0,1,0). */
  .mac .hero-b{
    overflow:visible;
    border-radius:0;
    background:none;
    margin-top:8px;
  }

  /* Второй замок на той же коробке. wavy.js (TARGETS: .hero-b, mode:'clip')
     ставит секции ИНЛАЙНОВЫЙ clip-path: path(...) и пересчитывает его по
     ResizeObserver. Инлайновый стиль сильнее любого селектора, поэтому ни
     overflow:visible, ни border-radius:0 выше его не снимают — без этой
     строки лента режется по старым границам секции: вынос за поля
     (margin:0 calc(50% - 50vw) ниже) не виден вообще, а сам контур
     считается по новой высоте секции (слайд 21:10 + точки в потоке) и
     выгрызает волну из картинки первого слайда и его угол.
     wavy.js трогать нельзя, свойство перебивается только !important —
     он выигрывает у инлайнового стиля без !important и переживает
     каждую перерисовку наблюдателем. За экран лента не вылезет:
     html,body{overflow-x:clip} стоят в mobile/base.css. */
  .mac .hero-b{clip-path:none !important}

  /* Лента. Выходит за поля страницы до краёв экрана: на главной поля
     задаёт .container темы (40·--d ≈ 27 px), на остальных страницах — .mac
     (16 px), поэтому размер поля не вписываем руками, а вычисляем:
     margin = (ширина секции − ширина экрана) / 2. Такой же padding
     возвращает первый слайд на линию контента. Ниже, в @supports, то же
     значение отдаём и в scroll-padding через cqw — проценты там считаются
     от самой ленты и не годятся. site.css: .hero-track (0,1,0). */
  .hero-b .hero-track{
    position:static;
    aspect-ratio:auto;
    display:flex;
    gap:12px;
    margin:0 calc(50% - 50vw);
    padding:0 16px;                /* запас, пока cqw не поддерживается */
    scroll-padding:0 16px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain; /* конец ленты не тянет за собой страницу */
    scrollbar-width:none;
  }
  .hero-b .hero-track::-webkit-scrollbar{display:none}

  @supports (container-type:inline-size){
    .mac .hero-b{container-type:inline-size}
    .hero-b .hero-track{
      padding:0 calc((100vw - 100cqw) / 2);
      scroll-padding:0 calc((100vw - 100cqw) / 2);
    }
  }

  /* Слайд — карточка в ленте. Снимаем наложение и прозрачность: на
     телефоне видны все слайды, а не только .on. 86 % ширины: следующий
     выглядывает справа и подсказывает, что лента листается.

     «Баннеры более квадратные» (правка заказчика). Высоту даёт карточка
     4:3, а кадр внутри не режем вовсе: текст вшит в картинку 1900×814,
     и любая обрезка по высоте съедает ширину исходника (видно только
     814 · пропорция кадра). Заголовок «ПРИГОТОВЬ ИДЕАЛЬНЫЙ РАФ» на hero-2
     занимает почти всю ширину — около 1700 px из 1900, при 21:10 окно
     составляло 814 · 2,1 ≈ 1709 px и до буквы оставалось меньше 4 px
     исходника (≈0,5 CSS-пикселя на 375 px): текст упирался в кромку,
     хотя в макете и на десктопе у него поле около 5 % ширины. Обрезка
     покупала всего 13 px высоты полосы ценой 10 % ширины кадра, поэтому
     снята. Пустое место сверху и снизу закрывает та же картинка,
     увеличенная и размытая (::before ниже).
     На 375 px: карточка ≈ 276×207, полоса картинки ≈ 276×118.
     Мобильную версию баннера теперь загружают в админке («Картинка для
     телефона», карточка остаётся 4:3) — её правила в конце файла
     (.hero-slide--mob); баннер без неё живёт ровно так, как описано здесь.
     site.css: .hero-slide (0,1,0), .hero-slide.on (0,2,0) — берём (0,3,0). */
  .hero-b .hero-track .hero-slide,
  .hero-b .hero-track .hero-slide.on{
    position:relative;
    inset:auto;
    flex:0 0 86%;
    min-width:0;
    display:flex;                /* картинка центрируется по вертикали */
    align-items:center;
    aspect-ratio:4 / 3;
    opacity:1;
    pointer-events:auto;
    transition:none;
    scroll-snap-align:start;
    scroll-snap-stop:always;     /* один свайп — один слайд, как у Лемана */
    /* Кромку слайду рисует wavy.js — та же цель, что у секции на
       десктопе (см. TARGETS в newdesign/wavy.js, media телефонного слоя).
       Скругление оставлено запасным: в браузере без clip-path скрипт
       выходит сразу, и без него баннер был бы прямоугольным. */
    border-radius:20px;
    overflow:hidden;
    background:var(--green-brand);
    -webkit-tap-highlight-color:transparent;
  }

  /* Заливка полей над и под картинкой: она же, растянутая на всю карточку
     и размытая — края полосы уходят в свой же фон, а не в плашку другого
     оттенка (у hero-1 фон градиентный, плоский зелёный там виден стыком).
     Адрес приходит из разметки: слайд несёт style="--hero-fill:url(…)"
     (sc_hero_fill_style() в sc_hero.php). Раньше адрес стоял здесь по
     номеру слайда, но баннеры теперь заводят в админке — их сколько
     угодно и порядок меняется. Это та же копия, что уже скачал <picture>
     (webp-двойник), второй загрузки нет; браузер без webp (iOS младше 14)
     и слайд без переменной просто увидят зелёный фон карточки. */
  .hero-b .hero-track .hero-slide::before{
    content:"";
    position:absolute;
    inset:-10%;                  /* запас: размытие не должно светлеть по краям */
    z-index:0;
    background:var(--green-brand) center/cover no-repeat;
    background-image:var(--hero-fill, none);
    filter:blur(16px) brightness(.85);
  }

  /* Картинка — поверх заливки. Высоту задаём пропорцией самой картинки, а
     не height:100%: проценты от высоты, посчитанной из aspect-ratio,
     браузеры разрешают по-разному. site.css: .hero-slide img (0,1,1). */
  .hero-b .hero-track .hero-slide picture{
    position:relative;
    z-index:1;
    flex:0 0 auto;
    display:block;
    width:100%;
  }
  /* Пропорции здесь нет намеренно: width=1900 height=814 в разметке дают
     точное соотношение сами, height:auto считает высоту по нему, и кадр
     виден целиком, во всю ширину карточки, без обрезки (см. разбор выше).
     object-fit тоже не задаём: коробка совпала с собственной пропорцией
     картинки, резать нечего, а оставшийся из site.css cover при равных
     пропорциях ничего не делает — и он же нужен альбомному слою, где
     landscape.css возвращает картинке aspect-ratio:5/2 и кадр всё-таки
     режется по высоте. Поэтому cover тут не переопределяем. */
  .hero-b .hero-track .hero-slide img{
    display:block;
    width:100%;
    height:auto;
  }

  /* Стрелки на тач-экране не нужны — листают пальцем. В портрете с
     17.09.2026 стрелки есть — так в макете 52:4469 (конец файла). */
  .hero-b .hero-nav{display:none}

  /* Точки убраны по правке заказчика. Индикатор на телефоне и не нужен:
     лента листается пальцем, а следующий слайд выглядывает справа — он и
     показывает, что баннер не один. display:none заодно убирает точки из
     порядка табуляции и из дерева доступности, поэтому невидимой тап-цели
     и невидимого фокуса не остаётся (в разметке у них tabindex="0").
     Разметку трогать нельзя — прячем стилем. site.css: .hero-dots (0,1,0)
     и .hero-dots i (0,1,1) — display там не задан, хватает (0,2,0).
     В портрете с 17.09.2026 точки вернулись: в макете 52:4469 они
     нарисованы внизу плашки (конец файла). Здесь — только набок. */
  .hero-b .hero-dots{display:none}
}

/* Картинка для телефона — необязательное свойство баннера в админке
   («Картинка для телефона», инфоблок «Главный баннер»). Если она есть,
   слайд получает класс .hero-slide--mob, а <picture> — <source> с тем же
   условием, что ниже: SC_HERO_MOB_MEDIA в local/php_interface/include/
   sc_hero.php, менять только вместе.
   Условие — не весь телефонный слой, а только портрет: телефон набоком
   (mobile/landscape.css) кладёт баннер полосой 5:2, там остаются широкая
   основная картинка и её правила.
   Своя картинка кроет карточку 4:3 целиком — заливать поля нечем и
   незачем. Высота 100 % тут надёжна, в отличие от оговорки выше: коробка
   <picture> растянута по карточке через inset:0, а не считается из
   aspect-ratio. Другая пропорция картинки обрежется по краям (cover).
   Вес (0,3,1) — как у правил выше; файл тот же, побеждает порядок. */
@media (max-width:767px) and (min-height:521px){
  .hero-b .hero-track .hero-slide--mob::before{display:none}
  .hero-b .hero-track .hero-slide--mob picture{
    position:absolute;
    inset:0;
    z-index:1;
    width:auto;
  }
  .hero-b .hero-track .hero-slide--mob img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  /* Баннер один — ему не с кем делить ленту: во всю ширину, а не 86 %
     с пустым хвостом справа. Раньше такого не бывало (в разметке всегда
     стояли два), теперь число баннеров задаёт админка. (0,4,0) — как у
     .hero-slide.on выше, решает порядок. Набоком не трогаем: там карточка
     5:2 с потолком 40 % высоты экрана, во всю ширину она бы не влезла.
     С 17.09.2026 в портрете слайды лежат стопкой (раздел ниже), и это
     правило там ничего не решает — оставлено для ясности истории. */
  .hero-b .hero-track .hero-slide:only-child{flex:0 0 100%}
}

/* ==========================================================================
   ТЕЛЕФОН В ПОРТРЕТЕ — БАННЕР ПО МАКЕТУ FIGMA 52:4469 (17.09.2026)

   Герман 17.09.2026: «форму баннера не перенёс». Узел 52:4486 «Frame 658»:
   зелёная плашка 362 × 244 (поля страницы 14), рукописный край, внутри
   картинка баннера, по бокам белые треугольники-стрелки, внизу по центру
   точки. Ленты с выглядывающим соседом в макете нет — баннер один на
   ширину страницы, и листается он стрелками, точками и пальцем.

   Поэтому в портрете слайды снова лежат стопкой, как на компьютере
   (site.css: .hero-slide absolute + opacity, смену кадра и точки ведёт
   home.js, затухание — banner-phases.css), а лента из начала файла
   остаётся только телефону набок (mobile/landscape.css рассчитан на неё).
   Свайп пальцем — в mobile/hero.js: он нажимает те же стрелки.

   Картинка. Макет рисует баннер для телефона отдельной картинкой: текст
   сверху слева, три пачки под ним. У баннера в админке для этого есть
   «Картинка для телефона» — 1086 × 732 (362 × 244 при плотности 3), она
   кроет плашку целиком (правила .hero-slide--mob выше). Пока её нет,
   широкая «Картинка для анонса» (1900 × 814, текст справа от пачек)
   встаёт во всю ширину плашки по вертикальному центру, поля сверху и
   снизу закрывает её же размытая копия (::before выше) — обрезать её
   нельзя, текст вшит в картинку.

   Числа — из макета, при отрисовке он сдвигает содержимое на половину
   рамки 3 px (замер по снимку 390 × 2049):
     плашка 362 × 244, скругление 24;
     стрелки 14 × 16: левая в 12 от края, правая в 12 от правого края,
       середина по высоте на 50 % + 15 (узлы 52:4488, 52:4489);
     точки 12 × 12 через 10, низ ряда в 12 от низа плашки (52:4490),
       активная залита белым, остальные — белое кольцо;
     от поиска в шапке до плашки 10–12 (y 128 → 140).

   Видимые края (правка 17.09.2026 после проверки). В макете у плашки
   рамка 3 того же зелёного, и отрисованный край выходит за кадр на
   1,5–2 (видимая плашка 12…377 × 138…385 при кадре 14…376 × 140…384).
   wavy.js же обрезает слайд чуть внутри его коробки. Поэтому коробка
   слайда шире кадра на 2 с каждой стороны (inset −2), а картинка для
   телефона стоит в кадре (inset 2 от коробки): её края — ровный фирменный
   зелёный, как и фон слайда, стыка не видно. Кадр — коробка дорожки:
   от низа шапки (137, mobile/header.portrait.css) 3 → y 140, как в макете.

   Условие — портрет, как у правил .hero-slide--mob выше и у SC_HERO_MOB_MEDIA
   в sc_hero.php: набок остаётся лента (mobile/landscape.css). Файл
   грузится после site.css и banner-phases.css; веса ниже равны правилам
   ленты из начала файла или выше их, порядок решает в нашу пользу.
   ========================================================================== */
@media (max-width:767px) and (min-height:521px){

  /* Секция: отступ от шапки. Ширина — поля страницы (mobile/home.css
     ставит главной поля 14 по макету). Шапка в портрете кончается на
     137 (ряд поиска 75–129 и 8 поля), кадр баннера в макете — на 140;
     видимый зазор от линии поиска до плашки 10, как в макете (128 → 138).
     (0,2,0) = правило выше. */
  .mac .hero-b{margin-top:3px}

  /* Дорожка — коробка баннера 362 : 244, без прокрутки и без выноса за
     поля. В @supports повторено, потому что правило ленты там весит
     столько же и стоит ниже по файлу. (0,2,0) = правило ленты. */
  .hero-b .hero-track{
    position:relative;
    display:block;
    aspect-ratio:362 / 244;
    margin:0;
    padding:0;
    scroll-padding:0;
    overflow:visible;
    scroll-snap-type:none;
  }
  @supports (container-type:inline-size){
    .hero-b .hero-track{padding:0;scroll-padding:0}
  }

  /* Слайды стопкой. Невидимые — прозрачные и не ловят нажатия, видимый
   (.on) — поверх (z-index из banner-phases.css). Затухание 0,9 с — как на
     компьютере. Оба селектора — потому что правило ленты задаёт
     position/inset/transition и для .hero-slide.on (0,4,0). */
  .hero-b .hero-track .hero-slide,
  .hero-b .hero-track .hero-slide.on{
    position:absolute;
    inset:-2px;                  /* видимый край — как в макете, см. шапку раздела */
    flex:none;
    aspect-ratio:auto;
    border-radius:24px;
    scroll-snap-align:none;
    transition:opacity .9s cubic-bezier(.4, 0, .2, 1);
  }
  .hero-b .hero-track .hero-slide{opacity:0;pointer-events:none}
  .hero-b .hero-track .hero-slide.on{opacity:1;pointer-events:auto}
  /* Картинка для телефона — в кадре 362 × 244, а не во всю коробку
     слайда: её текст и пачки нарисованы на координатах кадра. (0,3,1) =
     правило .hero-slide--mob picture выше, это ниже. */
  .hero-b .hero-track .hero-slide--mob picture{inset:2px}

  /* Форма плашки — контур из макета, а не случайная волна wavy.js.
     У wavy.js для слайдов на телефоне размах волны 5 px (под ленту
     телефона набок), и край выходил заметно более рваным, чем в макете:
     там рамка 3 с мягкой дрожью в 1–2 px. Контур узла 52:4486 лежит в
     разметке главной (<clipPath id="hero-plate-m">, index.sc2026.php) в
     долях коробки слайда 366 × 248 — он и есть видимая плашка макета
     12…377 × 138…385. wavy.js ставит слайду инлайновый clip-path и
     обновляет его при каждом изменении размера; инлайновый стиль
     перебивается только !important (так же снята обрезка секции в
     начале файла). Набок и на планшете это правило не действует — там
     форму по-прежнему рисует wavy.js. Нет элемента с таким id —
     браузер слайд не обрезает, остаётся скругление 24. */
  .hero-b .hero-track .hero-slide{
    -webkit-clip-path:url(#hero-plate-m) !important;
    clip-path:url(#hero-plate-m) !important;
  }

  /* Стрелки. Кнопка — невидимая тап-цель 44 × 44 у края плашки, сам
     треугольник — её фон 14 × 16 на своём месте из макета. Картинки те
     же, что на компьютере (site.css: hero-arr-l/r.svg, узлы 52:4488/4489
     выгружены из макета один в один). Наведение на тач-экране залипает —
     увеличение снимаем. Веса: .hero-b .hero-nav (0,2,0) = правило ленты
     (display:none) выше; кнопки (0,2,1)/(0,3,1) против (0,1,1)/(0,2,1)
     в site.css. */
  .hero-b .hero-nav{
    display:block;
    inset:0;
    padding:0;
    transform:none;
  }
  .hero-b .hero-nav button{
    position:absolute;
    top:calc(50% + 15px);
    width:44px;
    height:44px;
    margin-top:-22px;
    opacity:1;
    background-size:14px 16px;
    -webkit-tap-highlight-color:transparent;
  }
  .hero-b .hero-nav button:first-child{left:0;background-position:12px center}
  .hero-b .hero-nav button:last-child{right:0;background-position:right 12px center}
  .hero-b .hero-nav button:hover{transform:none}
  /* Фокус с клавиатуры — свечение по треугольнику, без прямоугольной
     обводки (BRAND-RULES §3.2). */
  .hero-b .hero-nav button:focus-visible{outline:none;filter:drop-shadow(0 0 3px #fff)}

  /* Точки. Ряд прячет правило ленты выше — возвращаем. Геометрия
     banner-phases.css (9 px при ≤1099) заменена макетной: 12 через 10.
     Кольцо 1,5 — толщина рисованного кольца узла 52:4490 при 1×.
     Тап-зона ::after — 44 по высоте и половина просвета вширь, как в
     banner-phases.css. Веса (0,2,0)/(0,2,1)/(0,3,1) = banner-phases.css,
     файл ниже. */
  .hero-b .hero-dots{display:flex;bottom:12px;gap:10px}
  .hero-b .hero-dots i,
  .hero-b .hero-dots i.on{width:12px;height:12px}
  .hero-b .hero-dots i{box-shadow:inset 0 0 0 1.5px #fff}
  .hero-b .hero-dots i.on{box-shadow:none}
  .hero-b .hero-dots i::after{inset:-16px -5px}
}
@media (max-width:767px) and (min-height:521px) and (prefers-reduced-motion:reduce){
  .hero-b .hero-track .hero-slide,
  .hero-b .hero-track .hero-slide.on{transition:none}
}