/* SIMPLE SLOT GATING
   - Rails (sidebars/hero/footer): fully hide .ad-slot until size is known or a creative/fill exists.
   - Inline (in-article, fluid): keep block layout (measurable width) but hide visually until <ins> is present or fill is known.
*/

/* Rails: hide until reserved or mounted */
.sidebars .ad-slot {
    display: none;
    height: var(--ad-h);
    width: var(--ad-w);
}

.sidebars .ad-slot[data-first-size],
.sidebars .ad-slot[data-fill],
.sidebars .ad-slot:has(iframe, ins, .adsbygoogle, img, a) {
    display: block;
}

.article-inline-ad {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Inline (fluid): do NOT use display:none; keep width measurable */
/* /public/css/widget_ads.css — REPLACE this whole block: Inline (fluid) base
   NOTE: removes fixed height, clamps width to viewport-5rem, and seeds aspect-ratio so the
   placeholder scales with width on narrow screens. Keeps width measurable for AdSense. */
/* /public/css/widget_ads.css
   REPLACE the existing ".article-inline-ad .ad-slot { ... }" block with this block. */
.article-inline-ad .ad-slot {
    display: block;
    width: 100%;
    box-sizing: border-box;

    /* placeholder only */
    min-height: 72px;
    max-height: var(--ad-ph-max, 280px);
    /* soft guardrail; remove on fill */
    aspect-ratio: var(--ad-ratio, auto);

    /* live behavior */
    height: auto;
    overflow-x: clip;
    overflow-y: hidden;
}


/* /public/css/widget_ads.css
   REPLACE the entire "When an ad fills..." rule block with this block. */
.article-inline-ad .ad-slot[data-fill="filled"],
.article-inline-ad .ad-slot:has(ins.adsbygoogle[data-ad-status="filled"]) {
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    height: auto;
    overflow-y: visible;
}

.article-inline-ad .ad-slot[data-fill="filled"],
.article-inline-ad .ad-slot:has(ins.adsbygoogle[data-ad-status="filled"]) {
    visibility: visible;
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
}

@media (max-width: 1150px) {
    .article-inline-ad .ad-slot {
        width: 100%;
    }
}

@media (max-width: 1150px) {
    html.eg-ads-on .article-inline-ad[data-mobile="false"] {
        display: none !important;
    }
}







/* ───────────────────── Inline Ads ────────────────────*/

.article-inline-ad {
    margin: 0 0 42px;
}

.article-inline-ad.-anywhere {
    margin: 24px 0;
}

.home-ad .article-inline-ad {
    margin: 42px 0 0px !important
}

.news-inline-ad .article-inline-ad {
    margin: 10px 0 !important
}

.snapshot-xxl-card .article-inline-ad.-anywhere {
    margin: 3rem 0 .75rem;
}




/* ───────────────────── JS adds .eg-ads-on (bootstraps) to turn ads on ────────────────── */





html.eg-ads-on .sidebars>.side-widget.-ad {
    display: block;
    margin: 0 0 24px;
}



html.eg-ads-on .sidebars>.side-widget.-ad[hidden] {
    display: none !important;
}




/* ───────────────────── Base ad slot (all providers) ───────────────────── */

.ad-slot {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    background: transparent;
    font-size: 0;
    /* squelch stray text nodes */
}

/* Normalize network fills to full width */
.ad-slot iframe,
.ad-slot ins.adsbygoogle {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
}




/* ───────────────────── Author preview / placeholders (FULL BLOCK REPLACEMENT) ─────────────────────
   Goal: make placeholders appear "all at once" (no two-phase paint).
   Strategy:
   • Keep placeholders hidden until size tokens are present (data-first-size or --ad-h).
   • On reveal, show final width/height and label in a single paint (+tiny fade).
*/

/* 0) Base: placeholders start hidden so they don't paint in a half-ready state */
.ad-slot[data-placeholder="true"] {
    display: none;
    /* gated reveal */
    visibility: hidden;
    /* ensure no flash in inline contexts */
    opacity: 0;
    /* smooth fade-in when revealed */
    transition: opacity 120ms ease-out;
    position: relative;
    width: 100%;
    aspect-ratio: auto;
    outline: 2px dashed var(--card-color, var(--site-color));
    padding: 24px 12px 30px;
    background:
        repeating-linear-gradient(135deg,
            color-mix(in oklab, #fff 2%, transparent) 0 12px,
            color-mix(in oklab, #fff 5%, transparent) 12px 24px);
}

/* 1) Reveal when size is known — both tokens supported */
.ad-slot[data-placeholder="true"][data-first-size],
.ad-slot[data-placeholder="true"][style*="--ad-h"] {
    display: block;
    visibility: visible;
    opacity: 1;
}

/* 2) Rails placeholders: apply the final fixed box on reveal */
.sidebars .ad-slot[data-placeholder="true"][data-rail="true"][data-first-size],
.sidebars .ad-slot[data-placeholder="true"][data-rail="true"][style*="--ad-h"] {
    width: var(--ad-w, 300px);
    max-width: var(--ad-w, 300px);
    min-height: var(--ad-h, 250px);
}

/* 3) Inline placeholders: reveal at final height without intermediate step */
.article-inline-ad .ad-slot[data-placeholder="true"][data-first-size],
.article-inline-ad .ad-slot[data-placeholder="true"][style*="--ad-h"] {
    min-height: 0;
    /* don't hard-lock 250–280px on small viewports */
    height: auto;
    aspect-ratio: var(--ad-ratio, auto);
}

/* 4) Placeholder label (kept as-is; now shows only once, at reveal) */
.ad-slot[data-placeholder="true"]::before {
    content: attr(data-campaign) " • " attr(data-provider);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 14px;
    font: 800 clamp(12px, 11px + .25vw, 14px)/1 var(--identity-font, system-ui);
    letter-spacing: .09em;
    color: #dbe2ea;
    text-transform: uppercase;
    pointer-events: none;
}

/* Size chip pinned bottom-center */
.ad-slot[data-placeholder="true"]::after {
    content: attr(data-first-size);
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    font: 700 11px/1 var(--identity-font, system-ui);
    letter-spacing: .06em;
    color: #b8c1cc;
    pointer-events: none;
}

/* Viewport annotations */
.ad-slot[data-placeholder="true"][data-vp="mobile-only"]::before {
    content: "MOBILE ONLY • " attr(data-campaign) " • " attr(data-provider);
}

.ad-slot[data-placeholder="true"][data-vp="desktop-only"]::before {
    content: "DESKTOP ONLY • " attr(data-campaign) " • " attr(data-provider);
}

.ad-slot[data-placeholder="true"][data-vp="both"]::before {
    content: "MOBILE + DESKTOP • " attr(data-campaign) " • " attr(data-provider);
}









html.eg-ads-on .sidebars .ad-slot[data-fill="unfilled"] ins.adsbygoogle,
html.eg-ads-on .sidebars .ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]) ins.adsbygoogle {
    display: none !important;
}














/* ───────────────────── Inline Ads ────────────────────*/



html.eg-ads-on .article-inline-ad[hidden] {
    display: none !important;
}


@media (min-width: 1150px) {
    html.eg-ads-on .article-inline-ad[data-desktop="false"] {
        display: none !important;
    }
}


html.eg-ads-on .ad-slot:not([data-placeholder="true"])::before {
    content: "Ad.";
    border-color: var(--section-dusker-background-color);
    color: rgba(255, 255, 255, .75);
    opacity: .9;
}


html.eg-ads-on .ad-slot:not([data-placeholder="true"]) {
    background: transparent;
    border-top: 1px solid var(--section-dusker-background-color);
    border-bottom: 1px solid var(--section-dusker-background-color);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    outline: 0;
}


/* Create a safe stacking context and lift ad contents above the badge */
html.eg-ads-on .ad-slot {
    position: relative;
}

html.eg-ads-on .ad-slot>iframe,
html.eg-ads-on .ad-slot>ins.adsbygoogle,
html.eg-ads-on .ad-slot>img,
html.eg-ads-on .ad-slot>a,
html.eg-ads-on .ad-slot>div {
    position: relative;
    z-index: 1;
}

/* Base: always render a subtle badge behind the ad */
/* REPLACE this whole block: generic badge behind real ads (NOT placeholders) */
html.eg-ads-on .ad-slot:not([data-placeholder="true"])::before {
    content: "Ad";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    border: 2px solid var(--section-dusker-background-color);
    color: rgba(255, 255, 255, .65);
    font: 800 13px/1 var(--identity-font, system-ui);
    letter-spacing: .02em;
    z-index: 0;
    pointer-events: none;
    opacity: .65;
}








/* ───────────────────── Inline fluid (in-article): CLAMP WIDTH + NO OVERFLOW ─────────────────────
   REPLACE your existing “Inline fluid (in-article)” block with this one.
   Purpose: prevent Google’s inline <ins>/<div id="aswift_*_host">/<iframe> from exceeding the
   content column and causing horizontal scrolling. We clamp to the container and clip overflow. */

.article-inline-ad .ad-slot {
    max-width: 100%;
    overflow-x: clip;
    /* prevents any residual host/iframe width from widening the page */
}

.article-inline-ad .ad-slot ins.adsbygoogle {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 0;
}

.article-inline-ad .ad-slot ins.adsbygoogle>div[id^="aswift_"][id$="_host"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

.article-inline-ad .ad-slot ins.adsbygoogle>div[id^="aswift_"][id$="_host"]>iframe[id^="aswift_"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    /* keep intrinsic height */
}







/* ===================================================================
     Inline FLUID ad wrapper that fills its container and clamps AdSense internals.
   Works anywhere you paste {{> ads/inline-anywhere ...}}.
===================================================================*/
.article-inline-ad.-anywhere {
    width: 100%;
    max-width: 100%;
}


/* Optional helpers */
.article-inline-ad.-anywhere.-center {
    display: flex;
    justify-content: center;
}

.article-inline-ad.-anywhere.-span-grid {
    grid-column: 1 / -1;
}

/* Clamp slot width & prevent horizontal overflow */
.article-inline-ad.-anywhere .ad-slot {
    max-width: 100%;
    overflow-x: clip;
}

/* Make AdSense fluid fill the container cleanly */
.article-inline-ad.-anywhere .ad-slot ins.adsbygoogle {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 0;
}

/* Clamp Google host + iframe to container width */
.article-inline-ad.-anywhere .ad-slot ins.adsbygoogle>div[id^="aswift_"][id$="_host"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

.article-inline-ad.-anywhere .ad-slot ins.adsbygoogle>div[id^="aswift_"][id$="_host"]>iframe[id^="aswift_"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    border: 0;
}

/* Placeholder: JS seeds --ad-h from the first WxH in data-sizes */
.article-inline-ad.-anywhere .ad-slot[data-placeholder="true"] {
    min-height: var(--ad-h, 250px);
}

/* Respect viewport gating */
@media (min-width:1150px) {
    .article-inline-ad.-anywhere[data-desktop="false"] {
        display: none !important;
    }
}








/* /public/css/widget_ads.css
   ADD this entire block at the VERY END of the file (after everything else). */

html.eg-ads-on .article-inline-ad .ad-slot {
    max-height: none;
    overflow-y: visible;
    aspect-ratio: 970 / 250;
}



html.eg-ads-on .article-inline-ad .ad-slot[data-fill="unfilled"] ins.adsbygoogle,
html.eg-ads-on .article-inline-ad .ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]) ins.adsbygoogle {
    display: none !important;
}

html.eg-ads-on .article-inline-ad .ad-slot[data-fill="pending"],
html.eg-ads-on .article-inline-ad .ad-slot:has(ins.adsbygoogle[data-ad-status="pending"]) {
    aspect-ratio: var(--ad-ratio, auto);
    overflow-y: hidden;
}

html.eg-ads-on .article-inline-ad .ad-slot[data-fill="unfilled"],
html.eg-ads-on .article-inline-ad .ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
    aspect-ratio: var(--ad-ratio, auto);
    overflow-y: hidden;
}

html.eg-ads-on .article-inline-ad .ad-slot[data-fill="filled"],
html.eg-ads-on .article-inline-ad .ad-slot:has(ins.adsbygoogle[data-ad-status="filled"]) {
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
    overflow-y: visible;
}






/* Kill the white/gray AdSense “spinner/blank” paint until we confirm a fill (prevents flicker) */
html.eg-ads-on .ad-slot[data-provider="adsense"] ins.adsbygoogle,
html.eg-ads-on .ad-slot[data-provider="adsense"] iframe {
  visibility: hidden;
  opacity: 0;
  transition: opacity 120ms ease-out;
}


/* Filled: show normally (height should be natural/auto) */
html.eg-ads-on .ad-slot[data-provider="adsense"][data-fill="filled"] ins.adsbygoogle,
html.eg-ads-on .ad-slot[data-provider="adsense"][data-fill="filled"] iframe,
html.eg-ads-on .ad-slot[data-provider="adsense"]:has(ins.adsbygoogle[data-ad-status="filled"]) ins.adsbygoogle,
html.eg-ads-on .ad-slot[data-provider="adsense"]:has(ins.adsbygoogle[data-ad-status="filled"]) iframe {
  visibility: visible;
  opacity: 1;
}