/* =========================================================
   Desktop "Grid/Clamp" Mode for left media (image/video)
   Keeps the avatar/video visible and prevents it from eating
   too much width on very wide screens.

   Layers:
   - Background (solid/gradient + optional pattern)
   - Media (image/video) + optional divider line
   - Content (Elementor / posts)
   ========================================================= */

@media (min-width: 1024px){

  /* Compute a responsive width for the media column */
  .site-content.nbt-leftimg-layout-clamp{
    /* The ideal is driven by the existing % slider (stored as --nbt-main-left-ideal-vw). */
    --nbt-main-left-clamp-w: clamp(
      var(--nbt-main-left-clamp-min, 220px),
      calc(var(--nbt-main-left-ideal-vw, 25) * 1vw),
      var(--nbt-main-left-clamp-max, 360px)
    );
  }

  /* Apply the clamp width to the media container (image/video layer) */
  .site-content.nbt-leftimg-layout-clamp .nbt-main-bg-left{
    width: var(--nbt-main-left-clamp-w) !important;
  }

  /* ===== FIXED: When media is on the LEFT (default) ===== */
  .site-content.nbt-leftimg-layout-clamp.nbt-leftimg-side-left.nbt-leftimg-reserve .nbt-main-inner,
  .site-content.nbt-leftimg-layout-clamp.nbt-leftimg-reserve .nbt-main-inner{
    padding-right: 0 !important;
    
  }

  /* When media is on the RIGHT */
  .site-content.nbt-leftimg-layout-clamp.nbt-leftimg-side-right.nbt-leftimg-reserve .nbt-main-inner{
    padding-left: 0 !important;
    padding-right: calc(var(--nbt-main-left-clamp-w) + var(--nbt-main-left-gap, 8px)) !important;
  }

  /* If the theme uses a right inset to align with header logo, keep it (when available) */
  .site-content.nbt-leftimg-layout-clamp.nbt-leftimg-side-right.nbt-leftimg-reserve .nbt-main-inner{
    padding-right: calc(var(--nbt-main-left-clamp-w) + var(--nbt-main-left-gap, 8px) + var(--nbt-main-right-inset, 0px)) !important;
  }

  /* Safe portrait: never crop the avatar/video on desktop */
  .site-content.nbt-leftimg-safe-portrait .nbt-main-bg-left{
    background-size: contain !important;
  }
  .site-content.nbt-leftimg-safe-portrait .nbt-main-bg-left video.nbt-main-bg-video{
    object-fit: contain !important;
  }

  /* Keep correct side positioning (LTR/RTL-safe) */
  .site-content.nbt-leftimg-safe-portrait .nbt-main-bg-left{
    background-position: left bottom;
  }
  .site-content.nbt-leftimg-side-right.nbt-leftimg-safe-portrait .nbt-main-bg-left{
    background-position: right bottom;
  }
  .site-content.nbt-leftimg-side-right.nbt-leftimg-safe-portrait .nbt-main-bg-left video.nbt-main-bg-video{
    object-position: right bottom !important;
  }

}