/**
 * AdSense container styles, shared by every tool site.
 *
 * This file is functional infrastructure — min-heights that prevent layout
 * shift, the flex width fix, unfilled-slot collapse — not site identity
 * styling. Sharing it across sites is correct; site look-and-feel stays in
 * each site's own stylesheet.
 */

/* ==========================================================================
   Base container
   ========================================================================== */

.ad-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-block: 1.5rem;
    margin-inline: auto;
    overflow: hidden;
}

/* ==========================================================================
   Unit sizes. Each min-height matches the expected creative so the slot
   reserves its space before AdSense fills it — this is the CLS defense.
   ========================================================================== */

.ad-in-content-display {
    min-height: 250px;
    max-width: 336px;   /* allows 336x280 as well as 300x250 */
}

.ad-in-article {
    min-height: 100px;
    width: 100%;
    max-width: 100%;
}

.ad-multiplex {
    min-height: 250px;
    width: 100%;
    max-width: 100%;
}

/* Responsive (display:block) and fluid <ins> elements shrink to zero width as
   flex items inside .ad-container, which makes adsbygoogle.push() throw
   "No slot size for availableWidth=0". Every unit here is responsive, so
   every one must be forced to fill its container. */
.ad-in-content-display ins.adsbygoogle,
.ad-in-article ins.adsbygoogle,
.ad-multiplex ins.adsbygoogle,
.ad-sidebar-display ins.adsbygoogle {
    width: 100%;
}

/* ==========================================================================
   Unfilled-slot collapse
   AdSense stamps data-ad-status="unfilled" on the <ins> when it has no
   creative. Collapsing in CSS means there is nothing to sequence against
   the lazy push loop.
   ========================================================================== */

.ad-container:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
    display: none;
}

.infeed-ad-cell:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
    display: none;
}

/* ==========================================================================
   In-feed cells
   Per AdSense docs the parent needs a valid width (min 250px) and a
   variable height.
   ========================================================================== */

.infeed-ad-cell {
    width: 100%;
    min-width: 250px;
    overflow: visible;
}

/* ==========================================================================
   Dev-only placeholder (DEBUG)
   Reuses the unit's container class, so min-height and breakpoints match
   prod exactly. Never present in a distill build.
   ========================================================================== */

.ad-placeholder {
    border: 1px dashed currentColor;
    border-radius: 0.25rem;
    opacity: 0.35;
}

.ad-placeholder__label {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ==========================================================================
   Side rails — wide desktop only, displacing no content.
   Width is fluid: it fills the gutter outside the content shell, so the
   `auto` unit serves the largest vertical the space allows — a 160x600 wide
   skyscraper when narrow, stepping up to a 300x600 half-page as the screen
   widens. 300px is the ceiling because that is the widest vertical AdSense
   sells; a wider gutter cannot buy a bigger vertical.
   The 1840px breakpoint is where the clamp first reaches its 160px floor:
   (1840 - 1440) / 2 - 40 = 160. Below it there is no clean gutter.
   ========================================================================== */

.side-rail { display: none; }

@media (min-width: 1840px) {
    .side-rail {
        display: block;
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        width: clamp(160px, calc((100vw - 1440px) / 2 - 40px), 300px);
        z-index: 15;
    }
    /* Hug the content shell so the rail's inner edge stays 20px off the
       content and extra gutter on ultra-wide screens falls toward the
       viewport edge, keeping the ad next to the reading area. */
    .side-rail--left { right: calc(50% + 740px); }
    .side-rail--right { left: calc(50% + 740px); }
    /* The tall min-height signals a vertical slot, so `auto` serves a
       skyscraper rather than a short rectangle. */
    .side-rail .ad-container { margin: 0; min-height: 600px; }
}

/* ==========================================================================
   Auto-ad exclusion zones
   Interactive areas (chart editors, calculator widgets) opt out of Google
   auto-placed ads via data-no-auto-ads. lazy_ads.js removes injected units;
   this hides any flash before removal. Never place a manual unit inside one.
   ========================================================================== */

[data-no-auto-ads] .google-auto-placed,
[data-no-auto-ads] ins.adsbygoogle {
    display: none !important;
}