/* =========================================================
   ADSENSE (CLEAN + CONSOLIDATED) — STABLE BOX UI (no clipping)
   Works with: rm-ad, rm-ad--topbar, rm-ad--card, rm-ad--inarticle, rm-ad--sidebar
========================================================= */

/* Wrapper for any ad block */
.rm-ad{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  /* Center fixed creatives without forcing their internal sizing */
  display: flex;
  justify-content: center;

  line-height: 0; /* prevent baseline gaps */
}

/* The AdSense slot */
.rm-ad ins.adsbygoogle{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box;

  /* Reserve space to reduce CLS (can be overridden per placement) */
  min-height: var(--rm-ad-minh, 250px);

  /* Never clip the creative */
  overflow: visible !important;
}

/* When AdSense has decided a status (filled OR unfilled), stop forcing reserve height */
.rm-ad ins.adsbygoogle[data-ad-status]{
  min-height: 0 !important;
}

/* IMPORTANT:
   Do NOT globally resize AdSense injected iframe wrappers.
   Many “cut off” issues come from max-width rules on iframes.
   We only neutralize your global iframe max-width for ads.
*/
.rm-ad iframe,
.rm-ad ins.adsbygoogle iframe{
  max-width: none !important;
}

/* =========================================================
   Card shell (topbar + in-content + sidebar)
   Uses ::after for the box so we never need overflow:hidden
========================================================= */
.rm-ad--topbar,
.rm-ad--card{
  position: relative;
  padding: 30px 16px 14px;
  overflow: visible;
  --rm-ad-minh: 250px;
}

/* Topbar is usually shorter */
.rm-ad--topbar{
  margin: 14px 0 18px;
  --rm-ad-minh: 90px;
}

.rm-ad--card{
  margin: 18px 0 22px;
}

/* Box background/border behind the ad */
.rm-ad--topbar::after,
.rm-ad--card::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* “Advertisement” label */
.rm-ad--topbar::before,
.rm-ad--card::before{
  content: "Advertisement";
  position: absolute;
  top: 10px;
  left: 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--rm-muted);
  line-height: 1.2;
  z-index: 2;
  pointer-events: none;
}

/* Ensure the slot sits above the box */
.rm-ad--topbar ins.adsbygoogle,
.rm-ad--card ins.adsbygoogle{
  position: relative;
  z-index: 1;
}

/* Collapse unfilled AdSense blocks completely */
.rm-ad:has(> ins.adsbygoogle[data-ad-status="unfilled"]){
  display: none !important;
}

/* Fallback: at least hide the slot itself */
.rm-ad ins.adsbygoogle[data-ad-status="unfilled"]{
  display: none !important;
}

/* =========================================================
   SIDEBAR AD (boxed, but never pushes outside layout)
   Sidebar is the only place we allow clipping.
========================================================= */
.rm-ad--sidebar{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  /* Prevent “push outside box” in narrow side columns */
  overflow: hidden;
}

/* =========================================================
   MOBILE: Ad "Strip" mode (clean, centered, no messy bleed)
   - Full width
   - Only top/bottom border + label
   - Centers creatives (even-crops if too wide)
========================================================= */
@media (max-width: 782px){

  .rm-ad--topbar,
  .rm-ad--card,
  .rm-ad--inarticle{
    --rm-ad-minh: 120px;
  }
  
  /* Apply to topbar + in-article cards + sidebar cards on mobile */
  .rm-ad--topbar,
  .rm-ad--card,
  .rm-ad--sidebar{
    /* full-bleed without Safari offset issues */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    /* strip styling */
    background: var(--rm-bg);
    border-top: 1px solid var(--rm-border);
    border-bottom: 1px solid var(--rm-border);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;

    /* IMPORTANT: hide overflow so wide creatives don't “spill” */
    overflow: hidden;

    /* simple spacing */
    padding: 10px 0 12px;
  }

  /* If you use the ::after "card" layer, kill it on mobile */
  .rm-ad--topbar::after,
  .rm-ad--card::after,
  .rm-ad--sidebar::after{
    display: none !important;
  }

  /* Put the label in normal flow (no overlap, no weird clipping) */
  .rm-ad--topbar::before,
  .rm-ad--card::before,
  .rm-ad--sidebar::before{
    position: static;
    display: block;
    padding: 0 calc(14px + env(safe-area-inset-left)) 8px;
    margin: 0;
    text-align: left;
  }

  /* Center the ad itself inside the full-bleed strip */
  .rm-ad--topbar,
  .rm-ad--card,
  .rm-ad--sidebar{
    display: flex;
    flex-direction: column;
    align-items: center;   /* centers the iframe horizontally */
  }

  /* Gutters go on the slot (keeps safe-area correct) */
  .rm-ad--topbar ins.adsbygoogle,
  .rm-ad--card ins.adsbygoogle,
  .rm-ad--sidebar ins.adsbygoogle{
    padding-left: calc(14px + env(safe-area-inset-left));
    padding-right: calc(14px + env(safe-area-inset-right));
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}

/* Tiny phones: slightly tighter gutters (still safe-area aware) */
@media (max-width: 360px){
  .rm-ad--topbar ins.adsbygoogle,
  .rm-ad--card ins.adsbygoogle,
  .rm-ad--sidebar ins.adsbygoogle{
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}