/* ==================================================================
   Kelpie_v2 — Наш канал в MAX, фронтенд
   «Закрытые» стили: блок изолирован от глобальных стилей сайта и темы.
   База зафиксирована через !important + сброс наследования, поэтому
   чистка/перетряска глобального CSS не должна ломать вид блока.
   Все правила скоупированы внутри .kbv2-max.

   ── Брейкпоинты адаптива (без горизонтального переполнения 320/360/420) ──
   • ≤900px: одна колонка, телефон под текстом, QR-код скрыт (по ТЗ —
     на телефоне остаётся только кнопка), весь контент по левому краю.
   • ≤768px: нижний межблочный отступ 88px → 56px (глобальный ритм).
   • ≤560px: заголовок 26px, текст на 20px от края — в вертикаль соседних блоков.
   • ≤420px: заголовок 22px, телефон 210×428, минимальные паддинги.
   ================================================================== */

/* ── Защитный сброс ───────────────────────────────────────────── */
.kbv2-max,
.kbv2-max *,
.kbv2-max *::before,
.kbv2-max *::after {
	box-sizing: border-box !important;
}

/* ── typography firewall: вернуть наследование голым элементам, чтобы темовые `p{font-size}` / `h*{}` не продавливали блок; классовые правила ниже всё равно выигрывают ── */
.kbv2-max :where(p,h1,h2,h3,h4,h5,h6,ul,ol,li,blockquote,figure,figcaption,small,strong,em,b,i,span,a,button,input,label,img,svg,video) { font-size: inherit; line-height: inherit; font-family: inherit; }

.kbv2-max {
	--mx-ink:#16243B;
	--mx-ink-soft:#3B4A63;
	--mx-mute:#7A8496;
	--mx-mute2:#AEB6C2;
	--mx-paper:#FFFFFF;
	--mx-line:#E5E9F1;
	--mx-orange:#FF6B1A;
	--mx-orange-deep:#E85B0E;
	--mx-blue:#0088C4;
	--mx-blue-deep:#006F9F;
	--mx-blue-soft:#E2F2F9;
	--mx-max:#3B6BFF;
	--mx-dark:#0E1420;
	--mx-grid:#D9E4F2;

	max-width:1200px !important;
	margin:0 auto 88px !important;
	padding:0 20px !important;
	font-family:'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif !important;
	font-size:16px !important;
	line-height:1.5 !important;
	text-align:left !important;
	color:var(--mx-ink) !important;
	background:none !important;
}

/* Сброс наследуемых элементов через :where() (0 специфичности),
   чтобы классовые правила ниже не проигрывали этому сбросу */
.kbv2-max :where(h2,h3,p,div,span,ul,ol,li,b,button) {
	margin:0 !important;
	padding:0 !important;
}
.kbv2-max h2 {
	font-family:'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
.kbv2-max :where(ul) { list-style:none !important; }
.kbv2-max img, .kbv2-max video { display:block !important; max-width:100% !important; }
.kbv2-max__copy a { color:var(--mx-blue) !important; text-decoration:underline !important; }

/* ── Карточка ─────────────────────────────────────────────────── */
.kbv2-max__card {
	position:relative !important;
	overflow:hidden !important;
	background:var(--mx-paper) !important;
	border:1px solid var(--mx-line) !important;
	border-radius:28px !important;
	box-shadow:0 1px 0 rgba(22,36,59,.03), 0 26px 52px -34px rgba(22,36,59,.22) !important;
}

/* Декоративный фон (вектор вместо макетного fon.jpg) */
.kbv2-max__blob {
	position:absolute !important;
	inset:0 !important;
	width:100% !important;
	height:100% !important;
	z-index:0 !important;
	opacity:.9 !important;
	pointer-events:none !important;
}

.kbv2-max__grid {
	position:relative !important;
	z-index:1 !important;
	display:grid !important;
	grid-template-columns:minmax(0,1fr) auto !important;
	gap:40px !important;
	align-items:center !important;
	padding:40px 44px !important;
}

/* ── Левая колонка ────────────────────────────────────────────── */
.kbv2-max__body { min-width:0 !important; }

.kbv2-max__eyebrow {
	display:inline-flex !important;
	align-items:center !important;
	padding:8px 16px !important;
	border-radius:999px !important;
	background:var(--mx-blue-soft) !important;
	color:var(--mx-blue-deep) !important;
	font-weight:700 !important;
	font-size:12.5px !important;
	line-height:1.2 !important;
	letter-spacing:.2px !important;
	text-transform:uppercase !important;
	margin:0 0 16px !important;
}

.kbv2-max__head {
	margin:0 !important;
	font-weight:800 !important;
	font-size:34px !important;
	line-height:1.16 !important;
	letter-spacing:-.4px !important;
	color:var(--mx-ink) !important;
	max-width:520px !important;
	text-wrap:balance;
}
.kbv2-max__head strong,
.kbv2-max__head b {
	color:var(--mx-blue) !important;
	font-weight:800 !important;
}

.kbv2-max__copy {
	margin:16px 0 0 !important;
	font-size:15.5px !important;
	line-height:1.6 !important;
	color:var(--mx-ink-soft) !important;
	max-width:470px !important;
}
.kbv2-max__copy p { margin:0 0 10px !important; }
.kbv2-max__copy p:last-child { margin-bottom:0 !important; }

.kbv2-max__bullets {
	margin:16px 0 0 !important;
	max-width:440px !important;
	display:flex !important;
	flex-direction:column !important;
	gap:9px !important;
}
.kbv2-max__bullets li {
	position:relative !important;
	padding:0 0 0 22px !important;
	font-size:14.5px !important;
	line-height:1.5 !important;
	color:var(--mx-ink-soft) !important;
}
.kbv2-max__bullets li::before {
	content:"" !important;
	position:absolute !important;
	left:0 !important;
	top:7px !important;
	width:9px !important;
	height:9px !important;
	border-radius:50% !important;
	background:var(--mx-blue) !important;
}

/* ── Кнопка + QR ──────────────────────────────────────────────── */
/* Кнопка и QR стоят в одну строку, как в макете: в левой колонке на десктопе
   ~836px, кнопка с QR-карточкой занимают ~620 — влезает без уменьшения кода.
   Если ширины не хватит (узкий десктоп), QR переносится строкой ниже. */
.kbv2-max__cta {
	margin:26px 0 0 !important;
	display:flex !important;
	flex-direction:row !important;
	align-items:center !important;
	flex-wrap:wrap !important;
	gap:18px !important;
}

.kbv2-max__btn {
	display:inline-flex !important;
	align-items:center !important;
	gap:8px !important;
	background:var(--mx-orange) !important;
	color:#fff !important;
	font-weight:700 !important;
	font-size:15px !important;
	line-height:1.2 !important;
	text-align:left !important;
	padding:15px 22px !important;
	border:none !important;
	border-radius:999px !important;
	text-decoration:none !important;
	cursor:pointer !important;
	transition:background .15s, transform .15s, box-shadow .15s !important;
	box-shadow:0 12px 26px -16px rgba(232,91,14,.9) !important;
}
.kbv2-max__btn:hover,
.kbv2-max__btn:focus-visible {
	background:var(--mx-orange-deep) !important;
	color:#fff !important;
	transform:translateY(-1px) !important;
	text-decoration:none !important;
}
.kbv2-max__btn svg {
	width:16px !important;
	height:16px !important;
	flex:0 0 auto !important;
}

/* QR: только для десктопа — на узких экранах скрывается (см. медиа ниже) */
.kbv2-max__qr {
	display:flex !important;
	align-items:center !important;
	gap:10px !important;
	background:var(--mx-paper) !important;
	border:1px solid var(--mx-line) !important;
	border-radius:14px !important;
	padding:8px 14px 8px 8px !important;
	max-width:100% !important;
}
/* 70px по решению заказчика (меньше, чем присланные боссом 100–120px).
   Белое поле вокруг сохранено: 2 модуля тихой зоны в самом SVG + 4px плашки. */
.kbv2-max__qr-box {
	display:block !important;
	flex:0 0 auto !important;
	width:70px !important;
	height:70px !important;
	padding:4px !important;
	border-radius:7px !important;
	background:#fff !important;
}
.kbv2-max__qr-box img {
	width:100% !important;
	height:100% !important;
}
.kbv2-max__qr-copy {
	display:flex !important;
	flex-direction:column !important;
	gap:4px !important;
	min-width:0 !important;
	/* Узкая подпись держит карточку компактной, чтобы на 1024px строка
	   «кнопка + QR» не переносилась. */
	max-width:130px !important;
}
.kbv2-max__qr-title {
	font-size:13px !important;
	font-weight:400 !important;
	line-height:1.3 !important;
	color:var(--mx-mute) !important;
}
.kbv2-max__qr-note {
	font-size:11.5px !important;
	line-height:1.35 !important;
	color:var(--mx-mute2) !important;
}

/* ── Телефон ──────────────────────────────────────────────────── */
.kbv2-max__phone-wrap {
	display:flex !important;
	flex-direction:column !important;
	align-items:center !important;
	gap:12px !important;
}

.kbv2-max__phone {
	position:relative !important;
	width:236px !important;
	height:480px !important;
	max-width:100% !important;
	background:var(--mx-dark) !important;
	border-radius:44px !important;
	padding:12px !important;
	box-shadow:0 30px 60px -30px rgba(22,36,59,.45), 0 2px 0 rgba(255,255,255,.05) inset !important;
}
.kbv2-max__phone::before {
	content:"" !important;
	position:absolute !important;
	top:12px !important;
	left:50% !important;
	transform:translateX(-50%) !important;
	width:96px !important;
	height:22px !important;
	background:var(--mx-dark) !important;
	border-radius:0 0 14px 14px !important;
	z-index:3 !important;
}

.kbv2-max__screen {
	position:relative !important;
	width:100% !important;
	height:100% !important;
	border-radius:34px !important;
	overflow:hidden !important;
	background:#fff !important;
	display:flex !important;
	flex-direction:column !important;
}

.kbv2-max__statusbar {
	position:relative !important;
	z-index:2 !important;
	flex:0 0 auto !important;
	display:flex !important;
	align-items:center !important;
	justify-content:space-between !important;
	padding:10px 20px 6px !important;
	font-size:12px !important;
	font-weight:700 !important;
	color:#111 !important;
	background:#fff !important;
}
.kbv2-max__icons {
	display:flex !important;
	gap:4px !important;
	align-items:center !important;
	color:#111 !important;
}
.kbv2-max__icons svg { width:14px !important; height:14px !important; }

.kbv2-max__chhead {
	position:relative !important;
	z-index:2 !important;
	flex:0 0 auto !important;
	display:flex !important;
	align-items:center !important;
	gap:9px !important;
	padding:10px 14px 12px !important;
	border-bottom:1px solid var(--mx-line) !important;
	background:#fff !important;
}
.kbv2-max__av {
	flex:0 0 auto !important;
	width:30px !important;
	height:30px !important;
	border-radius:9px !important;
	overflow:hidden !important;
	background:var(--mx-blue) !important;
	color:#fff !important;
	display:flex !important;
	align-items:center !important;
	justify-content:center !important;
	font-weight:800 !important;
	font-size:12px !important;
	line-height:1 !important;
}
.kbv2-max__av img { width:100% !important; height:100% !important; object-fit:cover !important; }
.kbv2-max__who {
	display:flex !important;
	flex-direction:column !important;
	min-width:0 !important;
}
.kbv2-max__ch {
	font-size:12.5px !important;
	font-weight:800 !important;
	line-height:1.2 !important;
	color:var(--mx-ink) !important;
	white-space:nowrap !important;
	overflow:hidden !important;
	text-overflow:ellipsis !important;
}
.kbv2-max__chsub {
	font-size:10.5px !important;
	line-height:1.3 !important;
	color:var(--mx-mute) !important;
	white-space:nowrap !important;
	overflow:hidden !important;
	text-overflow:ellipsis !important;
}
.kbv2-max__badge {
	margin-left:auto !important;
	flex:0 0 auto !important;
	font-size:10px !important;
	font-weight:800 !important;
	line-height:1.2 !important;
	color:#fff !important;
	background:var(--mx-max) !important;
	padding:3px 7px !important;
	border-radius:6px !important;
	letter-spacing:.3px !important;
}

/* ── Экран: видео или заглушка-лента ──────────────────────────── */
.kbv2-max__feed {
	position:relative !important;
	flex:1 1 auto !important;
	min-height:0 !important;
	overflow:hidden !important;
	background:#fff !important;
}
.kbv2-max__feed--video { background:#0B0F17 !important; }

/* Режим видео: в записи своя шапка канала, поэтому оставляем только
   статус-бар и красим его под тёмный интерфейс MAX. */
.kbv2-max__screen--video { background:#0B0F17 !important; }
.kbv2-max__screen--video .kbv2-max__statusbar { background:#0B0F17 !important; color:#fff !important; }
.kbv2-max__screen--video .kbv2-max__icons { color:#fff !important; }
.kbv2-max__video {
	width:100% !important;
	height:100% !important;
	object-fit:cover !important;
	/* запись 390×844, экран мокапа чуть шире по пропорции: прижимаем к верху,
	   чтобы cover срезал низ, а шапка канала в записи осталась целой */
	object-position:top center !important;
	background:#0B0F17 !important;
}

.kbv2-max__track {
	display:flex !important;
	flex-direction:column !important;
	animation:kbv2MaxFeed 22s linear infinite !important;
	will-change:transform !important;
}
.kbv2-max__phone:hover .kbv2-max__track { animation-play-state:paused !important; }
.kbv2-max.is-paused .kbv2-max__track { animation-play-state:paused !important; }

@keyframes kbv2MaxFeed {
	0%   { transform:translateY(0); }
	100% { transform:translateY(-50%); }
}

.kbv2-max__post {
	padding:12px 14px 16px !important;
	border-bottom:1px solid var(--mx-line) !important;
	display:block !important;
}
.kbv2-max__photo {
	display:block !important;
	width:100% !important;
	height:120px !important;
	border-radius:12px !important;
	overflow:hidden !important;
	background:linear-gradient(135deg,#EEF1F6,#DCE6F2) !important;
}
.kbv2-max__photo img { width:100% !important; height:100% !important; object-fit:cover !important; }
.kbv2-max__post-title {
	display:block !important;
	margin:9px 0 3px !important;
	font-size:12.5px !important;
	font-weight:800 !important;
	line-height:1.25 !important;
	color:var(--mx-ink) !important;
}
.kbv2-max__post-meta {
	display:block !important;
	font-size:11px !important;
	line-height:1.5 !important;
	color:var(--mx-mute) !important;
}
.kbv2-max__post-time {
	display:block !important;
	margin:6px 0 0 !important;
	font-size:9.5px !important;
	line-height:1.2 !important;
	color:#B8BFCC !important;
}

/* ── Пауза/воспроизведение ────────────────────────────────────── */
.kbv2-max__toggle {
	position:absolute !important;
	right:22px !important;
	bottom:22px !important;
	z-index:5 !important;
	width:34px !important;
	height:34px !important;
	border-radius:50% !important;
	background:rgba(255,255,255,.92) !important;
	border:1px solid var(--mx-line) !important;
	display:flex !important;
	align-items:center !important;
	justify-content:center !important;
	cursor:pointer !important;
	box-shadow:0 6px 16px -8px rgba(22,36,59,.4) !important;
	color:var(--mx-ink) !important;
	transition:background .15s !important;
}
.kbv2-max__toggle:hover { background:#fff !important; }
.kbv2-max__toggle svg { width:14px !important; height:14px !important; }

.kbv2-max__phone-note {
	display:block !important;
	font-size:11px !important;
	line-height:1.4 !important;
	color:var(--mx-mute2) !important;
	text-align:center !important;
	max-width:236px !important;
}

/* ── Адаптив ──────────────────────────────────────────────────── */
@media (max-width:900px) {
	/* Одна колонка. Всё выравниваем по левому краю — блок должен попадать
	   в ту же вертикаль, что и остальной контент страницы, а не висеть по центру. */
	/* Карточка во всю ширину: иначе её собственные отступы уводят текст на
	   33px от края, тогда как контент соседних блоков стоит на 16–20px. */
	.kbv2-max { padding:0 !important; }
	.kbv2-max__card {
		border-radius:0 !important;
		border-left:none !important;
		border-right:none !important;
	}
	.kbv2-max__grid {
		grid-template-columns:minmax(0,1fr) !important;
		gap:28px !important;
		padding:30px 20px !important;
		text-align:left !important;
	}
	.kbv2-max__head,
	.kbv2-max__copy,
	.kbv2-max__bullets { max-width:100% !important; }
	.kbv2-max__cta { flex-direction:column !important; align-items:flex-start !important; }
	.kbv2-max__btn { width:100% !important; max-width:360px !important; justify-content:center !important; }
	.kbv2-max__phone-wrap { align-items:flex-start !important; }
	.kbv2-max__phone-note { text-align:left !important; }
	/* По ТЗ: на телефоне QR не показываем — остаётся только кнопка */
	.kbv2-max__qr { display:none !important; }
}

@media (max-width:768px) {
	.kbv2-max { margin-bottom:56px !important; }
}

@media (max-width:560px) {
	.kbv2-max__grid { padding:26px 20px !important; }
	.kbv2-max__head { font-size:26px !important; }
	.kbv2-max__copy { font-size:15px !important; }
}

@media (max-width:420px) {
	.kbv2-max__grid { padding:22px 20px !important; }
	.kbv2-max__head { font-size:22px !important; }
	.kbv2-max__phone { width:210px !important; height:428px !important; border-radius:38px !important; }
	.kbv2-max__screen { border-radius:30px !important; }
	.kbv2-max__phone-note { max-width:210px !important; }
	/* узкий экран: шапке канала нужно больше места под название */
	.kbv2-max__chhead { gap:7px !important; padding:9px 11px 11px !important; }
	.kbv2-max__av { width:26px !important; height:26px !important; font-size:11px !important; }
	.kbv2-max__ch { font-size:11.5px !important; }
	.kbv2-max__chsub { font-size:9.5px !important; }
	.kbv2-max__badge { font-size:9px !important; padding:2px 5px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.kbv2-max__track { animation:none !important; }
}

/* ── Инженерная рамка (опция) ─────────────────────────────────── */
.kbv2-max.is-framed { background:#fff !important; border:none !important; border-radius:24px !important; padding:32px 34px !important; box-shadow:none !important; overflow:hidden !important; position:relative !important; }
.kbv2-max.is-framed > * { position:relative !important; z-index:1 !important; }
.kbv2-max.is-framed::before { content:"" !important; position:absolute !important; inset:0 !important; pointer-events:none !important; z-index:0 !important; border-radius:24px !important; background-image:linear-gradient(#D9E4F2 1px,transparent 1px),linear-gradient(90deg,#D9E4F2 1px,transparent 1px) !important; background-size:34px 34px !important; opacity:.55 !important; -webkit-mask-image:radial-gradient(120% 130% at 92% 0%,#000 22%,transparent 66%) !important; mask-image:radial-gradient(120% 130% at 92% 0%,#000 22%,transparent 66%) !important; }
@media (max-width:768px){ .kbv2-max.is-framed { padding:22px 18px !important; } }