/* Видеополка kalinbaza.ru — две ленты и попап-плеер. Без зависимостей. */

/* Шрифт берём у сайта: тема prostore объявляет --base-font-family (сейчас Manrope).
   Свои шрифты не подключаем — при смене темы блок поедет за ней. */
.kbv{--kbv-navy:#023458;--kbv-gold:#e8a33d;--kbv-gap:14px;margin:34px 0;
  font-family:var(--base-font-family,Arial,Helvetica,sans-serif)}
.kbv *{box-sizing:border-box;font-family:inherit}
.kbv-modal{font-family:var(--base-font-family,Arial,Helvetica,sans-serif)}
.kbv-modal *{font-family:inherit}

/* лента уезжает под правый край экрана — так видно, что её можно листать,
   но заголовок и подписи держатся на общей сетке сайта */
.kbv-section{margin:30px 0}
@media (max-width:767px){.kbv__strip{padding-right:16px;margin-right:-16px}}
.kbv__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 14px}
.kbv__title{font-size:clamp(20px,2.4vw,28px);font-weight:800;color:var(--kbv-navy);margin:0;line-height:1.2}
.kbv__sub{color:#6b7783;font-size:14px;margin:4px 0 0}

/* лента: горизонтальный скролл с прилипанием — на мобильной это основной способ листать */
.kbv__strip{display:flex;gap:var(--kbv-gap);overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding:2px 0 12px;margin:0 -4px;scrollbar-width:thin}
.kbv__strip::-webkit-scrollbar{height:6px}
.kbv__strip::-webkit-scrollbar-thumb{background:#c8d2da;border-radius:3px}

.kbv__card{position:relative;flex:0 0 auto;scroll-snap-align:start;cursor:pointer;
  border:0;padding:0;background:none;text-align:left;font:inherit;color:inherit;
  border-radius:14px;transition:transform .18s ease}
.kbv__card:hover{transform:translateY(-3px)}
.kbv__card:focus-visible{outline:3px solid var(--kbv-gold);outline-offset:3px}

.kbv__frame{position:relative;width:100%;overflow:hidden;border-radius:14px;
  background:#0d1b28;box-shadow:0 6px 20px rgba(2,52,88,.16)}
.kbv__frame img,.kbv__frame video{display:block;width:100%;height:100%;object-fit:cover}
.kbv__frame video{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
.kbv__frame video.is-on{opacity:1}

.kbv--vertical .kbv__card{width:min(64vw,208px)}
.kbv--vertical .kbv__frame{aspect-ratio:9/16}
.kbv--horizontal .kbv__card{width:min(84vw,340px)}
.kbv--horizontal .kbv__frame{aspect-ratio:16/9}

/* значок «play» — единственный намёк, что плитка кликабельна */
.kbv__play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:52px;height:52px;
  border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(0,0,0,.28);transition:scale .18s ease}
.kbv__card:hover .kbv__play{scale:1.08}
.kbv__play::after{content:"";width:0;height:0;margin-left:4px;
  border-left:15px solid var(--kbv-navy);border-top:9px solid transparent;border-bottom:9px solid transparent}

.kbv__time{position:absolute;right:8px;bottom:8px;padding:2px 7px;border-radius:6px;
  background:rgba(3,20,34,.72);color:#fff;font-size:12px;font-weight:600;letter-spacing:.2px}
.kbv__caption{margin:9px 2px 0;font-size:14px;font-weight:700;color:var(--kbv-navy);line-height:1.25}
.kbv__note{margin:2px 2px 0;font-size:12px;color:#7b8794}

/* попап */
.kbv-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
  background:rgba(3,14,24,.9);padding:16px}
.kbv-modal.is-open{display:flex}
.kbv-modal__box{position:relative;width:100%;max-width:min(96vw,480px);max-height:92vh}
.kbv-modal__box.is-wide{max-width:min(96vw,980px)}
.kbv-modal__box video{width:100%;max-height:86vh;border-radius:12px;background:#000;display:block}
.kbv-modal__close{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:50%;
  border:0;background:rgba(255,255,255,.14);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.kbv-modal__close:hover{background:rgba(255,255,255,.26)}
.kbv-modal__nav{position:absolute;top:50%;translate:0 -50%;width:44px;height:44px;border-radius:50%;
  border:0;background:rgba(255,255,255,.14);color:#fff;font-size:22px;cursor:pointer}
.kbv-modal__nav:hover{background:rgba(255,255,255,.26)}
.kbv-modal__prev{left:-56px}
.kbv-modal__next{right:-56px}
.kbv-modal__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;color:#fff}
.kbv-modal__name{font-weight:700;font-size:15px}
.kbv-modal__link{color:var(--kbv-gold);font-size:14px;text-decoration:none;border-bottom:1px dotted currentColor}
body.kbv-locked{overflow:hidden}

@media (max-width:640px){
  .kbv-modal__prev{left:2px}
  .kbv-modal__next{right:2px}
  .kbv-modal__close{top:-42px;right:2px}
}
@media (prefers-reduced-motion:reduce){
  .kbv__card,.kbv__frame video,.kbv__play{transition:none}
}

/* ---- врезка в теле статьи ---- */
/* переменные нужны и здесь: значок play красится через --kbv-navy,
   без объявления треугольник рисуется невидимым */
.kbv-inline{--kbv-navy:#023458;--kbv-gold:#e8a33d;margin:26px 0;padding:0;
  font-family:var(--base-font-family,Arial,Helvetica,sans-serif)}
.kbv-inline *{box-sizing:border-box;font-family:inherit}
.kbv-inline__head{display:inline-block;margin:0 0 10px;padding:4px 10px;border-radius:6px;
  background:#023458;color:#fff;font-size:13px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
.kbv-inline__frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:14px;
  background:#0d1b28;box-shadow:0 6px 22px rgba(2,52,88,.18);cursor:pointer}
.kbv-inline__frame img,.kbv-inline__video{display:block;width:100%;height:100%;object-fit:cover}
.kbv-inline__hit{position:absolute;inset:0;border:0;background:none;cursor:pointer}
.kbv-inline__hit:focus-visible{outline:3px solid #e8a33d;outline-offset:-3px}
.kbv-inline__frame:hover .kbv__play{scale:1.08}
.kbv-inline .kbv__play{width:64px;height:64px}
.kbv-inline__cap{margin:9px 2px 0;font-size:14px;color:#5c6b79;line-height:1.35}