/* ==============================
   Kelpie — Видео-шортс (эксперт)
   Все стили скоупированы внутри .kb-vs
   ============================== */

.kb-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;
	margin:0 auto;
	padding:0 20px;
	box-sizing:border-box;
	font-family:'PT Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
	color:var(--vs-ink);
}
.kb-vs *{ box-sizing:border-box; }

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

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

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

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

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

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

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

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

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

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