.hub-video-embed {
  --hub-card: var(--card, 0 0% 100%);
  --hub-foreground: var(--foreground, 222 47% 11%);
  --hub-muted: var(--muted, 210 40% 96%);
  --hub-muted-foreground: var(--muted-foreground, 215 16% 47%);
  --hub-primary: var(--primary, 221.2 83.2% 53.3%);

  margin: 2.5rem 0;
  color: hsl(var(--hub-foreground));
}

.hub-video-embed__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.hub-video-embed__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--hub-foreground));
}

.hub-video-embed__card {
  border-radius: 0.9rem;
  overflow: hidden;
  background: hsl(var(--hub-card));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.hub-video-embed__media {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.hub-video-embed__empty {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  border: 1px dashed hsl(var(--hub-muted-foreground) / 0.3);
  background: hsl(var(--hub-muted));
  color: hsl(var(--hub-muted-foreground));
  border-radius: 0.75rem;
  padding: 1.1rem 1.25rem;
  text-align: center;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}

.hub-video-embed__link {
  color: hsl(var(--hub-primary));
  text-decoration: none;
  word-break: break-word;
}

.hub-video-embed__link:hover {
  text-decoration: underline;
}

.hub-video-embed .video-embed-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
}

@media (min-width: 0px) {
  .hub-video-embed .video-embed-wrap { min-height: 220px; }
}

@media (min-width: 640px) {
  .hub-video-embed .video-embed-wrap { min-height: 260px; }
}

@media (min-width: 768px) {
  .hub-video-embed .video-embed-wrap { min-height: 360px; }
}

@media (min-width: 1024px) {
  .hub-video-embed .video-embed-wrap { min-height: 440px; }
}

.hub-video-embed .video-embed-wrap iframe,
.hub-video-embed .video-embed-wrap .video-js,
.hub-video-embed .video-embed-wrap .video-js .vjs-tech,
.hub-video-embed .video-embed-wrap .vjs-poster {
  width: 100% !important;
  height: 100% !important;
}

.hub-video-embed--editor .video-embed-wrap iframe,
.hub-video-embed--editor .video-embed-wrap video,
.hub-video-embed--editor .video-embed-wrap .video-js {
  pointer-events: none;
}

.block-editor-writing-flow .hub-video-embed--editor {
  max-width: var(--wp--style--global--content-size, 760px);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.dark .hub-video-embed__empty {
  border-color: hsl(var(--hub-muted-foreground) / 0.4);
  background: hsl(var(--hub-muted) / 0.3);
}