/* ===== Ad badge (STEP 1) ===== */
.ad-slot { position: relative; } /* base wrapper */

/* Square, slightly larger ad badge */
:root { --ad-badge-size: 22px; } /* tweak 20–26px to taste */

.ad-badge{
  position: absolute;
  top: 8px; left: 8px;
  inline-size: var(--ad-badge-size);   /* width */
  block-size:  var(--ad-badge-size);   /* height */
  display: grid; place-items: center;  /* perfectly center "Ad" */
  padding: 0;                          /* square, not pill */
  font: 700 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #111;
  background: #FFD54D;                 /* gold */
  border-radius: 4px;                  /* set 0 for hard corners */
  letter-spacing: .1px;
  z-index: 10000;
  pointer-events: none; user-select: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.06) inset;
}
.ad-badge.xs { --ad-badge-size: 18px; font-weight: 600; font-size: 11px; }
.ad-badge.lg { --ad-badge-size: 26px; font-size: 13px; }
.ad-badge.right { left: auto; right: 8px; }

.ad-slot .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,1px,1px); white-space:nowrap; border:0;
}

/* ===== Rail (scoped, opt-in) ===== */
.rail.rail-300x250{
  display:flex; flex-direction:column; align-self:start; gap:24px;
  width:300px; min-width:300px;
}
.rail.rail-300x250 .ad-slot,
.rail.rail-300x250 > div{
  width:300px; min-width:300px;
  height:250px; min-height:250px;
  display:flex; align-items:center; justify-content:center;
}
.rail.rail-300x250 > div + div{ margin-top:24px; } /* gap fallback */

/* ===== Universal slot sizing ===== */
.ad-slot{ overflow:hidden; background:#0f1320; border-radius:8px; }
.ad-300x250{ width:300px; height:250px; }

/* Anything injected should fill the slot box */
.ad-slot .box,
.ad-slot a,
.ad-slot img,
.ad-slot video,
.ad-slot iframe{
  display:block; width:100%; height:100%;
}

/* Fit media inside without overflow */
.ad-slot img,
.ad-slot video{
  object-fit:contain; /* use 'cover' if you prefer cropping */
}

/* Defensive: creatives can’t break layout */
.ad-slot *{
  max-width:100% !important;
  max-height:100% !important;
  margin:0 !important; padding:0 !important; border:0 !important;
  box-sizing:border-box;
}