/* ═══════════════════════════════════════════════════════════════════════════
   MagEmbed Ads 1.10.1 — front styles (Spot Engine + Stack)
   Loaded site-wide (~1 KB). Three jobs:
   1. CENTER every spot ad unit, whatever markup lives in the block code.
   2. Lay out in-grid ad cells: content vertically centered, full height.
   3. COLLAPSE units Google leaves unfilled (no holes, no blank strips).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Spot zones (home/category top & bottom, before FAQ) ──────────────── */
.mads-spot {
    display: flow-root;          /* self-contained box: nothing bleeds out */
    width: 100%;
    margin: 12px auto 22px;      /* breathing room, esp. above the footer */
    padding: 0 8px;
    box-sizing: border-box;
    text-align: center;
}
/* Anti-CLS reserved height, tuned for HORIZONTAL ad formats
   (320×100 large mobile banner / 728×90 leaderboard). Collapsed
   units (unfilled) hide the whole spot, min-height included. */
.mads-spot .advertisement { min-height: 100px; }
@media (min-width: 768px) {
    .mads-spot { padding: 0; }
    .mads-spot .advertisement { min-height: 90px; }
}
.mads-spot .advertisement-container,
.mads-spot .advertisement {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}
.mads-spot ins.adsbygoogle {
    display: block;
    /* v1.10.1 — auto-centering WITHOUT !important. On mobile, AdSense
       full-width-responsive goes edge-to-edge by writing INLINE styles on
       the <ins>: a viewport width plus a NEGATIVE margin-left that pulls
       the unit back to the screen edge. The old !important beat that
       compensation while the width stayed → the box stuck out to the
       RIGHT. Plain 'auto' still centers whenever Google leaves margins
       alone, and yields to Google's own inline math when it expands. */
    margin-left: auto;
    margin-right: auto;
}
/* AdSense sometimes centers a fixed-size iframe inside the responsive <ins>;
   when it instead leaves it left-aligned, force the frame to the middle. */
.mads-spot ins.adsbygoogle > iframe {
    margin-left: auto;
    margin-right: auto;
}

/* ── 3. Unfilled collapse ────────────────────────────────────────────────── */
/* Google marks empty slots with data-ad-status="unfilled": make the whole
   unit vanish — the grid re-flows with no dark hole, the spot leaves no
   blank strip. (:has() is supported by every current engine.) */
.mads-spot:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
    display: none;
}


/* ── 4. Per-block sponsored label (v1.5.0, server-side, JS-free) ─────────── */
.mads-unit__label {
    display: table;                /* v1.5.2 — per-unit label, right-flushed
                                      inside the ad box; in-flow ~20px tall,
                                      so console's -20px pull realigns 1:1 */
    margin: 0 0 2px auto;
    position: relative;
    z-index: 6;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    color: #E800E8;
    background-color: #29007a;
    padding: 3px 6px;
    border-radius: 3px;
    pointer-events: none;
    visibility: hidden;            /* space reserved: zero layout shift */
}
/* Per-pair logic: the label sits IMMEDIATELY before its own <ins>. */
.mads-unit__label:has(+ ins.adsbygoogle iframe) { visibility: visible; }
.mads-unit__label:has(+ ins.adsbygoogle[data-ad-status="unfilled"]) { visibility: hidden; }


/* ── 5. Stack (v1.8.0 — [mads_stack ids="2,14,15"]) ──────────────────────── */
/* One shortcode composes several granular blocks in order. Flex column with
   gap = the vertical rhythm between units (replaces the old <br><br> shims):
   the gap only exists between RENDERED items, so a disabled / targeting-
   denied block (never printed) or an unfilled unit (item display:none below)
   closes the pile with no hole and no double spacing. The stack styles
   nothing else: each block's own markup stays sovereign. */
.mads-stack {
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.mads-stack__item { min-width: 0; }
.mads-stack__item:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
    display: none;
}