/* === Vertical Videos block (Phone frame) === */
#vertical-videos .vv-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 24px;
  margin-top: 1rem;
}
#vertical-videos .vv-phone{
  position:relative;
  width:min(360px, 88vw);
  aspect-ratio: 9 / 19.5;
  background-image: url("../../assets/iPhone_16.png"); /* path fixed (relative to CSS file) */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
#vertical-videos .vv-screen{
  position:absolute;
  /* подгон под макет iPhone_16.png: чуть больше отступы, чтобы контент не налезал на рамки */
  top: 6.5%;
  bottom: 6.2%;
  left: 6.8%;
  right: 6.8%;
  border-radius: 30px;
  overflow-y:auto;
  overflow-x:hidden;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  background:#000;
}
#vertical-videos .vv-item{
  height:100%;
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  scroll-snap-align: start;
  position:relative;
}
#vertical-videos .vv-item::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--bg, none);
  background-size: cover;
  background-position: center;
  filter: blur(22px) saturate(1.05) brightness(.6);
  transform: scale(1.08);
  z-index: 0;
}
#vertical-videos .vv-item::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(120% 85% at 50% 15%, rgba(0,0,0,.15), rgba(0,0,0,.65));
  z-index: 0;
}
#vertical-videos .vv-item .vv-thumb{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: contain;
  z-index: 1;
}

/*
 * When an inline video is inserted into the vertical feed (vv-inline), it is absolutely positioned
 * to cover the entire item container. However, without explicitly setting the object-position,
 * browsers tend to align the video to the top of its container when object-fit: contain is used.
 * This results in extra black space only at the bottom of the video frame, as reported in the issue.
 * By forcing the object-position to the center we ensure that any excess vertical space is evenly
 * distributed above and below the video, keeping the moving image vertically centered within the
 * phone screen. We target all video elements within a vertical video item, including those
 * generated dynamically with the vv-inline class.
 */
#vertical-videos .vv-item video{
  object-fit: contain;
  object-position: center center;
}

/* Inline video wrapper: ensures that inline videos played within a vertical item are centered both
 * vertically and horizontally. The wrapper uses flexbox to align its child video element.
 */
#vertical-videos .vv-item .vv-inline-wrapper{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
#vertical-videos .vv-item .vv-inline-wrapper video{
  max-width:100%;
  max-height:100%;
  width:100%;
  height:auto;
  object-fit: contain;
  object-position: center center;
}
#vertical-videos .vv-item .vv-badge{
  position:absolute; right:10px; bottom:10px;
  padding:.35rem .45rem;
  font-size:.75rem;
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  user-select:none;
  pointer-events:auto; cursor:pointer;
  z-index: 2;
}

/* Side hints: reuse global .scroll-hint visuals, but vertical and clickable */
#vertical-videos .vv-side{ display:flex; flex-direction: column; align-items:center; gap:10px; }
#vertical-videos .vv-hint{ margin:0; opacity:.6; pointer-events:auto; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:32px; }
#vertical-videos .vv-hint .chevrons{ pointer-events:auto; cursor:pointer; display:flex; flex-direction: column; align-items:center; gap:4px; }
#vertical-videos .vv-hint .chevron{ width: 22px; height: 18px; }
#vertical-videos .vv-hint .up .chevron{ animation: hint-up 1.6s ease-in-out infinite; }
#vertical-videos .vv-hint .down .chevron{ animation: hint-down 1.6s ease-in-out infinite; }

@keyframes hint-up{
  0%{ transform: translateY(0); opacity:.5; }
  50%{ transform: translateY(-8px); opacity:1; }
  100%{ transform: translateY(0); opacity:.5; }
}
@keyframes hint-down{
  0%{ transform: translateY(0); opacity:.5; }
  50%{ transform: translateY(8px); opacity:1; }
  100%{ transform: translateY(0); opacity:.5; }
}

/* Keep side arrows visible on mobile */
@media (max-width: 1023.98px){
  #vertical-videos .vv-side{ display:flex; }
}


/* Mobile layout: shrink phone so side hints fit */
@media (max-width: 767.98px){
  #vertical-videos .vv-wrapper{ gap: 12px; }
  #vertical-videos .vv-phone{ width: min(340px, 76vw); }
}