/* Media Focus — oversized asymmetrical gallery stage with a compact supporting
   text card. Existing Core media sizing, independent X/Y and text controls remain live. */
.bjc-studio-design-core-designs-media-focus {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:#e5edcf;
    border-radius:clamp(10px,1.2vw,18px);
}
.bjc-studio-design-core-designs-media-focus.bjc-studio-arrangement-media-left .bjc-studio-inner {
    position:relative;
    isolation:isolate;
    max-width:1500px;
    min-height:clamp(480px,51vw,750px);
    margin-inline:auto;
    padding:clamp(28px,4vw,64px);
    display:grid;
    grid-template-columns:minmax(0,1.75fr) minmax(340px,1fr);
    align-items:end;
    column-gap:clamp(20px,3vw,48px);
}
/* The angular gallery field is decorative only, beneath all Core media slots. */
.bjc-studio-design-core-designs-media-focus.bjc-studio-arrangement-media-left .bjc-studio-inner::before {
    content:"";
    position:absolute;
    z-index:-1;
    inset:clamp(12px,2vw,30px) clamp(12px,2vw,30px) clamp(45px,6vw,90px) clamp(12px,2vw,30px);
    background:#a6d83d;
    clip-path:polygon(0 0,94% 0,100% 14%,100% 100%,6% 100%,0 86%);
    pointer-events:none;
}
.bjc-studio-design-core-designs-media-focus.bjc-studio-arrangement-media-left .bjc-studio-inner::after {
    content:"";
    position:absolute;
    z-index:-1;
    width:clamp(110px,19vw,285px);
    aspect-ratio:1;
    border:clamp(15px,2.6vw,38px) solid #e7794e;
    border-radius:50%;
    right:clamp(-80px,-4vw,-20px);
    top:clamp(-90px,-5vw,-25px);
    pointer-events:none;
}
.bjc-studio-design-core-designs-media-focus.bjc-studio-arrangement-media-left .bjc-studio-media {
    top:clamp(28px,4vw,64px);
    left:clamp(28px,4vw,64px);
    max-width:calc(65% - clamp(28px,4vw,64px));
    margin:0;
    /* No width or transform override: Core's Media Width and X/Y stay active. */
}
.bjc-studio-design-core-designs-media-focus.bjc-studio-arrangement-media-left .bjc-studio-copy {
    position:relative;
    z-index:2;
    grid-column:2;
    grid-row:1;
    align-self:end;
    justify-self:end;
    min-width:0;
    width:100%;
    max-width:440px;
    overflow-wrap:anywhere;
    margin-bottom:clamp(18px,3vw,46px);
    padding:clamp(20px,2.5vw,36px);
    background:#233e9b;
    color:#fff;
    border-radius:3px 30px 3px 3px;
    box-shadow:12px 12px 0 #e7794e;
}
/* The image itself has an asymmetric clipped silhouette; the media wrapper
   and Core's sizing, framing and independent positioning stay untouched. */
.bjc-studio-design-core-designs-media-focus.bjc-studio-arrangement-media-left .bjc-studio-media > img,
.bjc-studio-design-core-designs-media-focus.bjc-studio-arrangement-media-left .bjc-studio-media > video {
    clip-path:polygon(0 0,91% 0,100% 13%,100% 87%,91% 100%,0 100%,0 0);
    border-radius:4px 34px 34px 4px;
}
.bjc-studio-design-core-designs-media-focus .bjc-studio-eyebrow {
    color:#d7ef85;
    text-transform:uppercase;
    letter-spacing:.19em;
}
.bjc-studio-design-core-designs-media-focus .bjc-studio-heading {
    color:#fff;
    font-family:Arial,Helvetica,sans-serif;
    font-weight:800;
    letter-spacing:-.055em;
    line-height:1.08;
    font-size:clamp(29px,3.1vw,50px);
    overflow-wrap:break-word;
}
.bjc-studio-design-core-designs-media-focus .bjc-studio-subheading {color:#e6eaff;}
.bjc-studio-design-core-designs-media-focus .bjc-studio-body {color:#f0f2ff;}
@media(max-width:767px) {
    .bjc-studio-design-core-designs-media-focus.bjc-studio-arrangement-media-left .bjc-studio-inner {
        display:flex;
        flex-direction:column;
        align-items:stretch;
        min-height:0;
        padding:clamp(20px,5vw,36px);
        gap:clamp(26px,6vw,44px);
    }
    .bjc-studio-design-core-designs-media-focus.bjc-studio-arrangement-media-left .bjc-studio-inner::before {
        inset:10px 10px 27% 10px;
    }
    .bjc-studio-design-core-designs-media-focus.bjc-studio-arrangement-media-left .bjc-studio-inner::after {
        width:130px;
        top:-40px;
        right:-40px;
    }
    .bjc-studio-design-core-designs-media-focus.bjc-studio-arrangement-media-left .bjc-studio-media {
        position:relative;
        top:auto;
        left:auto;
        max-width:100%;
        margin-inline:auto;
        align-self:center;
    }
    .bjc-studio-design-core-designs-media-focus.bjc-studio-arrangement-media-left .bjc-studio-copy {
        width:min(var(--bjc-studio-text-width),100%);
        max-width:440px;
        align-self:flex-end;
        margin:0 12px 12px 0;
    }
}