/**
 * Keep GPT creatives inside the content column on small screens.
 *
 * 728x90 leaderboards (images or HTML5 iframes) are wider than a phone
 * viewport. Flex columns default to min-width:auto, so that creative
 * stretches the page and lets users pan into empty space.
 *
 * Scale the slot with container query units so iframe/HTML5 ads shrink
 * as a unit. Overflow is clipped so the page cannot scroll horizontally
 * even if scaling is unavailable.
 */

.google-ads-block,
.google-ads-slot-wrapper,
.block-rheumnow-adds,
.block-google-ads {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.google-ads-block {
  container-type: inline-size;
  container-name: google-ad;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Theme used to set `.mobile-body-ad div { display: inline-block }`, which
   shrink-wraps this container query to 0x0. Keep in-article slots full width. */
.mobile-body-ad .google-ads-block,
.mobile-body-ad .google-ads-slot-wrapper {
  display: flex;
  width: 100%;
}

.google-ads-slot-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.google-ads-slot-wrapper.google-ads-is-scaled,
.google-ads-slot-wrapper.google-ads-is-empty {
  overflow: hidden;
}

.google-ads-slot-wrapper.google-ads-is-empty {
  height: 0;
  min-height: 0;
}

.google-ads-slot-wrapper.google-ads-is-empty > div {
  transform: none;
}

/* Scale to the wrapper's width; no-op when the creative already fits. */
@supports (width: 1cqi) {
  .google-ads-slot-wrapper:not(.google-ads-is-empty):not(.google-ads-is-scaled) {
    height: calc(var(--ad-height, 90px) * min(1, 100cqi / var(--ad-width, 728px)));
  }

  .google-ads-slot-wrapper:not(.google-ads-is-empty):not(.google-ads-is-scaled) > div {
    width: var(--ad-width, 728px);
    flex: 0 0 var(--ad-width, 728px);
    transform: scale(min(1, 100cqi / var(--ad-width, 728px)));
    transform-origin: top center;
  }
}

/* Homepage leaderboard lives in before_content (Bootstrap flex row).
   Use clip so we don't create a scroll container (sticky-safe). */
@media (max-width: 767px) {
  .frontpage .before_content .row,
  .frontpage .before_content [class*="col-"] {
    min-width: 0;
  }

  .frontpage .before_content,
  .frontpage .main-page {
    overflow-x: hidden;
    overflow-x: clip;
  }
}