/*
 * pn-video.css — article videos on the public websites.
 * Canonical copy: video-api/site-assets/pn-video/pn-video.css.
 *
 * Every layer (poster, preview, player) sits inside ONE box whose size is
 * fixed before anything loads, so switching between them never moves or
 * resizes what the reader is pointing at.
 */

/* ── Body video: a box with the video's own shape ───────────────────────── */
.pn-video {
  position: relative;
  display: block;
  margin: 1.5em auto;
  padding: 0;
  max-width: 100%;
}
/* Portrait video at full column width would be ~1,200px tall, so the box is
   capped at min(80vh, 720px) high and narrows to keep its shape. */
.pn-video--body {
  width: 100%;
  width: min(100%, calc(min(80vh, 720px) * var(--pn-arn, 1.7778)));
}
.pn-video__box {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}
.pn-video--body .pn-video__box {
  aspect-ratio: var(--pn-ar, 16 / 9);
}
.pn-video--body .pn-video__box > img {
  position: absolute !important;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: cover;
  display: block;
}
.pn-video--pending .pn-video__box { cursor: default; }

/* ── Cover video: the site's own cover <img> stays in flow and sets the size ── */
.pn-video--cover { margin: 0; width: auto; }
.pn-video--cover .pn-video__box > img { display: block; }

/* ── The layers ────────────────────────────────────────────────────────── */
.pn-video__preview,
.pn-video__player {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: block;
}
.pn-video__preview {
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 1;
}
.pn-video.is-previewing .pn-video__preview { opacity: 1; }
/* The full video shows the WHOLE frame (a portrait video in a landscape cover
   is letterboxed, not cropped), inside the same box. */
.pn-video__player {
  object-fit: contain;
  background: #000;
  z-index: 3;
}

.pn-video__play {
  position: absolute;
  top: 50%; left: 50%;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") 55% 50% / 30px 30px no-repeat;
  cursor: pointer;
  z-index: 2;
  transition: background-color .15s ease, transform .15s ease;
}
.pn-video__play:hover,
.pn-video__play:focus-visible { background-color: rgba(0, 0, 0, .82); }
.pn-video__play:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pn-video.is-playing .pn-video__play { display: none; }

.pn-video__caption {
  margin-top: .5em;
  font-size: .875em;
  line-height: 1.4;
  opacity: .8;
}

/* ── Listing cards ─────────────────────────────────────────────────────── */
.pn-card-preview {
  position: absolute;
  margin: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 1;
  background: transparent;
}
.pn-card-preview.is-on { opacity: 1; }
.pn-card-badge {
  position: absolute;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") 55% 50% / 14px 14px no-repeat;
  pointer-events: none;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .pn-video__preview, .pn-card-preview, .pn-video__play { transition: none; }
}