/* New Petrol 02: mobile and tablet production proposal.
 * Load AFTER haltung-petrol-preview.css (or its production successor).
 * No existing rule at >=1281 px is changed.
 * All raster layers retain their source aspect ratio. Only paint, never the KV,
 * is clipped. The middle material uses proportional cover, never fill/stretch.
 */
body#start.adults-reference.compact-layout .attitude-petrol .haltung-mobile-cap,
body#start.adults-reference.compact-layout .attitude-petrol .haltung-mobile-stagepaint {
  display:none;
}

@media(max-width:1280px) {
  body#start.adults-reference.compact-layout .attitude.attitude-petrol {
    --haltung-mobile-width:min(100cqw,720px);
    width:100%;
    max-width:720px;
    min-height:0;
    margin-inline:auto;
    padding:clamp(76px,10cqw,132px) 0 24px;
    overflow:visible;
    background:transparent;
  }

  /* Layer 1: the accepted painting's true, proportional upper brush edge.
     The floor and pearls lie outside this decorative crop. */
  body#start.adults-reference.compact-layout .attitude-petrol .haltung-mobile-cap {
    position:absolute;
    inset:0 0 auto;
    display:block;
    height:calc(var(--haltung-mobile-width) * .24);
    overflow:hidden;
    pointer-events:none;
    z-index:1;
    mask-image:linear-gradient(to bottom,#000 0,#000 75%,transparent);
  }
  body#start.adults-reference.compact-layout .attitude-petrol .haltung-mobile-cap img {
    display:block;
    width:100%;
    height:auto;
    max-width:none;
  }

  /* Layer 2: genuinely painted petrol, independent of the amount of text.
     The SVG only controls the fine, non-periodic side boundary. It is not a
     substitute for paint. Long overlaps join the top and the scene without
     a flat horizontal cut. */
  body#start.adults-reference.compact-layout .attitude-petrol .haltung-mobile-ground {
    position:absolute;
    inset:calc(var(--haltung-mobile-width) * .14) 1.5%
      calc(var(--haltung-mobile-width) * .14 + 24px);
    display:block;
    pointer-events:none;
    z-index:0;
    background:#0b4045 url(adults-haltung-mobile-texture-v1.webp) center / cover no-repeat;
    mask-image:url(adults-haltung-mobile-sides-v141.svg),
      linear-gradient(to bottom,transparent,#000 calc(var(--haltung-mobile-width) * .02),#000 calc(100% - 20px),transparent);
    mask-size:100% 100%,100% 100%;
    mask-repeat:no-repeat;
    mask-composite:intersect;
  }
  body#start.adults-reference.compact-layout .attitude-petrol .haltung-petrol-paint {
    display:none;
  }

  body#start.adults-reference.compact-layout .attitude.attitude-petrol .attitude-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:start;
    gap:0;
    width:100%;
    max-width:none;
    margin-inline:0;
  }
  body#start.adults-reference.compact-layout .attitude.attitude-petrol .attitude-copy {
    width:84%;
    max-width:660px;
    margin-inline:auto;
    padding:0;
    transform:none;
  }
  body#start.adults-reference.compact-layout .attitude.attitude-petrol .attitude-columns {
    display:block;
    width:auto;
    max-width:none;
    columns:auto;
  }

  /* Layer 3: a native-ratio stage. Its background is a CSS viewport onto the
     right 60% of the selected standalone painting, never a page screenshot.
     Painting and its floor pearls scale uniformly with this entire stage. */
  body#start.adults-reference.compact-layout .attitude-petrol .haltung-scene {
    position:relative;
    width:100%;
    max-width:none;
    height:auto;
    aspect-ratio:3 / 2;
    margin:24px 0 0;
    justify-self:stretch;
    overflow:visible;
  }
  body#start.adults-reference.compact-layout .attitude-petrol .haltung-mobile-stagepaint {
    position:absolute;
    inset:0;
    display:block;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
    mask-image:linear-gradient(to bottom,transparent 28%,#000 58%,#000),
      linear-gradient(to right,transparent,#000 7%,#000 96%,transparent);
    mask-size:100% 100%,100% 100%;
    mask-repeat:no-repeat;
    mask-composite:intersect;
  }
  body#start.adults-reference.compact-layout .attitude-petrol .haltung-mobile-stagepaint img {
    position:absolute;
    right:0;
    bottom:0;
    display:block;
    width:166.666667%;
    height:auto;
    max-width:none;
  }
  body#start.adults-reference.compact-layout .attitude-petrol .haltung-original-kv {
    position:absolute;
    left:2%;
    top:10%;
    right:auto;
    bottom:auto;
    display:block;
    width:96%;
    height:auto;
    max-width:none;
    object-fit:contain;
    transform:none;
    mask-image:none;
    filter:none;
    z-index:1;
  }
}

@media(max-width:420px) {
  body#start.adults-reference.compact-layout .attitude.attitude-petrol .attitude-copy {
    width:86%;
  }
  body#start.adults-reference.compact-layout .attitude-petrol .haltung-scene {
    margin-top:28px;
  }
}