/* Ad waterfall slots: AdWaterfallSlot.razor + wwwroot/js/adWaterfall.js.

   A plain global stylesheet. Link it in App.razor's <head>:
       <link rel="stylesheet" href="@Assets["css/adWaterfall.css"]" />
   (or href="css/adWaterfall.css" on older projects without @Assets). It doesn't depend on the scoped-CSS bundle
   ({Project}.styles.css) and uses no ::deep or :has(), so it works as an ordinary .css file.

   Space is reserved using the sizes in AdWaterfallConfig, which the component writes as CSS variables on
   .ad-wf-wrap, so the page doesn't jump when an ad arrives. */

.ad-wf-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* One grid cell: the Doceree and AdPushup layers are stacked in the same spot, never one below the other.
   (adWaterfall.js also sets this stacking inline, so it holds even if this file fails to load.) */
.ad-wf {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: var(--ad-desktop-w, 728px);
    min-height: var(--ad-desktop-h, 90px);
    overflow: hidden;
}

.ad-wf > .adwf-doceree,
.ad-wf > .adwf-adpushup {
    grid-area: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
}

/* AdPushup is drawn above Doceree while Doceree hasn't filled. When Doceree fills, adWaterfall.js raises it
   (.adwf-on-top) and destroys the AdPushup ad. */
.ad-wf > .adwf-doceree {
    z-index: 1;
}

.ad-wf > .adwf-adpushup {
    z-index: 2;
}

.ad-wf > .adwf-doceree.adwf-on-top {
    z-index: 3;
}

/* Must out-rank the display: flex above, or a hidden layer would still show. */
.ad-wf > .adwf-doceree[hidden],
.ad-wf > .adwf-adpushup[hidden] {
    display: none;
}

.ad-wf-label {
    margin-bottom: 4px;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}

/* Breathing room between the ad and the article text around it. */
.ad-wf-wrap--midcontent {
    margin: 1.5rem 0;
}

/* Mobile. Must match AdWaterfallConfig.MobileMediaQuery. */
@media (max-width: 767.98px) {
    .ad-wf {
        max-width: var(--ad-mobile-w, 320px);
        min-height: var(--ad-mobile-h, 50px);
    }

    .ad-wf-wrap--no-mobile {
        display: none;
    }
}

/* Desktop. Must be the opposite of the rule above. */
@media (min-width: 768px) {
    .ad-wf-wrap--no-desktop {
        display: none;
    }
}

/* No ad will be shown in this slot (no size for this device, or no backup configured): give the space back.
   adWaterfall.js sets data-ad-network on the wrapper as well as on .ad-wf. */
.ad-wf-wrap[data-ad-network="none"] {
    display: none;
}