/**
 * @file
 * Styles for BA AdLib advertisement slots.
 */

#block-ad-slot-top-header-wallpaper-1-2 {
  width: 100%;
}

.advertisement-slot {
  position: relative;
}

/* Consent states */
.advertisement-slot--no-consent {
  display: none !important;
}

.advertisement-slot--consent-given {
  /* Ready to receive ads */
}

.advertisement-slot--loading {
  min-height: 100px;
}

/*
 * Reserve space for known ad sizes on desktop to prevent CLS.
 * On mobile, ad sizes vary (320x50 vs 320x100) so we avoid reserving
 * a fixed height. The --empty and --no-consent states use display:none
 * which collapses the reserved space when no ad is served.
 */
@media (width >= 48rem) {
  .advertisement-slot[data-ba-slot="Ads_BA_BS"],
  .advertisement-slot[data-ba-slot="Ads_BA_BS2"] {
    min-height: 90px;
  }

  .advertisement-slot[data-ba-slot="Ads_BA_FLB"] {
    min-height: 250px;
  }

  .advertisement-slot[data-ba-slot="Ads_BA_CAD"] {
    min-height: 250px;
  }
}

@keyframes ad-slot-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Ad filled state */
.advertisement-slot--filled {
  background: transparent;
  border: none;
}

/* Inline ad slots between .RichText segments */
ad-banner.advertisement-slot--inline {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  inline-size: fit-content;
  margin-inline: auto;
}

ad-banner.advertisement-slot--inline > .advertisement-slot {
  inline-size: fit-content;
  margin-inline: auto;
  padding-inline: 0;
}

/* Ad empty state (no ad served) */
.advertisement-slot--empty {
  display: none;
}

/* Skyscraper ad: reserve space to prevent CLS on wide viewports */
@media (width >= 104em) {
  .advertisement-slot[data-ba-slot="Ads_BA_SKY"] {
    min-height: 600px;
    min-width: 160px;
  }

  /* Override ad provider's fixed positioning on injected iframes
     so the skyscraper scrolls with the page instead of staying pinned */
  .advertisement-slot[data-ba-slot="Ads_BA_SKY"] iframe {
    position: static !important;
  }
}

/* Device visibility controls (managed via admin settings) */
/* Keep breakpoints in sync with component library: 48rem = 768px */
@media (width < 48rem) {
  .advertisement-slot--hide-mobile {
    display: none !important;
  }
}

@media (width >= 48rem) {
  .advertisement-slot--hide-desktop {
    display: none !important;
  }
}