/* 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 */
.article-inline-ad .ad-slot {
    display: block;
    /* must be block so AdSense can measure width */
    min-height: 72px;
    height: var(--ad-h);
    width: var(--ad-w);
    /* small skeleton to soften layout shift */
}

.article-inline-ad .ad-slot:has(ins, iframe, .adsbygoogle),
.article-inline-ad .ad-slot[data-fill] {
    visibility: visible;
    min-height: 0;
}



/* ───────────────────── 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: var(--ad-h, 250px);
}

/* 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);
}




/* ───────────────────── Inline Ads ────────────────────*/
html.eg-ads-on .article-inline-ad {
    margin: 0 0 42px;
}

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"]) {
    min-height: var(--ad-h, 72px);
    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;
}




/* Keep natural height when a real creative is present */
html.eg-ads-on .ad-slot:has(iframe, ins, .adsbygoogle, img, a) {
    aspect-ratio: auto;
}





/* ───────────────────── 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;
    border: 0;
    width: 100%;
    /* let it fill the column */
    max-width: 100%;
    /* but never exceed it even if Google sets a larger inline width */
    height: auto;
}

/* Google wraps the iframe in a host div with an inline width (e.g., 971px). Clamp it. */
.article-inline-ad .ad-slot ins.adsbygoogle>div[id^="aswift_"][id$="_host"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Clamp the actual ad iframe as well */
.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;
    /* keeps aspect logic from forcing horizontal overflow */
}







/* ===================================================================
     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%;
    margin: 24px 0;
}

/* 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;
    }
}