/**
 * Blog Ads — sticky rail in the left gutter and the unit closing the article.
 *
 * The horizontal position is written by blog-ads.js, which measures the live
 * gap between the fixed BuddyPanel and the article column. Hard-coding it here
 * is not possible: the panel is 68px collapsed and 230px open, and the page
 * cache does not vary on the cookie that decides which.
 */

.blog-ads__rail {
    position: fixed;
    /* Centre within the area below the 88px sticky header, not the viewport. */
    top: calc(50% + 44px);
    transform: translateY(-50%);
    /* Below the theme's share column (21) and the BuddyPanel (611). */
    z-index: 20;
    line-height: 0;
}

/**
 * The meowl assistant panel opens over the same left gutter. Hiding the rail
 * beats letting the panel cover an impression Google has already counted;
 * visibility keeps the unit loaded, since AdSense forbids re-rendering it.
 */
body:has(.meowl-widget-panel.open) .blog-ads__rail {
    visibility: hidden;
}

@media print {
    .blog-ads__rail {
        display: none;
    }
}

/**
 * Closing unit. The reserved height keeps the related-posts block below from
 * jumping when AdSense returns nothing and collapses the <ins> to display:none.
 */
.blog-ads__inline {
    min-height: 100px;
    margin: 32px 0 8px;
    text-align: center;
}

/**
 * Preview mode only: a sized stand-in so the layout can be judged locally,
 * where AdSense never fills a unit because the domain is not in the account.
 */
.blog-ads__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    margin: 0 auto;
    background: #e8eaed;
    border: 1px solid #dadce0;
    color: #80868b;
    font-family: Arial, sans-serif;
    line-height: 1.4;
}

.blog-ads__placeholder-label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.blog-ads__placeholder-size {
    font-size: 15px;
    color: #5f6368;
}