/* ----- Video player ----- */

/* Public host: the frame fills the host; the 720px default caps it. */
.popup-video-ready {
  max-width: 720px;
  margin: 1.6em auto;
}
/* An explicit width (drag-resized in the editor, or hand-authored) is an
   owner decision — it wins over the 720px default cap. Percentages are
   relative to the column, so they degrade responsively everywhere. */
.popup-video-ready[style*="width"] {
  max-width: none;
}
.popup-video-frame {
  position: relative;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-card);
  max-width: 100%;
  margin: 0 auto;
  /* Placeholder box before metadata arrives (JS releases it on load). */
  aspect-ratio: 16/9;
}
.popup-video-frame video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
}
.popup-video-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.92);
  padding: 8px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
}

/* ── Editor preview (the live editor shows the REAL video) ─────────────
   Everything below is chrome rendered by popup-video.js as data-pop-chip
   children of the host and stripped before save: the persisted contract is
   an EMPTY <div class="popup-video" data-src data-title [style]>. The old
   aqua "VIDEO PLAYER" placeholder box is gone. */

#popup-live-editor .popup-video {
  margin: 1.6em auto;
  max-width: 720px;
  position: relative;
}
/* Same rule as public: an authored width beats the default cap, so the
   drag always shows its effect in the preview too. */
#popup-live-editor .popup-video[style*="width"] {
  max-width: none;
}
/* Undecorated host (a breath between strip and re-decorate, or the plugin
   freshly disabled): keep a visible ghost so the block is discoverable. */
#popup-live-editor .popup-video:empty {
  min-height: 60px;
  outline: 1px dashed rgba(0, 136, 204, .4);
}

/* Drag handles: right edge + bottom-right corner. Electric blue, never
   gold (palette rule); hover/focus reveals them. */
#popup-live-editor .pop-video-handle {
  position: absolute;
  z-index: 5;
  padding: 0;
  border: 2px solid #d8ecfa;
  background: #0088cc;
  opacity: 0;
  transition: opacity .15s ease;
  touch-action: none;          /* the drag owns touch gestures */
}
#popup-live-editor .popup-video:hover .pop-video-handle,
#popup-live-editor .pop-video-handle:focus-visible,
#popup-live-editor .pop-video-handle.dragging {
  opacity: 1;
}
#popup-live-editor .pop-video-handle-e {
  top: 50%;
  right: -8px;
  width: 8px;
  height: 28px;
  margin-top: -14px;
  border-radius: 3px;
  cursor: ew-resize;
}
#popup-live-editor .pop-video-handle-se {
  right: -9px;
  bottom: -9px;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  cursor: nwse-resize;
}

/* Live size readout while dragging (also the error/not-found badge). */
#popup-live-editor .pop-video-size {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 9px;
  border-radius: 4px;
  background: #14161b;
  border: 1px solid #2a2d35;
  color: #4da6e0;
  font: 600 11px/1.6 system-ui, sans-serif;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
  z-index: 6;
}
#popup-live-editor .pop-video-size.on { opacity: 1; }
#popup-live-editor .popup-video-err .pop-video-size {
  color: #e06c6c;
  border-color: #4a2222;
}

/* Dragging: freeze the frame's shadow lift, keep it crisp. */
#popup-live-editor .popup-video-frame.pop-video-dragging {
  box-shadow: 0 0 0 2px rgba(0, 136, 204, .55), var(--shadow-card);
}

/* Fresh-insert flash: one quiet blue pulse so the block is obvious. */
@keyframes pop-video-flash {
  0%   { box-shadow: 0 0 0 0 rgba(0, 136, 204, .0); }
  35%  { box-shadow: 0 0 0 6px rgba(0, 136, 204, .45); }
  100% { box-shadow: 0 0 0 0 rgba(0, 136, 204, .0); }
}
#popup-live-editor .popup-video-frame.popup-video-flash {
  animation: pop-video-flash 1.1s ease-out 1;
}

/* Missing media: the video element is dead weight — show the badge box. */
#popup-live-editor .popup-video-err video { display: none; }
#popup-live-editor .popup-video-err { min-height: 90px; }

@media (prefers-reduced-motion: reduce) {
  #popup-live-editor .popup-video-frame.popup-video-flash { animation: none; }
  #popup-live-editor .pop-video-handle,
  #popup-live-editor .pop-video-size { transition: none; }
}