/**
 * Atlas Vertical – Autoplay video chrome (home + /videos native HTML5)
 * Post hero: native controls + optional floating audio toggle only (.video-overlay--post-hero).
 *
 * Top bar: play hint (left) + audio toggle (right) on autoplay; post-hero bar is audio-only, right-aligned.
 */

.video-player-host {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

/* Feed: video sits in absolutely positioned media slot */
.video-panel__media > .video-player-host {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.video-panel__media > .video-player-host > .video-panel__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Top overlay: full width row — play hint left, audio toggle right */
.video-overlay.video-overlay--top {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  bottom: auto;
  z-index: 5;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
  pointer-events: none;
}

/* Video feed page: fixed header — sit below nav */
[data-video-feed] .video-overlay.video-overlay--top {
  top: max(16px, calc(env(safe-area-inset-top, 0px) + 52px));
}

@media (max-width: 767px) {
  .video-overlay.video-overlay--top {
    top: max(16px, env(safe-area-inset-top, 0px));
  }

  [data-video-feed] .video-overlay.video-overlay--top {
    top: max(18px, calc(env(safe-area-inset-top, 0px) + 56px));
  }
}

.video-overlay--top .video-unmute,
.video-overlay--top .video-sound-toggle {
  pointer-events: auto;
}

.video-unmute.video-sound-toggle.video-audio-toggle {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  margin: 0;
  padding: 0;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.video-unmute.video-sound-toggle.video-audio-toggle:hover {
  background: rgba(0, 0, 0, 0.72);
  transform: scale(1.04);
}

.video-unmute.video-sound-toggle.video-audio-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.video-unmute.video-sound-toggle.video-audio-toggle svg {
  display: block;
}

.video-play-indicator {
  position: static;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.video-player-host.is-playing .video-play-indicator {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .video-unmute.video-sound-toggle.video-audio-toggle,
  .video-play-indicator {
    transition: none;
  }

  .video-unmute.video-sound-toggle.video-audio-toggle:hover {
    transform: none;
  }
}

/* Post hero: no feed header offset; audio control top-right only */
.post-hero .video-overlay.video-overlay--top.video-overlay--post-hero {
  top: max(12px, env(safe-area-inset-top, 0px));
  justify-content: flex-end;
}