/* ------------------------------------------------------------------
   BSLT — articulation stage presentation (v1.1.1, 2026-09-21)

   Presentation only. Owned by the plugin so that the public
   Elementor-hosted ص animation and the plugin-hosted protected ط/خ/ق
   animations share ONE responsive rule and cannot drift apart. Neither
   embedded copy is edited.

   The problem: nothing sets a height. The stage height is derived
   entirely from its width — .bslt-svg is width:100%;height:auto and the
   viewBox fixes the ratio — so on a 960px wrapper the illustration
   renders 645px tall, the stage 663px, and the stage+controls unit
   719px. Below a 93px header that does not fit a 13" laptop, and the
   controls land under the fold.

   The fix: constrain the HEIGHT and let the browser derive the width
   from the viewBox. The aspect ratio is therefore never written down
   here, so no geometry is duplicated and a future viewBox change cannot
   desync from this file. width:fit-content lets the card hug the
   illustration instead of leaving dead paper either side.

   260px = 93 header + 74 unit overhead (16 stage padding + 2 border +
   16 controls margin + 40 controls) + 93 breathing room.

   The doubled .bslt-stage.bslt-stage is load-bearing: the fragment's
   own <style> lives in the BODY, so at equal specificity it wins over
   anything in <head>. (0,3,0) clears it without !important.

   Desktop only. At <=1024 the existing width-driven presentation is
   already short enough and is left exactly as it was.
   ------------------------------------------------------------------ */

@media (min-width: 1025px) {
  .bslt-artic .bslt-stage.bslt-stage {
    width: fit-content;
    margin-inline: auto;
  }

  .bslt-artic .bslt-stage .bslt-svg {
    width: auto;
    height: clamp(360px, calc(100vh - 260px), 540px);
    max-width: 100%;
  }
}