/* Google AdSense containers.
   Loaded after every site and skin sheet, because part of its job is undoing
   styling those sheets apply to bare img elements.

   Nothing here decorates the ad. A background, a border or a frame would make
   an advertisement look like part of the site, and restyling a creative is
   modifying the advertiser's work. The container carries spacing and reserved
   height; the ad itself is left exactly as Google delivers it. */

.rr-ad {
  display: block;
  position: relative;
  clear: both;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-inline: auto;   /* centred in its column */
  text-align: center;
  /* Contained, not clipped for its own sake.

     A unit that tries to break out of its column has nowhere good to go on
     this site: html and body both set overflow-x:hidden, so the excess is
     thrown away without a scrollbar and the reader just sees an ad with its
     headline sliced off — which is exactly what happened on mobile the day
     this shipped, and on an RTL page it sliced from the left.

     The real fix is data-full-width-responsive="false" in inc/ads.php, which
     makes Google size the unit to this box in the first place. This is the
     backstop for anything that still misbehaves. */
  overflow: hidden;
  /* Deliberately low. Google's consent message must always be able to paint
     above site content, and an ad container that opens a stacking context
     would also trap any fixed-position unit inside it. */
  z-index: 0;
}

/* Nothing inside may be wider than the column, whatever Google puts there. */
.rr-ad .adsbygoogle,
.rr-ad ins,
.rr-ad iframe {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto;
}

/* Modest reserved height so the page does not jump when a unit fills, without
   carving out a hole that stays empty when it does not. Removed the moment
   Google reports the unit unfilled. */
.rr-ad:not(.rr-ad--empty) { min-height: 100px; }
.rr-ad--blog_in_article:not(.rr-ad--empty),
.rr-ad--blog_after_intro:not(.rr-ad--empty),
.rr-ad--blog_before_end:not(.rr-ad--empty) { min-height: 250px; }

/* Unfilled: collapse completely. :empty is not usable here, because the
   container still holds the ins element Google left behind. */
.rr-ad--empty {
  min-height: 0 !important;
  height: 0;
  margin: 0 !important;
  overflow: hidden;
}

/* Device gating.
   The wrapper is hidden BEFORE any ad is requested; ads.js refuses to push for
   a unit it cannot see, so a hidden slot costs nothing and books nothing. */
.rr-ad--mobile { display: none; }
@media (max-width: 900px) {
  .rr-ad--mobile  { display: block; }
  .rr-ad--desktop { display: none; }
}

/* Inside a photo grid a unit must take the whole row. The grid's own columns
   are around 330px wide, which no standard unit fits without overflowing, and
   html/body carry overflow-x:hidden so the overflow would be silently clipped
   rather than visible. */
.rr-ad--span,
.gallery-grid > .rr-ad { grid-column: 1 / -1; }

/* Undo site rules that would restyle a creative.
   assets/css/mobile-redesign.css puts border-radius, box-shadow and margins on
   bare img inside main article, .page-content and .story-content, and
   index-page.css rounds img inside .top-banner-inner. Applied to an
   advertiser's image that is a modification of the ad, so it is neutralised
   here rather than by editing those rules. */
.rr-ad img,
.rr-ad iframe,
.rr-ad ins {
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  background: none;
  filter: none;
  object-fit: fill;
  max-width: 100%;
}

/* Test mode: a local placeholder. No ins element, no request to Google, no
   impression. This is what the panel's Test Mode renders instead of a unit. */
.rr-ad-test {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 100px;
  padding: 18px 14px;
  border: 2px dashed #b9b9c2;
  border-radius: 10px;
  background: repeating-linear-gradient(45deg, #fafafa, #fafafa 10px, #f2f2f4 10px, #f2f2f4 20px);
  color: #55555f;
  font: 500 13px/1.4 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  direction: ltr;
}
.rr-ad-test-k { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; opacity: .75; }
.rr-ad-test code {
  font: 600 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #fff;
  border: 1px solid #dcdce2;
  border-radius: 5px;
  padding: 4px 8px;
}
.rr-ad-test-d { font-size: 11px; opacity: .6; }