/* Карточка ролика (Domain/VideoCard.razor). Отделка — как у карточки пака:
   сетки паков и роликов стоят на соседних страницах и должны читаться одной
   семьёй. */
.vx-vcard{display:flex;flex-direction:column;min-width:0;background:var(--surface-1);border:1px solid var(--border-1);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--inset-top),var(--shadow-2);
  transition:var(--transition-control);color:var(--text-1);text-decoration:none}
/* Цвет повторён, как у карточки пака: у a:hover из base.css та же вескость
   правила, и без этой строки карточка желтела бы под курсором целиком. */
.vx-vcard:hover{transform:translateY(-2px);border-color:var(--border-2);box-shadow:var(--inset-top),var(--shadow-3);color:var(--text-1)}
.vx-vcard:active{transform:translateY(0);box-shadow:var(--inset-top),var(--shadow-1)}
.vx-vcard:focus-visible{box-shadow:var(--ring),var(--inset-top),var(--shadow-2)}
.vx-vcard__thumb{position:relative;aspect-ratio:16/9;background:var(--surface-sunken);display:flex;
  align-items:center;justify-content:center;color:var(--warm-600)}
.vx-vcard__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vx-vcard__dur{position:absolute;right:8px;bottom:8px;padding:2px 6px;border-radius:var(--radius-xs);
  background:rgba(15,13,12,.78);font:var(--type-mono-s);color:var(--warm-100)}
.vx-vcard__body{display:flex;flex-direction:column;gap:6px;padding:10px 12px 12px;border-top:1px solid var(--border-1)}
/* Название — до двух строк: у ролика оно длиннее, чем у пака («Ник — Пак»),
   и одна строка обрезала бы его на имени. */
.vx-vcard__ttl{font:var(--type-body-strong);color:var(--text-1);overflow:hidden;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vx-vcard__meta{font:var(--type-small);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vx-vcard__stats{display:flex;align-items:center;gap:12px;font:var(--type-small);color:var(--text-2);font-variant-numeric:tabular-nums}
.vx-vcard__stat{display:inline-flex;align-items:center;gap:4px}