/* Video news cards - click-to-play facade.
   Loaded via the mvsd_core/video-facade library, attached from the card
   templates, so pages without a video card never download it. */

/* ==========================================================================
   Video news cards - click-to-play facade
   --------------------------------------------------------------------------
   A video card shows the article's featured image as a poster with a play
   button over it; the player is created by video-facade.js on click. Nothing
   is requested from Google until then.

   The hover overlay is not rendered on these cards at all (see the card
   templates): it spans the whole cover and turns pointer-events back on
   exactly on hover, so it would swallow the click meant for the play button.
   The rule below is a belt-and-braces guard in case one slips through.
   ========================================================================== */
.news-card-cover-wrap--video .news-card-overlay {
  display: none;
}

.news-card-cover--video {
  position: relative;
}

/* Full-cover hit area: the whole poster is the play target, not just the disc. */
.news-card-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 3;
}

.news-card-play__disc {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  display: grid;
  place-items: center;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

/* The triangle, drawn rather than shipped as an asset. Nudged right by 3px
   because a triangle's optical centre sits left of its bounding box. */
.news-card-play__disc::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent #fff;
}

.news-card-play:hover .news-card-play__disc,
.news-card-play:focus-visible .news-card-play__disc {
  background: var(--color-brand, #c8a22c);
  transform: scale(1.08);
}

/* The disc sits on an arbitrary photo, so the ring has to survive any
   backdrop - hence the on-dark token plus a dark outer ring for contrast. */
.news-card-play:focus-visible {
  outline: none;
}
.news-card-play:focus-visible .news-card-play__disc {
  outline: 3px solid var(--color-focus-ring-on-dark, #fff);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .news-card-play__disc,
  .news-card-play:hover .news-card-play__disc,
  .news-card-play:focus-visible .news-card-play__disc {
    transition: none;
    transform: none;
  }
}

/* The player replaces the poster inside the same 16/9 box, so swapping one for
   the other does not move anything else on the page. */
.news-card-cover--playing {
  background: #000;
}
.news-card-video__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Video cards lose the overlay, and with it the overlay's "Continue reading"
   CTA - so the card carries a visible one of its own. */
.news-card-continue {
  display: inline-block;
  margin-top: var(--space-2, 0.5rem);
  font-weight: 600;
  text-decoration: underline;
}