/* ==========================================================================
   CTE Wallpapers — SIMPLE v2 (GPT-SAFE, CLASS-GATED)
   --------------------------------------------------------------------------
   Policy:
   - GPT slots are ALWAYS defined/loaded (handled in Ad Inserter JS).
   - VISUAL visibility is CSS-only:
       * Rails OFF when html does NOT have .cte-rails-on
       * Rails ON  when html HAS .cte-rails-on
   - Breakpoint source of truth: railsShouldBeOn() in GPT script
     (clientWidth >= 1300 recommended; you can cushion there if needed).
   - Never display:none GPT slots (keep them alive).
   ========================================================================== */

:root{
  /* JS may set these; safe defaults */
  --cte-rail-scale-dyn: 1;
  --cte-rail-w-vis: 300px;
  --cte-rail-h-vis: 1050px;
}

/* --------------------------------------------------------------------------
   1) Rail containers: fixed + vertically centered
   Default state = HIDDEN (but alive)
   -------------------------------------------------------------------------- */
.wallpaper-rail,
#wallpaper-left,
#wallpaper-right{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);

  width: var(--cte-rail-w-vis);
  height: var(--cte-rail-h-vis);

  z-index: 2147481000;
  overflow: visible;

  /* container itself does not steal clicks */
  pointer-events: none !important;

  /* DEFAULT: hidden */
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Show rails only when GPT JS says rails are ON */
html.cte-rails-on .wallpaper-rail,
html.cte-rails-on #wallpaper-left,
html.cte-rails-on #wallpaper-right{
  opacity: 1 !important;
  visibility: visible !important;
}

/* --------------------------------------------------------------------------
   2) GPT slot inside rail: scale INSIDE, so container box stays measurable
   -------------------------------------------------------------------------- */
.wallpaper-rail div[id^="div-gpt-ad"]{
  width: var(--cte-rail-w) !important;
  height: var(--cte-rail-h) !important;

  transform: scale(var(--cte-rail-scale-dyn));
  transform-origin: top left;

  /* slot should be clickable (iframe inherits) */
  pointer-events: auto !important;

  /* keep it stable */
  display: block !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
}

/* iframe also clickable */
.wallpaper-rail iframe{
  pointer-events: auto !important;
  display: block !important;
  width: var(--cte-rail-w) !important;
  height: var(--cte-rail-h) !important;
  border: 0 !important;
}

/* GPT sometimes tries inline display:none; override */
.wallpaper-rail div[id^="div-gpt-ad"][style*="display: none"]{
  display: block !important;
}