/* The magazine design uses padded cards for regular widgets. Ads use the column itself. */
body #secondary .sidebar-main > .widget.wpn-sidebar-ad-widget:has(.wpn-sidebar-banner) {
    padding: 0;
    border: 0;
    background: transparent;
}

.wpn-sidebar-banner .wpn-ad-slot {
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
}

.wpn-sidebar-banner .wpn-ad-label {
    display: block;
    margin-bottom: 0.35em;
    color: #4f5655;
    font-size: 0.75em;
}

.wpn-sidebar-banner img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.wpn-sidebar-banner .wpn-ad-still {
    display: none;
}

.wpn-sidebar-ad-controls {
    width: 100%;
    max-width: 360px;
    margin: 0 auto 0.8rem;
}

.wpn-sidebar-ad-controls[hidden] {
    display: none;
}

#secondary .wpn-sidebar-ad-controls button {
    max-width: 100%;
    padding: 0.35em 0.65em;
    border: 1px solid #a9bec0;
    border-radius: 4px;
    background: transparent;
    color: #005f67;
    font-size: 0.78em;
    line-height: 1.35;
}

#secondary .wpn-sidebar-ad-controls button:is(:hover, :focus-visible) {
    background: #e8f2f1;
}

.sidebar-main.wpn-pause-ads .wpn-sidebar-banner .wpn-ad-can-pause .wpn-ad-live {
    display: none;
}

.sidebar-main.wpn-pause-ads .wpn-sidebar-banner .wpn-ad-still {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-main:not(.wpn-play-ads) .wpn-sidebar-banner .wpn-ad-can-pause .wpn-ad-live {
        display: none;
    }

    .sidebar-main:not(.wpn-play-ads) .wpn-sidebar-banner .wpn-ad-still {
        display: block;
    }
}

@media (min-width: 1100px) {
    .ast-desktop:is(.ast-left-sidebar, .ast-right-sidebar) #content > .ast-container:has(> #secondary .wpn-sidebar-ad-widget) {
        --wpn-sidebar-column: clamp(245px, 24%, 320px);
    }

    .ast-desktop:is(.ast-left-sidebar, .ast-right-sidebar) #content > .ast-container:has(> #secondary .wpn-sidebar-ad-widget) > #primary {
        width: calc(100% - var(--wpn-sidebar-column));
    }

    .ast-desktop:is(.ast-left-sidebar, .ast-right-sidebar) #content > .ast-container:has(> #secondary .wpn-sidebar-ad-widget) > #secondary {
        width: var(--wpn-sidebar-column);
    }

    .ast-desktop.ast-right-sidebar #content > .ast-container > #secondary:has(.wpn-sidebar-ad-widget) {
        padding-left: clamp(24px, 3vw, 40px);
    }

    .ast-desktop.ast-left-sidebar #content > .ast-container > #secondary:has(.wpn-sidebar-ad-widget) {
        padding-right: clamp(24px, 3vw, 40px);
    }
}