/* karal0v — вторая страница: YouTube и вертикальные.
   Экран не прокручивается: он поделён на полосы, у каждой своя карусель.
   Шапка, меню и окно ролика — общие с главной (site.css). */

html:has(main.split), html:has(main.split) body{height:100%;overflow:hidden}
html:has(main.split) body{padding:0}

.split{
  height:calc(100dvh - var(--head) - var(--safe-t));padding:0 var(--pad) 12px;
  display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr);gap:10px;
}
.band{min-height:0;min-width:0;display:flex;flex-direction:column}
.band__head{padding:10px 0}
/* подпись полосы — как роль у имени: маленькая, серая, полупрозрачная */
.band__label{font-size:clamp(12px,1vw,14px);opacity:.45}

/* карусель: колесо мыши, тачпад, свайп — прокрутку вбок ведёт page2.js */
.track{
  flex:1;min-height:0;display:flex;align-items:flex-start;gap:var(--gap);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.track::-webkit-scrollbar{display:none}
.track .card{position:relative;flex:none;scroll-snap-align:start;transition:opacity .25s}
.long .card{width:min(calc(var(--sh,200px) * 16 / 9), 84vw)}
.vert .card{width:min(calc(var(--sh,200px) * 9 / 16), 44vw)}
.track .shot.v{aspect-ratio:9/16}
.track:has(.card:hover) .card:not(:hover){opacity:.6}

/* Название целиком, без многоточия. Переносится только между словами,
   строки выравниваются по длине (balance) — без «хвоста» из одного слова. */
.track .cap b,.track .cap span{
  white-space:normal;overflow:visible;text-overflow:clip;
  overflow-wrap:break-word;word-break:normal;hyphens:manual;text-wrap:balance;
}

/* компьютер: подписи под обложкой нет — название проявляется на обложке
   при наведении, по центру, одинаково в обеих полосах */
@media (hover:hover) and (pointer:fine){
  .track .cap{
    position:absolute;inset:0;margin:0;padding:clamp(10px,1.2vw,18px);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
    background:rgba(0,0,0,.66);color:#F5F5F5;opacity:0;transition:opacity .25s;
  }
  .track .card:hover .cap,.track .card:focus-visible .cap{opacity:1}
  .track .cap b{font-size:clamp(12px,1vw,14px);line-height:1.2;letter-spacing:.02em;max-width:20ch}
  .track .cap span{margin:0;font-size:clamp(10px,.8vw,11px);line-height:1.35;letter-spacing:.04em;color:#F5F5F5;opacity:.7;max-width:26ch}
}

/* На телефоне свайп докатывается до обложки. На компьютере — свободно:
   привязка к обложкам дёргала карусель при прокрутке вверх-вниз. */
@media (hover:none){ .track{scroll-snap-type:x proximity} }

/* телефон: полоса с широкими обложками по высоте обложки, остальное — вертикалям */
@media (max-width:600px){
  .split{grid-template-rows:auto minmax(0,1fr);grid-auto-rows:auto}
  .long .track{flex:none}
  .long .card{width:84vw}
}