/* Shared mobile presentation contract — Classic Split adaptation of 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-classic-split {
   width:100%; max-width:100%; min-width:0;
 }
 .bjc-studio-section.bjc-studio-design-core-designs-classic-split .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-classic-split .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-classic-split: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-classic-split: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-classic-split .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-classic-split: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-classic-split: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-classic-split: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-classic-split: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-classic-split .bjc-studio-media > img,
 .bjc-studio-section.bjc-studio-design-core-designs-classic-split .bjc-studio-media > video,
 .bjc-studio-section.bjc-studio-design-core-designs-classic-split .bjc-studio-media > iframe {max-width:100%;}
 .bjc-studio-section.bjc-studio-design-core-designs-classic-split .bjc-studio-top-content {
   position:relative; max-width:100%; min-width:0;
 }
}

/* 1.0.0-45 — Classic Split portrait flow containment.
 * Core's standard Style template places Top Content outside .bjc-studio-inner.
 * Classic Split now owns a lightweight flow wrapper. On desktop it has no box;
 * on portrait it becomes the physical vertical container so Top Content height
 * is completed before the inner media/text stage begins. This is intentionally
 * structural: no guessed offsets, no negative-margin compensation, no change to
 * oval geometry, orbit/dots, or the user's desktop Media X/Y position. */
.bjc-studio-section.bjc-studio-design-core-designs-classic-split > .bjc-classic-split-flow {
  display:contents;
}
@media (max-width:767px) {
  .bjc-studio-section.bjc-studio-design-core-designs-classic-split > .bjc-classic-split-flow {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .bjc-studio-section.bjc-studio-design-core-designs-classic-split > .bjc-classic-split-flow > .bjc-studio-top-content {
    position:relative;
    z-index:4;
    flex:0 0 auto;
    width:100%;
    max-width:100%;
    min-width:0;
    height:auto;
    float:none;
    clear:both;
  }
  .bjc-studio-section.bjc-studio-design-core-designs-classic-split > .bjc-classic-split-flow > .bjc-studio-top-content::after {
    content:"";
    display:block;
    clear:both;
  }
  .bjc-studio-section.bjc-studio-design-core-designs-classic-split > .bjc-classic-split-flow > .bjc-studio-top-content > .bjc-studio-top-content-image {
    position:relative;
    display:inline-block;
    max-width:100%;
    height:auto;
    float:none;
    vertical-align:top;
  }
  .bjc-studio-section.bjc-studio-design-core-designs-classic-split > .bjc-classic-split-flow > .bjc-studio-inner {
    position:relative;
    z-index:1;
    flex:0 0 auto;
    width:100%;
    max-width:100%;
    min-width:0;
  }
}