/* BJC Smart Studio — independent Frame shape geometry.
 * Frame shapes deliberately do not reuse the normal Style media wrapper.
 * This file owns only Frame geometry. frame-media.css, loaded afterwards,
 * owns explicit aspect-ratio overrides and media fitting (Cover/Contain).
 */
.bjc-studio-section.bjc-studio-frame-design .bjc-frame-baseline-media {
    overflow:hidden;
}

/* Natural: intrinsic media ratio unless the Frame Aspect Ratio control overrides it. */
.bjc-studio-section.bjc-studio-frame-design.bjc-studio-shape-natural .bjc-frame-baseline-media,
.bjc-studio-section.bjc-studio-frame-design .bjc-frame-four-media-item.bjc-studio-shape-natural > .bjc-studio-media {
    aspect-ratio:auto;
    border-radius:0;
    clip-path:none;
    -webkit-mask:none;
    mask:none;
}

.bjc-studio-section.bjc-studio-frame-design.bjc-studio-shape-square .bjc-frame-baseline-media,
.bjc-studio-section.bjc-studio-frame-design .bjc-frame-four-media-item.bjc-studio-shape-square > .bjc-studio-media {
    aspect-ratio:1 / 1;
    border-radius:0;
    clip-path:none;
    -webkit-mask:none;
    mask:none;
}

.bjc-studio-section.bjc-studio-frame-design.bjc-studio-shape-rounded .bjc-frame-baseline-media,
.bjc-studio-section.bjc-studio-frame-design .bjc-frame-four-media-item.bjc-studio-shape-rounded > .bjc-studio-media {
    aspect-ratio:64 / 45;
    border-radius:18px;
    clip-path:none;
    -webkit-mask:none;
    mask:none;
}

.bjc-studio-section.bjc-studio-frame-design.bjc-studio-shape-circle .bjc-frame-baseline-media,
.bjc-studio-section.bjc-studio-frame-design .bjc-frame-four-media-item.bjc-studio-shape-circle > .bjc-studio-media {
    aspect-ratio:1 / 1;
    border-radius:50%;
    clip-path:none;
    -webkit-mask:none;
    mask:none;
}

.bjc-studio-section.bjc-studio-frame-design.bjc-studio-shape-hexagon .bjc-frame-baseline-media,
.bjc-studio-section.bjc-studio-frame-design .bjc-frame-four-media-item.bjc-studio-shape-hexagon > .bjc-studio-media {
    aspect-ratio:1 / 1;
    border-radius:0;
    clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%);
    -webkit-mask:none;
    mask:none;
}

.bjc-studio-section.bjc-studio-frame-design.bjc-studio-shape-pentagon .bjc-frame-baseline-media,
.bjc-studio-section.bjc-studio-frame-design .bjc-frame-four-media-item.bjc-studio-shape-pentagon > .bjc-studio-media {
    aspect-ratio:1 / 1;
    border-radius:0;
    clip-path:none;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M50 3 L97 38 L82 96 L18 96 L3 38 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M50 3 L97 38 L82 96 L18 96 L3 38 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

.bjc-studio-section.bjc-studio-frame-design.bjc-studio-shape-triangle .bjc-frame-baseline-media,
.bjc-studio-section.bjc-studio-frame-design .bjc-frame-four-media-item.bjc-studio-shape-triangle > .bjc-studio-media {
    aspect-ratio:1 / 1;
    border-radius:0;
    clip-path:none;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M50 4 Q53 4 55 9 L96 88 Q99 95 91 96 L9 96 Q1 95 4 88 L45 9 Q47 4 50 4 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M50 4 Q53 4 55 9 L96 88 Q99 95 91 96 L9 96 Q1 95 4 88 L45 9 Q47 4 50 4 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

.bjc-studio-section.bjc-studio-frame-design.bjc-studio-shape-question-mark .bjc-frame-baseline-media,
.bjc-studio-section.bjc-studio-frame-design .bjc-frame-four-media-item.bjc-studio-shape-question-mark > .bjc-studio-media {
    aspect-ratio:1 / 1;
    border-radius:0;
    clip-path:none;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' d='M22 28C22 10 36 2 53 2c19 0 32 10 32 27 0 14-8 21-18 27-8 5-11 8-11 17H38c0-17 7-23 17-29 8-5 12-8 12-15 0-7-5-12-14-12-10 0-15 6-15 15H22V28zm14 58c0-7 5-12 12-12s12 5 12 12-5 12-12 12-12-5-12-12z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' d='M22 28C22 10 36 2 53 2c19 0 32 10 32 27 0 14-8 21-18 27-8 5-11 8-11 17H38c0-17 7-23 17-29 8-5 12-8 12-15 0-7-5-12-14-12-10 0-15 6-15 15H22V28zm14 58c0-7 5-12 12-12s12 5 12 12-5 12-12 12-12-5-12-12z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.bjc-studio-section.bjc-studio-frame-design.bjc-studio-shape-shield .bjc-frame-baseline-media,
.bjc-studio-section.bjc-studio-frame-design .bjc-frame-four-media-item.bjc-studio-shape-shield > .bjc-studio-media {
    aspect-ratio:1 / 1;
    border-radius:0;
    clip-path:polygon(50% 2%,94% 17%,87% 68%,50% 98%,13% 68%,6% 17%);
    -webkit-mask:none;
    mask:none;
}

.bjc-studio-section.bjc-studio-frame-design.bjc-studio-shape-arrow-left .bjc-frame-baseline-media,
.bjc-studio-section.bjc-studio-frame-design .bjc-frame-four-media-item.bjc-studio-shape-arrow-left > .bjc-studio-media {
    aspect-ratio:1.35 / 1;
    border-radius:0;
    clip-path:polygon(98% 23%,42% 23%,42% 5%,2% 50%,42% 95%,42% 77%,98% 77%);
    -webkit-mask:none;
    mask:none;
}

.bjc-studio-section.bjc-studio-frame-design.bjc-studio-shape-arrow-right .bjc-frame-baseline-media,
.bjc-studio-section.bjc-studio-frame-design .bjc-frame-four-media-item.bjc-studio-shape-arrow-right > .bjc-studio-media {
    aspect-ratio:1.35 / 1;
    border-radius:0;
    clip-path:polygon(2% 23%,58% 23%,58% 5%,98% 50%,58% 95%,58% 77%,2% 77%);
    -webkit-mask:none;
    mask:none;
}

.bjc-studio-section.bjc-studio-frame-design.bjc-studio-shape-diamond .bjc-frame-baseline-media,
.bjc-studio-section.bjc-studio-frame-design .bjc-frame-four-media-item.bjc-studio-shape-diamond > .bjc-studio-media {
    aspect-ratio:1 / 1;
    border-radius:0;
    clip-path:polygon(50% 2%,98% 50%,50% 98%,2% 50%);
    -webkit-mask:none;
    mask:none;
}

.bjc-studio-section.bjc-studio-frame-design.bjc-studio-shape-oval .bjc-frame-baseline-media,
.bjc-studio-section.bjc-studio-frame-design .bjc-frame-four-media-item.bjc-studio-shape-oval > .bjc-studio-media {
    aspect-ratio:1.35 / 1;
    border-radius:50%;
    clip-path:none;
    -webkit-mask:none;
    mask:none;
}

.bjc-studio-section.bjc-studio-frame-design.bjc-studio-shape-arch .bjc-frame-baseline-media,
.bjc-studio-section.bjc-studio-frame-design .bjc-frame-four-media-item.bjc-studio-shape-arch > .bjc-studio-media {
    aspect-ratio:4 / 5;
    border-radius:50% 50% 9% 9% / 38% 38% 9% 9%;
    clip-path:none;
    -webkit-mask:none;
    mask:none;
}

.bjc-studio-section.bjc-studio-frame-design.bjc-studio-shape-crooked-left .bjc-frame-baseline-media,
.bjc-studio-section.bjc-studio-frame-design .bjc-frame-four-media-item.bjc-studio-shape-crooked-left > .bjc-studio-media {
    aspect-ratio:64 / 45;
    border-radius:0;
    clip-path:polygon(6% 2%,98% 5%,94% 98%,2% 92%);
    -webkit-mask:none;
    mask:none;
}

.bjc-studio-section.bjc-studio-frame-design.bjc-studio-shape-crooked-right .bjc-frame-baseline-media,
.bjc-studio-section.bjc-studio-frame-design .bjc-frame-four-media-item.bjc-studio-shape-crooked-right > .bjc-studio-media {
    aspect-ratio:64 / 45;
    border-radius:0;
    clip-path:polygon(2% 5%,94% 2%,98% 92%,6% 98%);
    -webkit-mask:none;
    mask:none;
}
