/* ---------- Бренды: тонкая лента в фирменном тоне (выбран вариант «Фирменный тон», 29.09.2026) ----------
   Подключается после template_styles.css и переопределяет базовую ленту оттуда.
   Лента 100 px (было 162) с градиентом карточек макета, логотипы — монохром в тёмно-синем #36529d,
   при наведении — родные цвета. Бесшовность: gap 0, отступ справа у каждого логотипа.
   Прежний вариант «Плитки» и остальные претенденты — в сайт/backup/brands-before-tinted-2026-09-29/.
   Состав ленты — активные бренды инфоблока 9 (index.php → nk_brand_marquee_items), логотипы — ссылки на /brands/<код>/. */
/* 15.10.2026 (просьба владельца): заголовок блока — по центру на всех экранах */
.nk-brands-sec .nk-h2 { text-align: center; }
.nk-marquee {
	--nk-s: 1; /* общий масштаб логотипов (на телефоне меньше) */
	height: 100px;
	margin-top: 50px;
	border-radius: 20px;
	background: linear-gradient(180deg, #ecf2f8 0%, #d9e9f7 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.nk-marquee::before, .nk-marquee::after {
	width: 110px;
	background: linear-gradient(180deg, #ecf2f8 0%, #d9e9f7 100%);
}
.nk-marquee::before { -webkit-mask: linear-gradient(90deg, #000 15%, transparent); mask: linear-gradient(90deg, #000 15%, transparent); }
.nk-marquee::after { -webkit-mask: linear-gradient(270deg, #000 15%, transparent); mask: linear-gradient(270deg, #000 15%, transparent); }
/* Фон повторён на треке: у трека transform, он — изолированная группа, и multiply логотипов
   смешивается именно с ним. Градиент вертикальный, поэтому движение фона незаметно. */
.nk-marquee__track {
	gap: 0;
	align-self: stretch;
	background: linear-gradient(180deg, #ecf2f8 0%, #d9e9f7 100%);
	/* длительность растёт с числом брендов (--nk-n ставит index.php), скорость прежняя: 110 с на 20 брендов ≈ 33 px/с */
	animation-duration: calc(var(--nk-n, 20) * 5.5s);
}
/* Логотипы — ссылки. overflow: clip — фокус с клавиатуры не прокручивает ленту (сдвиг открыл бы пустоту у стыка);
   пока фокус внутри, лента стоит, а логотип с фокусом landing.js ставит в середину (initBrands). */
.nk-marquee { overflow: clip; }
/* пауза только при фокусе с клавиатуры: после щелчка мышью фокус остаётся на логотипе, и лента стояла бы до щелчка в другом месте */
.nk-marquee:has(.nk-brand:focus-visible) .nk-marquee__track { animation-play-state: paused; }
.nk-brand:focus-visible { outline: 2px solid var(--nk-blue); outline-offset: -2px; border-radius: 10px; }
/* бренд без файла логотипа (добавили в админке, а картинку ещё нет) — название текстом в том же тоне */
.nk-brand__word {
	font-size: calc(22px * var(--nk-s));
	line-height: 1;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--nk-navy);
	opacity: .82;
	transition: opacity .25s;
}
.nk-brand:hover .nk-brand__word { opacity: 1; }
.nk-brand { height: 100%; margin-right: 64px; }
.nk-brand img {
	height: calc(var(--nk-h, 28px) * var(--nk-s));
	max-width: calc(var(--nk-w, 136px) * var(--nk-s));
	opacity: .82;
	mix-blend-mode: multiply;
	/* Дуотон: чёрное → #36529d, белое → белое (multiply растворяет белое в фоне ленты).
	   --nk-b/--nk-c выравнивают «вес» светлых цветных логотипов, --nk-i инвертирует светлый логотип. */
	filter: grayscale(1) invert(var(--nk-i, 0)) brightness(var(--nk-b, 1)) contrast(var(--nk-c, 1)) invert(1) brightness(.7) sepia(1) saturate(1.85) hue-rotate(4deg) brightness(.8) invert(1);
	transition: opacity .25s;
}
.nk-brand:hover img { filter: none; opacity: 1; mix-blend-mode: normal; }
.nk-brand--inv img { --nk-i: 1; --nk-b: .45; --nk-w: 150px; }
.nk-brand--inv:hover img { filter: invert(1) hue-rotate(180deg); }
/* светлые цветные логотипы — темнее, чтобы вес был ровным */
.nk-brand img[src*="lessar"] { --nk-b: .25; --nk-h: 22px; }
.nk-brand img[src*="daikin"] { --nk-b: .4; }
.nk-brand img[src*="midea"] { --nk-b: .15; --nk-h: 30px; }
.nk-brand img[src*="mdv"] { --nk-b: .42; --nk-h: 25px; }
.nk-brand img[src*="hisense"] { --nk-b: .42; --nk-h: 23px; }
.nk-brand img[src*="roland"] { --nk-b: .48; --nk-h: 25px; }
.nk-brand img[src*="funai"] { --nk-b: .6; --nk-h: 31px; }
.nk-brand img[src*="dantex"] { --nk-b: .55; }
.nk-brand img[src*="zanussi"] { --nk-b: 1.25; --nk-c: 2.4; --nk-h: 38px; }
/* оптическая подгонка размеров */
.nk-brand img[src*="daichi"] { --nk-h: 25px; }
.nk-brand img[src*="mitsubishi"] { --nk-h: 36px; }
.nk-brand img[src*="lg."], .nk-brand img[src*="kentatsu"] { --nk-w: 150px; }
.nk-brand img[src*="tosot"] { --nk-h: 30px; }
.nk-brand img[src*="lg."] { --nk-b: .7; }
.nk-brand img[src*="xigma"], .nk-brand img[src*="royal"] { --nk-b: .75; }
/* бренды, пришедшие в ленту из инфоблока 30.09.2026 */
.nk-brand img[src*="fujitsu"] { --nk-h: 50px; --nk-w: 110px; } /* над буквами — знак ∞, под ними — хвост J: буквы ~46% высоты файла */
.nk-brand img[src*="bosch"] { --nk-b: .6; --nk-h: 24px; }
.nk-brand img[src*="haier"] { --nk-b: .55; }
.nk-brand img[src*="axioma"] { --nk-b: .7; }

@media (prefers-reduced-motion: reduce) { .nk-marquee { overflow-x: auto; overflow-y: hidden; } }

@media (max-width: 640px) {
	.nk-marquee { --nk-s: .8; height: 72px; margin-top: 28px; border-radius: 16px; }
	.nk-marquee__track { gap: 0; }
	.nk-marquee::before, .nk-marquee::after { width: 44px; }
	.nk-brand { margin-right: 40px; }
}