/* MovieClipper UI kit · components/media.css
   ----------------------------------------------------------------------------
   Вертикальный клип 9:16 и сетка клипов. Значения из components.css
   (.clip 516–546, .featured-media 784–817).

   О МЕДИА-СЛОТЕ. В примере нет исходных видеофайлов, поэтому кадр не подключён:
   контейнер показывает честное состояние слота — геометрию 9:16, таймкод и
   подпись, а не выдуманную фотографию. Подставьте <video> или <img> внутрь
   .clip-media, и слот превратится в кадр без правок CSS (см. README кита).
*/

.clips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}

@media (max-width: 860px) {
  .clips { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .clips { grid-template-columns: 1fr; }
}

.clip {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.clip:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  box-shadow: var(--shadow-md);
}

/* Слот кадра: 9:16, полный кадр, ничего не обрезано. */
.clip-media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.clip-media video,
.clip-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Состояние «кадр не подключён»: знак воспроизведения + подпись, обе в muted. */
.clip-media .glyph {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--type-sm);
}

.clip-media .slot-note {
  position: absolute;
  left: var(--sp-2);
  right: var(--sp-2);
  bottom: calc(var(--sp-2) + 24px);
  text-align: center;
  font-size: var(--type-xs);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Таймкод: непрозрачная подложка внутри границ кадра, прижат к углу. */
.clip-media .timecode {
  position: absolute;
  left: var(--sp-2);
  bottom: var(--sp-2);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-sm);
}

.clip-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.clip-source {
  color: var(--muted);
  font-size: var(--type-xs);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clip-title {
  font-size: var(--type-sm);
  font-weight: 700;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clip-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-1);
}

.clip-foot .score-bar { min-width: 64px; }