/* Feature Hero — large, media-first vertical editorial presentation.
   Scoped to this design; Core's media/text size and X/Y controls remain live. */
.bjc-studio-design-core-designs-feature-hero {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:linear-gradient(155deg,#17293a 0%,#243d50 45%,#f4eee4 45.1%,#f4eee4 100%);
    border-radius:clamp(14px,2vw,30px);
}
.bjc-studio-design-core-designs-feature-hero.bjc-studio-arrangement-media-above .bjc-studio-inner {
    display:flex;
    flex-direction:column;
    align-items:center;
    max-width:1320px;
    margin-inline:auto;
    padding:clamp(30px,5vw,72px);
    gap:clamp(26px,4vw,58px);
}
/* A broad architectural colour field frames the media without creating a
   second media renderer or interfering with the existing image controls. */
.bjc-studio-design-core-designs-feature-hero.bjc-studio-arrangement-media-above .bjc-studio-inner::before {
    content:"";
    position:absolute;
    z-index:0;
    left:clamp(12px,3vw,42px);
    right:clamp(12px,3vw,42px);
    top:clamp(16px,2.5vw,36px);
    height:clamp(200px,36vw,460px);
    border:1px solid rgba(255,255,255,.28);
    border-radius:clamp(12px,2vw,26px);
    background:linear-gradient(135deg,rgba(120,174,190,.35),rgba(14,31,48,.2));
    box-shadow:inset 0 0 0 10px rgba(255,255,255,.035);
    pointer-events:none;
}
.bjc-studio-design-core-designs-feature-hero.bjc-studio-arrangement-media-above .bjc-studio-media {
    position:relative;
    z-index:1;
    inset:auto;
    order:1;
    flex:0 0 auto;
    align-self:center;
    width:calc(var(--bjc-studio-media-width) * 1.65);
    max-width:100%;
    margin:0 auto;
    /* Core retains the media X/Y transform and all image formatting. */
}
.bjc-studio-design-core-designs-feature-hero.bjc-studio-arrangement-media-above .bjc-studio-copy {
    position:relative;
    z-index:2;
    order:2;
    flex:0 0 auto;
    align-self:center;
    width:min(var(--bjc-studio-text-width),100%);
    max-width:920px;
    margin-inline:auto;
    padding:clamp(22px,3vw,42px) clamp(22px,4vw,64px);
    border-radius:clamp(12px,1.6vw,22px);
    background:#fffaf2;
    box-shadow:0 20px 65px rgba(17,36,52,.14);
    border-top:5px solid #cf865c;
}
.bjc-studio-design-core-designs-feature-hero .bjc-studio-eyebrow {
    color:#a2543d;
    letter-spacing:.2em;
    text-transform:uppercase;
}
.bjc-studio-design-core-designs-feature-hero .bjc-studio-heading {
    font-family:Georgia,'Times New Roman',serif;
    color:#1c3042;
    letter-spacing:-.04em;
    line-height:1.05;
}
.bjc-studio-design-core-designs-feature-hero .bjc-studio-subheading {color:#9b5d47;}
.bjc-studio-design-core-designs-feature-hero .bjc-studio-body {color:#425361;}
@media(max-width:767px) {
    .bjc-studio-design-core-designs-feature-hero.bjc-studio-arrangement-media-above .bjc-studio-inner {
        padding:24px 18px;
        gap:24px;
    }
    .bjc-studio-design-core-designs-feature-hero.bjc-studio-arrangement-media-above .bjc-studio-inner::before {
        left:8px;
        right:8px;
        top:12px;
        height:clamp(160px,55vw,300px);
    }
    .bjc-studio-design-core-designs-feature-hero.bjc-studio-arrangement-media-above .bjc-studio-media {
        width:calc(var(--bjc-studio-media-width) * 1.65);
        max-width:100%;
        align-self:center;
    }
    .bjc-studio-design-core-designs-feature-hero.bjc-studio-arrangement-media-above .bjc-studio-copy {
        width:min(var(--bjc-studio-text-width),100%);
        padding:24px 20px;
    }
}



/* Development 1.0.0-17: Feature Hero mobile layout only. Keep desktop unchanged. */
@media (max-width:767px) {
  .bjc-studio-design-core-designs-feature-hero .bjc-studio-top-content {
    position:relative; z-index:3; width:100%; max-width:100%;
    margin:0; padding:22px 18px 0; overflow-wrap:anywhere;
  }
  .bjc-studio-design-core-designs-feature-hero .bjc-studio-top-content-text {
    max-width:100%; font-size:clamp(1.65rem,8vw,2.7rem); line-height:1.12;
    overflow-wrap:normal; word-break:normal;
  }
  .bjc-studio-design-core-designs-feature-hero .bjc-studio-top-content-image {
    max-width:100%; height:auto;
  }
  .bjc-studio-design-core-designs-feature-hero .bjc-studio-inner {
    box-sizing:border-box; width:100%; max-width:100%; min-width:0;
  }
  .bjc-studio-design-core-designs-feature-hero .bjc-studio-media {
    box-sizing:border-box; min-width:0; max-width:100%;
    translate:0 0; /* Desktop offsets must not push mobile media off-screen. */
  }
  .bjc-studio-design-core-designs-feature-hero .bjc-studio-copy {
    box-sizing:border-box; min-width:0; max-width:100%;
    translate:0 0; overflow-wrap:break-word;
  }
}