/* Public product media (planner/_public_media.html). Class prefix `nxm-`.
   Layout and framing only; colour and type come from the navy tokens. The
   frame reserves its box from the entry's own aspect ratio, so a still or a
   poster arriving late moves nothing. Logical properties throughout. */

.nxm { margin: 0; min-width: 0; }
.nxm-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-card);
  background: var(--nx-deep);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.nxm-frame > picture,
.nxm-img,
.nxm-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.nxm-caption {
  margin-block-start: 10px;
  font: 400 13px/1.6 var(--nx-font-body);
  color: var(--nx-support);
}
[dir="rtl"] .nxm-caption { line-height: 1.9; }
.nxm-caption > span { display: block; }
.nxm-example { display: block; font-size: 11.5px; color: var(--nx-faint); margin-block-start: 2px; }

/* THE PHONE CROP. A 16:9 planner capture at 390px wide is a 219px strip in
   which no building is legible. On a narrow screen the frame becomes 4:3 and
   the capture is centre-cropped inside it: the silo, the hospitals beside it
   and the chips stay readable, the far edges of the desert go. This is a
   deliberate desktop-derived crop, not the phone planner (finding M1). The
   video keeps the same frame; its captions sit at the bottom centre and
   survive the crop. */
@media (max-width: 560px) {
  .nxm--hero .nxm-frame,
  .nxm--card .nxm-frame { aspect-ratio: 4 / 3 !important; }
}

/* The reduced-motion state: the script never plays; the poster stays, the
   source is named (preload="none" keeps it on the server until Play is
   pressed) and the native controls are shown so the reader can still choose
   to watch. `controls` is set by the script, but the frame says so too, so a
   video that shows controls reads as an invitation rather than a fault. */
.nxm-video[controls] { cursor: pointer; }