/*
 * Zenger Video Player — player-card chrome + @videojs/html v10 theming
 *
 * Covers:
 *   1. Player-card chrome  (.zgr-vplayer, .zgr-vplayer-card, header, caption, source, error)
 *   2. @videojs/html v10 Custom Property theming (.zgr-vplayer video-player)
 *   3. Aspect-ratio variants (16:9, 9:16, 1:1)
 *
 * Does NOT include:
 *   - .vjs-* class overrides (not applicable for @videojs/html v10 Shadow DOM)
 *   - Chapter-panel rules (.zgr-vplayer-chapters-panel etc.) — out of scope for v1
 *   - Paragraph-sync helpers — out of scope for v1
 */

/* ============================================================ */
/* Design tokens                                                  */
/* ============================================================ */

.zgr-vplayer {
  --zgr-navy:          #122b50;
  --zgr-navy-dark:     #0d1f38;
  --zgr-black:         #121212;
  --zgr-gray:          #757575;
  --zgr-gray-medium:   #4b5563;
  --zgr-gray-light:    #9ca3af;
  --zgr-border:        #e5e7eb;
  --zgr-bg-soft:       #f8f8f8;
  --zgr-white:         #ffffff;
  --zgr-crimson:       #d4183d;
  --font-sans:         'Inter', system-ui, sans-serif;
  --font-serif:        'Lora', Georgia, serif;
}

/* ============================================================ */
/* Outer wrapper                                                  */
/* ============================================================ */

.zgr-vplayer {
  position: relative;
  margin: 1.25rem 0 1.75rem;
  width: 100%;
}

/* ============================================================ */
/* Card chrome                                                    */
/* ============================================================ */

.zgr-vplayer-card {
  position: relative;
  background: var(--zgr-white);
  border: 1px solid var(--zgr-border);
  border-radius: 0.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  font-size: 10px;
  width: 100%;
  overflow: hidden;
}

/* ============================================================ */
/* Caption + source — rendered OUTSIDE the player card (below it), */
/* like an image caption. Tight spacing (3–4px) to the media.     */
/* ============================================================ */

/* Scoped under .zgr-vplayer (specificity 0,2,0) so it beats the theme's
   `.zgr-single-post__content p { margin-bottom: 1.4em }` (0,1,1), which was
   adding a large gap below the caption. */
.zgr-vplayer .zgr-vplayer-caption {
  margin: 4px 0 0;
  padding: 0;
  font-family: var(--font-serif);
  font-size: 12px;
  font-style: italic;
  color: var(--zgr-gray-medium);
}

.zgr-vplayer-caption strong {
  color: var(--zgr-black);
  font-style: normal;
  font-family: var(--font-sans);
  font-weight: 600;
}

.zgr-vplayer .zgr-vplayer-source {
  margin: 3px 0 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 10px;
  font-style: italic;
  color: var(--zgr-gray-light);
}

.zgr-vplayer-source a {
  color: var(--zgr-navy);
  text-decoration: none;
}

.zgr-vplayer-source a:hover {
  text-decoration: underline;
}

/* For a centered portrait reel, keep the caption/source aligned under the
   centered card rather than spanning the full column width. */
.zgr-vplayer[data-aspect="9:16"] .zgr-vplayer-caption,
.zgr-vplayer[data-aspect="9:16"] .zgr-vplayer-source {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================ */
/* Error state                                                    */
/* ============================================================ */

.zgr-vplayer-error {
  aspect-ratio: 16 / 9;
  background: var(--zgr-bg-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--zgr-gray-medium);
  font-family: var(--font-sans);
  font-size: 13px;
  text-align: center;
  padding: 1rem;
}

.zgr-vplayer-error svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--zgr-crimson);
}

.zgr-vplayer-error strong {
  color: var(--zgr-black);
  font-weight: 600;
}

.zgr-vplayer-error-retry {
  margin-top: 0.5rem;
  background: var(--zgr-navy);
  color: #fff;
  border: 0;
  padding: 0.4rem 0.9rem;
  border-radius: 0.375rem;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.zgr-vplayer-error-retry:hover {
  background: var(--zgr-navy-dark);
}

/* ============================================================ */
/* @videojs/html v10 theming — Zenger navy + Inter typography    */
/* See https://videojs.org/docs/css for the Custom Property API. */
/* ============================================================ */

.zgr-vplayer video-player {
  /* Brand tokens */
  --media-primary-color:              #122b50;  /* Zenger navy */
  --media-secondary-color:            #ffffff;
  --media-accent-color:               #d4183d;  /* Zenger crimson */

  /* Shape + spacing */
  --media-border-radius:              12px;
  --media-icon-size:                  18px;
  --media-control-bar-gap:            6px;
  --media-control-padding:            8px;

  /* Backgrounds */
  --media-background:                 #000;
  --media-control-bar-background:     rgba(18, 43, 80, 0.85);

  /* Typography (inherited into shadow DOM) */
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;

  /* Sizing the player itself */
  display: block;
  width: 100%;
  background: #000;
}

/* ============================================================ */
/* Aspect-ratio frame                                             */
/*                                                                */
/* Setting aspect-ratio / height on the <video-player> custom      */
/* element is unreliable: once it boots it applies its own inline  */
/* sizing that collapses the height, so the clip looked squished,  */
/* the controls were clipped, and clicks landed on nothing — even  */
/* !important overrides didn't win consistently.                   */
/*                                                                  */
/* Robust fix: wrap the player in a plain <div class=              */
/* "zgr-vplayer-frame"> that carries the aspect-ratio. A normal      */
/* block box can't be resized by the custom element (or by the WP  */
/* theme, which never targets our class), so its height is         */
/* guaranteed; the player then fills it via position:absolute.     */
/* ============================================================ */

.zgr-vplayer-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* default; overridden per data-aspect below */
  background: #000;
  overflow: hidden;
}

.zgr-vplayer[data-aspect="9:16"] .zgr-vplayer-frame { aspect-ratio: 9 / 16; }
.zgr-vplayer[data-aspect="1:1"]  .zgr-vplayer-frame { aspect-ratio: 1 / 1; }

/* Portrait reel: keep the whole card to a sensible column width, centered,
   and cap the height so a tall clip doesn't run off-screen on desktop. */
.zgr-vplayer[data-aspect="9:16"] .zgr-vplayer-card {
  max-width: 400px;
  margin: 0 auto;
}
.zgr-vplayer[data-aspect="9:16"] .zgr-vplayer-frame {
  max-height: 78vh;
}

/* The player (and its inner <video>) are forced to fill the frame. !important
   beats the custom element's non-important inline styles; position:absolute +
   inset:0 pins all four edges so the box can't collapse. */
.zgr-vplayer-frame > video-player {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* `contain` (not `cover`) so an editorial clip is never cropped when the frame
   aspect and the source aspect differ — a vertical reel that arrived without
   exact ratio metadata is letterboxed on the black surface, not cut off. */
.zgr-vplayer-frame > video-player video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}