/* Video detail player. Ratios describe the video, never a cropped poster. */
.video-presentation { margin: 0 auto; max-width: 100%; }
.video-presentation .vp-stage { width: 100%; margin: 0 auto; }
.video-presentation.vp--portrait .vp-stage,
.video-presentation.vp--square .vp-stage {
  width: min(100%, var(--vp-fit-width, 26rem));
}
.video-presentation .vp-media {
  position: relative; width: 100%; min-height: 200px;
  aspect-ratio: var(--vp-ratio); background: #101820; overflow: hidden;
  border: 0; /* Keep the iframe viewport at least 200px; an inset line consumes no width. */
  box-shadow: inset 0 0 0 1px var(--color-line, #e4e9ea);
}
.video-presentation .vp-start {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; margin: 0; border: 0; border-radius: 0;
  color: #fff; background: #101820; cursor: pointer;
  text-decoration: none; font: inherit; appearance: none;
}
.video-presentation .vp-start img {
  display: block; width: 100%; height: 100%; object-fit: contain; margin: 0;
}
.video-presentation .vp-play-mark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 72px; height: 72px;
  padding-left: 4px; border-radius: 50%; border: 2px solid #fff;
  color: #fff; background: #0d67a0; font: 30px/1 sans-serif;
  box-shadow: 0 2px 12px #0006;
}
.video-presentation .vp-start-label {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  padding: 6px 12px; white-space: nowrap; font-size: 14px;
  color: #fff; background: #101820e6; border-radius: 4px;
}
.video-presentation .vp-media iframe {
  display: block; position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0; margin: 0;
}
.video-presentation .vp-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 16px; padding-top: 10px; font-size: 14px;
}
.video-presentation .vp-source {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 9px 12px; border-radius: 4px;
  font: inherit; line-height: 1.5; cursor: pointer;
}
.video-presentation .vp-source { color: var(--color-accent, #0d67a0); }
.video-presentation [hidden] { display: none !important; }
.video-presentation .vp-status { margin: 8px 0 0; font-size: 14px; text-align: center; }
.video-presentation :focus-visible { outline: 3px solid #23ce9a; outline-offset: -3px; }

.vp-series-nav {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--color-line, #e4e9ea);
}
.vp-series-nav a { color: var(--color-accent, #0d67a0); text-decoration: none; }
.vp-series-nav a:hover { text-decoration: underline; }
.vp-series-nav .vp-episode { display: flex; gap: 12px; padding: 8px 0; }
.vp-series-nav .vp-episode span { flex: 0 0 auto; font-size: 13px; }
.vp-series-nav .vp-episode b { font-weight: 500; overflow-wrap: anywhere; }
.vp-series-nav .vp-back { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; }
@media (max-width: 640px) {
  .t-a .watch.vp-watch { padding: 12px 12px 48px; }
  .vp-watch .crumb { margin-bottom: 12px; }
  .vp-watch .post-h { font-size: clamp(24px, 6vw, 32px); margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-presentation *, .vp-series-nav * { transition: none !important; animation: none !important; }
}

/* Direct MP4 uses browser controls, including fullscreen. No extra action button. */
.video-presentation .vp-native { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.video-presentation .vp-native:fullscreen { width:100%; height:100%; object-fit:contain; }
/* Larger YouTube detail area; mobile keeps the full available width. */
.t-a .watch.vp-watch:has(.vp--landscape) { max-width:1280px; }
@media (min-width:641px) { .t-a .watch.vp-watch:has(.vp--landscape) { padding-inline:24px; } }