/* ---------------------------------------------------------------------------
 * pinned_media (live ContentPinnedMedia / DisplayMediaPinned)
 *
 * Live drives this section from its scroll runtime: each entry is pinned while the
 * next one slides up over it, and the caption panel is wiped in horizontally.
 * live.css already ships the geometry that makes a JS-free version work --
 *   .DisplayMediaPinned__entry   { position:sticky; top:0; overflow:hidden }
 *   .DisplayMediaPinned__canvas  { height:100vh }
 *   .DisplayMediaPinned__section--content { transform:translate(-100%) }
 * so the entries stack (each one pins at the top of the viewport and the following
 * entry scrolls over it) and the caption already sits on top of its image.
 *
 * Everything below is belt-and-braces only: paint order + a caption that stays
 * legible over the image, and a mobile height that is not a full 100vh of chrome.
 * ------------------------------------------------------------------------- */

.DisplayMediaPinned {
  position: relative;
}

/* Later entries must paint over the pinned ones beneath them. */
.DisplayMediaPinned__entry {
  z-index: 1;
}

/* Caption panel sits above the image + its tint. */
.DisplayMediaPinned__section--content {
  z-index: 2;
  pointer-events: none;
}

.DisplayMediaPinned__content {
  width: 100%;
}

/* Slightly shorter frames on small screens so a caption never runs out of room. */
@media (max-width: 829px) {
  .DisplayMediaPinned__canvas {
    height: 75vh;
  }
}