/* Marketing → Cadre Videouri: grila de produse + extra-urile pop-up-ului. Galeria, zona de upload,
   progresul și player-ul refolosesc clasele .cvc-* din continut.css. Vezi js/continut/cadre-video.js.
   Doar var(--...) din base.css, deci tema închisă vine automat. */

/* ---------- grila de produse ---------- */
.cadre-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cadre-card {
  display: flex; align-items: flex-start; gap: 12px; text-align: left;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card-bg); color: var(--text); font: inherit; cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.cadre-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent); }
.cadre-card.empty { opacity: .85; }
.cadre-card.empty:hover { opacity: 1; }
.cadre-card:hover .cvc-count.empty { border-color: var(--accent); color: var(--accent); }
.cadre-card .cadre-thumb { width: 56px; height: 56px; margin: 0; flex: 0 0 auto; border-radius: var(--radius-sm); }
.cadre-card-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.cadre-card-title {
  font-weight: 600; font-size: 13px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cadre-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.cadre-card-date { font-size: 11px; }

/* Avatare suprapuse (cine a urcat) */
.cadre-avatars { display: inline-flex; }
.cadre-avatars .cv-avatar { width: 22px; height: 22px; font-size: 11px; border: 2px solid var(--card-bg); margin-left: -6px; }
.cadre-avatars .cv-avatar:first-child { margin-left: 0; }

/* ---------- pop-up ---------- */
.cvc-title .cadre-thumb { width: 32px; height: 32px; margin: 0; }

.cadre-uploaders { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cadre-uploaders.hint { font-size: 12px; gap: 6px; }
.cadre-uploaders .cv-avatar, .cadre-by .cv-avatar { width: 18px; height: 18px; font-size: 10px; }
.cadre-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 6px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card-bg); color: var(--text);
  font: inherit; font-size: 12px; cursor: pointer;
}
.cadre-chip:first-child { padding-left: 10px; }
.cadre-chip:hover { border-color: var(--accent); }
.cadre-chip.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font-weight: 600; }
.cadre-by { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; white-space: nowrap; }

.cadre-player-img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.6); object-fit: contain; }

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