/*
 * Media Frame (UI-028) -- canonical crop-containment primitive, Phase
 * 5B.3, Media Primitives Convergence (catalog/governance/
 * MEDIA_PRIMITIVES_CONVERGENCE_AUDIT.md). Converges the 4 independent
 * implementations that phase's own Section 12 found (Hero Frame,
 * text-highlights-media's photo-frame, skills-video's media wrapper,
 * Empire Metal Solutions' real .metal-frame) plus 3 more found by this
 * step's own re-audit (founder-profile, narrative-profile,
 * steps-proof-split) into one primitive.
 *
 * Owns geometry/containment ONLY: aspect-ratio, overflow clipping,
 * border-radius. Does not own image delivery/semantics (Media Image,
 * UI-026, components/media-image/media-image.css), focal position
 * (UI-027, same file), or what is inside it -- this file wraps
 * pre-rendered inner markup without inspecting or modifying it.
 *
 * `data-ratio` is a restricted taxonomy (video/portrait/tall), not
 * arbitrary CSS -- exactly the three real aspect-ratio values found
 * repeated across two or more independent real implementations (see
 * core/tokens.css's own --lib-aspect-* comment for the evidence count).
 * Single-occurrence literals (4/3, 4/7, 1/2) found in the same audit are
 * deliberately not tokenized or accepted here.
 *
 * Clipping is always overflow: hidden, matching all 7 real
 * wrapper-based implementations found (none uses overflow: clip).
 * Radius is always --lib-radius-lg, matching all 7 real implementations
 * unanimously -- the strongest repeated evidence found in this whole
 * audit for any single Media Frame decision. Fit is always `cover`,
 * intentionally not a parameter -- see hhds_render_media_frame()'s own
 * docblock (adapters/wordpress/generation/section-renderer.php) for why
 * `contain` was evidenced (components/card-blog) but not adopted here.
 */
.lib-media-frame {
  display: block;
  overflow: hidden;
  border-radius: var(--lib-radius-lg);
}

.lib-media-frame[data-ratio="video"] {
  aspect-ratio: var(--lib-aspect-video);
}

.lib-media-frame[data-ratio="portrait"] {
  aspect-ratio: var(--lib-aspect-portrait);
}

.lib-media-frame[data-ratio="tall"] {
  aspect-ratio: var(--lib-aspect-tall);
}

/*
 * Real, necessary composing rule, not a media-image.css change: Media
 * Image's own CSS deliberately ships `height: auto` (Phase 5B.1's
 * "structurally minimal" contract -- correct standing alone, since an
 * unframed Media Image should render at its own intrinsic ratio). That
 * leaves `object-fit: cover` inert with no defined box height to crop
 * against once nested inside an aspect-ratio box -- the same real bug
 * Phase 5B.2's own Visual Lab specimen hit and fixed locally in its
 * fixture chrome. Fixing it here, once, as a scoped composing rule
 * targeting the child by its real class name, is what lets Media Frame
 * "contain Media Image without modifying its approved contract" for
 * real production consumers, not just in a fixture.
 */
.lib-media-frame > .lib-media-image {
  height: 100%;
}

/*
 * Responsive ratio override -- real, evidenced, limited (base + one
 * mobile tier, not a per-breakpoint engine): two independent real
 * sections (narrative-profile, text-highlights-media) already switch
 * from a portrait ratio on desktop to 16:9 on mobile, at their own
 * section-specific breakpoints (900px, 800px respectively). This
 * primitive reuses the library's own already-dominant real mobile
 * breakpoint instead (max-width: 47.99rem -- the same one Focal
 * Position/UI-027 already standardized on), rather than inventing a
 * third breakpoint or keeping two competing ones.
 */
@media (max-width: 47.99rem) {
  .lib-media-frame[data-ratio-mobile="video"] {
    aspect-ratio: var(--lib-aspect-video);
  }

  .lib-media-frame[data-ratio-mobile="portrait"] {
    aspect-ratio: var(--lib-aspect-portrait);
  }

  .lib-media-frame[data-ratio-mobile="tall"] {
    aspect-ratio: var(--lib-aspect-tall);
  }
}