/* BJC Smart Studio — independent Frame presentation contract.
 * Frame layout is intentionally separate from normal Style layout.
 * Builder controls write Frame variables; this file owns Frame geometry.
 */
.bjc-studio-frame-design {
    --bjc-frame-width: 900px;
    --bjc-frame-media-width: 100%;
    --bjc-frame-baseline-padding: 0px;
    --bjc-frame-baseline-thickness: 2px;
    --bjc-frame-baseline-accent: #6750a4;
    --bjc-frame-baseline-background: transparent;
    --bjc-frame-baseline-radius: 10px;
    --bjc-frame-media-fit: cover;
    --bjc-frame-media-focus: 50% 50%;
    --bjc-frame-rich-text-width: 100%;
    --bjc-frame-rich-text-padding-top: 12px;
    --bjc-frame-rich-text-padding-right: 12px;
    --bjc-frame-rich-text-padding-bottom: 12px;
    --bjc-frame-rich-text-padding-left: 12px;
    --bjc-frame-rich-text-inset-top: 0px;
    --bjc-frame-rich-text-inset-right: 0px;
    --bjc-frame-rich-text-inset-bottom: 0px;
    --bjc-frame-rich-text-inset-left: 0px;
    --bjc-frame-rich-text-vpos: center;
}

.bjc-studio-frame-design .bjc-frame-baseline-stage {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:min(var(--bjc-frame-width), 100%);
    max-width:100%;
    min-width:0;
    margin:0 auto;
    padding:0;
    box-sizing:border-box;
}

/* Top Content, frame box and below-frame footer use the same media-width
 * contract, so their left/right edges always remain aligned. */
.bjc-studio-frame-design .bjc-frame-baseline-stage > .bjc-studio-top-content,
.bjc-studio-frame-design .bjc-frame-baseline-box,
.bjc-studio-frame-design .bjc-studio-frame-footer-below {
    width:min(var(--bjc-frame-media-width), 100%);
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
}

.bjc-studio-frame-design .bjc-frame-baseline-stage > .bjc-studio-top-content {
    display:block;
}

.bjc-studio-frame-design .bjc-frame-baseline-box {
    display:block;
    margin:0;
    padding:var(--bjc-frame-baseline-padding);
    border:var(--bjc-frame-baseline-thickness) solid var(--bjc-frame-baseline-accent);
    line-height:0;
    background:var(--bjc-frame-baseline-background);
    border-radius:var(--bjc-frame-baseline-radius);
    overflow:visible;
}

.bjc-studio-frame-design .bjc-frame-baseline-media {
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
    padding:0;
    line-height:0;
    box-sizing:border-box;
}

.bjc-studio-frame-design .bjc-frame-baseline-media > img,
.bjc-studio-frame-design .bjc-frame-baseline-media > video,
.bjc-studio-frame-design .bjc-frame-baseline-media > iframe {
    display:block;
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
}

.bjc-studio-frame-design .bjc-studio-frame-footer {display:block;box-sizing:border-box;line-height:normal;}
.bjc-studio-frame-design .bjc-studio-frame-footer-inside {width:100%;}
.bjc-studio-frame-design .bjc-studio-frame-footer-below {margin:0;}
.bjc-studio-frame-design .bjc-studio-frame-caption,
.bjc-studio-frame-design .bjc-studio-frame-cta {line-height:normal;}

/* Independent Frame Links. */
.bjc-studio-frame-design{--bjc-frame-action-color:var(--bjc-frame-baseline-accent,#6750a4);--bjc-frame-action-text:#fff}
.bjc-studio-frame-design .bjc-studio-frame-actions{display:block;width:100%;line-height:normal;margin-top:12px}
.bjc-studio-frame-design .bjc-studio-frame-action{display:inline-block;color:var(--bjc-frame-action-color);text-decoration:none;line-height:1.2}
.bjc-studio-frame-design .bjc-studio-frame-button{padding:.72em 1.15em;border:2px solid var(--bjc-frame-action-color)}
.bjc-studio-frame-design .bjc-studio-frame-button-filled,.bjc-studio-frame-design .bjc-studio-frame-button-pill{background:var(--bjc-frame-action-color);color:var(--bjc-frame-action-text)}
.bjc-studio-frame-design .bjc-studio-frame-button-outline{background:transparent;color:var(--bjc-frame-action-color)}
.bjc-studio-frame-design .bjc-studio-frame-button-soft{background:color-mix(in srgb,var(--bjc-frame-action-color) 18%,transparent);color:var(--bjc-frame-action-color);border-color:transparent}
.bjc-studio-frame-design .bjc-studio-frame-button-pill{border-radius:999px}