/* ============================================================================
   AD SKYSCRAPERS — responsive layout for AdSense display ad units.

   Desktop (≥1600px): two side rails (left & right of the content),
                      fixed positioning, 160px wide, max 600px tall.
   Below 1600px:      side rails don't fit (1200px content + 2x176px = 1552px
                      minimum) → skyscraper #1 becomes an inline block in the
                      document flow, skyscraper #2 hides entirely.

   Position-in-the-flow on smaller viewports is decided per-page (via flex
   `order` on the page container) and stays in the page-specific CSS.
   This file only defines what an ad slot LOOKS LIKE, not where it sits.

   Used by: vote, news, giveaways pages (via _macros/ads.html).
   ============================================================================ */

.ad-skyscraper {
    position: fixed;
    top: calc(var(--navbar-offset) + 1rem);
    width: 160px;
    height: calc(100vh - var(--navbar-offset) - 2rem);
    max-height: 600px;
    z-index: 10;
    overflow: hidden;
}
.ad-skyscraper-1 { left: 1rem; }
.ad-skyscraper-2 { right: 1rem; }

/* AdSense internal 1px sync iframe — Google renders aswift_* iframes as 1x1
   helpers for state-management. Visible as tiny white dot if not hidden.
   The actual ad renders inside google_ads_frame*, which stays visible. */
iframe[id^="aswift_"] {
    display: none !important;
}

/* Below 1600px: side rails don't fit. Skyscraper #1 becomes a normal inline
   block — its position in the flow is determined by the page-specific layout
   (typically right after the primary content). Skyscraper #2 hides. */
@media (max-width: 1599px) {
    .ad-skyscraper-1 {
        position: static;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        width: 100%;
        height: auto;
        max-height: none;
        overflow: visible;
        margin: 0;
    }
    .ad-skyscraper-2 {
        display: none;
    }
}