/* Большой баннер главной (views/site/_hero.php, _hero_slide.php, js/modules/hero.js) и его предпросмотр в /admin/banners.
 *
 * .nbh — контейнер (container queries по его ширине: так предпросмотр в админке рисует и «компьютер», и «телефон»).
 * Кадр фиксированной пропорции (вёрстка не прыгает): 21:8 от 900 px ширины блока, 12:5 — 609–899, до 608 px (телефон,
 * экран ≤ 640 px) — 16:10, а если у какого-то слайда есть картинка для телефона (.is-tall) — 4:5.
 * Слайды лежат друг на друге (position: absolute); hero.js сдвигает их transform'ом.
 * Слои слайда: .nbh-bg (размытая копия картинки / обложки) → .nbh-media (картинка) → .nbh-shade (подложка под текст) →
 * .nbh-cover (обложка тайтла) → .nbh-body (бейдж, заголовок, подзаголовок, кнопка). Тема слайда: .t-dark / .t-light,
 * выравнивание .a-left / .a-center / .a-right, картинка .f-cover / .f-contain. Цвета поверх картинки — свои (не токены темы
 * сайта): под текстом всегда подложка слайда; полоса управления под кадром — на токенах. */

.nbh {
	--nbh-bar-h: 48px;
	--nbh-pad: clamp(18px, 4.2cqi, 56px);
	position: relative; margin: 0 0 26px; container: nbh / inline-size;
}
.nbh.is-single { margin-bottom: 30px; }
.nbh [hidden] { display: none !important; }

/* ------------------------------------------------------------ кадр и слайды */
.nbh-frame {
	--nbh-fr: 2.625;
	position: relative; aspect-ratio: 21 / 8; overflow: hidden; isolation: isolate;
	border-radius: var(--radius-lg); background: var(--muted); box-shadow: var(--elev-2);
}
@container nbh (max-width: 899.98px) { .nbh-frame { aspect-ratio: 12 / 5; --nbh-fr: 2.4; } }
@container nbh (max-width: 608px) {
	.nbh-frame { aspect-ratio: 16 / 10; --nbh-fr: 1.6; }
	.nbh.is-tall .nbh-frame { aspect-ratio: 4 / 5; --nbh-fr: 0.8; }
}
.nbh.is-multi .nbh-frame { touch-action: pan-y pinch-zoom; }
.nbh-track { position: absolute; inset: 0; }
.nbh-slide { position: absolute; inset: 0; visibility: hidden; transform: translate3d(0, 0, 0); }
.nbh-slide.is-active, .nbh-slide.is-in { visibility: visible; }
/* PERF: скрытые слайды лежат на месте видимого — для браузера их ленивые картинки «на экране», и он качал их все сразу,
   отнимая полосу у картинки первого слайда (LCP). Без отрисовки содержимого они ждут hero.js: соседей он подгружает
   сам (loading=eager через 1,2 с и при наведении на стрелки), остальные — когда до них дойдёт очередь */
.nbh-slide:not(.is-active):not(.is-in) { content-visibility: hidden; }
.nbh-slide.is-moving { transition: transform var(--nbh-dur, .72s) cubic-bezier(.22, .8, .24, 1); will-change: transform; }
.nbh.is-dragging .nbh-slide { transition: none; }

/* ------------------------------------------------------------ слайд */
.nbh-card {
	--nbh-accent: oklch(0.42 0.12 275);
	position: absolute; inset: 0; display: block; overflow: hidden; isolation: isolate;
	text-decoration: none; -webkit-tap-highlight-color: transparent; -webkit-user-drag: none; user-select: none;
}
.nbh-card.t-dark {
	--nbh-deep: color-mix(in oklab, var(--nbh-accent) 24%, oklch(0.13 0.012 265));
	--nbh-ink: #fff; --nbh-ink-2: oklch(1 0 0 / .86);
	color: #fff; background: var(--nbh-deep);
}
.nbh-card.t-light {
	--nbh-deep: color-mix(in oklab, var(--nbh-accent) 9%, oklch(0.975 0.004 265));
	--nbh-ink: oklch(0.17 0 0); --nbh-ink-2: oklch(0.22 0 0 / .82);
	color: oklch(0.17 0 0); background: var(--nbh-deep);
}
a.nbh-card:hover, a.nbh-card:focus, a.nbh-card:active { color: var(--nbh-ink); text-decoration: none; }
a.nbh-card:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; }
.nbh-card img { -webkit-user-drag: none; }

/* размытая копия: фон «целиком», заглушка, пока грузится картинка, фон обложки тайтла */
.nbh-bg { position: absolute; inset: 0; z-index: -3; display: block; overflow: hidden; }
.nbh-bg picture { display: contents; }
.nbh-bg img {
	position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; max-width: none; object-fit: cover;
	filter: blur(36px) saturate(1.3); transform: translateZ(0);
}
.nbh-card.t-dark .nbh-bg img { opacity: .9; }
.nbh-card.t-light .nbh-bg img { opacity: .55; }
.nbh-bookbg { background: linear-gradient(150deg, oklch(0.52 0.12 var(--ph-h, 250)), oklch(0.26 0.08 calc(var(--ph-h, 250) + 40))); }
.nbh-card.t-light .nbh-bookbg { background: linear-gradient(150deg, oklch(0.94 0.04 var(--ph-h, 250)), oklch(0.86 0.06 calc(var(--ph-h, 250) + 40))); }

.nbh-media { position: absolute; inset: 0; z-index: -2; display: block; }
.nbh-media img {
	position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
	object-position: var(--nbh-fx, 50%) var(--nbh-fy, 50%);
	transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
a.nbh-card:hover .nbh-media img { transform: scale(1.018); }
/* целиком: картинка прижата к стороне без текста, её внутренний край растворяется в размытом фоне.
   --e — доля кадра по ширине, свободная от картинки (картинка шириной --nbh-ir к высоте в кадре --nbh-fr) */
.nbh-card.f-contain .nbh-media img {
	--e: calc((1 - min(1, var(--nbh-ir, 1.5) / var(--nbh-fr, 2.625))) * 100%);
	object-fit: contain; object-position: right center;
	-webkit-mask-image: linear-gradient(to right, transparent var(--e), #000 calc(var(--e) + 9%));
	mask-image: linear-gradient(to right, transparent var(--e), #000 calc(var(--e) + 9%));
}
.nbh-card.f-contain.a-right .nbh-media img {
	object-position: left center;
	-webkit-mask-image: linear-gradient(to left, transparent var(--e), #000 calc(var(--e) + 9%));
	mask-image: linear-gradient(to left, transparent var(--e), #000 calc(var(--e) + 9%));
}
.nbh-card.f-contain.a-center .nbh-media img {
	object-position: center;
	-webkit-mask-image: linear-gradient(to right, transparent calc(var(--e) / 2), #000 calc(var(--e) / 2 + 7%), #000 calc(100% - var(--e) / 2 - 7%), transparent calc(100% - var(--e) / 2));
	mask-image: linear-gradient(to right, transparent calc(var(--e) / 2), #000 calc(var(--e) / 2 + 7%), #000 calc(100% - var(--e) / 2 - 7%), transparent calc(100% - var(--e) / 2));
}

/* подложка под текст: со стороны текста, в цвет слайда (акцент подмешан) */
.nbh-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.nbh-card.a-left .nbh-shade {
	background: linear-gradient(90deg, color-mix(in oklab, var(--nbh-deep) 92%, transparent) 0%, color-mix(in oklab, var(--nbh-deep) 76%, transparent) 30%,
		color-mix(in oklab, var(--nbh-deep) 46%, transparent) 48%, color-mix(in oklab, var(--nbh-deep) 14%, transparent) 62%, transparent 76%);
}
.nbh-card.a-right .nbh-shade {
	background: linear-gradient(270deg, color-mix(in oklab, var(--nbh-deep) 92%, transparent) 0%, color-mix(in oklab, var(--nbh-deep) 76%, transparent) 30%,
		color-mix(in oklab, var(--nbh-deep) 46%, transparent) 48%, color-mix(in oklab, var(--nbh-deep) 14%, transparent) 62%, transparent 76%);
}
.nbh-card.a-center .nbh-shade {
	background: linear-gradient(0deg, color-mix(in oklab, var(--nbh-deep) 92%, transparent) 0%, color-mix(in oklab, var(--nbh-deep) 72%, transparent) 30%,
		color-mix(in oklab, var(--nbh-deep) 30%, transparent) 52%, transparent 70%);
}
.nbh-card.no-text .nbh-shade { background: none; }
.nbh-card.is-plain::after {
	content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
	background:
		radial-gradient(50% 80% at 86% 18%, color-mix(in oklab, var(--nbh-accent) 60%, transparent), transparent 70%),
		radial-gradient(40% 70% at 64% 110%, color-mix(in oklab, var(--nbh-accent) 30%, transparent), transparent 70%),
		repeating-linear-gradient(135deg, oklch(1 0 0 / .035) 0 2px, transparent 2px 16px);
}

/* обложка связанного тайтла (баннер без своей картинки) */
.nbh-cover {
	--nbh-cover-h: 80%;
	position: absolute; z-index: 0; top: 50%; right: clamp(24px, 7cqi, 110px); height: var(--nbh-cover-h); aspect-ratio: 2 / 3;
	transform: translateY(-50%) rotate(3deg); transition: transform .5s ease;
}
.nbh-card.a-right .nbh-cover { right: auto; left: clamp(24px, 7cqi, 110px); transform: translateY(-50%) rotate(-3deg); }
.nbh-cover .nb-cover { width: 100%; height: 100%; border: 0; border-radius: var(--radius); box-shadow: 0 30px 60px -20px oklch(0 0 0 / .8), 0 0 0 1px oklch(1 0 0 / .14); }
.nbh-cover .nb-cover img { width: 100%; height: 100%; object-fit: cover; }
a.nbh-card:hover .nbh-cover { transform: translateY(-50%) rotate(1deg) scale(1.02); }

/* пометки «Реклама» и «18+» (тайтл для взрослых) — всегда видны, в углу напротив текста */
.nbh-marks { position: absolute; z-index: 2; top: 14px; right: 14px; display: flex; gap: 6px; }
.nbh-ad, .nbh-age {
	display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
	box-sizing: border-box; border-radius: var(--radius-sm); border: 1px solid oklch(1 0 0 / .3); background: oklch(0 0 0 / .5);
	color: oklch(1 0 0 / .94); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.nbh-age { border-color: transparent; background: oklch(0.55 0.2 25 / .92); color: #fff; font-weight: 800; letter-spacing: .02em; }
.nbh-card.a-right .nbh-marks { right: auto; left: 14px; }

/* ------------------------------------------------------------ текст */
.nbh-body {
	position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
	gap: 12px; box-sizing: border-box; padding: var(--nbh-pad); color: var(--nbh-ink); pointer-events: none;
}
.nbh-body > * { max-width: min(560px, 46cqi); }
.nbh-card.a-right .nbh-body { align-items: flex-end; text-align: right; }
.nbh-card.a-center .nbh-body { align-items: center; justify-content: flex-end; text-align: center; }
.nbh-card.a-center .nbh-body > * { max-width: min(780px, 74cqi); }
.nbh-card.is-book.a-center .nbh-body { align-items: flex-start; justify-content: center; text-align: left; }
.nbh-card.is-book.a-center .nbh-body > * { max-width: min(560px, 46cqi); }
/* несколько слайдов: по бокам стрелки (16 + 46 px) — текст от края не ближе */
.nbh.is-multi .nbh-body { padding-left: max(var(--nbh-pad), 80px); padding-right: max(var(--nbh-pad), 80px); }
/* текст уже на картинке: остаётся для экранных дикторов */
.nbh-card.no-text .nbh-body { position: absolute; width: 1px; height: 1px; inset: auto; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.nbh-badge {
	display: inline-flex; align-items: center; height: 26px; padding: 0 11px; box-sizing: border-box; border-radius: var(--radius-sm);
	background: #fff; color: #111; font-size: 12px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 8px 18px -10px oklch(0 0 0 / .6);
}
.nbh-card.t-light .nbh-badge { background: oklch(0.17 0 0); color: #fff; }
.nbh-card.has-accent .nbh-badge { background: var(--nbh-accent); color: var(--nbh-accent-ink); }
.nbh-card .nbh-title {
	margin: 0; color: inherit; font-size: clamp(22px, 3.2cqi, 44px); line-height: 1.07; letter-spacing: -0.03em; font-weight: 800;
	text-wrap: balance; overflow-wrap: anywhere;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* тени текста короткие: широкие обрезались overflow: hidden у line-clamp (тёмный прямоугольник за текстом) */
.nbh-card.t-dark .nbh-title { text-shadow: 0 1px 2px oklch(0 0 0 / .45); }
.nbh-card .nbh-sub {
	margin: 0; color: var(--nbh-ink-2); font-size: clamp(14px, 1.3cqi, 17px); line-height: 1.5; overflow-wrap: anywhere;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nbh-card.t-dark .nbh-sub { text-shadow: 0 1px 2px oklch(0 0 0 / .4); }
.nbh-cta {
	display: inline-flex; align-items: center; gap: 9px; height: 46px; margin-top: 6px; padding: 0 22px; box-sizing: border-box;
	border-radius: var(--radius); background: #fff; color: #111; font-size: 15px; font-weight: 650; white-space: nowrap;
	box-shadow: 0 12px 30px -14px oklch(0 0 0 / .7); transition: background .15s, transform .15s;
}
.nbh-cta > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.nbh-card.t-light .nbh-cta { background: oklch(0.17 0 0); color: #fff; }
.nbh-cta-ico { display: inline-flex; transition: transform .2s ease; }
a.nbh-card:hover .nbh-cta { background: oklch(0.93 0 0); }
a.nbh-card.t-light:hover .nbh-cta { background: oklch(0.3 0 0); }
a.nbh-card:hover .nbh-cta-ico { transform: translateX(3px); }

/* планшет */
@container nbh (max-width: 899.98px) {
	.nbh-body { gap: 9px; }
	.nbh-body > * { max-width: min(520px, 52cqi); }
	.nbh-card .nbh-sub { -webkit-line-clamp: 2; }
	.nbh-cta { height: 42px; padding: 0 18px; font-size: 14.5px; }
}

/* телефон: текст внизу на подложке снизу; картинка для телефона — на весь кадр; без неё «целиком» — картинка сверху */
@container nbh (max-width: 608px) {
	.nbh-body, .nbh-card.a-center .nbh-body, .nbh-card.is-book.a-center .nbh-body, .nbh.is-multi .nbh-body { justify-content: flex-end; gap: 7px; padding: 16px; }
	/* узко: листают свайпом и точками, стрелки — только при клавиатурном фокусе */
	.nbh-arrow, .nbh:hover .nbh-arrow { opacity: 0; pointer-events: none; }
	.nbh-arrow:focus-visible { opacity: 1; pointer-events: auto; }
	.nbh-body > *, .nbh-card.a-center .nbh-body > *, .nbh-card.is-book.a-center .nbh-body > * { max-width: 100%; }
	.nbh-card .nbh-title { font-size: 21px; line-height: 1.12; -webkit-line-clamp: 2; }
	.nbh-card .nbh-sub { display: none; }
	.nbh.is-tall .nbh-card .nbh-title { font-size: 24px; -webkit-line-clamp: 3; }
	.nbh.is-tall .nbh-card .nbh-sub { display: -webkit-box; font-size: 14px; -webkit-line-clamp: 2; }
	.nbh-badge { height: 22px; padding: 0 8px; font-size: 10.5px; }
	.nbh-cta { height: 38px; margin-top: 3px; padding: 0 14px; font-size: 14px; }
	.nbh-card .nbh-shade, .nbh-card.a-left .nbh-shade, .nbh-card.a-right .nbh-shade, .nbh-card.a-center .nbh-shade {
		background: linear-gradient(0deg, color-mix(in oklab, var(--nbh-deep) 94%, transparent) 0%, color-mix(in oklab, var(--nbh-deep) 82%, transparent) 34%,
			color-mix(in oklab, var(--nbh-deep) 50%, transparent) 56%, color-mix(in oklab, var(--nbh-deep) 12%, transparent) 72%, transparent 82%);
	}
	.nbh.is-tall .nbh-card .nbh-shade, .nbh.is-tall .nbh-card.a-left .nbh-shade, .nbh.is-tall .nbh-card.a-right .nbh-shade, .nbh.is-tall .nbh-card.a-center .nbh-shade {
		background: linear-gradient(0deg, color-mix(in oklab, var(--nbh-deep) 94%, transparent) 0%, color-mix(in oklab, var(--nbh-deep) 84%, transparent) 30%,
			color-mix(in oklab, var(--nbh-deep) 58%, transparent) 46%, color-mix(in oklab, var(--nbh-deep) 16%, transparent) 62%, transparent 72%);
	}
	.nbh-card.t-dark .nbh-title { text-shadow: 0 1px 2px oklch(0 0 0 / .5); }
	.nbh-card.no-text .nbh-shade, .nbh.is-tall .nbh-card.no-text .nbh-shade { background: none; }
	.nbh-card.has-mobile .nbh-media img { object-fit: cover; object-position: 50% 50%; -webkit-mask-image: none; mask-image: none; }
	/* «целиком» без картинки для телефона: картинка у верхнего края, низ растворяется в фоне (--g — её доля кадра по высоте) */
	.nbh-card.f-contain:not(.has-mobile) .nbh-media img, .nbh-card.f-contain.a-right:not(.has-mobile) .nbh-media img, .nbh-card.f-contain.a-center:not(.has-mobile) .nbh-media img {
		--g: calc(min(1, var(--nbh-fr, 1.6) / var(--nbh-ir, 1.5)) * 100%);
		object-position: 50% 0;
		-webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--g) - 16%), transparent var(--g));
		mask-image: linear-gradient(to bottom, #000 calc(var(--g) - 16%), transparent var(--g));
	}
	.nbh-cover { --nbh-cover-h: 64%; top: 14px; right: 14px; transform: rotate(3deg); }
	.nbh-card.a-right .nbh-cover { left: auto; right: 14px; transform: rotate(3deg); }
	a.nbh-card:hover .nbh-cover { transform: rotate(1deg); }
	.nbh-card.is-book .nbh-body > * { max-width: calc(100% - 108px); }
	.nbh.is-tall .nbh-card.is-book .nbh-body > * { max-width: 100%; }
	.nbh.is-tall .nbh-cover { --nbh-cover-h: 52%; top: 18px; right: 50%; transform: translateX(50%) rotate(2deg); }
	.nbh.is-tall a.nbh-card:hover .nbh-cover { transform: translateX(50%) rotate(1deg); }
	.nbh-marks { top: 10px; right: 10px; }
	.nbh-card.a-right .nbh-marks { left: auto; right: 10px; }
	.nbh-card.is-book .nbh-marks { right: auto; left: 10px; }
}

/* ------------------------------------------------------------ слайд тайтла (views/site/_hero_title.php, стили .nbt-* — hero-title.css)
   Слайд заполняет кадр; скругление — от кадра. Несколько слайдов: по бокам стрелки (16 + 46 px) — текст и обложка не ближе. */
.nbh-slide > .nbt { position: absolute; inset: 0; border-radius: inherit; }
@container nbh (min-width: 609px) {
	.nbh.is-multi .nbt-body { padding-left: max(var(--nbt-pad), 80px); }
	.nbh.is-multi .nbt-cover { right: max(80px, 6cqi); }
}

/* ------------------------------------------------------------ управление: стрелки на кадре, полоса под ним */
.nbh-ctrl { display: contents; }
.nbh-btn { display: inline-grid; place-items: center; padding: 0; box-sizing: border-box; cursor: pointer; font: inherit; }
.nbh-btn svg { display: block; }
.nbh-arrow {
	position: absolute; z-index: 3; top: calc((100% - var(--nbh-bar-h)) / 2); width: 46px; height: 46px; margin-top: -23px;
	border: 1px solid oklch(1 0 0 / .2); border-radius: 999px; background: oklch(0.12 0.01 265 / .52); color: #fff;
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 26px -12px oklch(0 0 0 / .7);
	opacity: 0; transition: opacity .2s ease, background .15s, transform .15s;
}
.nbh-arrow.is-prev { left: 16px; }
.nbh-arrow.is-next { right: 16px; }
.nbh:hover .nbh-arrow, .nbh-arrow:focus-visible { opacity: 1; }
.nbh-arrow:hover { background: oklch(0.12 0.01 265 / .78); }
.nbh-arrow:active { transform: scale(.95); }
.nbh-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--ring); }
@media (hover: none) {
	.nbh-arrow { pointer-events: none; }
	.nbh:hover .nbh-arrow { opacity: 0; }
	.nbh-arrow:focus-visible { opacity: 1; pointer-events: auto; }
}
.nbh-bar { display: flex; align-items: center; gap: 14px; height: 40px; margin-top: 8px; padding-right: 48px; }
.nbh-dots { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; }
.nbh-dot {
	flex: 0 1 56px; width: 56px; min-width: 22px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer;
	display: grid; align-items: center; border-radius: var(--radius-sm);
}
.nbh-dot i { position: relative; display: block; height: 4px; overflow: hidden; border-radius: 99px; background: color-mix(in oklab, var(--foreground) 15%, transparent); transition: background .2s; }
.nbh-dot:hover i { background: color-mix(in oklab, var(--foreground) 32%, transparent); }
.nbh-dot b { position: absolute; inset: 0; background: var(--foreground); transform: scaleX(0); transform-origin: left center; }
.nbh-dot.is-active b { transform: scaleX(1); }
.nbh.is-auto .nbh-dot.is-active b { animation: nbh-fill var(--nbh-interval, 6.5s) linear both; }
.nbh.is-auto:not(.is-playing) .nbh-dot.is-active b { animation-play-state: paused; }
.nbh-dot:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
@keyframes nbh-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.nbh-count { margin-left: auto; font-size: 12.5px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nbh-count b { color: var(--foreground); font-weight: 650; }
.nbh-play {
	position: absolute; right: 0; bottom: 2px; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--radius);
	background: var(--card-solid); color: var(--foreground); box-shadow: var(--elev-1); transition: background .15s;
}
.nbh-play:hover { background: var(--muted); }
.nbh-play:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.nbh-play .i-play, .nbh.is-user-paused .nbh-play .i-pause { display: none; }
.nbh.is-user-paused .nbh-play .i-play { display: inline-grid; }
.nbh-play .i-pause, .nbh-play .i-play { place-items: center; }
.nbh-play .i-pause { display: inline-grid; }
/* до запуска hero.js управление невидимо, но место занято (вёрстка не прыгает) */
.nbh.is-multi:not(.is-ready) .nbh-arrow, .nbh.is-multi:not(.is-ready) .nbh-play, .nbh.is-multi:not(.is-ready) .nbh-bar > * { visibility: hidden; }

@media (max-width: 640px), (pointer: coarse) {
	.nbh-bar { margin-top: 6px; }
	.nbh-dot { height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
	.nbh-slide.is-moving { transition: none; }
	.nbh-media img, .nbh-cover, .nbh-cta, .nbh-cta-ico, .nbh-arrow { transition: none !important; }
	a.nbh-card:hover .nbh-media img { transform: none; }
	.nbh-play { display: none; }
	.nbh-bar { padding-right: 0; }
	.nbh.is-auto .nbh-dot.is-active b { animation: none; }
}

/* узкий блок (телефон): стрелки только при клавиатурном фокусе — и при наведении мышью тоже (правило выше в файле перебивалось .nbh:hover) */
@container nbh (max-width: 608px) {
	.nbh:hover .nbh-arrow:not(:focus-visible) { opacity: 0; pointer-events: none; }
}