/* Stable placeholders shared by desktop and mobile. */
.media-skeleton, img.media-pending {
  background: linear-gradient(100deg, #e5e8eb 25%, #f3f4f5 42%, #e5e8eb 60%);
  background-size: 240% 100%;
  animation: media-shimmer 1.6s ease-in-out infinite;
}
@keyframes media-shimmer { to { background-position: -180% 0; } }
[data-media-hero] { background: #333b43; }
[data-media-hero] .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; z-index: 6; }
[data-media-hero] .hero-skeleton { position: absolute; inset: 0; z-index: 7; background-image: linear-gradient(100deg, #303942 25%, #46525d 42%, #303942 60%); pointer-events: none; }
[data-media-hero].media-ready .hero-skeleton { display: none; }
[data-media-hero] video { opacity: 0; transition: opacity .3s ease; }
[data-media-hero].video-ready video { opacity: 1; }
[data-media-hero] .media-play { position: absolute; z-index: 21; left: 50%; bottom: 72px; transform: translateX(-50%); min-height: 44px; padding: 10px 22px; border: 1px solid rgba(255,255,255,.6); border-radius: 24px; background: rgba(20,25,30,.65); color: #fff; font: inherit; cursor: pointer; }
[data-media-hero] .media-play[hidden] { display: none; }
img.media-pending { color: transparent; }
img.media-failed { background: #eef0f2; color: #69737d; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
  .media-skeleton, img.media-pending { animation: none; }
  [data-media-hero] video { transition: none; }
}