/* =========================================================================
 * Ad layout / CLS reservations.
 *
 * Per-placement min-height for CLS reservation is emitted INLINE per slot by
 * render_advad_placement_as_gam_sra_ad_unit() in inc/ads.php — keep height
 * rules out of this file unless they apply at all breakpoints.
 * ========================================================================= */


/* Article-injected ads — floated so editors' floated images don't wrap in. */
.mining-ad-article-injected {
  float: left;
  clear: both;
  width: 100%;
  padding: 50px 0;

  & > div {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Floats break margin-collapse, so subtract the preceding <p>'s margin. */
  p + & { padding-top: calc(50px - 1.2rem); }

  /* New BFC so the next blockquote doesn't wrap around the floated ad. */
  & + blockquote { overflow: hidden; }
}

/* Video/oEmbed blocks give their responsive wrapper `overflow: hidden`, which
   makes it a BFC. A BFC box shrinks to sit *beside* a float, so next to the
   full-width floated article ad above it collapses to 0 width and the video
   disappears. Clear so embeds always drop below the ad and keep full width.
   (Ad-collapse JS used to mask this, but only won the race intermittently —
   hence the "shows on mobile / sometimes" symptoms.) */
.entry-content .wp-block-embed,
.entry-content .google-video-iframe-wrapper {
  clear: both;
}


/* Borderless container. */
.mining-ad-noframe {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  &.mining-ad-noframe--align-top-left {
    justify-content: start;
    align-items: start;
  }

  /* JS adds --collapsed when GAM returned no fill. The earlier reservation
     prevented CLS during negotiation; we accept a small CLS now to remove
     the transparent gap. */
  &.mining-ad-noframe--collapsed { display: none; }
}


/* Framed container — tinted box with "Advertisement" label that fades on fill. */
.mining-ad-frame,
.mining-ad-frame--green,
.mining-ad-frame--light {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;

  &::after {
    content: "Advertisement";
    color: #A9A9A9;
    position: absolute;
    inset: 0;
    width: fit-content;
    height: fit-content;
    margin: auto;
    z-index: 2;
  }

  & > * { z-index: 3; }

  &.mining-ad-frame--green { background-color: #03bfb533; }
  &.mining-ad-frame--light { background-color: #FFFFFF33; }

  &.mining-ad-frame--filled {
    background-color: transparent;
    transition: background-color 700ms 1s;

    &::after { opacity: 0; transition: opacity 700ms 1s; }
  }
}


/* Tile / square slots — aspect-ratio doubles as CLS reservation
   (matches Medium Rectangle 300x250). */
.mining-ad-tile {
  aspect-ratio: 6 / 5;
  margin-bottom: 20px;

  @media (max-width: 767px) { margin-bottom: 25px; }
}

/* `--unset-mobile` kept for backwards compat; the unset rule was removed
   so mobile keeps its CLS reservation. */
.mining-ad-square,
.mining-ad-square--unset-mobile {
  aspect-ratio: 6 / 5;
}


/* Category page wrapper: top banner + absolutely-positioned margin ads. */
.mining-ads-top-and-sides-container {
  width: 100%;
  position: relative;

  & > #mining-ad-category-left-margin,
  & > #mining-ad-category-right-margin {
    --margin-ad-width: 300px;
    --margin-ad-spacing-from-content: 24px; /* matches .container padding */
    position: absolute;
    top: 0;
    width: var(--margin-ad-width);
    overflow: hidden;

    /* Hide unless viewport fits content (1380px) + both ads + spacing. */
    @media (width <= 1910px) { display: none; }
  }

  & > #mining-ad-category-left-margin  { left:  calc(-1 * var(--margin-ad-width) - var(--margin-ad-spacing-from-content)); }
  & > #mining-ad-category-right-margin { right: calc(-1 * var(--margin-ad-width) - var(--margin-ad-spacing-from-content)); }
}


/* ---- Per-placement layout ---------------------------------------------- */

#mining-ad-homepage-top-banner {
  /* width:100% so the slot doesn't collapse to 0 inside its parent flex
     container; max-width caps it to the Billboard creative width. */
  width: 100%;
  max-width: 970px;
  margin: 0 auto;
}

#mining-ad-category-top-banner {
  max-width: 970px;
  margin: 0 auto 30px; 
}

#mining-ad-article-top-banner { margin-top: 30px; }

#mining-ad-homepage-block-divider-2,
#mining-ad-videos-block-divider,
#mining-ad-events-block-divider,
#mining-ad-dataroom-first {
  margin-bottom: 30px;
}

#mining-ad-category-block-divider {
  margin-top: 14px;
  margin-bottom: 30px;
}

#mining-ad-homepage-trending-stories-aside {
  @media (max-width: 767px) { margin-top: 30px; }
}

/* Hide bottom-right tile on narrow viewports — collides with the news grid. */
#mining-ad-homepage-top-stories-bottom-right {
  @media (max-width: 781px) { display: none; }
}

/* Center wrapping div around tile ads injected into a flex grid slot. */
div:has(> #mining-ad-homepage-special-features-last-medium-sized),
div:has(> #mining-ad-homepage-database-last-tile),
div:has(> #mining-ad-homepage-video-interviews-last-tile) {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* No stacked top ads on mobile articles. */
@media (max-width: 767px) {
  #mining-ad-article-sidebar-top { display: none; }
}