/* BJC Smart Studio — Four Media Inside Frame.
 * The existing Frame owns the group. Four Media supplies four bounded media
 * cells inside that Frame; it does not create a second Frame system.
 */

/* A Four Media group owns the geometry inside the Frame viewport. Neutralise
 * the single-media viewport shape/ratio so it cannot stretch or clip the grid. */
.bjc-studio-section.bjc-studio-frame-design.bjc-studio-media-type-four_media .bjc-frame-baseline-media {
    aspect-ratio:auto !important;
    height:auto !important;
    min-height:0 !important;
    border-radius:0 !important;
    clip-path:none !important;
    -webkit-mask:none !important;
    mask:none !important;
    overflow:visible !important;
}

.bjc-studio-section.bjc-studio-frame-design.bjc-studio-media-type-four_media .bjc-frame-baseline-media > .bjc-frame-four-media {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--bjc-frame-four-media-gap,12px);
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    margin:0;
    padding:0;
    align-items:center;
    box-sizing:border-box;
    line-height:0;
}

.bjc-studio-section.bjc-studio-frame-design .bjc-frame-four-media-item {
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
}

/* Every slot has a real bounded viewport. Existing shape files then alter this
 * viewport independently through the item's bjc-studio-shape-* class. */
.bjc-studio-section.bjc-studio-frame-design .bjc-frame-four-media-item > .bjc-studio-media {
    display:block;
    position:relative;
    width:100% !important;
    max-width:100% !important;
    /* The genuine in-flow sizer establishes height. Shape masks/clips still
     * apply to this viewport, but CSS aspect-ratio is not allowed to become a
     * second mobile sizing system. */
    aspect-ratio:auto !important;
    height:auto !important;
    min-width:0;
    overflow:hidden;
    box-sizing:border-box;
    line-height:0;
}

/* Physical flow sizer — same proven principle as Frame Rich Text.
 * This is a genuine transparent IMG with intrinsic dimensions, not an absolute
 * layer and not a CSS-only height calculation. It therefore gives each grid
 * cell, the grid, the Frame box and the outer section a real mobile footprint. */
.bjc-studio-section.bjc-studio-frame-design .bjc-frame-four-media-item > .bjc-studio-media > .bjc-frame-four-media-sizer {
    display:block;
    position:relative;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    visibility:hidden;
    pointer-events:none;
}

.bjc-studio-section.bjc-studio-frame-design .bjc-frame-four-media-item > .bjc-studio-media > .bjc-frame-four-media-image {
    display:block;
    position:absolute;
    inset:0;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:var(--bjc-frame-four-media-fit,cover) !important;
    object-position:var(--bjc-frame-media-focus,50% 50%) !important;
}


/* Four Media fit remains per item. The physical sizer dimensions now own each
 * item's ratio in normal flow. Existing shape clip-path/mask/border-radius
 * rules still style the viewport, but no CSS-only aspect-ratio rule can fight
 * the intrinsic sizer on mobile. */

/* Empty positions deliberately occupy the same geometry as loaded media. */
.bjc-studio-section.bjc-studio-frame-design .bjc-frame-four-media-placeholder {
    display:flex;
    position:absolute;
    inset:0;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    box-sizing:border-box;
    border:1px dashed currentColor;
    opacity:.28;
    line-height:1.2;
    font-size:12px;
}
.bjc-studio-section.bjc-studio-frame-design .bjc-frame-four-media-placeholder > span {
    display:block;
    width:auto;
}

@media (max-width:767px), (orientation:landscape) and (max-width:1024px) and (max-height:600px) {
    /* Four Media owns only its internal arrangement. The proven Frame section,
     * stage, box and media viewport remain untouched and therefore retain their
     * normal page-flow contract. */
    .bjc-studio-section.bjc-studio-frame-design.bjc-studio-media-type-four_media .bjc-frame-baseline-media > .bjc-frame-four-media {
        grid-template-columns:repeat(2,minmax(0,1fr));
        align-items:start;
    }
}