/* ============================================================================= * Ad-slot CLS reservation (engine-universal, theme-independent) * * Reserves min-height per canonical ad position per breakpoint so that * ad units loading after first paint do NOT trigger Cumulative Layout * Shift. Covers BOTH render paths the ad-management plugin emits: * .ad-container.ad-{position} (AdSense direct-code path) * .mv-ad-target[data-pos="{position}"] (Journey / Mediavine anchor) * * Why universal (not per-theme): every site using the ad-management plugin * benefits identically; ad sizing is a function of the ad-network unit, not * the site theme. Themes still own typography, spacing scale, colors. * * Sizes pick the SMALLEST commonly-served unit for each position so the * slot never shrinks after a fill (which is the CLS-causing direction). * Larger fills GROW the slot, which is layout-shift below but acceptable * (and unavoidable for variable ad sizes); reserving at the small floor * is the standard CWV-conscious posture. * * 9 positions x 3 breakpoints. Positions defined in * AdManagementPlugin::getCanonicalPositions() (8 canonical + content-inline, * added 2026-05-30 for editor-placed ad-slot blocks via theme-studio L5). * * NEVER emits user-visible content (no ::before/::after { content: ... }). * The "Advertisement" label is owned by AdManagementPlugin::renderAd() * and gated by the ads.show_label config flag, NOT by CSS. (S859 lesson.) * ============================================================================= */ /* ---- Common reset for every reserved slot ---- */ .ad-container, .mv-ad-target { display: block; box-sizing: border-box; /* contain prevents Mediavine's late-inserted iframes from forcing any unexpected reflow outside the slot's own box. */ contain: layout; } /* ---- Desktop default (>= 1024px): the rules outside any media query apply to desktop AND act as fallback for any agent that ignores the mobile-first overrides below. ---- */ .ad-container.ad-header-banner, .mv-ad-target[data-pos="header-banner"] { min-height: 90px; } .ad-container.ad-footer-banner, .mv-ad-target[data-pos="footer-banner"] { min-height: 90px; } .ad-container.ad-sidebar-top, .mv-ad-target[data-pos="sidebar-top"], .ad-container.ad-sidebar-bottom, .mv-ad-target[data-pos="sidebar-bottom"] { min-height: 250px; } .ad-container.ad-content-top, .mv-ad-target[data-pos="content-top"], .ad-container.ad-content-middle, .mv-ad-target[data-pos="content-middle"], .ad-container.ad-content-bottom, .mv-ad-target[data-pos="content-bottom"], .ad-container.ad-content-inline, .mv-ad-target[data-pos="content-inline"] { min-height: 280px; } .ad-container.ad-alert-inline, .mv-ad-target[data-pos="alert-inline"] { min-height: 100px; } /* ---- Tablet (768px - 1023px) ---- */ @media (min-width: 768px) and (max-width: 1023px) { .ad-container.ad-content-top, .mv-ad-target[data-pos="content-top"], .ad-container.ad-content-middle, .mv-ad-target[data-pos="content-middle"], .ad-container.ad-content-bottom, .mv-ad-target[data-pos="content-bottom"], .ad-container.ad-content-inline, .mv-ad-target[data-pos="content-inline"] { min-height: 250px; } } /* ---- Mobile (<= 767px) ---- */ @media (max-width: 767px) { .ad-container.ad-header-banner, .mv-ad-target[data-pos="header-banner"], .ad-container.ad-footer-banner, .mv-ad-target[data-pos="footer-banner"] { min-height: 100px; } .ad-container.ad-sidebar-top, .mv-ad-target[data-pos="sidebar-top"], .ad-container.ad-sidebar-bottom, .mv-ad-target[data-pos="sidebar-bottom"], .ad-container.ad-content-top, .mv-ad-target[data-pos="content-top"], .ad-container.ad-content-middle, .mv-ad-target[data-pos="content-middle"], .ad-container.ad-content-bottom, .mv-ad-target[data-pos="content-bottom"], .ad-container.ad-content-inline, .mv-ad-target[data-pos="content-inline"] { min-height: 250px; } } /* ---- AdSense units from the slot-mapped fallback (Op A2) ---- Block display + in-article centering live here, NOT as inline styles on the (engine no-inline-style standard; replaces the old site's !important spacing hacks). Google's adsbygoogle.js fills these after first paint; the .ad-container reservation above holds the slot so the fill does not shift. Verified 2026-06-16: workbench render of ad-ins-css-check.html confirms the display unit renders full-width block and the in-article unit centers. */ .ad-container .adsbygoogle { display: block; } .ad-container .adsbygoogle--in-article { text-align: center; } /* ---- Per-location best-fit container width caps (Op 1.2) ---- Added to an .ad-container ONLY when ads.constrain_containers is on (default on for AdSense / standalone sites, OFF for Journey / Mediavine), so a Journey/Mediavine site's hand-placed .ad-container, if any, never receives these classes and renders byte-identical (the Defcon hard gate). The match/ wide/full/banner classes carry a px fallback so the cap still applies on a page that has no Theme Studio width tokens. Container-only: max-width bounds the BOX; the responsive ins unit (data-ad-format) fills whatever width the box is given, so the ad creative is never clipped, cropped, or resized (AdSense-safe). The in-content cap matches the prose text column, which is why an auto-injected in-content ad no longer renders full page width. Verified 2026-06-22 (workbench render of ad-width-check.html): ad-w-match holds the in-flow ad to the 640px prose column on a 1190px page; match/wide/banner/full clamp to 640/960/1200/100%. */ .ad-container.ad-w-match { max-width: var(--ts-content-width-sm, 640px); margin-left: auto; margin-right: auto; } .ad-container.ad-w-wide { max-width: var(--ts-content-width-md, 960px); margin-left: auto; margin-right: auto; } .ad-container.ad-w-full { max-width: 100%; } .ad-container.ad-w-banner { max-width: var(--ts-content-width-lg, 1200px); margin-left: auto; margin-right: auto; } .ad-container.ad-w-sidebar { max-width: 300px; margin-left: auto; margin-right: auto; }