/*
* Главная (макет Home.dc.html, README §8). Разметка — template/common/ivanko_home.twig и template/ivanko/home/*.twig, логика — js/ivanko-home.js.
* Всё висит на #il.ihm: корень #il нужен плитке товара (её стили в css/ivanko-listing.css живут под #il), класс .ihm отключает у плитки мобильную
* горизонтальную раскладку листинга (там правила под #il:not(.ihm)). Темы blue.css/responsive.css грузятся ПОСЛЕ addStyle, поэтому только id-специфичность
* (1,x,x) надёжно их перебивает; blue.css прячет все svg (body svg { display: none }) — у каждой иконки display задан явно.
*
* Брейкпоинты: >= 1200 новости колонкой 420 справа от баннеров; 768-1199 новости под баннером в три колонки, «почему» 300 px;
* <= 767 мобильная раскладка (поля 16, отступ между секциями 36, ленты горизонтальным скроллом). Классы — префикс hm-.
*/
/* ===== База ===== */
#il.ihm { display: block; }
#il.ihm .hm-h1 { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
#il.ihm .hm-wrap { max-width: 1440px; margin: 0 auto; padding: 20px 64px 80px; display: flex; flex-direction: column; gap: 72px; }
#il.ihm .hm-sec { min-width: 0; }
#il.ihm .hm-i { display: block; flex: none; width: 1em; height: 1em; fill: currentColor; font-size: 20px; }
#il.ihm button { font-family: inherit; }
#il.ihm h2, #il.ihm h3 { margin: 0; padding: 0; border: 0; font-family: inherit; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: normal; }
#il.ihm h2::before, #il.ihm h2::after, #il.ihm h3::before, #il.ihm h3::after { content: none; display: none; }
#il.ihm figure, #il.ihm ol, #il.ihm ul { margin: 0; padding: 0; }
#il.ihm img { max-width: none; }
#il.ihm .hm-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
#il.ihm .hm-head--row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 16px; }
#il.ihm .hm-head-t { display: flex; flex-direction: column; gap: 4px; }
#il.ihm .hm-head-a { display: flex; align-items: center; gap: 16px; }
#il.ihm .hm-eyebrow { font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
#il.ihm .hm-h2 { font-size: 28px; line-height: 1.2; letter-spacing: -.01em; }
#il.ihm .hm-h3 { font-size: 24px; line-height: 1.25; }
#il.ihm .hm-sec > .hm-h2 { margin-bottom: 18px; }
#il.ihm .hm-hint { font-size: 15px; color: var(--muted); }
#il.ihm .hm-all { font-size: 15px; font-weight: 600; color: var(--brand); white-space: nowrap; }
#il.ihm .hm-all:hover, #il.ihm .hm-news-all:hover { color: var(--brand-hover); text-decoration: underline; }
/* ===== Первый экран: баннеры и новости ===== */
#il.ihm .hm-first { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
#il.ihm .hm-first-b { flex: 1 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
/* Большой баннер: текст слева, фото справа; слайды в одной ячейке grid */
#il.ihm .hm-bwrap { position: relative; }
#il.ihm .hm-bbox { height: 440px; border-radius: 16px; overflow: hidden; background: #15181C; display: grid; }
#il.ihm .hm-bs { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); opacity: 0; visibility: hidden; transition: opacity .45s, visibility .45s; color: #fff; text-decoration: none; min-width: 0; }
#il.ihm .hm-bs.is-on { opacity: 1; visibility: visible; }
#il.ihm .hm-bs:hover { color: #fff; text-decoration: none; }
#il.ihm .hm-bs-t { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; padding: 40px 40px 96px; min-width: 0; }
#il.ihm .hm-bs-h { font-size: 38px; font-weight: 700; line-height: 1.12; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
#il.ihm .hm-bs.is-long .hm-bs-h { font-size: 32px; }
#il.ihm .hm-bs-s { font-size: 18px; line-height: 1.45; color: #C9CED4; text-wrap: pretty; }
#il.ihm .hm-bs-cta { display: inline-flex; align-items: center; gap: 8px; height: 48px; margin-top: 8px; padding: 0 18px 0 20px; border-radius: 10px; background: var(--cta); font-size: 16px; font-weight: 700; color: #15181C; }
#il.ihm .hm-bs:hover .hm-bs-cta { background: var(--cta-hover); }
#il.ihm .hm-bs-p { position: relative; min-width: 0; background: repeating-linear-gradient(135deg, #3A4048 0 10px, #30363D 10px 20px); overflow: hidden; }
/* Баннеры рисовались под текст слева: при обрезке сохраняем правый край снимка. Снимок с сюжетом в другом месте —
поле focus слайда в system/config/ivanko_home.php (left | center) */
#il.ihm .hm-bs-img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
#il.ihm .hm-bs-img.is-left { object-position: left center; }
#il.ihm .hm-bs-img.is-center { object-position: center; }
#il.ihm .hm-bctl { position: absolute; left: 40px; bottom: 28px; z-index: 2; display: flex; align-items: center; gap: 12px; }
#il.ihm .hm-bb { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1.5px solid #454B53; border-radius: 10px; background: transparent; color: #fff; cursor: pointer; }
#il.ihm .hm-bb:hover { background: rgba(255, 255, 255, .12); }
#il.ihm .hm-bb .hm-i { font-size: 22px; }
#il.ihm .hm-bcnt { min-width: 40px; text-align: center; font: 500 14px 'JetBrains Mono', monospace; color: #fff; }
#il.ihm .hm-bdots { display: flex; gap: 6px; margin-left: 6px; }
#il.ihm .hm-bd { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: #5A616A; cursor: pointer; transition: width .3s; }
#il.ihm .hm-bd.is-on { width: 22px; background: var(--cta); }
#il.ihm .hm-bpause { display: flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 12px; color: #C9CED4; opacity: 0; transition: opacity .2s; }
#il.ihm .hm-bpause .hm-i { font-size: 16px; }
#il.ihm [data-hm-slider].is-paused .hm-bpause { opacity: 1; }
/* Узкий баннер */
#il.ihm .hm-nwrap { position: relative; }
#il.ihm .hm-nbox { height: 150px; border-radius: 16px; overflow: hidden; background: var(--brand-tint); display: grid; }
#il.ihm .hm-ns { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) 280px; opacity: 0; visibility: hidden; transition: opacity .45s, visibility .45s; color: var(--ink); text-decoration: none; min-width: 0; }
#il.ihm .hm-ns.is-on { opacity: 1; visibility: visible; }
#il.ihm .hm-ns-t { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; padding: 22px 28px 22px 32px; min-width: 0; }
#il.ihm .hm-ns-h { font-size: 24px; font-weight: 700; line-height: 1.2; text-wrap: balance; }
#il.ihm .hm-ns-cta { display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 600; color: var(--brand); }
#il.ihm .hm-ns-cta .hm-i { font-size: 18px; }
#il.ihm .hm-ns:hover .hm-ns-cta { color: var(--brand-hover); }
#il.ihm .hm-ns-p { position: relative; background: repeating-linear-gradient(135deg, #DDE7EF 0 8px, #D0DCE7 8px 16px); overflow: hidden; }
#il.ihm .hm-ns-ar { display: none; }
#il.ihm .hm-ndots { position: absolute; right: 296px; bottom: 16px; z-index: 2; display: flex; gap: 6px; }
#il.ihm .hm-ndots .hm-bd { background: #C9D3DD; }
#il.ihm .hm-ndots .hm-bd.is-on { background: var(--brand); }
/* Новости */
#il.ihm .hm-news { flex: 0 0 420px; min-width: 0; display: flex; flex-direction: column; padding: 18px 20px 6px; border: 1px solid var(--border); border-radius: 16px; }
#il.ihm .hm-news-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 4px; }
#il.ihm .hm-news-t { font-size: 22px; line-height: 1.2; }
#il.ihm .hm-news-all { display: flex; align-items: center; gap: 2px; font-size: 15px; font-weight: 600; color: var(--brand); white-space: nowrap; }
#il.ihm .hm-news-all .hm-i { font-size: 18px; }
#il.ihm .hm-n { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border); color: var(--ink); text-decoration: none; }
#il.ihm .hm-n:hover .hm-n-h { color: var(--brand-hover); text-decoration: underline; }
#il.ihm .hm-n-p { flex: none; width: 104px; height: 104px; border-radius: 10px; overflow: hidden; background: repeating-linear-gradient(135deg, #E3E8ED 0 6px, #D8DFE6 6px 12px); }
#il.ihm .hm-n-p img { display: block; width: 100%; height: 100%; object-fit: cover; }
#il.ihm .hm-n-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#il.ihm .hm-n-d { font-size: 13px; color: var(--muted-2); }
#il.ihm .hm-n-h, #il.ihm .hm-n-x { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
#il.ihm .hm-n-h { -webkit-line-clamp: 2; font-size: 17px; font-weight: 700; line-height: 1.25; }
#il.ihm .hm-n-x { -webkit-line-clamp: 2; font-size: 14px; line-height: 1.4; color: var(--muted); }
#il.ihm .hm-n.is-nophoto .hm-n-x { -webkit-line-clamp: 3; }
/* ===== Ленты товаров ===== */
#il.ihm .hm-recgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#il.ihm .hm-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 5); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
#il.ihm .hm-track::-webkit-scrollbar { display: none; }
#il.ihm .hm-track > .il-card { scroll-snap-align: start; }
/* Плитка главной: фото 120 и закладка 36 (HomeTile.dc.html) */
#il.ihm .il-ph { height: 120px; }
#il.ihm .il-fav { top: 12px; right: 12px; width: 36px; height: 36px; }
#il.ihm .hm-arrows { display: flex; gap: 6px; }
#il.ihm .hm-arr { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1.5px solid var(--border-input); border-radius: 10px; background: #fff; color: var(--ink); cursor: pointer; }
#il.ihm .hm-arr:hover { border-color: #9DBFDD; }
#il.ihm .hm-arr .hm-i { font-size: 22px; }
/* ===== 15 центров ===== */
#il.ihm .hm-cs { position: relative; }
#il.ihm .hm-cs .hm-head { gap: 4px; }
#il.ihm .hm-mapbtn { display: none; align-items: center; gap: 6px; height: 44px; padding: 0; border: 0; background: none; font-size: 15px; font-weight: 600; color: var(--brand); cursor: pointer; }
#il.ihm .hm-cgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
#il.ihm .hm-clist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
#il.ihm .hm-city { display: flex; align-items: center; gap: 10px; min-height: 60px; min-width: 0; padding: 8px 10px 8px 12px; border: 1.5px solid var(--border); border-radius: 10px; background: #fff; text-align: left; color: var(--ink); cursor: pointer; }
#il.ihm .hm-city:hover { border-color: #9DBFDD; }
#il.ihm .hm-city.is-cur { border-color: var(--brand-tint); background: var(--brand-tint); }
#il.ihm .hm-city.is-open { border-color: var(--brand); }
#il.ihm .hm-city-pin { font-size: 20px; color: var(--brand); }
#il.ihm .hm-city.is-cur .hm-city-pin { color: var(--warn); }
#il.ihm .hm-city-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#il.ihm .hm-city-n { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
#il.ihm .hm-city-tag { padding: 2px 6px; border-radius: 5px; background: #fff; font-size: 11px; font-weight: 600; color: var(--brand); }
#il.ihm .hm-city-a { overflow: hidden; font-size: 13px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
#il.ihm .hm-city-ch { font-size: 20px; color: var(--muted-2); }
#il.ihm .hm-cright { position: relative; min-width: 0; }
#il.ihm .hm-mapbox { min-height: 540px; padding: 20px; border-radius: 16px; background: #EDF2F7; }
#il.ihm .hm-svg { display: block; width: 100%; height: auto; }
#il.ihm .hm-map-m { display: none; }
#il.ihm .hm-rg { cursor: pointer; }
#il.ihm .hm-pt { cursor: pointer; }
#il.ihm .hm-pt-halo { display: none; }
#il.ihm .hm-pt.is-cur .hm-pt-halo { display: block; }
/* Свой город пульсирует: кольцо от ореола расходится и гаснет. Без анимации (prefers-reduced-motion) — только ореол */
#il.ihm .hm-pt-pulse { display: none; fill: var(--cta); fill-opacity: .45; stroke: #E59A00; stroke-width: 1.5; opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center; }
#il.ihm .hm-pt.is-cur .hm-pt-pulse { display: block; animation: hm-pulse 2s ease-out infinite; }
@keyframes hm-pulse {
0% { opacity: 1; transform: scale(.5); }
100% { opacity: 0; transform: scale(2.2); }
}
@media (prefers-reduced-motion: reduce) {
#il.ihm .hm-pt.is-cur .hm-pt-pulse { display: none; animation: none; }
}
#il.ihm .hm-pt-dot { fill: var(--brand); stroke: #fff; stroke-width: 2.2; }
#il.ihm .hm-pt.is-cur .hm-pt-dot { fill: var(--cta); stroke: #15181C; stroke-width: 2.5; }
#il.ihm .hm-pt.is-open .hm-pt-dot { fill: #15181C; stroke: #15181C; stroke-width: 2.5; }
#il.ihm .hm-pt-lab { fill: var(--ink); font-family: 'Golos Text', system-ui, sans-serif; font-weight: 600; pointer-events: none; }
#il.ihm .hm-pt.is-cur .hm-pt-lab, #il.ihm .hm-pt.is-open .hm-pt-lab { font-weight: 700; }
#il.ihm .hm-legend { display: flex; gap: 16px; margin-top: 4px; font-size: 13px; color: var(--muted); }
#il.ihm .hm-lgd { display: flex; align-items: center; gap: 6px; }
#il.ihm .hm-lgd-cur { width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: var(--cta); box-shadow: 0 0 0 1px var(--border); }
#il.ihm .hm-lgd-c { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
/* Карточка центра: поповер поверх карты */
#il.ihm .hm-pop { position: absolute; top: 16px; right: 16px; bottom: 16px; z-index: 3; display: flex; flex-direction: column; width: 400px; max-width: calc(100% - 32px); overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 12px 36px rgba(20, 30, 40, .2); }
#il.ihm .hm-pop-h { flex: none; padding: 16px 12px 14px 18px; border-bottom: 1px solid var(--border); }
#il.ihm .hm-pop-grab { display: none; }
#il.ihm .hm-pop-hr { display: flex; align-items: flex-start; gap: 8px; }
#il.ihm .hm-pop-ht { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#il.ihm .hm-pop-n { font-size: 22px; font-weight: 700; line-height: 1.2; }
#il.ihm .hm-pop-a { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; color: var(--muted); }
#il.ihm .hm-pop-a .hm-i { margin-top: 1px; font-size: 18px; color: var(--brand); }
#il.ihm .hm-pop-x { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: var(--bg-subtle); color: var(--muted); cursor: pointer; }
#il.ihm .hm-pop-x .hm-i { font-size: 22px; }
#il.ihm .hm-pop-b { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 18px; }
#il.ihm .hm-grp { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; }
#il.ihm .hm-grp-n { display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 700; text-wrap: pretty; }
#il.ihm .hm-st { display: flex; align-items: center; align-self: flex-start; gap: 6px; height: 24px; padding: 0 8px; border-radius: 6px; background: #F1F3F5; font-size: 13px; font-weight: 500; color: var(--muted-2); }
#il.ihm .hm-st-d { width: 7px; height: 7px; border-radius: 50%; background: #B4BBC3; }
#il.ihm .hm-st.is-open { background: var(--ok-tint); color: var(--ok-text); }
#il.ihm .hm-st.is-open .hm-st-d { background: var(--ok); }
#il.ihm .hm-grp-t { display: flex; flex-direction: column; }
#il.ihm .hm-tel { font-size: 15px; font-weight: 500; line-height: 1.65; color: var(--ink); font-variant-numeric: tabular-nums; }
#il.ihm .hm-tel-main { font-size: 20px; font-weight: 700; line-height: 1.4; }
#il.ihm .hm-tel:hover { color: var(--brand-hover); text-decoration: underline; }
#il.ihm .hm-tel-ic { display: none; }
#il.ihm .hm-grp-i { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; }
#il.ihm .hm-grp-r { display: flex; gap: 8px; color: var(--ink-2); }
#il.ihm .hm-grp-r .hm-i { margin-top: 1px; font-size: 17px; color: var(--muted-2); }
#il.ihm .hm-grp-r a { color: var(--brand); }
#il.ihm .hm-grp-r a:hover { color: var(--brand-hover); text-decoration: underline; }
#il.ihm .hm-pop-f { flex: none; padding: 12px 18px 14px; border-top: 1px solid var(--border); }
#il.ihm .hm-choose { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; padding: 0; border: 0; border-radius: 10px; background: var(--brand); font-size: 15px; font-weight: 600; color: #fff; cursor: pointer; }
#il.ihm .hm-choose:hover { background: var(--brand-hover); }
#il.ihm .hm-is { display: flex; align-items: center; gap: 6px; height: 44px; font-size: 14px; color: var(--ok-text); }
#il.ihm .hm-is-m { display: none; }
#il.ihm .hm-dim { display: none; }
/* ===== Фото с рабочих мест ===== */
#il.ihm .hm-ph-l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#il.ihm .hm-ph { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#il.ihm .hm-ph-i { position: relative; height: 0; padding-bottom: 75%; overflow: hidden; border-radius: 12px; background: repeating-linear-gradient(135deg, #E3E8ED 0 8px, #D8DFE6 8px 16px); }
#il.ihm .hm-ph-i img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
#il.ihm .hm-ph figcaption { display: flex; flex-direction: column; gap: 2px; }
#il.ihm .hm-ph-t { font-size: 17px; font-weight: 700; line-height: 1.25; }
#il.ihm .hm-ph-s { font-size: 14px; color: var(--muted); }
/* ===== Преимущества ===== */
#il.ihm .hm-adv { display: flex; flex-direction: column; gap: 32px; padding: 36px 40px 40px; border-radius: 20px; background: var(--bg-subtle); }
#il.ihm .hm-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#il.ihm .hm-fact { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 14px; background: #fff; }
#il.ihm .hm-fact-i { display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); }
#il.ihm .hm-fact-i .hm-i { font-size: 26px; }
#il.ihm .hm-fact-t { font-size: 20px; font-weight: 700; line-height: 1.25; text-wrap: balance; }
#il.ihm .hm-offers { display: flex; flex-direction: column; gap: 18px; }
#il.ihm .hm-ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; list-style: none; }
#il.ihm .hm-of { display: flex; flex-direction: column; gap: 10px; min-width: 0; list-style: none; }
#il.ihm .hm-of-h { display: flex; align-items: center; gap: 10px; }
#il.ihm .hm-of-n { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #15181C; font-size: 14px; font-weight: 700; color: #fff; }
#il.ihm .hm-of-i { font-size: 24px; color: var(--brand); }
#il.ihm .hm-of-b { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#il.ihm .hm-of-t { font-size: 16px; font-weight: 700; line-height: 1.3; }
#il.ihm .hm-of-d { font-size: 14px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
/* ===== Почему выбирают наш центр ===== */
#il.ihm .hm-why { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 48px; align-items: start; }
#il.ihm .hm-why-p img { display: block; width: 100%; height: auto; border-radius: 16px; }
#il.ihm .hm-why-b { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
#il.ihm .hm-why-b p { margin: 0; padding: 0; text-wrap: pretty; }
#il.ihm .hm-why-1 { font-size: 18px; font-weight: 600; line-height: 1.5; }
#il.ihm .hm-why-x { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
#il.ihm .hm-why-btn { display: none; }
/* ===== Логотипы: бренды, страховые, клиенты ===== */
#il.ihm .hm-lg { display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--bg-panel); overflow: hidden; }
#il.ihm .hm-lg img, #il.ihm .hm-cli img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
#il.ihm .hm-bl { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
#il.ihm .hm-brand { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 12px; color: var(--ink); text-decoration: none; }
#il.ihm .hm-brand:hover { border-color: #9DBFDD; }
#il.ihm .hm-brand .hm-lg { height: 56px; }
#il.ihm .hm-brand-n { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 15px; font-weight: 600; }
#il.ihm .hm-brand-n .hm-i { font-size: 18px; color: var(--brand); }
#il.ihm .hm-il { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
#il.ihm .hm-in { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 12px; }
#il.ihm .hm-in .hm-lg { width: 100%; height: 52px; }
#il.ihm .hm-in-n { font-size: 14px; font-weight: 500; text-align: center; }
#il.ihm .hm-cll { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
#il.ihm .hm-cli { display: flex; align-items: center; justify-content: center; height: 80px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; font: 500 11px 'JetBrains Mono', monospace; color: var(--muted-2); text-align: center; }
#il.ihm .hm-cli img { max-height: 40px; }
/* ===== 768-1199 ===== */
@media (max-width: 1199px) {
#il.ihm .hm-wrap { padding-left: 32px; padding-right: 32px; }
#il.ihm .hm-news { flex: 1 1 100%; }
#il.ihm .hm-news-l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 12px 0 14px; border-top: 1px solid var(--border); }
#il.ihm .hm-n { flex-direction: column; gap: 6px; padding: 0; border-top: 0; }
#il.ihm .hm-n-p { width: 100%; height: 120px; margin-bottom: 4px; }
#il.ihm .hm-n-x { -webkit-line-clamp: 3; }
#il.ihm .hm-track { grid-auto-columns: calc((100% - 36px) / 4); }
#il.ihm .hm-why { grid-template-columns: 300px minmax(0, 1fr); }
}
@media (min-width: 1200px) {
#il.ihm .hm-first { flex-wrap: nowrap; }
#il.ihm .hm-first-b { flex: 1 1 0; }
#il.ihm .hm-news-l { display: block; }
}
@media (max-width: 1023px) {
#il.ihm .hm-recgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#il.ihm .hm-track { grid-auto-columns: calc((100% - 24px) / 3); }
#il.ihm .hm-ph-l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#il.ihm .hm-ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#il.ihm .hm-facts { grid-template-columns: minmax(0, 1fr); }
#il.ihm .hm-bl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#il.ihm .hm-cll { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#il.ihm .hm-cgrid { grid-template-columns: minmax(0, 1fr); }
#il.ihm .hm-clist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ===== <= 767: мобильная раскладка ===== */
@media (max-width: 767px) {
#il.ihm .hm-wrap { padding: 12px 16px 32px; gap: 36px; }
#il.ihm .hm-head { gap: 2px; margin-bottom: 12px; }
#il.ihm .hm-eyebrow { font-size: 12px; }
#il.ihm .hm-h2 { font-size: 22px; line-height: 1.2; letter-spacing: 0; }
#il.ihm .hm-h3 { font-size: 19px; }
#il.ihm .hm-sec > .hm-h2 { margin-bottom: 12px; }
#il.ihm .hm-hint { display: none; }
#il.ihm .hm-all { display: flex; align-items: center; height: 44px; }
#il.ihm .hm-arrows { display: none; }
#il.ihm .hm-head--row { align-items: flex-end; }
/* Первый экран */
#il.ihm .hm-first { flex-direction: column; flex-wrap: nowrap; gap: 36px; }
#il.ihm .hm-first-b { flex: none; gap: 10px; }
#il.ihm .hm-bbox { height: auto; border-radius: 14px; }
#il.ihm .hm-bs { display: flex; flex-direction: column; }
#il.ihm .hm-bs-p { order: -1; flex: none; height: 128px; }
#il.ihm .hm-bs-t { flex: 1; gap: 8px; padding: 16px 16px 18px; }
#il.ihm .hm-bs-h { font-size: 23px; line-height: 1.18; }
#il.ihm .hm-bs.is-long .hm-bs-h { font-size: 20px; }
#il.ihm .hm-bs-s { font-size: 15px; line-height: 1.4; }
#il.ihm .hm-bs-cta { height: 44px; margin-top: auto; padding: 0 16px; gap: 6px; font-size: 15px; }
#il.ihm .hm-bs-t .hm-bs-cta { margin-top: 8px; }
#il.ihm .hm-bs-cta .hm-i { font-size: 18px; }
#il.ihm .hm-bctl { position: static; gap: 4px; margin-top: 10px; }
#il.ihm .hm-bb { width: 44px; height: 44px; border: 0; border-radius: 0; color: var(--ink); }
#il.ihm .hm-bb:hover { background: none; }
#il.ihm .hm-bb .hm-i { font-size: 24px; }
#il.ihm .hm-bcnt { min-width: 0; font-size: 13px; color: var(--muted); }
#il.ihm .hm-bdots { margin: 0 8px 0 auto; }
#il.ihm .hm-bd { background: #C9D3DD; }
#il.ihm .hm-bd.is-on { background: var(--brand); }
#il.ihm .hm-bpause { display: none; }
#il.ihm .hm-nbox { height: auto; border-radius: 12px; }
#il.ihm .hm-ns { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 12px 12px 12px 14px; }
#il.ihm .hm-ns-t { flex: 1; padding: 0; gap: 0; }
#il.ihm .hm-ns-h { font-size: 15px; line-height: 1.3; }
#il.ihm .hm-ns-cta, #il.ihm .hm-ns-p { display: none; }
#il.ihm .hm-ns-ar { display: block; font-size: 22px; color: var(--brand); }
#il.ihm .hm-ndots { position: static; justify-content: center; margin-top: 8px; }
#il.ihm .hm-news { flex: none; padding: 0; border: 0; border-radius: 0; }
#il.ihm .hm-news-h { align-items: center; padding-bottom: 0; margin-bottom: 4px; }
#il.ihm .hm-news-all { height: 44px; }
#il.ihm .hm-news-l { display: block; padding: 0; border-top: 0; }
#il.ihm .hm-n { flex-direction: row; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
#il.ihm .hm-n-p { width: 72px; height: 72px; margin: 0; border-radius: 8px; }
#il.ihm .hm-n-b { gap: 2px; }
#il.ihm .hm-n-d { font-size: 12px; }
#il.ihm .hm-n-h { font-size: 15px; }
#il.ihm .hm-n-x { -webkit-line-clamp: 2; font-size: 13px; line-height: 1.35; }
#il.ihm .hm-n.is-nophoto .hm-n-x { -webkit-line-clamp: 2; }
/* Ленты: горизонтальный скролл, плитка 224 */
#il.ihm .hm-recgrid, #il.ihm .hm-track { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 224px; gap: 10px; margin: 0 -16px; padding: 0 16px; overflow-x: auto; scroll-padding: 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
#il.ihm .hm-recgrid::-webkit-scrollbar { display: none; }
#il.ihm .hm-recgrid > .il-card { scroll-snap-align: start; }
/* 15 центров: строки 48, карта по кнопке, карточка шторкой */
#il.ihm .hm-cs .hm-head { margin-bottom: 4px; }
#il.ihm .hm-mapbtn { display: flex; }
#il.ihm .hm-cgrid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
#il.ihm .hm-cright { order: -1; }
#il.ihm .hm-mapbox { display: none; min-height: 0; margin-bottom: 8px; padding: 10px; border-radius: 12px; }
#il.ihm .hm-cs.is-mapopen .hm-mapbox { display: block; }
#il.ihm .hm-map-d { display: none; }
#il.ihm .hm-map-m { display: block; }
#il.ihm .hm-legend { display: none; }
#il.ihm .hm-clist { display: flex; flex-direction: column; gap: 0; }
#il.ihm .hm-city { gap: 8px; min-height: 48px; height: 48px; margin: 0 -8px; padding: 0 4px 0 8px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
#il.ihm .hm-city.is-cur { border-color: var(--border); background: var(--brand-tint); }
#il.ihm .hm-city.is-open { border-color: var(--border); }
#il.ihm .hm-city-pin { font-size: 18px; }
#il.ihm .hm-city-t { flex-direction: row; align-items: center; gap: 8px; }
#il.ihm .hm-city-n { flex: none; font-size: 15px; }
#il.ihm .hm-city-tag { display: none; }
#il.ihm .hm-city-a { flex: 1; min-width: 0; }
#il.ihm .hm-city-ch { font-size: 20px; }
#il.ihm .hm-pop { position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 1301; width: auto; max-width: none; max-height: min(780px, 92vh); border-radius: 20px 20px 0 0; box-shadow: none; }
#il.ihm .hm-dim { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1300; background: rgba(21, 24, 28, .5); }
#il.ihm .hm-dim:not([hidden]) { display: block; }
#il.ihm .hm-pop-h { padding: 8px 6px 10px 16px; }
#il.ihm .hm-pop-grab { display: block; width: 40px; height: 4px; margin: 0 auto 6px; border-radius: 2px; background: var(--border-input); }
#il.ihm .hm-pop-ht { gap: 4px; padding-top: 6px; }
#il.ihm .hm-pop-n { font-size: 20px; }
#il.ihm .hm-pop-x { width: 44px; height: 44px; border-radius: 0; background: none; }
#il.ihm .hm-pop-x .hm-i { font-size: 24px; }
#il.ihm .hm-pop-b { padding: 12px 16px; }
#il.ihm .hm-grp { padding: 12px; border-radius: 14px; }
#il.ihm .hm-st { height: auto; padding: 0; background: none; font-size: 13px; font-weight: 400; }
#il.ihm .hm-st.is-open { background: none; }
#il.ihm .hm-tel-main { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 10px; background: var(--cta); font-size: 18px; font-weight: 700; line-height: 1.2; }
#il.ihm .hm-tel-main:hover { background: var(--cta-hover); color: var(--ink); text-decoration: none; }
#il.ihm .hm-tel-main .hm-tel-ic { color: var(--ink); }
#il.ihm .hm-tel { display: flex; align-items: center; justify-content: space-between; height: 44px; border-top: 1px solid var(--border); font-size: 16px; line-height: 1.2; }
#il.ihm .hm-tel-main { border-top: 0; justify-content: center; }
#il.ihm .hm-tel-ic { display: block; font-size: 20px; color: var(--brand); }
#il.ihm .hm-tel-main .hm-tel-ic { font-size: 22px; }
#il.ihm .hm-grp-i { gap: 8px; font-size: 14px; }
#il.ihm .hm-grp-r .hm-i { font-size: 18px; }
#il.ihm .hm-pop-f { padding: 10px 16px 16px; }
#il.ihm .hm-choose { height: 48px; font-size: 16px; }
#il.ihm .hm-is { height: 48px; }
#il.ihm .hm-is-d { display: none; }
#il.ihm .hm-is-m { display: inline; }
/* Фото: горизонтальный скролл 260 */
#il.ihm .hm-ph-l { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 260px; gap: 10px; margin: 0 -16px; padding: 0 16px; overflow-x: auto; scroll-padding: 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
#il.ihm .hm-ph-l::-webkit-scrollbar { display: none; }
#il.ihm .hm-ph { gap: 8px; scroll-snap-align: start; }
#il.ihm .hm-ph-i { height: 180px; padding-bottom: 0; }
#il.ihm .hm-ph figcaption { gap: 1px; }
#il.ihm .hm-ph-t { font-size: 15px; }
#il.ihm .hm-ph-s { font-size: 13px; }
/* Преимущества */
#il.ihm .hm-adv { gap: 18px; padding: 18px 16px 20px; border-radius: 16px; }
#il.ihm .hm-facts { gap: 8px; }
#il.ihm .hm-fact { gap: 12px; padding: 10px 12px; border-radius: 12px; }
#il.ihm .hm-fact-i { width: 40px; height: 40px; border-radius: 10px; }
#il.ihm .hm-fact-i .hm-i { font-size: 22px; }
#il.ihm .hm-fact-t { font-size: 16px; }
#il.ihm .hm-offers { gap: 18px; }
#il.ihm .hm-ol { display: flex; flex-direction: column; gap: 14px; }
#il.ihm .hm-of { flex-direction: row; gap: 12px; }
#il.ihm .hm-of-n { width: 28px; height: 28px; font-size: 13px; }
#il.ihm .hm-of-i { display: none; }
#il.ihm .hm-of-b { gap: 2px; }
#il.ihm .hm-of-t { font-size: 15px; }
#il.ihm .hm-of-d { line-height: 1.4; }
/* Почему выбирают: после первого абзаца свёрнуто */
#il.ihm .hm-why { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
#il.ihm .hm-why-b { display: contents; max-width: none; }
#il.ihm .hm-why-b .hm-h2 { order: 1; }
#il.ihm .hm-why-p { order: 2; }
#il.ihm .hm-why-p img { height: 140px; border-radius: 12px; object-fit: cover; }
#il.ihm .hm-why-1 { order: 3; font-size: 16px; }
#il.ihm .hm-why-x { order: 4; display: none; font-size: 15px; line-height: 1.55; }
#il.ihm .hm-why.is-open .hm-why-x { display: block; }
#il.ihm .hm-why-btn { order: 5; display: flex; align-items: center; align-self: flex-start; gap: 4px; height: 44px; padding: 0; border: 0; background: none; font-size: 15px; font-weight: 600; color: var(--brand); cursor: pointer; }
#il.ihm .hm-why.is-open .hm-why-btn .hm-i { transform: rotate(180deg); }
/* Бренды, страховые, клиенты: горизонтальный скролл */
#il.ihm .hm-bl, #il.ihm .hm-il, #il.ihm .hm-cll { display: grid; grid-template-columns: none; grid-auto-flow: column; gap: 8px; margin: 0 -16px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
#il.ihm .hm-bl::-webkit-scrollbar, #il.ihm .hm-il::-webkit-scrollbar, #il.ihm .hm-cll::-webkit-scrollbar { display: none; }
#il.ihm .hm-bl { grid-auto-columns: 132px; }
#il.ihm .hm-brand { gap: 8px; padding: 10px; }
#il.ihm .hm-brand .hm-lg { height: 48px; }
#il.ihm .hm-brand-n { font-size: 14px; }
#il.ihm .hm-brand-n .hm-i { display: none; }
#il.ihm .hm-il { grid-template-rows: repeat(2, auto); grid-auto-columns: 128px; }
#il.ihm .hm-in { gap: 6px; padding: 8px; }
#il.ihm .hm-in .hm-lg { height: 40px; border-radius: 6px; }
#il.ihm .hm-in-n { font-size: 12px; line-height: 1.25; }
#il.ihm .hm-cll { grid-template-rows: repeat(2, 64px); grid-auto-columns: 128px; }
#il.ihm .hm-cli { height: auto; padding: 8px; font-size: 10px; }
#il.ihm .hm-cli img { max-height: 36px; }
}
/* Тост (общий класс листинга) поверх шторки центра */
#il.ihm .il-toast { z-index: 1400; }
/* Логотипы брендов — JPG на белом: плашка просвечивает через multiply. Логотипы страховых и клиентов — бледно-серые PNG (рассчитаны на старый тёмный фон):
на светлой плашке их затемняет filter, иначе почти не видны */
#il.ihm .hm-brand .hm-lg img { mix-blend-mode: multiply; }
#il.ihm .hm-in .hm-lg img, #il.ihm .hm-cli img { filter: brightness(.42) contrast(1.15); }