/* BJC Smart Studio — independent Frame Media contract.
 * Shape modules own shape geometry. Frame Media owns fitting/formatting.
 * Builder controls feed variables/classes; no normal Style selectors are used.
 */
.bjc-studio-frame-design .bjc-frame-baseline-media {
    overflow:hidden;
    background-repeat:no-repeat;
    background-size:var(--bjc-frame-media-fit,cover);
    background-position:var(--bjc-frame-media-focus,50% 50%);
}

/* Native media fills the selected Frame viewport. Cover/Contain and focus are
 * applied here, after shape CSS, so the Frame control is authoritative. */
.bjc-studio-section.bjc-studio-frame-design .bjc-frame-baseline-media > img,
.bjc-studio-section.bjc-studio-frame-design .bjc-frame-baseline-media > .bjc-studio-image,
.bjc-studio-section.bjc-studio-frame-design .bjc-frame-baseline-media > video,
.bjc-studio-section.bjc-studio-frame-design .bjc-frame-baseline-media > .bjc-studio-self-video {
    display:block;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:var(--bjc-frame-media-fit,cover) !important;
    object-position:var(--bjc-frame-media-focus,50% 50%) !important;
}

.bjc-studio-frame-design .bjc-frame-baseline-media > iframe,
.bjc-studio-frame-design .bjc-frame-baseline-media > .wp-video,
.bjc-studio-frame-design .bjc-frame-baseline-media > .wp-video-shortcode {
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
}

/* Wrapped shortcode/plugin media stays centred in the Frame viewport. */
.bjc-studio-frame-design .bjc-frame-baseline-media > :not(img):not(video) {
    width:100%; max-width:100%; margin:auto;
}
.bjc-studio-frame-design .bjc-frame-baseline-media > :not(img):not(video) iframe,
.bjc-studio-frame-design .bjc-frame-baseline-media > :not(img):not(video) video {
    display:block; width:100%; max-width:100%; margin:auto;
    object-fit:var(--bjc-frame-media-fit,cover);
    object-position:var(--bjc-frame-media-focus,50% 50%);
}
.bjc-studio-frame-design .bjc-frame-baseline-media > .bjc-studio-shortcode-embed {transform-origin:center center;}

/* Explicit Frame aspect ratio overrides the selected shape's default viewport
 * ratio. Shape Default has no rule here, so the registered shape remains owner. */
.bjc-studio-section.bjc-studio-frame-design.bjc-studio-ratio-16-9 .bjc-frame-baseline-media {aspect-ratio:16 / 9 !important;}
.bjc-studio-section.bjc-studio-frame-design.bjc-studio-ratio-4-3 .bjc-frame-baseline-media {aspect-ratio:4 / 3 !important;}
.bjc-studio-section.bjc-studio-frame-design.bjc-studio-ratio-1-1 .bjc-frame-baseline-media {aspect-ratio:1 / 1 !important;}
.bjc-studio-section.bjc-studio-frame-design.bjc-studio-ratio-3-4 .bjc-frame-baseline-media {aspect-ratio:3 / 4 !important;}
.bjc-studio-section.bjc-studio-frame-design.bjc-studio-ratio-9-16 .bjc-frame-baseline-media {aspect-ratio:9 / 16 !important;}
.bjc-studio-section.bjc-studio-frame-design.bjc-studio-ratio-custom .bjc-frame-baseline-media {aspect-ratio:var(--bjc-frame-ratio-width,9) / var(--bjc-frame-ratio-height,16) !important;}

/* Original ratio is meaningful for ordinary box/radius shapes. For clipped
 * geometric shapes, Shape Default should normally be used to retain the mask. */
.bjc-studio-section.bjc-studio-frame-design.bjc-studio-ratio-original .bjc-frame-baseline-media {
    aspect-ratio:auto !important;
    height:auto !important;
}
.bjc-studio-section.bjc-studio-frame-design.bjc-studio-ratio-original .bjc-frame-baseline-media > img,
.bjc-studio-section.bjc-studio-frame-design.bjc-studio-ratio-original .bjc-frame-baseline-media > .bjc-studio-image,
.bjc-studio-section.bjc-studio-frame-design.bjc-studio-ratio-original .bjc-frame-baseline-media > video {
    height:auto !important;
    max-width:100% !important;
    object-fit:contain !important;
}