/* ============================================================================
   RootPro — advertising slots
   ----------------------------------------------------------------------------
   Styled with the site's own design tokens (--surface-*, --border-subtle,
   --fg-*, --radius-*) so an ad frame reads as part of the page rather than
   something bolted on.

   Two things drive every decision here:

   1. NO LAYOUT SHIFT. Each slot reserves its height before the ad arrives.
      An ad that pushes the article down as the reader is reading is the single
      most damaging thing you can do to Cumulative Layout Shift — and CLS is a
      ranking signal. Reserving space costs nothing and removes the problem.

   2. HONEST LABELLING. Every slot is labelled "Advertisement". Ads that
      masquerade as content get short-term clicks and long-term distrust, and
      unlabelled in-feed units breach AdSense's own placement policy.
   ========================================================================== */

.rp-ad {
  /* `contain` keeps the ad iframe's internal layout from invalidating the
     surrounding article layout. */
  contain: layout style;
  display: block;
  margin: 2.5rem auto;
  max-width: 100%;
  text-align: center;
}

/* Reserved space per placement. Values are the typical rendered height of each
   AdSense format, so the box rarely has to grow once filled. */
.rp-ad[data-rp-ad="in-article"] { min-height: 280px; }
.rp-ad[data-rp-ad="in-feed"]    { min-height: 150px; }
.rp-ad[data-rp-ad="display"]    { min-height: 250px; }

@media (max-width: 640px) {
  .rp-ad { margin: 2rem auto; }
  .rp-ad[data-rp-ad="in-article"] { min-height: 250px; }
  .rp-ad[data-rp-ad="in-feed"]    { min-height: 130px; }
  .rp-ad[data-rp-ad="display"]    { min-height: 200px; }
}

/* ---- Label ---------------------------------------------------------------- */
.rp-ad__label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--fg-faint, #8d93b0);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  user-select: none;
}

/* ---- Frame --------------------------------------------------------------- */
.rp-ad__inner {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.09));
  border-radius: var(--radius-lg, 18px);
  background: var(--surface-2, rgba(255, 255, 255, 0.03));
  min-height: inherit;
}

.rp-ad ins.adsbygoogle {
  display: block;
  width: 100%;
  /* Never let a misbehaving creative escape its frame on mobile. */
  max-width: 100%;
}

/* ---- Placeholder shown until the ad paints ------------------------------- */
/* A faint shimmer signals "something is loading here" rather than leaving a
   dead rectangle. It is removed as soon as the slot reports a fill. */
.rp-ad__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    90deg,
    transparent 20%,
    color-mix(in srgb, var(--fg-primary, #fff) 4%, transparent) 50%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: rp-ad-shimmer 1.8s ease-in-out infinite;
  pointer-events: none;
}
.rp-ad.is-filled .rp-ad__inner::before,
.rp-ad.is-unfilled .rp-ad__inner::before { display: none; }

@keyframes rp-ad-shimmer {
  0%   { background-position: 120% 50%; }
  100% { background-position: -20% 50%; }
}

/* ---- Unfilled ------------------------------------------------------------
   AdSense sets data-ad-status="unfilled" when it has no ad to serve. Keeping a
   reserved-but-empty box would look broken, so the slot collapses. The
   resulting shift is deliberate and low-cost: slots load lazily as they come
   into view, and CLS only counts shifts inside the viewport, so this almost
   always resolves off-screen. A permanent empty gap would be worse. */
.rp-ad.is-unfilled {
  min-height: 0 !important;
  margin: 0;
  border: 0;
}
.rp-ad.is-unfilled .rp-ad__inner,
.rp-ad.is-unfilled .rp-ad__label { display: none; }

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rp-ad__inner::before { animation: none; }
}

/* ---- Print --------------------------------------------------------------- */
/* Nobody wants to print an advert. */
@media print {
  .rp-ad { display: none !important; }
}