/* ═══════════════════════════════════════════════════════════════
   ads.css — Ad unit width containment
   Kept separate from global.css so ad-related styling can be
   managed independently of the main site stylesheet.

   Root cause this fixes: fixed-pixel ad iframes (Adsterra and
   others) do not resize themselves. Without a width cap on their
   wrapper, a wide unit forces the entire page to scroll
   horizontally on any narrower viewport -- mobile, or a resized
   desktop window, or even a normal desktop container narrower
   than the ad's native width. adsterra-topper.php already avoids
   this for its own unit via server-side device detection, but
   direct banner includes have no such switch -- this is the
   CSS-level safety net wherever any ad unit is embedded directly.

   Covers the 6 standard IAB sizes in use: 300x250, 336x280,
   468x60, 728x90, 160x600, 120x600.

   Note: 120x600/160x600 skyscrapers placed via the existing
   .ad-rail sidebar mechanism (global.css) are already hidden
   below 1280px and don't need this file -- the size classes
   below are for skyscraper units used as regular in-content
   .ad-unit blocks instead of the side rail.
   ═══════════════════════════════════════════════════════════════ */

.ad-topper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: transparent;
  text-align: center;
  padding: 8px 0;
  display: flex;
  justify-content: center;
}

/* Generic safety net -- applies to every .ad-unit regardless of size,
   so any unit without a specific size class below still gets basic
   overflow protection. */
.ad-unit {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.ad-unit iframe,
.ad-topper iframe {
  max-width: 100%;
}

/* Per-size caps -- constrain each unit to its real native width so it
   never stretches wider than its intended size, on desktop or mobile,
   even if its wrapper's parent container is wider. */
.ad-unit--300x250 { max-width: 300px; }
.ad-unit--336x280 { max-width: 336px; }
.ad-unit--468x60  { max-width: 468px; }
.ad-unit--728x90  { max-width: 728px; }
.ad-unit--160x600 { max-width: 160px; }
.ad-unit--120x600 { max-width: 120px; }

/* Below 480px (most phones), the 468x60 and 728x90 banner units are
   wider than the viewport. IMPORTANT: these are fixed-pixel Adsterra
   iframes that do not rescale their own creative -- forcing a smaller
   max-width via CSS only shrinks the iframe frame, not the ad content
   inside it, which crops the ad rather than resizing it cleanly.
   The only honest fix without visible cropping is to not render these
   two specific units on narrow viewports at all. If you need an ad in
   this slot on mobile, use adsterra-topper.php instead, which already
   switches to a real 320x50 unit server-side rather than trying to
   resize the 728x90 one. */
@media (max-width: 480px) {
  .ad-unit--468x60,
  .ad-unit--728x90 {
    display: none;
  }
}

/* The 336x280 rectangle fits comfortably on most modern phones (360px+)
   but not on the narrowest ones still in use (iPhone SE and similar,
   ~320px). Same principle: hide rather than crop when it genuinely
   doesn't fit, since this too is a fixed-pixel unit that can't rescale
   its own creative. */
@media (max-width: 350px) {
  .ad-unit--336x280 {
    display: none;
  }
}