/* Videos in the photo sequence.
 *
 * Loaded by BOTH project shells, like photolog_group.css and its neighbours —
 * a video can sit in a simple photolog or in a Fotoessay, on a classic site or
 * a Journal one, and forking these few rules into each layout's stylesheet
 * would mean fixing every future bug twice.
 *
 * The element deliberately inherits its box from whatever rule sizes a
 * photograph in that layout (.pf-essay__figure img, .photolog-image, …). Only
 * what a <video> does NOT get for free is stated here.
 */

.pf-video {
  display: block;
  width: 100%;
  height: auto;
  /* A photo's intrinsic ratio holds the space while it loads; a video with no
     probed dimensions has nothing, and the page would jump when metadata
     arrives. 16:9 is the honest guess and is overridden by the inline
     width/height whenever the probe worked. */
  aspect-ratio: auto 16 / 9;
  background: #000;
}
.pf-video[width] { aspect-ratio: auto; }

/* An Endlosschleife has no controls to invite a click, so nothing should
   suggest one. */
.pf-video--loop { pointer-events: none; }

.pf-video:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Inside a collage cell the flex row owns the width, exactly as it does for a
   photo, and the cell already carries the aspect ratio. */
.pf-group-item .pf-video { height: 100%; object-fit: cover; aspect-ratio: auto; }

@media (prefers-reduced-motion: reduce) {
  /* An auto-playing loop is motion the visitor did not ask for. Give the
     controls back so it can be stopped — the poster still carries the frame. */
  .pf-video--loop { pointer-events: auto; }
}