/* 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 {
    /* Defaults for the slot-size variables. AdWaterfallSlot.razor overrides them per slot in the wrapper's inline
       style (e.g. style="--ad-desktop-w:300px;--ad-desktop-h:600px"), which beats these. Declaring them here also
       lets editors such as Rider resolve the variables instead of reporting them as unknown. */
    --ad-desktop-w: 728px;
    --ad-desktop-h: 90px;
    --ad-mobile-w: 320px;
    --ad-mobile-h: 50px;

    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* One grid cell: the Doceree and backup (eHealthcareSolutions or 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);
    min-height: var(--ad-desktop-h);
    overflow: hidden;
}

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

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

.ad-wf > .adwf-backup {
    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-backup[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);
        min-height: var(--ad-mobile-h);
    }

    .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;
}

/* ---------------------------------------------------------------------------------------------------------------
   Semi-sticky top leaderboard (wwwroot/js/adSemiSticky.js). Wrap the slot in one element:
       <div class="adwf-semisticky" data-release="scroll" data-lines="10" data-seconds="10">
           <AdWaterfallSlot Position="AdPosition.TopLeaderboard" />
       </div>
   The script marks the wrapper with data-adwf-sticky="pinned | leaving | sliding | done" and sets the --adwf-ss-*
   variables below (where the pinned ad sits, the space kept for it in the page, how far it has moved up while
   leaving). The two you may want to change: --adwf-semisticky-bg and --adwf-semisticky-z. */
.adwf-semisticky {
    --adwf-semisticky-bg: #fff;  /* background of the pinned bar, so text doesn't show around the ad */
    --adwf-semisticky-z: 99990;  /* just below easyauscultation.com's nav bar (z-index 99999), above the content */
    --adwf-ss-top: 0px;          /* set by the script */
    --adwf-ss-left: 0px;
    --adwf-ss-width: 100%;
    --adwf-ss-height: 0px;
    --adwf-ss-shift: 0px;

    display: flow-root; /* keeps the slot's margins inside, so the space kept while pinned is exact */
}

/* While pinned, the wrapper keeps the ad's space in the page, so the content below doesn't move up. */
.adwf-semisticky[data-adwf-sticky="pinned"],
.adwf-semisticky[data-adwf-sticky="leaving"],
.adwf-semisticky[data-adwf-sticky="sliding"] {
    min-height: var(--adwf-ss-height);
}

/* The ad itself (the slot inside the wrapper) is pinned just below the nav bar, at its usual width and position. */
.adwf-semisticky[data-adwf-sticky="pinned"] > :first-child,
.adwf-semisticky[data-adwf-sticky="leaving"] > :first-child,
.adwf-semisticky[data-adwf-sticky="sliding"] > :first-child {
    position: fixed;
    top: var(--adwf-ss-top);
    left: var(--adwf-ss-left);
    width: var(--adwf-ss-width);
    z-index: var(--adwf-semisticky-z);
    background: var(--adwf-semisticky-bg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); /* sets the ad apart from the content scrolling under it */
    transform: translate3d(0, var(--adwf-ss-shift), 0);
    will-change: transform;
}

/* data-leave="slide": slides up out of sight when it lets go. Keep the duration equal to SLIDE_MS in the script. */
.adwf-semisticky[data-adwf-sticky="sliding"] > :first-child {
    transition: transform 300ms ease-in;
}

@media (prefers-reduced-motion: reduce) {
    .adwf-semisticky[data-adwf-sticky="sliding"] > :first-child {
        transition: none;
    }
}