/* ==========================================================================
     DESKTOP ONLY 
     Restricts all custom logic to devices with a mouse/trackpad.
     Touch devices will ignore this and use standard Ceros behavior.
     ========================================================================== */
  
  /* -----------------------------------------------------------
     SCENARIO A: WIDE DESKTOP (> 1280px)
     Behavior: Fixed Height "Cover" Mode. Crops left/right sides.
  ----------------------------------------------------------- */
  @media (pointer: fine) and (hover: hover) and (min-width: 1281px) {

    .ceros-container {
      position: relative;
      width: 100%;
      height: calc(var(--ceros-h) * 1px);
      overflow: hidden;
    }

    /* Neutralize Ceros wrapper */
    .ceros-container > div {
      position: static !important;
      padding: 0 !important;
      height: 0 !important;
    }

    .ceros-container iframe {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;

      /* Lock width to viewport, scale height to match aspect ratio */
      width: 100vw !important;
      height: calc(100vw * (var(--ceros-h) / var(--ceros-w))) !important;

      /* Constraints: Never shrink below native size */
      min-width: calc(var(--ceros-w) * 1px) !important;
      min-height: calc(var(--ceros-h) * 1px) !important;
      
      border: 0 !important;
    }
  }

  /* -----------------------------------------------------------
     SCENARIO B: NARROW DESKTOP (<= 1280px)
     Behavior: Scales down proportionally.
     The central 1280px of the canvas fills the viewport width.
  ----------------------------------------------------------- */
  @media (pointer: fine) and (hover: hover) and (max-width: 1280px) {

    .ceros-container {
      position: relative;
      width: 100%;
      overflow: hidden;
      /* Container height scales based on the 1280px safe zone ratio */
      height: calc(100vw * (var(--ceros-h) / 1280)) !important;
    }

    /* Neutralize Ceros wrapper */
    .ceros-container > div {
      position: static !important;
      padding: 0 !important;
      height: 0 !important;
    }

    .ceros-container iframe {
      position: absolute !important;
      top: 0 !important;
      left: 50% !important;
      transform: translateX(-50%) !important; /* Center horizontally only */

      /* Remove min/max constraints to allow shrinking */
      min-width: 0 !important;
      min-height: 0 !important;
      max-width: none !important;

      /* Width calculation: Scale so central 1280px = 100vw */
      width: calc(100vw * (var(--ceros-w) / 1280)) !important;
      height: calc(100vw * (var(--ceros-h) / 1280)) !important;
      
      border: 0 !important;
    }
  }