/* ==========================================================================
   CTE Ads — Sidebar (CLEAN v1)
   Policy:
   - Mobile: stacked, centered
   - Tablet: 2-up grid for the two 300px box ads
   - Desktop (>=1025): fixed 300px sidebar column + guaranteed gutters
   - Skyscraper:
     - hidden <1025
     - visible >=1025
     - sticky by making #ai_widget-4 sticky (more reliable than sticking inner div)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Common: box ad alignment (Ad Inserter widgets 5 & 6)
   -------------------------------------------------------------------------- */
#ai_widget-5,
#ai_widget-6{
  display: block;
  text-align: center;
}

#ai_widget-5 > div[id^="div-gpt-ad"],
#ai_widget-6 > div[id^="div-gpt-ad"]{
  display: block;
  width: 300px;
  margin: 0 auto;
  line-height: 0;
}

#ai_widget-5 iframe, #ai_widget-6 iframe,
#ai_widget-5 img,    #ai_widget-6 img{
  display: block;
  margin: 0 auto;
  max-width: 100%;
  border: 0;
}

/* In-article empty slots */
.gpt-in-article:empty{ display:none; }

/* --------------------------------------------------------------------------
   Tablet: two-up grid (only the two box ads side-by-side)
   -------------------------------------------------------------------------- */
@media (min-width:768px) and (max-width:1024.98px){
  aside#secondary,
  aside#secondary .sidebar-inner-wrap{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  aside#secondary .sidebar-inner-wrap{
    display: grid;
    grid-template-columns: repeat(2, 300px);
    gap: 0 14px;
    justify-content: center;
    marginoree; 
    margin-top: 14px;
  }

  /* Any non-box widgets span full width */
  aside#secondary .sidebar-inner-wrap > *:not(#ai_widget-5):not(#ai_widget-6){
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   Mobile: stacked, centered
   -------------------------------------------------------------------------- */
@media (max-width:767.98px){
  aside#secondary,
  aside#secondary .sidebar-inner-wrap{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  aside#secondary .sidebar-inner-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 14px;
  }

  #ai_widget-5, #ai_widget-6{
    width: 100%;
    max-width: 300px;
  }

  aside#secondary .sidebar-inner-wrap > #ai_widget-5{ margin-bottom:14px !important; }
  aside#secondary .sidebar-inner-wrap > #ai_widget-6{ margin-bottom:0 !important; }
}

/* --------------------------------------------------------------------------
   Desktop: layout hardening + gutters + fixed 300px sidebar
   -------------------------------------------------------------------------- */
@media (min-width:1025px){

  /* Keep the content frame gutters consistent in the 1025..1299 range */
  @media (max-width:1299.98px){
    body .content-area .content-container{
      padding-left: 14px !important;
      padding-right: 14px !important;
      box-sizing: border-box;
    }
  }

  /* Allow main column to shrink instead of overflowing */
  body .content-area .content-wrap,
  body .content-area .content-container .content-wrap{
    min-width: 0 !important;
    box-sizing: border-box;
  }

  #primary,
  #main,
  .content-area .site-main{
    min-width: 0 !important;
  }

  /* Sidebar fixed 300px column */
  #secondary{
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  aside#secondary .sidebar-inner-wrap{
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Remove Kadence pseudo separators if they appear */
  aside#secondary .sidebar-inner-wrap::before,
  aside#secondary .sidebar-inner-wrap::after{
    display: none !important;
    content: none !important;
  }

  /* Normalize widget boxes in sidebar */
  aside#secondary .widget,
  aside#secondary .widget_block,
  aside#secondary .wp-block-group{
    margin: 0 !important;
    max-width: none !important;
    overflow: visible !important;
  }

  /* Ensure spacing between widgets is controlled (no flex gap surprises) */
  aside#secondary .sidebar-inner-wrap{ gap: 0 !important; }
  aside#secondary .sidebar-inner-wrap > * + *{ margin-top: 0 !important; }

  /* Spacer widget collapse (if present) */
  aside#secondary .sidebar-inner-wrap > #block-20{
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
  }
  aside#secondary .sidebar-inner-wrap > #block-20 + *{ margin-top: 0 !important; }

  /* Box ad widgets spacing */
  aside#secondary .sidebar-inner-wrap > #ai_widget-5,
  aside#secondary .sidebar-inner-wrap > #ai_widget-6{
    margin-bottom: 14px !important;
  }

  /* Kill Ad Inserter “code-block” margin bleed for sidebar widgets */
  #ai_widget-4 .code-block,
  #ai_widget-5 .code-block,
  #ai_widget-6 .code-block{
    margin: 0 auto !important;
  }

  /* Box widgets: keep centered 300px, no internal margin chaos */
  #ai_widget-5, #ai_widget-6{ margin: 0 !important; }
  #ai_widget-5 *, #ai_widget-6 *{ margin: 0 !important; }
  #ai_widget-5 > *, #ai_widget-6 > *{ margin: 0 auto !important; }

  /* Wallpaper nudge on >=1300 (kept as you had it) */
  @media (min-width:1300px){
    aside#secondary{ margin-left: var(--sidebar-shift) !important; }
  }
}

/* --------------------------------------------------------------------------
   Skyscraper visibility
   -------------------------------------------------------------------------- */
@media (max-width:1024.98px){
  .ad-skyscraper{ display:none !important; }
}
@media (min-width:1025px){
  .ad-skyscraper{ display:block !important; }
}

/* --------------------------------------------------------------------------
   Skyscraper sticky (DESKTOP)
   - Make the widget container sticky (reliable)
   - Neutralize Ad Inserter clamp styles on #ai_widget-4
   - Keep slot div visible to avoid GPT collapse flicker
   -------------------------------------------------------------------------- */
@media (min-width:1025px){

  /* Neutralize Ad Inserter clamp that breaks sticky */
  #ai_widget-4{
    position: sticky !important;
    top: 14px !important;
    z-index: 70 !important;

    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  #ai_widget-4 .code-block{
    overflow: visible !important;
    margin: 0 !important;
  }

  /* Let the widget do the sticking, not the inner ad div */
  #ai_widget-4 .ad-skyscraper{
    position: static !important;
    width: 300px;
    margin: 0 auto !important;
  }

  /* Prevent GPT from visually collapsing the container */
  #ai_widget-4 .ad-skyscraper > div[id^="div-gpt-ad"]{
    display: block !important;
    width: 300px !important;
    max-width: 300px !important;
    min-height: 600px !important;
  }
}