/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   NAVR MEDIA INVARIANT — content media is NEVER cropped.

   One rule for the whole Public Panel (and the Admin previews that render the same components): every content
   <img> and <video> shows its COMPLETE source frame at its own aspect ratio. A design may still give media a
   uniform frame (a card, a tile, a hero band); the media then sits INSIDE that frame, letterboxed on the frame's
   ground, instead of being scaled up to fill it and clipped.

   Why a global stylesheet and not per-component rules: the crop came from ~60 component rules across four
   rendering families (CMS pages, custom blocks/cards, Default Website sections, header/mobile-nav menus), each
   pairing a forced box (aspect-ratio, a fixed or max height, an inset:0 layer) with `object-fit: cover`. Fixing
   them one by one left the invariant depending on every future rule remembering it. This file is linked LAST on
   every page, and `!important` makes it win over component rules and inline styles alike — so a new template,
   section or card cannot reintroduce cropping, whatever it declares.

   · object-fit: contain   — the whole frame is painted, never more than the box, never stretched.
   · object-position: center — the old focal anchors (e.g. 50% 0%) only chose WHICH part survived a crop; with
     contain nothing is cut, so the media is simply centred in its frame.
   · max-width / max-height: 100% — media can never be larger than the box it sits in, so a parent's
     `overflow: hidden` has nothing to clip. (A percentage max-height is ignored when the parent's height is
     content-sized, so intrinsic layouts are unaffected.)
   · transform: none — hover zooms and entrance "settle" scales enlarged the media inside a clipping frame and
     cut its edges for as long as they ran. Motion belongs on the frame or the card, never on the media itself.
     (`!important` also outranks keyframe animations, so no animation can scale the media either.)

   Shape masks: a frame with a circular or arched radius insets its media to the shape's inscribed rectangle
   (see NavrSiteSection / Home avatars) so the curve never reaches the picture. Ordinary corner rounding is a
   design radius on the frame, not a crop of the subject.

   Opt-out: purely DECORATIVE media (e.g. a header's themed background video behind the navigation, marked
   aria-hidden) carries `data-navr-decor` and keeps its design treatment. Nothing that conveys content may use it.
   Guarded by NAVR.Architecture.Tests › PublicMediaCroppingTests.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

:where(img, video):not([data-navr-decor]) {
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    max-width: 100%;
    max-height: 100%;
}