:root{
  --scrolls-header-offset: 72px;

  /* POUZE proužek (Shorts style) */
  --scrolls-peek: 15px;

  /* jemná mezera mezi kartami */
  --scrolls-gap: 10px;

  --scrolls-stage-h: calc(100vh - var(--scrolls-header-offset));
  --scrolls-card-h: calc(var(--scrolls-stage-h) - var(--scrolls-peek));

  --scrolls-max-width: 520px;
  --scrolls-radius: 18px;
}

#scrolls-app{ width:100%; background:transparent; }

.ocob-scrolls-stage{
  width: 100%;
  height: var(--scrolls-stage-h);
  margin-top: var(--scrolls-header-offset);
  position: relative;
  background: transparent;
  display: block;
  text-align: inherit;
}

.ocob-scrolls-viewport{
  height: var(--scrolls-stage-h);
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-snap-stop: always;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.ocob-scrolls-viewport::-webkit-scrollbar{ width:0; height:0; }

/* slide menší než viewport => peek proužek */
.ocob-scrolls-slide{
  height: var(--scrolls-card-h);
  padding-bottom: var(--scrolls-gap);
  box-sizing: border-box;

  scroll-snap-align: start;
  position: relative;
  display: block;
  text-align: inherit;
}

/* video vyplní maximum dostupné výšky slidu (bez gapu) */
.ocob-scrolls-video{
  display: inline-block;
  vertical-align: top;

  height: calc(100% - var(--scrolls-gap));
  width: min(var(--scrolls-max-width), calc((var(--scrolls-card-h) - var(--scrolls-gap)) * 9 / 16));
  aspect-ratio: 9 / 16;

  border-radius: var(--scrolls-radius);
  overflow: hidden;
  position: relative;

  touch-action: manipulation;
  background: #000;
}

.ocob-scrolls-video iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Mobil: fullscreen a peek jen proužek */
@media (max-width: 768px){
  :root{
    --scrolls-peek: 28px;
    --scrolls-gap: 8px;
    --scrolls-radius: 0px;
    --scrolls-max-width: 100vw;
  }
  .ocob-scrolls-video{
    width: 100%;
    max-width: 100%;
    border-radius: 0;
  }
}

/* Overlay */
.ocob-scrolls-overlay{
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  color: #fff;
  z-index: 5;
  font-family: inherit;
  pointer-events: auto;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
  max-height: 45%;
  overflow: hidden;
}

.ocob-scrolls-title{
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  margin-bottom: 6px;
}

.ocob-scrolls-excerpt{
  font-size: 14px;
  line-height: 1.35;
  opacity: 0.95;
  max-width: 52ch;
  word-break: break-word;
}

/* ✅ inline link look */
.ocob-scrolls-more{
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
  opacity: 0.95;
  color: #fff;
}

@media (hover:hover) and (pointer:fine){
  .ocob-scrolls-more:hover,
  .ocob-scrolls-more:focus{
    text-decoration: underline;
  }
}

.ocob-scrolls-excerpt[data-expanded="false"] .ocob-scrolls-excerpt-full{ display:none; }
.ocob-scrolls-excerpt[data-expanded="true"] .ocob-scrolls-excerpt-short{ display:none; }

.ocob-scrolls-excerpt[data-expanded="true"]{
  max-height: 40vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}