/* video — ролики VK Видео / Rutube. Обложка до клика, iframe грузится по нажатию. */
.vid { margin: 0; min-width: 0; }
.vid-cover, .vid-frame {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0;
  border-radius: calc(var(--radius) + 2px); overflow: hidden; background: var(--s-surface);
}
.vid-cover { cursor: pointer; border: 1px solid var(--s-line); color: inherit; }
.vid-cover img, .vid-cover picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.vid-bg {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--s-accent) 22%, transparent), transparent 55%), var(--s-surface);
}
.vid-play {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%;
  background: var(--s-btn-bg); box-shadow: 0 6px 24px rgba(0, 0, 0, .3); transition: transform .2s;
}
.vid-play::after {
  content: ""; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent var(--s-btn-text);
}
.vid-cover:hover .vid-play { transform: scale(1.08); }
.vid-cover:focus-visible { outline: 3px solid var(--s-accent); outline-offset: 3px; }
.vid-cap { margin-top: 10px; font-size: 15px; color: var(--s-muted); }
.vid-single { max-width: 860px; margin-top: 24px; }
.vid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 24px; }
.vid-empty { min-height: 180px; padding: 24px; text-align: center; border-radius: var(--radius); }
@media (max-width: 560px) {
  .vid-grid { grid-template-columns: 1fr; }
  .vid-play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .vid-play::after { left: 24px; top: 18px; border-width: 12px 0 12px 19px; }
}