/* Body case media only. The :is() branch raises specificity over legacy
   first-child, source-specific and subgrid rules without matching archive art. */
.case-media[data-media-hug][data-media-role="related"]:is(#body-media-hug-override, [data-media-hug]) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
}
.case-media[data-media-hug][data-media-role="related"] > .case-plate[data-media-hug]:is(#body-media-hug-override, [data-media-hug]) {
  display: block;
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: start !important;
}
.case-media[data-media-hug][data-media-role="related"] > .case-plate:is([data-media-hug="still"], [data-media-hug="animated-image"]):is(#body-media-hug-override, [data-media-hug]) {
  aspect-ratio: auto !important;
}
.case-media[data-media-hug][data-media-role="related"] > .case-plate:is([data-media-hug="still"], [data-media-hug="animated-image"]):is(#body-media-hug-override, [data-media-hug]) > img {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  aspect-ratio: auto var(--media-hug-image-ratio) !important;
  object-fit: contain !important;
  object-position: center !important;
}
/* A reserved player or demo always has a measured reference ratio. Unknown
   ratios retain the old stage geometry and are reported to the caller. */
.case-media[data-media-hug][data-media-role="related"] > .case-plate:is([data-media-hug="original-demo"], [data-media-hug="native-video"], [data-media-hug="provider"]):not([data-media-hug-ratio="unknown"]):is(#body-media-hug-override, [data-media-hug]) {
  aspect-ratio: var(--media-hug-ratio) !important;
}
.case-media[data-media-hug][data-media-role="related"] > .case-plate:is([data-media-hug="native-video"], [data-media-hug="provider"]):not([data-media-hug-ratio="unknown"]):is(#body-media-hug-override, [data-media-hug]) > :is(img, video, iframe) {
  position: absolute !important;
  inset: 0 !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}
.case-media[data-media-hug][data-media-role="related"] > .case-plate[data-media-hug="original-demo"]:is(#body-media-hug-override, [data-media-hug]) > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}
/* The primary viewport owns the full available column and is at most square.
   Tall media occupies its natural narrow width at the left of that viewport. */
.flow-media > .case-media[data-media-role="primary"] > .case-plate[data-media-hug]:is(#body-media-hug-override, [data-media-hug]) {
  display: block;
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(100cqw, 960px) !important;
  background: transparent !important;
}
.flow-media > .case-media[data-media-role="primary"] > .case-plate:is([data-media-hug="still"], [data-media-hug="animated-image"]):is(#body-media-hug-override, [data-media-hug]) {
  aspect-ratio: auto !important;
}
.flow-media > .case-media[data-media-role="primary"] > .case-plate:is([data-media-hug="still"], [data-media-hug="animated-image"]):is(#body-media-hug-override, [data-media-hug]) > img {
  position: static !important;
  display: block !important;
  width: min(100%, calc(min(100cqw, 960px) * var(--primary-media-aspect-ratio))) !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: min(100cqw, 960px) !important;
  aspect-ratio: auto var(--media-hug-image-ratio) !important;
  object-fit: contain !important;
  object-position: left top !important;
}
.flow-media > .case-media[data-media-role="primary"] > .case-plate:is([data-media-hug="original-demo"], [data-media-hug="native-video"], [data-media-hug="provider"]):not([data-media-hug-ratio="unknown"]):is(#body-media-hug-override, [data-media-hug]) {
  aspect-ratio: max(1, var(--media-hug-ratio-number)) !important;
}
.flow-media > .case-media[data-media-role="primary"] > .case-plate:is([data-media-hug="native-video"], [data-media-hug="provider"], [data-media-hug="original-demo"]):not([data-media-hug-ratio="unknown"]):is(#body-media-hug-override, [data-media-hug]) > :is(img, video, iframe:not(.original-demo-frame)) {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: calc(100% * min(1, var(--media-hug-ratio-number))) !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: left top !important;
}
/* Runtime scales by the full outer width; compensate for a portrait reference
   so its full viewport remains visible and input coordinates remain consistent. */
.flow-media > .case-media[data-media-role="primary"] > .case-plate[data-media-hug="original-demo"]:not([data-media-hug-ratio="unknown"]):is(#body-media-hug-override, [data-media-hug]) > .original-demo-frame {
  transform: scale(calc(var(--original-demo-scale, 1) * min(1, var(--media-hug-ratio-number)))) !important;
  transform-origin: top left;
}
/* All case viewports share the already approved 22px clip. */
.case-media[data-media-hug] > .case-plate[data-media-hug]:is(#body-media-hug-override, [data-media-hug]) {
  border-radius: 22px !important;
  overflow: hidden !important;
}
/* The viewport owns the curve for every media state; focus stays inside it. */
.case-media[data-media-hug] > .case-plate[data-media-hug]:is(#body-media-hug-override, [data-media-hug]) :is(picture, img, video, iframe) {
  border-radius: 0 !important;
}
.case-media[data-media-hug] > .case-plate[data-media-hug]:is(#body-media-hug-override, [data-media-hug]) :focus-visible {
  outline-offset: -4px;
}
/* Tall primary media can stop short of the outer viewport's right edge. */
.flow-media > .case-media[data-media-role="primary"] > .case-plate[data-media-hug]:is(#body-media-hug-override, [data-media-hug]) > :is(img, video, iframe) {
  border-radius: 22px !important;
}
/* Remove only figure-level subgrid stretching; retain the parent columns. */
.related-case-media:has(> .case-media[data-media-hug][data-media-role="related"]):is(#body-media-hug-override, .related-case-media) {
  row-gap: 24px !important;
}
.related-case-media > .case-media[data-media-hug][data-media-role="related"]:is(#body-media-hug-override, [data-media-hug]) {
  display: block !important;
  grid-template-rows: none !important;
  grid-row: auto !important;
  align-self: start !important;
}