/* Site video player (.lv), see src/lib/video.ts and public/js/video.js.
   Fills its frame (the existing 16:9 boxes); type and controls follow the site's
   type system and the podcast player. */
.lv { position: absolute; inset: 0; overflow: hidden; background: #000; color: #fff;
  font-family: var(--sans); outline: none; -webkit-tap-highlight-color: transparent; }
.lv * { box-sizing: border-box; }
.wp-block-embed__wrapper:has(> .lv) { overflow: hidden; border-radius: 5px; } /* like the old embedded iframes */
.wp-block-embed__wrapper:has(> .lv)::before { display: none; }
.lv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; cursor: pointer; display: block; }
.lv button { background: none; border: 0; padding: 0; margin: 0; color: #fff; cursor: pointer; font: inherit; line-height: 0; }
.lv svg { width: 100%; height: 100%; display: block; }

/* Play button over the preview frame: a frosted-glass circle, Apple style
   (blurred backdrop, no outline, soft shadow, rounded triangle) */
.lv .lv-big { position: absolute; inset: 0; margin: auto; width: 88px; height: 88px; /* centered in the frame */
  display: grid; place-items: center; padding: 0 !important; border-radius: 50% !important;
  background: rgba(255,255,255,.2) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,.3), 0 8px 32px rgba(0,0,0,.25);
  transition: background .25s ease, transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s ease; }
.lv-big svg { width: 40px; height: 40px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.15)); }
.lv-big:hover, .lv-big:focus-visible { background: rgba(255,255,255,.3) !important; transform: scale(1.06); }
.lv-big:active { transform: scale(.97); }
.lv-started .lv-big { opacity: 0; pointer-events: none; transform: scale(.9); }
.lv-ended .lv-big { opacity: 1; pointer-events: auto; transform: none; }

/* Loading ring */
.lv-started.lv-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border: 2px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: lv-spin .8s linear infinite; pointer-events: none; }
@keyframes lv-spin { to { transform: rotate(360deg); } }

/* Control bar */
.lv-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px;
  padding: 36px 20px 14px; background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; pointer-events: none; }
.lv-started:is(.lv-active, :not(.lv-playing)) .lv-bar { opacity: 1; transform: none; pointer-events: auto; }
.lv-started.lv-playing:not(.lv-active) { cursor: none; }
.lv-btn { flex: none; width: 22px; height: 22px; opacity: .9; transition: opacity .15s; }
.lv-btn:hover, .lv-btn:focus-visible { opacity: 1; }
.lv-time, .lv-dur { flex: none; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; color: #fff; }
.lv-dur { color: var(--gray-light, #a6a6a6); }

/* Icon states */
.lv-i-pause, .lv-i-muted, .lv-i-exit { display: none !important; }
.lv-playing .lv-play .lv-i-play { display: none !important; }
.lv-playing .lv-play .lv-i-pause { display: block !important; }
.lv-muted .lv-i-sound { display: none !important; }
.lv-muted .lv-i-muted { display: block !important; }
.lv-fullscreen .lv-i-full { display: none !important; }
.lv-fullscreen .lv-i-exit { display: block !important; }

/* Seek bar: same as the podcast player */
.lv-seek { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 14px; margin: 0; padding: 0; background: transparent; cursor: pointer; border: 0; }
.lv-seek::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(to right, #fff var(--pct, 0%), rgba(255,255,255,.3) var(--pct, 0%)); }
.lv-seek::-moz-range-track { height: 3px; border-radius: 2px; background: linear-gradient(to right, #fff var(--pct, 0%), rgba(255,255,255,.3) var(--pct, 0%)); }
.lv-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .15s; }
.lv-seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; opacity: 0; }
.lv-seek:hover::-webkit-slider-thumb, .lv-seek:focus-visible::-webkit-slider-thumb { opacity: 1; }
.lv-seek:hover::-moz-range-thumb, .lv-seek:focus-visible::-moz-range-thumb { opacity: 1; }

/* Keyboard focus */
.lv button:focus-visible, .lv-seek:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }
.lv-big:focus-visible { outline-offset: 4px; border-radius: 50% !important; }

/* Full screen */
.lv:fullscreen, .lv-fullscreen { position: fixed; inset: 0; width: 100vw; height: 100vh; }
.lv-fullscreen .lv-bar { padding: 48px 32px 24px; }

/* Phones and small frames */
@media (max-width: 767px) {
  .lv .lv-big { width: 64px; height: 64px; }
  .lv-big svg { width: 30px; height: 30px; }
  .lv-bar { gap: 12px; padding: 28px 14px 10px; }
  .lv-time, .lv-dur { font-size: 13px; }
  .lv-btn { width: 20px; height: 20px; }
  .lv-mute { display: none; } /* phones use their volume buttons */
}