/* Видео (docs/design/admin/Adm_Videos.dc.html, Adm_Videos_del, Adm_Videos_empty): «Добавить видео», сетка карточек,
   окно удаления ролика, который стоит в текстах. Классы макета: .yt-add, .v-grid, .v-card, .v-b, .v-use, .v-acts, .dlg, .empty-st. */
@layer pages {
  .admin-videos { display: flex; flex-direction: column; gap: 20px; }

  /* .yt-add: поле ссылки | «Добавить» */
  .admin-video-add { gap: 10px; }
  .admin-video-add__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
  .admin-video-add__row .input { min-height: 54px; font-size: 17px; }

  /* .v-grid: три колонки, на узких экранах — одна. Сетка и карточки — элементы admin-sortable (data-sortable-layout="grid") */
  .admin-video-list__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .admin-video-item { position: relative; display: block; min-width: 0; }
  /* Линия вставки при перетаскивании — сбоку от карточки: в сетке соседи стоят в ряд, а не друг под другом */
  .admin-video-item.is-sortable-before, .admin-video-item.is-sortable-after { box-shadow: none; }
  .admin-video-item.is-sortable-before::before, .admin-video-item.is-sortable-after::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 2px;
    background: var(--accent);
  }
  .admin-video-item.is-sortable-before::before { left: -12px; }
  .admin-video-item.is-sortable-after::after { right: -12px; }

  /* .v-card */
  .admin-video { display: flex; flex-direction: column; height: 100%; background: var(--surface); border-radius: var(--r-img); box-shadow: var(--shadow); overflow: hidden; }
  .admin-video__media { position: relative; }
  .admin-video__poster { border-radius: 0; }
  /* Кнопка «play» на постере поменьше, чем на сайте (56px) */
  .admin-video__poster .video-poster__play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .admin-video__poster .video-poster__play::before { left: 22px; top: 17px; width: 18px; height: 22px; }
  .admin-video__grip {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    align-self: auto;
    border-radius: 10px;
    background: rgb(255 255 255 / 0.94);
    color: var(--ink);
  }

  /* .v-b */
  .admin-video__body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 16px 18px 18px; }
  .admin-video__title { font-size: 17px; line-height: 1.35; }
  .admin-video__caption { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; font-size: 15px; line-height: 1.45; }
  .admin-video__caption--empty { font-style: italic; color: var(--ink-3); }
  /* .v-use */
  .admin-video__use { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--ink-3); }
  .admin-video__link { font: 13px/1.4 var(--font-mono); overflow-wrap: anywhere; }
  .admin-video__switch { font-size: 15px; min-height: 44px; align-items: center; }
  /* .v-acts */
  .admin-video__actions { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; }
  .admin-video__moves { display: flex; margin-left: auto; }
  .admin-video__delete { display: contents; }
  .admin-video__edit { display: flex; flex-direction: column; gap: 14px; }
  .admin-video__edit .admin-video__actions { margin-top: 0; }
  .admin-video__edit textarea.input { resize: vertical; }

  /* .empty-st */
  .admin-video-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 56px 24px; text-align: center; color: var(--ink-2); }
  .admin-video-empty .icon--lg { width: 48px; height: 48px; color: var(--accent-ink); }
  .admin-video-empty b { font-size: 20px; color: var(--ink); }
  .admin-video-empty span { max-width: 520px; }

  /* Окно удаления — общий .admin-dialog (components.css); у списка страниц шрифт поменьше */
  .admin-video-dialog__list { font-size: 16px; }
  .admin-video-dialog__list .link { font-size: 15px; }
  .admin-video__path { font: 13px var(--font-mono); color: var(--ink-3); }

  @media (max-width: 1100px) {
    .admin-video-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 820px) {
    .admin-video-list__grid { grid-template-columns: minmax(0, 1fr); }
    .admin-video-add__row { grid-template-columns: minmax(0, 1fr); }
    .admin-video-item.is-sortable-before::before, .admin-video-item.is-sortable-after::after { top: auto; bottom: auto; left: 0; right: 0; width: auto; height: 4px; }
    .admin-video-item.is-sortable-before::before { top: -12px; }
    .admin-video-item.is-sortable-after::after { bottom: -12px; }
  }
}