/* ─────────────────────────────────────────────────────────────────────────
   Media cards — the Studio video / clip / creative card, for every portal.
   Loaded after each portal's design layer (creator-ds, brand-ds, admin-ds).
   Markup contract (same as Studio):
     .video-card [.mc-filled]  >  .video-thumb.has-player (+ .clip-expand, .duration-badge)
                               >  .video-info  >  .video-info-head (.video-title + .card-manage)
                                              >  .video-meta.vm-line | .clip-desc
                                              >  .mc-labels | .video-status
   Plain cards (videos, creatives) are transparent with a fully rounded player and
   a 60px grid gap. .mc-filled cards (clips, rendered outputs) keep the filled card,
   a top-rounded player and a 12px gap.
   ───────────────────────────────────────────────────────────────────────── */
body:is(.creator-portal, .brand-portal, .admin-portal) :is(.video-grid, .output-grid, .segment-list.mc-grid) { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 60px; align-items: start; }
body:is(.creator-portal, .brand-portal, .admin-portal) :is(.video-grid, .output-grid, .segment-list.mc-grid).mc-clips { gap: 12px; }
@media (max-width: 640px) { body:is(.creator-portal, .brand-portal, .admin-portal) :is(.video-grid, .output-grid, .segment-list.mc-grid) { grid-template-columns: 1fr; gap: 32px; } body:is(.creator-portal, .brand-portal, .admin-portal) :is(.video-grid, .output-grid, .segment-list.mc-grid).mc-clips { gap: 12px; } }

/* Plain card: no fill, no border, no shadow; the player is its own rounded surface. */
body:is(.creator-portal, .brand-portal, .admin-portal) .video-card { display: flex; flex-direction: column; gap: 0; background: none !important; border: 0 !important; box-shadow: none !important; overflow: visible; }
body:is(.creator-portal, .brand-portal, .admin-portal) .video-card:hover { transform: none; box-shadow: none !important; }
body:is(.creator-portal, .brand-portal, .admin-portal) .video-card .video-thumb { border-radius: var(--radius-lg) !important; overflow: hidden; box-shadow: none !important; }
body:is(.creator-portal, .brand-portal, .admin-portal) .video-card .video-info { display: block; padding: 12px 5px 0 !important; background: none; }

/* Filled card (clips, rendered outputs). */
body:is(.creator-portal, .brand-portal, .admin-portal) .video-card.mc-filled { background: var(--surface) !important; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm) !important; }
body:is(.creator-portal, .brand-portal, .admin-portal) .video-card.mc-filled .video-thumb { border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; }
body:is(.creator-portal, .brand-portal, .admin-portal) .video-card.mc-filled .video-info { padding: 12px 16px 16px !important; }

/* Title (14/600) and the lines under it. */
body:is(.creator-portal, .brand-portal, .admin-portal) .video-card .video-title { font: 600 var(--text-body)/1.3 var(--font-heading); word-spacing: .12em; color: var(--fg); margin: 0; }
body:is(.creator-portal, .brand-portal, .admin-portal) .video-card .video-meta.vm-line { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 400; color: var(--fg-muted); margin-top: -5px; }
body:is(.creator-portal, .brand-portal, .admin-portal) .video-card .clip-desc { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: -5px; font-size: var(--text-body-sm); font-weight: 500; color: var(--fg-muted); }
body:is(.creator-portal, .brand-portal, .admin-portal) .video-card .clip-desc .clip-from { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body:is(.creator-portal, .brand-portal, .admin-portal) .video-card .clip-desc .clip-res { flex: none; }
body:is(.creator-portal, .brand-portal, .admin-portal) .video-card .video-status { display: block; margin-top: 10px; padding: 0; background: none; font: 600 11px/11px var(--font-body); }
body:is(.creator-portal, .brand-portal, .admin-portal) .video-card .vm-line + .video-status { margin-top: 10px; }
body:is(.creator-portal, .brand-portal, .admin-portal) .video-card .mc-labels { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
body:is(.creator-portal, .brand-portal, .admin-portal) .video-card .mc-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
body:is(.creator-portal, .brand-portal, .admin-portal) .video-card .mc-actions:empty { display: none; }

/* Resolution chip, expand button, duration badge (player cards). */
body:is(.creator-portal, .brand-portal, .admin-portal) .clip-res { display: inline-flex; align-items: center; gap: 4px; background: var(--neutral-bg); color: var(--fg-muted); border-radius: var(--radius-pill); padding: 2px 9px; font-size: var(--text-caption); font-weight: 700; letter-spacing: .02em; flex: none; }
body:is(.creator-portal, .brand-portal, .admin-portal) .video-thumb.has-player .duration-badge { top: var(--space-2); bottom: auto; left: var(--space-2); right: auto; pointer-events: none; }
body:is(.creator-portal, .brand-portal, .admin-portal) .clip-expand { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2; width: 30px; height: 30px; border: 0; border-radius: var(--radius-sm); background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: .85; }
body:is(.creator-portal, .brand-portal, .admin-portal) .clip-expand:hover { opacity: 1; background: rgba(0, 0, 0, .78); }
body:is(.creator-portal, .brand-portal, .admin-portal) .clip-expand svg { width: 16px; height: 16px; }

/* Extra detail rows some cards carry (admin moderation). */
body:is(.creator-portal, .brand-portal, .admin-portal) .video-card :is(.cm-row, .cm-reason, .cm-actions) { margin-top: 8px; }
body:is(.creator-portal, .brand-portal, .admin-portal) .video-card .cm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Status label straight under the title (no meta line): 5px, as on Studio creatives. */
body:is(.creator-portal, .brand-portal, .admin-portal) .video-card .video-info-head + .video-status { margin-top: -5px; }
body:is(.creator-portal, .brand-portal, .admin-portal) .video-card .cm-actions { justify-content: flex-start; }