/* Ping-pong / Swomp experiment — page extensions (shared: insight-article.css) */

.article-hero-image--ratio-4-3 {
  aspect-ratio: 4 / 3;
}

.article-hero-media-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.article-hero-media-wrap video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-hero-media-wrap .article-hero-poster {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-hero-media-wrap.is-reduced-motion .article-hero-poster {
  display: block;
}

.article-hero-media-wrap.is-reduced-motion video {
  display: none;
}

.article-hero-pause {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;

  min-height: var(--pill-min-height-sm);
  padding-inline: var(--space-4);

  font-family: var(--font-primary);
  font-size: var(--text-sm);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-body);

  color: var(--text-inverse);
  background: rgba(10, 10, 14, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.article-hero-pause:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.article-figure--photo img {
  object-fit: contain;
  background: var(--surface-soft);
}

.article-figure--quest img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .article-hero-pause {
    display: none;
  }
}