/* ============================================================
   ads.css — ad slots for non-subscribers (EW2027)
   ------------------------------------------------------------
   The whole point of this file is RESERVED SPACE.

   An ad unit is empty when the page paints and fills a fraction of a second later.
   If nothing holds its place, everything below it jumps down at exactly the moment
   the reader has started reading — which is both the largest CLS contributor on an
   ad-supported page and the thing that makes ads feel hostile rather than present.
   Reserving the height means the ad appears IN a space that was always there.

   Heights below are the standard AdSense responsive sizes for each breakpoint, so
   the reserved box matches what actually gets served and there is no leftover gap.
   ============================================================ */

.ew-ad {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 24px auto;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
}

/* The label row: "Advertisement" on the left, the upsell on the right. Both sit
   ABOVE the unit and outside it — see the note in _AdSlot.cshtml. */
.ew-ad-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

/* The label is not decoration. Ads have to be distinguishable from editorial content
   — it is an FTC expectation, an AdSense policy requirement, and on a page of
   financial data a reader mistaking an ad for a data panel is a real problem. */
.ew-ad-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #5b6472);
    opacity: 0.7;
}

/* Deliberately quiet. A loud "REMOVE ADS" button next to an ad reads as part of the
   ad, which is both a worse experience and the thing AdSense policy is watching for.
   It earns attention by being in the one place a reader is already annoyed, not by
   shouting. */
.ew-ad-remove {
    flex: 0 0 auto;
    font-size: 0.68rem;
    text-decoration: none;
    white-space: nowrap;
    color: var(--text-muted, #5b6472);
    opacity: 0.75;
    border-bottom: 1px solid currentColor;
    transition: opacity 0.15s ease, color 0.15s ease;
}

    .ew-ad-remove:hover,
    .ew-ad-remove:focus-visible {
        opacity: 1;
        color: var(--ew-gold, #ddb785);
    }

.ew-ad-ins {
    display: block;
    width: 100%;
    min-width: 0;
}

/* ---- reserved heights ----
   Mobile: a 320x100 large banner. NOT 320x250 — a 250px block above the fold on a
   phone pushes the actual content off the screen, which is the behavior being moved
   away from. */
.ew-ad {
    min-height: 100px;
}

@media (min-width: 480px) {
    /* 468x60 territory, plus the label. */
    .ew-ad {
        min-height: 90px;
    }
}

@media (min-width: 768px) {
    /* 728x90 leaderboard. */
    .ew-ad {
        min-height: 90px;
    }
}

@media (min-width: 1024px) {
    /* 970x90. Still a banner, still not a 250px block in the middle of a chart. */
    .ew-ad {
        min-height: 90px;
    }
}

/* An in-content rectangle, for a position that genuinely has room — used by giving
   the slot a position name that matches this selector. */
.ew-ad[data-ad-pos$="-rect"] {
    min-height: 260px;
}

@media (min-width: 768px) {
    .ew-ad[data-ad-pos$="-rect"] {
        min-height: 280px;
    }
}

/* Fluid units (in-article, in-feed). _AdSlot emits data-ad-layout ONLY on these, so
   the attribute's presence is the signal — no naming convention to remember.

   A fluid unit sizes itself to its content rather than to a fixed banner height, and
   in practice lands around 250-350px. Reserving a banner's 100px here would leave a
   250px jump the moment it fills, which is the exact reflow the rest of this file
   exists to prevent. The floor is a floor, not a cap: the unit grows past it freely. */
.ew-ad[data-ad-layout] {
    min-height: 280px;
}

@media (min-width: 768px) {
    .ew-ad[data-ad-layout] {
        min-height: 320px;
    }
}

/* ---- keep them inside the page ----
   Same containment as everywhere else: an iframe with an intrinsic width is exactly
   the kind of injected content that drags a phone layout sideways. */
.ew-ad iframe,
.ew-ad ins,
.ew-ad img {
    max-width: 100% !important;
}

/* ---- the in-article slot lives in hostile territory ----
   It sits INSIDE .news-article-body, which also carries whatever <style> block the
   wire service shipped with the release. That CSS is unscoped — PR Newswire and
   friends write rules against bare element names and generic class names — so it can
   reach our markup and float it, shrink it, or center it into something odd.

   These restate the essentials at a specificity the injected CSS is unlikely to beat.
   Same reasoning as the long-URL overflow fix on this page: assume the article's own
   styles are adversarial, because they were written for someone else's page. */
.news-article-body .ew-ad {
    display: block;
    float: none;
    clear: both;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 24px auto;
    padding: 0;
    box-sizing: border-box;
}

.news-article-body .ew-ad-head {
    display: flex;
    justify-content: space-between;
}

@media print {
    .ew-ad {
        display: none;
    }
}