/* Ad slot: fixed reserved size so ads never shift the page (07 §11, rule 38). Never inside the test card.
   Generated slots carry their unit sizes as --ad-w/--ad-h (desktop) and --ad-w-m/--ad-h-m (mobile), from site.json.
   While waiting (before the test finishes) the space is reserved but invisible; "empty" = no ad allowed or filled. */
.ad-slot { margin-block: var(--space-6); text-align: center; }
.ad-slot__label { display: block; margin-bottom: var(--space-1); font-size: var(--text-tiny); color: var(--color-text-muted); }
.ad-slot__box {
  display: grid; place-items: center; margin-inline: auto; max-width: 100%;
  background: var(--color-ad-bg); border-radius: var(--radius-sm); overflow: hidden;
}
.ad-slot__box iframe { display: block; width: 100%; height: 100%; border: 0; }

.ad-slot[data-ad-slot] .ad-slot__box { width: var(--ad-w-m, var(--ad-w-rect)); height: var(--ad-h-m, var(--ad-h-rect)); }
@media (min-width: 768px) {
  .ad-slot[data-ad-slot] .ad-slot__box { width: var(--ad-w, var(--ad-w-banner)); height: var(--ad-h, var(--ad-h-banner)); }
}
.ad-slot[data-state="waiting"] { visibility: hidden; }
.ad-slot[data-state="empty"] { display: none; }

/* Fixed-size variants used on /styleguide */
.ad-slot--banner .ad-slot__box { width: var(--ad-w-banner); min-height: var(--ad-h-banner); }
.ad-slot--rect .ad-slot__box { width: var(--ad-w-rect); min-height: var(--ad-h-rect); }
.ad-slot--responsive .ad-slot__box { width: var(--ad-w-rect); min-height: var(--ad-h-rect); }
@media (min-width: 768px) {
  .ad-slot--responsive .ad-slot__box { width: var(--ad-w-banner); min-height: var(--ad-h-banner); }
}