/* Feature Hero: approved original media-above composition lives unmodified in shared.css.
   This arrangement-specific file is reserved for tested adjustments. */

/* 1.0.0-17: mobile-only Feature Hero media-above correction. */
@media (max-width:767px) {
  .bjc-studio-design-core-designs-feature-hero.bjc-studio-arrangement-media-above .bjc-studio-inner {
    display:flex; flex-direction:column; align-items:stretch;
    padding:18px 14px 24px; gap:24px; min-height:0;
  }
  .bjc-studio-design-core-designs-feature-hero.bjc-studio-arrangement-media-above .bjc-studio-media {
    position:relative; inset:auto; top:auto; left:auto; right:auto;
    order:1; align-self:center;
    width:min(100%, calc(var(--bjc-studio-media-width) * 1.65));
    max-width:100%; margin:0 auto; flex:0 0 auto;
  }
  .bjc-studio-design-core-designs-feature-hero.bjc-studio-arrangement-media-above .bjc-studio-copy {
    position:relative; grid-column:auto; grid-row:auto;
    order:2; align-self:stretch; justify-self:stretch;
    width:100%; max-width:100%; min-width:0; margin:0;
    padding:22px 18px; flex:0 1 auto;
  }
  .bjc-studio-design-core-designs-feature-hero.bjc-studio-arrangement-media-above .bjc-studio-inner::before {
    left:8px; right:8px; top:8px; bottom:auto;
    width:auto; height:clamp(160px,55vw,300px);
  }
}