/**
 * bbm-ad-stack shared slot CSS (CLS contract)
 *
 * Loaded by every pilot theme + injected by prebid-loader.js as a fallback.
 * Goal: reserve stable space before the auction so fill / no-fill does not
 * shove article content around (Mediavine-style layout stability).
 *
 * Theme requirements:
 * - Mid-article: #bbm-ad-incontent.bbm-ad.bbm-ad--incontent
 * - Sticky: #bbm-ad-sticky.bbm-ad.bbm-ad--sticky (present on single posts)
 * - Do NOT hide empty slots with display:none (that causes CLS on fill).
 */

.bbm-ad {
  display: block;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
}

/* In-content: reserve the common MPU / half-page footprint. */
#bbm-ad-incontent,
.bbm-ad--incontent {
  width: 100%;
  max-width: 336px;
  min-height: 280px;
  margin-top: 36px;
  margin-bottom: 36px;
  background: transparent;
}

/* Sticky footer: always occupy its bar so it does not pop in later. */
#bbm-ad-sticky,
.bbm-ad--sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  margin: 0;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  min-height: 62px;
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
}

/* Keep reserved height even when GPT / Prebid leave the node empty. */
#bbm-ad-incontent:empty,
.bbm-ad--incontent:empty {
  min-height: 280px;
}

#bbm-ad-sticky:empty,
.bbm-ad--sticky:empty {
  display: block;
  min-height: 62px;
}

/* Body clearance whenever the sticky node exists (first paint, before JS). */
body:has(#bbm-ad-sticky) {
  padding-bottom: 78px !important;
}

body.admin-bar:has(#bbm-ad-sticky) #bbm-ad-sticky,
body.admin-bar .bbm-ad--sticky {
  z-index: 99990;
}

/* Filled slots may grow slightly; never shrink below reservation. */
.bbm-ad--filled {
  min-height: inherit;
}

.bbm-ad iframe {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}