/* ============================================================
   Kullake — стили редизайна главной страницы (NEW_DESIGN.webp).
   Подключается глобально через kullake_catalog.ocmod.xml,
   селекторы точечные — на страницах без соответствующих
   элементов ничего не затрагивают.
   ============================================================ */

/* --- Шапка: кнопки Kullake Lux / Kullake Outlet (module_header/top_menu id=1179) ---
   Journal3 сам генерирует и вставляет в <head> свой собственный
   <style data-id="top_menu-1179"> с довольно специфичными селекторами
   (напр. .top-menu-1179>ul>.top-menu-item-1>a>.links-text) — при равной
   специфичности он выигрывает каскад, а !important без сопоставимой
   специфичности не спасает. Поэтому ниже селекторы намеренно избыточно
   длинные (ul.j-menu li... a span...), чтобы гарантированно перебить —
   это вынужденная борьба со сторонним авто-CSS темы, не наша прихоть. */
.top-menu-1179 ul.j-menu {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}

.top-menu-1179 ul.j-menu li.top-menu-item {
    width: auto !important;
    height: auto !important;
}

.top-menu-1179 ul.j-menu li.top-menu-item a {
    /* display/align-items/justify-content/width/height/text-transform убраны —
       протестировано в DevTools (отключение/включение), Journal3 уже даёт то же
       самое сам (display, центрирование) или свойство было заведомо no-op
       (text-transform:uppercase — текст пунктов и так набран капсом). */
    flex-direction: row !important;
    gap: 6px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 4px !important;
    letter-spacing: .05em !important;
    /* white-space/flex-wrap/transition оставлены, хотя тест на текущем коротком
       тексте их не показал — white-space/flex-wrap страхуют от переноса текста
       на второй ряд, если пункт меню переименуют во что-то длиннее; transition
       вообще не про статичный вид, а про плавность hover — тест без наведения
       курсора его не мог показать. */
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    transition: background-color .2s ease, color .2s ease;
}
/* Размер шрифта, отступы, font-weight — намеренно НЕ здесь: управляются через
   родную панель Journal3 "Style Override" (FONT / PADDING) на каждом пункте
   меню — пользователь предпочитает это, там же уже настроено. */

.top-menu-1179 ul.j-menu li.top-menu-item a span.links-text {
    display: inline-block !important;
    color: inherit !important;
    white-space: nowrap !important;
}

.top-menu-1179 ul.j-menu li.top-menu-item a::after {
    content: "↗" !important;
    display: inline-block !important;
    font-size: 0.85em !important; /* относительно font-size ссылки — следует за панелью Style Override */
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.top-menu-1179 ul.j-menu li.top-menu-item-1 a {
    color: #d4a93c !important;
    border-color: #d4a93c !important;
}

.top-menu-1179 ul.j-menu li.top-menu-item-1 a:hover {
    background-color: #d4a93c !important;
    color: #0a0c0e !important;
}

.top-menu-1179 ul.j-menu li.top-menu-item-2 a {
    color: #fff !important;
    border-color: #fff !important;
}

.top-menu-1179 ul.j-menu li.top-menu-item-2 a:hover {
    background-color: #fff !important;
    color: #0a0c0e !important;
}

/* --- Полоса статистики: иконка слева от текста каждого блока ---
   Два модуля с одинаковым содержимым:
   - module-info_blocks-382 — БОЕВОЙ, реально стоит на текущей главной (layout 1, common/home);
   - module-info_blocks-1181 (NEWHOME) — черновик под будущий редизайн, привязан
     к layout 25, тот пока никуда не подключён (не рендерится ни на одной странице).
   Стили общие для обоих — при публикации редизайна ничего менять не придётся.

   Нативная иконочная система Journal3 (icomoon-шрифт через .info-block:before)
   тут не подходит — нужны конкретные растровые бейджи под фирменный дизайн,
   а не однотонный векторный глиф. У части пунктов 382 уже был назначен
   icomoon-глиф через встроенный конструктор (не виден — размер не настроен),
   ниже он гарантированно перебивается на background-image через !important.

   .info-block по умолчанию flex-column (иконка, число, подпись — друг
   под другом). Задача: иконка слева, а число и подпись — друг под другом
   справа от неё. Простого flex-row недостаточно — число и подпись это
   ДВА отдельных соседних элемента (не обёрнуты в один блок), в одну строку
   с огромным числом (52px) они не помещаются и подпись переносится криво.
   Решение — CSS grid: иконка занимает первую колонку на всю высоту (обе
   строки), число и подпись — вторая колонка, каждый в своей строке. */
.module-info_blocks-382 .info-block,
.module-info_blocks-1181 .info-block {
    display: grid !important;
    grid-template-columns: 84px 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 16px !important;
    text-align: left !important;
    /* Карточка (.info-block) часто выше своего содержимого — либо из-за
       паддингов темы, либо из-за выравнивания по высоте с соседней
       карточкой, где число переносится на 2 строки. align-items/content
       намеренно "start", а не "center" — иначе иконка+число+подпись висят
       по центру карточки, а не прижаты к началу, и выглядит как большой
       лишний отступ сверху. */
    align-items: start !important;
    align-content: start !important;
}

.module-info_blocks-382 .info-block-counter,
.module-info_blocks-1181 .info-block-counter {
    grid-column: 2 !important;
    grid-row: 1 !important;
    /* На случай если в каком-то браузере/ОС метрики шрифта у комбинации
       символов (напр. "M" + "€" в первом блоке) дают другую высоту строки,
       чем просто цифры — фиксируем line-height, чтобы высота строки была
       одинаковой у всех пунктов независимо от набора символов. */
    line-height: 1 !important;
    /* Родное правило темы (.module-info_blocks .info-block-counter,
       main.scss:909) — inline-flex с justify-content:center и
       min-width:var(--width), из-за чего число визуально смещено от
       левого края внутри своего же более широкого блока. */
    justify-content: flex-start !important;
}

.module-info_blocks-382 .info-block-content,
.module-info_blocks-1181 .info-block-content {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-items: flex-start !important;
    text-align: left !important;
}

.module-info_blocks-382 .info-block:before,
.module-info_blocks-1181 .info-block:before {
    content: '' !important;
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 84px !important;
    height: 84px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    align-self: center !important;
    font-size: 0 !important;
}

/* module-item-N у Journal3 — не позиция, а персональный порядковый номер
   пункта (переживает удаления других пунктов, поэтому нумерация может
   пропускать значения — у 382 например нет module-item-4). Проверено
   по реальному рендеру. Для 1181 такой проверки сделать не могу — модуль
   нигде не выведен, поэтому используем :nth-child по порядку в module_data
   (надёжнее, не зависит от истории удалений). */
.module-info_blocks-382 .module-item-1 .info-block:before {
    background-image: url('/image/catalog/new-home/counters/issued-loans.png') !important;
}

.module-info_blocks-382 .module-item-2 .info-block:before {
    background-image: url('/image/catalog/new-home/counters/signed-contracts.png') !important;
}

.module-info_blocks-382 .module-item-3 .info-block:before {
    background-image: url('/image/catalog/new-home/counters/served-clients.png') !important;
}

.module-info_blocks-382 .module-item-5 .info-block:before {
    background-image: url('/image/catalog/new-home/counters/market-experience.png') !important;
}

.module-info_blocks-1181 .auto-grid-items > div:nth-child(1) .info-block:before {
    background-image: url('/image/catalog/new-home/counters/issued-loans.png') !important;
}

.module-info_blocks-1181 .auto-grid-items > div:nth-child(2) .info-block:before {
    background-image: url('/image/catalog/new-home/counters/signed-contracts.png') !important;
}

.module-info_blocks-1181 .auto-grid-items > div:nth-child(3) .info-block:before {
    background-image: url('/image/catalog/new-home/counters/served-clients.png') !important;
}

.module-info_blocks-1181 .auto-grid-items > div:nth-child(4) .info-block:before {
    background-image: url('/image/catalog/new-home/counters/market-experience.png') !important;
}

/* На мобильной сетке (2 карточки в ряд) колонка с числом узкая — крупная
   иконка рядом со шрифтом 52px налезает на цифры. Уменьшаем иконку и отступ. */
@media (max-width: 767px) {
    .module-info_blocks-382 .info-block,
    .module-info_blocks-1181 .info-block {
        grid-template-columns: 48px 1fr !important;
        column-gap: 10px !important;
    }

    .module-info_blocks-382 .info-block:before,
    .module-info_blocks-1181 .info-block:before {
        width: 48px !important;
        height: 48px !important;
    }
}

/* --- Цены на золото (module_info_blocks id=1185, черновик NEWHOME) ---
   Подпись ("375*" и т.п.) должна идти НАД числом, а не под ним. Родной
   настройки на такое у Journal3 нет: ItemsDirection переключает только
   ряд/колонку целиком (h/v), itemOrder переставляет местами пункты
   между собой, а не число с подписью внутри одного пункта. Пункт
   .info-block по умолчанию flex-direction:column — переставляем визуально
   через CSS order, DOM не трогаем. */
.module-info_blocks-1185 .info-block-counter {
    order: 2 !important;
}

.module-info_blocks-1185 .info-block-content {
    order: 1 !important;
}
