/* ==========================================================================
   ADS — layout containment for Google Auto Ads, Ezoic and MGID.

   Goal: an ad of any size, from any of those networks, can never widen the
   page, push the sidebar, or inherit article typography. Every network injects
   its own markup at runtime, so this file constrains by *pattern* (id/class
   prefixes) as well as our own .ad-unit wrapper.

   Containment rules are plain selectors so they actually win; visual resets
   use :where() so an ad's own stylesheet can still override them.

   Loaded on both themes, ahead of nothing in particular — specificity does the
   work, not source order.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Selector groups
   -------------------------------------------------------------------------- */

/* Every ad container we or a network might produce. */
.ad-unit,
.adsbygoogle,
ins.adsbygoogle,
[id^="google_ads_"],
[id^="google-auto-placement"],
[id^="ezoic-"],
[class^="ezoic-"],
.ezoic-ad,
[id^="mgid-"],
[class^="mgid-"],
.mgid-content {
  box-sizing: border-box;
}

/* Selectors for "somewhere inside an ad" — used by the resets below. */
:root {
  --ad-max-width: 100%;
}

.ad-unit :where(*),
.adsbygoogle :where(*),
ins.adsbygoogle :where(*),
[id^="google_ads_"] :where(*),
[id^="ezoic-"] :where(*),
[class^="ezoic-"] :where(*),
[id^="mgid-"] :where(*),
[class^="mgid-"] :where(*) {
  max-width: var(--ad-max-width);
}

/* --------------------------------------------------------------------------
   2. Our own slots
   -------------------------------------------------------------------------- */

.ad-unit {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 32px auto;
  text-align: center;
  /* Ads paint their own background; keep ours transparent so a dark unit on a
     light page does not sit on an opaque band. */
  background: transparent;
  /* Isolate the unit so a network's absolutely positioned elements cannot
     escape and overlap the next section. */
  position: relative;
  isolation: isolate;
  /* Clear floated siblings (WordPress-era ads assume a float context). */
  overflow: hidden;
  clear: both;
}

/* A slot that was rendered but filled with nothing should not leave a gap. */
.ad-unit:empty {
  display: none;
}

.ad-unit img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

/* Slot variants. Header/sidebar/footer units sit in tighter columns, so they
   get less vertical breathing room. */
.ad-unit--header,
.ad-unit--footer,
.ad-unit--sidebar_top,
.ad-unit--sidebar_bottom {
  margin: 20px auto;
}

.ad-unit--before_content,
.ad-unit--after_content {
  margin: 0 auto 28px;
}

.ad-unit--after_content {
  margin: 28px auto 0;
}

.ad-unit--before_comments {
  margin: 32px 0;
}

/* --------------------------------------------------------------------------
   3. Third-party containers
   -------------------------------------------------------------------------- */

/* Networks inject unstyled blocks into the content column. Give them the same
   box model and centring as our own slots so a unit never sits flush against
   the text edge, and never widens the column. */
.article-content .adsbygoogle,
.article-content ins.adsbygoogle,
.article-content [id^="google_ads_"],
.article-content [id^="ezoic-"],
.article-content [class^="ezoic-"],
.article-content [id^="mgid-"],
.article-content [class^="mgid-"],
.post__content .adsbygoogle,
.post__content [id^="ezoic-"],
.post__content [id^="mgid-"] {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 32px auto;
  clear: both;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

/* Auto ads that render as an anchor with no <ins> wrapper still need the
   neutral treatment below; :where keeps this from fighting them. */
.article-content :where(.adsbygoogle, [id^="ezoic-"], [id^="mgid-"]),
.post__content :where(.adsbygoogle, [id^="ezoic-"], [id^="mgid-"]) {
  text-align: center;
}

/* Ezoic/MGID sticky and floating units attach to the viewport. They must not
   inherit our stacking or they slide under the sticky header. */
[id^="ezoic-"][style*="sticky"],
[id^="mgid-"][style*="sticky"],
[id^="ezoic-"][style*="fixed"],
[id^="mgid-"][style*="fixed"],
.ezoic-sticky,
.mgid-sticky {
  max-width: 100vw;
  z-index: 60;
}

/* --------------------------------------------------------------------------
   4. Never inherit article typography
   -------------------------------------------------------------------------- */

/* .article-content sets font-size 1.1rem / line-height 1.8. Ads are built
   against normal flow text, so restore a neutral baseline inside them. */
.article-content :where(.ad-unit, .adsbygoogle, [id^="ezoic-"], [class^="ezoic-"], [id^="mgid-"], [class^="mgid-"]),
.post__content :where(.ad-unit, .adsbygoogle, [id^="ezoic-"], [id^="mgid-"]) {
  line-height: normal;
  text-align: center;
}

/* Kill article margins/gaps that would otherwise double-space ad internals. */
.article-content :where(.ad-unit, .adsbygoogle, [id^="ezoic-"], [class^="ezoic-"], [id^="mgid-"], [class^="mgid-"]) :where(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, figure, blockquote, pre, table),
.post__content :where(.ad-unit, .adsbygoogle, [id^="ezoic-"], [id^="mgid-"]) :where(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, figure, blockquote, pre, table) {
  margin-top: 0;
  margin-bottom: 0;
}

/* Ezoic/MGID native units are built from anchors. The article theme turns
   every content link into an inline-block with a centre-out underline drawn
   via ::after — that collapses native ad layouts and paints stray rules over
   the creative, so both are switched off inside ads. */
.article-content :where(.ad-unit, .adsbygoogle, [id^="ezoic-"], [class^="ezoic-"], [id^="mgid-"], [class^="mgid-"]) a,
.post__content :where(.ad-unit, .adsbygoogle, [id^="ezoic-"], [id^="mgid-"]) a {
  display: inline;
  position: static;
  text-decoration: none;
  background: none;
  box-shadow: none;
  color: inherit;
}

.article-content :where(.ad-unit, .adsbygoogle, [id^="ezoic-"], [class^="ezoic-"], [id^="mgid-"], [class^="mgid-"]) a::after,
.post__content :where(.ad-unit, .adsbygoogle, [id^="ezoic-"], [id^="mgid-"]) a::after {
  content: none !important;
  display: none !important;
}

/* ...and restore flex/grid layouts the networks rely on for native units. */
.article-content :where(.ad-unit, [id^="ezoic-"], [id^="mgid-"]) :where([class*="native"], [class*="Native"], [class*="banner"]),
.post__content :where(.ad-unit, [id^="ezoic-"], [id^="mgid-"]) :where([class*="native"], [class*="Native"], [class*="banner"]) {
  display: flex;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   5. Iframes and media
   -------------------------------------------------------------------------- */

/* Network iframes carry fixed width/height attributes (300x250, 728x90...).
   max-width lets them shrink inside a narrower column instead of forcing a
   horizontal scrollbar. */
.ad-unit iframe,
.article-content :where(.adsbygoogle, [id^="ezoic-"], [id^="mgid-"], [id^="google_ads_"]) iframe,
.post__content :where(.adsbygoogle, [id^="ezoic-"], [id^="mgid-"]) iframe {
  max-width: 100% !important;
  border: 0;
  display: block;
  margin: 0 auto;
}

/* The article theme forces 16:9 on any YouTube iframe by src match. An ad
   iframe is never YouTube, but if a network ever proxies video this would
   distort it, so scope the aspect rule to content video only. */
.article-content iframe:not([src*="youtube.com"]):not([src*="youtu.be"]) {
  aspect-ratio: auto;
  height: auto;
}

.ad-unit img,
.ad-unit video,
.ad-unit svg,
.article-content :where(.adsbygoogle, [id^="ezoic-"], [id^="mgid-"]) :where(img, video, svg) {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   6. Layout stability
   -------------------------------------------------------------------------- */

/* Ad networks swap creatives without resizing the slot, which reads as a jump.
   A modest reserved height plus `contain` keeps that reflow local to the unit
   instead of shifting the rest of the article. */
.ad-unit {
  contain: layout paint;
  min-height: 0;
}

.ad-unit--between,
.ad-unit--after_paragraph,
.ad-unit--before_paragraph {
  /* Tall enough that most in-article units do not collapse to zero and
     re-expand. Deliberately modest — an unfilled slot should not leave a
     large empty band. */
  min-height: 90px;
}

/* Networks that hide themselves until they fill (common with Auto Ads) must
   not leave the reserved space behind. */
.ad-unit[data-ad-status="empty"],
.ad-unit[data-ad-status="unfilled"],
.adsbygoogle[data-ad-status="empty"],
ins.adsbygoogle[data-ad-status="empty"] {
  display: none !important;
  min-height: 0 !important;
  margin: 0 !important;
}

/* Never let a unit participate in the grid/flex layout of the page shell. */
.article-layout > .ad-unit,
.article-layout > .ad-unit *,
.article-sidebar > .ad-unit,
.article-sidebar > .ad-unit * {
  min-width: 0;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   7. Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .ad-unit,
  .article-content :where(.adsbygoogle, [id^="ezoic-"], [id^="mgid-"], [id^="google_ads_"]),
  .post__content :where(.adsbygoogle, [id^="ezoic-"], [id^="mgid-"]) {
    margin: 24px auto;
  }

  /* Horizontal-network units do not fit a phone. Let the network's own
     responsive code take over rather than scrolling. */
  .ad-unit iframe {
    max-width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   8. Accessibility
   -------------------------------------------------------------------------- */

/* Ads are not reading content; keep them out of the accessibility tree's way
   of the article while leaving the network's own labels intact. */
.ad-unit[aria-hidden="true"] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .ad-unit *,
  .adsbygoogle *,
  ins.adsbygoogle *,
  [id^="ezoic-"] *,
  [id^="mgid-"] * {
    animation: none !important;
    transition: none !important;
  }
}