/* Shared mobile presentation contract — Feature Hero implementation from approved Master 2.0.0-5.
   Desktop has four arrangements; mobile has two. Future design packs should
   copy this file and replace the opt-in design selector with their own IDs.
   Core renderer, desktop layout, media picker and native video playback stay intact. */
@media (max-width:767px) {
 /* The section top-content is outside .bjc-studio-inner in the Core renderer. */
 .bjc-studio-section.bjc-studio-design-core-designs-feature-hero {
   width:100%; max-width:100%; min-width:0;
 }
 .bjc-studio-section.bjc-studio-design-core-designs-feature-hero .bjc-studio-inner {
   display:flex; flex-direction:column; align-items:stretch;
   width:100%; max-width:100%; min-width:0;
   min-height:0; padding:16px; gap:20px;
 }
 /* Core makes side-by-side media absolute on desktop; it must participate
    in normal flow on phones, otherwise it overlaps headings and copy. */
 .bjc-studio-section.bjc-studio-design-core-designs-feature-hero .bjc-studio-inner > .bjc-studio-media {
   position:relative; inset:auto; top:auto; right:auto; bottom:auto; left:auto;
   flex:0 1 auto; display:block;
   width:100%; max-width:100%; min-width:0;
   margin:0 auto; align-self:center; justify-self:center;
   translate:none; transform:none;
 }
 /* Horizontal Core arrangements retain their desktop width on the actual
    media element. Override that width only on phones; do not alter the two
    already-passed vertical arrangements or the Core renderer. The image itself
    must fill its now-fluid parent rather than retaining its intrinsic width. */
 .bjc-studio-section.bjc-studio-design-core-designs-feature-hero:is(.bjc-studio-arrangement-media-left,.bjc-studio-arrangement-text-left) .bjc-studio-inner > .bjc-studio-media {
   width:100% !important; max-width:100% !important;
 }
 .bjc-studio-section.bjc-studio-design-core-designs-feature-hero:is(.bjc-studio-arrangement-media-left,.bjc-studio-arrangement-text-left) .bjc-studio-inner > .bjc-studio-media > img {
   display:block; width:100%; max-width:100%; height:auto;
 }
 /* Full available text width; no fixed height so long copy grows naturally. */
 .bjc-studio-section.bjc-studio-design-core-designs-feature-hero .bjc-studio-inner > .bjc-studio-copy {
   position:relative; grid-column:auto; grid-row:auto;
   flex:0 1 auto; width:100%; max-width:100%; min-width:0;
   height:auto; margin:0; align-self:stretch; justify-self:stretch;
   translate:none; transform:none; overflow-wrap:anywhere;
 }
 /* The only two mobile orders, mapped from four desktop choices. */
 .bjc-studio-section.bjc-studio-design-core-designs-feature-hero:is(.bjc-studio-arrangement-media-left,.bjc-studio-arrangement-media-above) .bjc-studio-inner > .bjc-studio-media {order:1;}
 .bjc-studio-section.bjc-studio-design-core-designs-feature-hero:is(.bjc-studio-arrangement-media-left,.bjc-studio-arrangement-media-above) .bjc-studio-inner > .bjc-studio-copy {order:2;}
 .bjc-studio-section.bjc-studio-design-core-designs-feature-hero:is(.bjc-studio-arrangement-text-left,.bjc-studio-arrangement-text-above) .bjc-studio-inner > .bjc-studio-copy {order:1;}
 .bjc-studio-section.bjc-studio-design-core-designs-feature-hero:is(.bjc-studio-arrangement-text-left,.bjc-studio-arrangement-text-above) .bjc-studio-inner > .bjc-studio-media {order:2;}
 /* Existing Core owns image ratios and video player behaviour. Only cap the
    outer viewport here. Natural-shape video remains 16:9 where Core provides it. */
 .bjc-studio-section.bjc-studio-design-core-designs-feature-hero .bjc-studio-media > img,
 .bjc-studio-section.bjc-studio-design-core-designs-feature-hero .bjc-studio-media > video,
 .bjc-studio-section.bjc-studio-design-core-designs-feature-hero .bjc-studio-media > iframe {max-width:100%;}
 .bjc-studio-section.bjc-studio-design-core-designs-feature-hero .bjc-studio-top-content {
   position:relative; max-width:100%; min-width:0;
 }
}