/*
 * Media Image (UI-026) -- canonical Responsive Image primitive, Phase
 * 5B.1, Media Primitives Convergence (catalog/governance/
 * MEDIA_PRIMITIVES_CONVERGENCE_AUDIT.md). Owns image delivery only --
 * no border, no shadow, no radius, no aspect-ratio, no layout of its
 * own. Media Frame (5B.3) wraps this to add those; this file must stay
 * structurally minimal so that convergence has something clean to wrap,
 * not something it has to first undo.
 *
 * .lib-media-image is the one real class this primitive ever needs --
 * both the plain <img> and the <img> inside a <picture> (when real
 * sources are supplied) carry it, so a composing context can style
 * "the image itself" the same way regardless of which markup shape
 * section-renderer.php's hhds_render_media_image() emitted.
 */
.lib-media-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  /* object-fit/object-position are inert until something above this
     file (Media Frame, a Gallery item, an ad hoc aspect-ratio wrapper)
     constrains this element's own box height -- with height:auto alone,
     the image simply renders at its real intrinsic ratio, distortion-
     free, by default. Deliberately NOT hardcoding object-position:
     center as an immutable rule -- reading the real, inheritable
     --lib-media-image-focal custom property (undefined by default,
     falling back to center) keeps a real per-instance focal value
     (Phase 5B.2) settable from outside this file without touching this
     rule at all. */
  object-fit: cover;
  object-position: var(--lib-media-image-focal, center);
}

/*
 * Focal Position (Phase 5B.2, catalog/governance/
 * MEDIA_PRIMITIVES_CONVERGENCE_AUDIT.md) -- a real, evidenced, limited
 * responsive override, not a new breakpoint system: reuses the
 * library's own already-dominant real mobile cutoff (max-width:
 * 47.99rem, 12 occurrences repo-wide) rather than inventing a number.
 * --lib-media-image-focal-mobile is only ever set when a caller's real
 * `focal.mobile` prop is supplied (hhds_render_focal_style()) -- when
 * it isn't, this falls through to the exact same base value the rule
 * above already resolved, so this media query is a genuine no-op for
 * every instance that doesn't need it.
 */
@media (max-width: 47.99rem) {
  .lib-media-image {
    object-position: var(--lib-media-image-focal-mobile, var(--lib-media-image-focal, center));
  }
}