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

/* ── Защитный сброс ───────────────────────────────────────────── */

.kbv2-vs,
.kbv2-vs *,
.kbv2-vs *::before,
.kbv2-vs *::after {
	box-sizing: border-box !important;
}

.kbv2-vs {
	--vs-ink:#16243B;
	--vs-ink-soft:#34425C;
	--vs-mute:#727C8C;
	--vs-paper:#FFFFFF;
	--vs-line:#E5E9F1;
	--vs-orange:#FF6B1A;
	--vs-orange-deep:#E85B0E;
	--vs-blue:#0088C4;
	--vs-blue-deep:#006F9F;
	--vs-blue-soft:#E2F2F9;
	--vs-grid:#D9E4F2;

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

/* Контент из RichText (заголовок/описание) — гасим глобальные стили темы */
.kbv2-vs a { color:var(--vs-blue) !important; text-decoration:underline !important; }
.kbv2-vs__sub p { margin:0 0 8px !important; }
.kbv2-vs__sub ul { list-style:disc !important; padding-left:20px !important; margin:6px 0 !important; }
.kbv2-vs__sub ol { list-style:decimal !important; padding-left:20px !important; margin:6px 0 !important; }
.kbv2-vs__sub li { margin:2px 0 !important; }

/* ── Карточка ─────────────────────────────────────────────────── */
.kbv2-vs__card{
	position:relative !important; overflow:hidden !important;
	background:var(--vs-paper) !important;
	border:1px solid var(--vs-line) !important;
	border-radius:28px !important;
	padding:28px !important;
	display:flex !important; align-items:stretch !important; gap:34px !important;
	box-shadow:0 1px 0 rgba(22,36,59,.03), 0 30px 60px -30px rgba(22,36,59,.22) !important;
}

/* ── Телефон-превью ───────────────────────────────────────────── */
.kbv2-vs__thumb{
	position:relative !important; z-index:1 !important; flex:0 0 auto !important;
	width:154px !important; border-radius:20px !important; overflow:hidden !important; cursor:pointer !important;
	background:linear-gradient(168deg,#0F1A2B 0%,#1A2A45 55%,#1E3A5F 100%) !important;
	aspect-ratio:9/16 !important;
	box-shadow:0 18px 40px -16px rgba(15,26,43,.6) !important;
	transition:transform .25s ease, box-shadow .25s ease;
}
.kbv2-vs__thumb:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -16px rgba(15,26,43,.65); }
.kbv2-vs__thumb:focus-visible{ outline:3px solid var(--vs-blue); outline-offset:3px; }
/* кадр/постер видео в превью */
.kbv2-vs__thumb-img{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; z-index:0 !important; }
/* затемнение для читаемости бейджа/подписи поверх кадра */
.kbv2-vs__thumb::after{ content:"" !important; position:absolute !important; inset:0 !important; z-index:1 !important; pointer-events:none !important;
	background:linear-gradient(180deg, rgba(15,26,43,.30) 0%, rgba(15,26,43,.04) 42%, rgba(15,26,43,.66) 100%) !important; }
.kbv2-vs__chip{
	position:absolute !important; top:11px !important; left:11px !important; z-index:2 !important;
	display:inline-flex !important; align-items:center !important; gap:6px !important;
	background:rgba(0,0,0,.42) !important; backdrop-filter:blur(4px);
	color:#fff !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.6px !important;
	padding:4px 9px !important; border-radius:999px !important; white-space:nowrap !important;
	font-family:'Montserrat', system-ui, sans-serif !important;
}
.kbv2-vs__chip b{ color:#fff !important; }
.kbv2-vs__dot{ width:4px !important; height:4px !important; border-radius:50% !important; background:var(--vs-orange) !important; }
.kbv2-vs__thumb-cap{
	position:absolute !important; bottom:14px !important; left:8px !important; right:8px !important; z-index:2 !important; text-align:center !important;
	color:#fff !important; font-family:'Montserrat', system-ui, sans-serif !important; font-weight:700 !important; font-size:11px !important;
	line-height:1.25 !important; letter-spacing:.2px !important; text-shadow:0 1px 5px rgba(0,0,0,.7) !important;
}
.kbv2-vs__play{
	position:absolute !important; inset:0 !important; z-index:2 !important; display:flex !important; align-items:center !important; justify-content:center !important;
}
.kbv2-vs__play span{
	width:54px !important; height:54px !important; border-radius:50% !important;
	background:rgba(255,255,255,.94) !important;
	display:flex !important; align-items:center !important; justify-content:center !important;
	box-shadow:0 6px 18px rgba(0,0,0,.35) !important;
	transition:transform .2s ease;
}
.kbv2-vs__thumb:hover .kbv2-vs__play span{ transform:scale(1.06); }

/* ── Треугольник play (базовый — в превью, оранжевый) ─────────── */
.kbv2-vs__tri{ width:0 !important; height:0 !important; border-style:solid !important;
	border-width:9px 0 9px 15px !important;
	border-color:transparent transparent transparent var(--vs-orange) !important;
	margin-left:3px !important; }
.kbv2-vs__pin .kbv2-vs__tri{ border-width:7px 0 7px 11px !important;
	border-color:transparent transparent transparent #fff !important; margin-left:2px !important; }
.kbv2-vs__bigplay .kbv2-vs__tri{ border-width:14px 0 14px 22px !important;
	border-color:transparent transparent transparent #fff !important; margin-left:6px !important; }

/* ── Контент ──────────────────────────────────────────────────── */
.kbv2-vs__body{
	position:relative !important; z-index:1 !important; flex:1 !important; min-width:0 !important;
	display:flex !important; flex-direction:column !important; justify-content:center !important; padding:6px 6px 6px 0 !important;
}
.kbv2-vs__eyebrow{
	display:inline-flex !important; align-items:center !important; gap:8px !important; align-self:flex-start !important;
	background:var(--vs-blue-soft) !important; color:var(--vs-blue-deep) !important;
	font-family:'Montserrat', system-ui, sans-serif !important; font-weight:700 !important; font-size:12px !important;
	letter-spacing:1px !important; text-transform:uppercase !important;
	padding:6px 13px !important; border-radius:999px !important; margin:0 0 16px !important;
}
.kbv2-vs__eyebrow-dot{ width:7px !important; height:7px !important; border-radius:50% !important; background:var(--vs-blue) !important; }
.kbv2-vs__head{
	margin:0 !important; font-family:'Montserrat', system-ui, sans-serif !important; font-weight:800 !important;
	font-size:34px !important; line-height:1.14 !important; letter-spacing:-.4px !important; color:var(--vs-ink) !important;
}
.kbv2-vs__head strong{ color:var(--vs-blue) !important; font-weight:800 !important; }
.kbv2-vs__sub{
	margin:14px 0 0 !important;
	font-size:17px !important; line-height:1.5 !important; color:var(--vs-mute) !important;
	text-wrap:pretty;
}
.kbv2-vs__sub > *:first-child{ margin-top:0 !important; }
.kbv2-vs__sub > *:last-child{ margin-bottom:0 !important; }

.kbv2-vs__actions{ display:flex !important; align-items:center !important; gap:18px !important; margin-top:24px !important; flex-wrap:wrap !important; }

.kbv2-vs__btn{
	all:unset; cursor:pointer !important;
	display:inline-flex !important; align-items:center !important; gap:11px !important;
	background:linear-gradient(180deg,var(--vs-orange) 0%,var(--vs-orange-deep) 100%) !important;
	color:#fff !important; font-family:'Montserrat', system-ui, sans-serif !important; font-weight:700 !important; font-size:15px !important;
	padding:13px 30px 13px 16px !important; border-radius:999px !important;
	box-shadow:0 12px 26px -10px rgba(255,107,26,.7) !important;
	transition:transform .16s ease, box-shadow .16s ease;
}
.kbv2-vs__btn:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(255,107,26,.75); }
.kbv2-vs__btn:active{ transform:translateY(0); }
.kbv2-vs__btn:focus-visible{ outline:3px solid var(--vs-blue); outline-offset:3px; }
.kbv2-vs__pin{
	width:24px !important; height:24px !important; border-radius:50% !important;
	background:rgba(255,255,255,.22) !important;
	display:flex !important; align-items:center !important; justify-content:center !important;
}

.kbv2-vs__author{ display:flex !important; align-items:center !important; gap:11px !important; }
.kbv2-vs__ava{
	width:46px !important; height:46px !important; border-radius:50% !important; flex:0 0 auto !important; position:relative !important; overflow:hidden !important;
	background:var(--vs-blue-soft) !important;
	box-shadow:0 0 0 3px #fff, 0 0 0 4px var(--vs-line) !important;
}
.kbv2-vs__ava img{
	position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
	object-fit:cover !important; object-position:center top !important;
}
.kbv2-vs__who{ font-size:14px !important; line-height:1.3 !important; color:var(--vs-ink-soft) !important; }
.kbv2-vs__who b{ color:var(--vs-ink) !important; font-weight:700 !important; }

/* ── Адаптив ──────────────────────────────────────────────────── */
@media (max-width:720px){
	.kbv2-vs{ margin-bottom:56px !important; }
	.kbv2-vs__card{ flex-direction:column !important; align-items:center !important; padding:22px !important; gap:22px !important; }
	.kbv2-vs__thumb{ width:160px !important; }
	.kbv2-vs__body{ text-align:center !important; align-items:center !important; padding:0 !important; }
	.kbv2-vs__eyebrow{ align-self:center !important; }
	.kbv2-vs__head{ font-size:27px !important; }
	.kbv2-vs__sub{ font-size:15px !important; }
	.kbv2-vs__actions{ justify-content:center !important; }
}

/* ── Модальный плеер ──────────────────────────────────────────── */
.kbv2-vs__modal{
	position:fixed !important; inset:0 !important; z-index:99999 !important; display:none !important;
	align-items:center !important; justify-content:center !important; padding:20px !important;
	background:rgba(10,16,28,.78) !important; backdrop-filter:blur(12px);
	animation:kbv2-vs-fade .22s ease;
}
.kbv2-vs__modal.is-open{ display:flex !important; }
@keyframes kbv2-vs-fade{ from{opacity:0} to{opacity:1} }
@keyframes kbv2-vs-pop{ from{opacity:0; transform:scale(.93) translateY(8px)} to{opacity:1; transform:none} }
.kbv2-vs__close{
	position:absolute !important; top:22px !important; right:22px !important; width:46px !important; height:46px !important; border-radius:50% !important;
	background:rgba(255,255,255,.12) !important; border:1.5px solid rgba(255,255,255,.26) !important;
	color:#fff !important; font-size:18px !important; cursor:pointer !important; display:flex !important; align-items:center !important; justify-content:center !important;
	z-index:2 !important;
}
.kbv2-vs__player{
	width:min(420px,92vw) !important; aspect-ratio:9/16 !important; max-height:92vh !important;
	border-radius:28px !important; overflow:hidden !important; position:relative !important;
	background:linear-gradient(168deg,#0F1A2B 0%,#1A2A45 58%,#1E3A5F 100%) !important;
	box-shadow:0 30px 80px rgba(0,0,0,.6) !important; animation:kbv2-vs-pop .28s cubic-bezier(.2,.7,.3,1);
}
/* реальное видео — под обложкой, заполняет плеер целиком.
   Видно всегда: если постер не задан, браузер рисует первый кадр (#t=0.1). */
.kbv2-vs__vid{
	position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
	object-fit:cover !important; background:#000 !important; z-index:1 !important;
}
/* внешний плеер (iframe) */
.kbv2-vs__embed{ position:absolute !important; inset:0 !important; }
.kbv2-vs__embed iframe{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; border:0 !important; }

/* дизайн-обложка (постер) — лежит поверх кадра видео, с лёгким затемнением для читаемости */
.kbv2-vs__cover{ position:absolute !important; inset:0 !important; z-index:2 !important; cursor:pointer !important;
	background:linear-gradient(180deg, rgba(10,16,28,.34) 0%, rgba(10,16,28,.06) 38%, rgba(10,16,28,.58) 100%) !important; }
.kbv2-vs__cover.is-hidden{ display:none !important; }
.kbv2-vs__wm{ position:absolute !important; top:18px !important; left:18px !important; display:flex !important; align-items:center !important; gap:7px !important;
	color:rgba(255,255,255,.78) !important; font-size:11px !important; font-weight:700 !important;
	font-family:'Montserrat', system-ui, sans-serif !important; letter-spacing:.4px !important; }
.kbv2-vs__wm i{ width:20px !important; height:20px !important; border-radius:5px !important; background:var(--vs-blue) !important;
	display:flex !important; align-items:center !important; justify-content:center !important; color:#fff !important; font-size:10px !important; font-style:normal !important; font-weight:800 !important; }
.kbv2-vs__cover-cap{ position:absolute !important; bottom:20% !important; left:0 !important; right:0 !important; padding:0 24px !important; text-align:center !important;
	color:#fff !important; font-family:'Montserrat', system-ui, sans-serif !important; font-weight:800 !important; font-size:22px !important; line-height:1.15 !important; text-shadow:0 2px 12px rgba(0,0,0,.7) !important; }
.kbv2-vs__bigplay{ position:absolute !important; inset:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; }
.kbv2-vs__bigplay span{ width:78px !important; height:78px !important; border-radius:50% !important; background:rgba(255,255,255,.18) !important;
	backdrop-filter:blur(8px); border:1.5px solid rgba(255,255,255,.4) !important;
	display:flex !important; align-items:center !important; justify-content:center !important; cursor:pointer !important; }


/* === опциональная рамка с сеткой (тумблер в админке, по умолчанию выкл) === */
.kbv2-vs.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-vs.is-framed > .kbv2-vs__card { position:relative !important; z-index:1 !important; }
.kbv2-vs.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-vs.is-framed { padding:22px 18px !important; } }

/* === видео-карточка плоская по умолчанию (без рамки/тени); рамка — только тумблером === */
.kbv2-vs__card { border:none !important; box-shadow:none !important; }
.kbv2-vs.is-framed .kbv2-vs__card { background:transparent !important; padding:0 !important; border-radius:0 !important; overflow:visible !important; }