/* -------------------------------------------------------------------------
   Ad slots
   Deliberate, low-key AdSense placements for single blog posts.
   Loaded only on pages that can show ads (see functions-parts/ads.php).
   ---------------------------------------------------------------------- */

.ad-slot {
  display: block;
  clear: both;
  margin: 40px auto;
  padding: 0;
  max-width: 580px;
  text-align: center;
}

/* Hairline separation. Quieter than a box, still signals "not editorial". */
.ad-slot::before,
.ad-slot::after {
  content: "";
  display: block;
  height: 1px;
  background: #EFF1F2;
}

.ad-slot::before {
  margin-bottom: 10px;
}

.ad-slot::after {
  margin-top: 10px;
}

.ad-slot__label {
  display: block;
  font-family: "Source Sans 3", sans-serif;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9AA3A9;
  margin-bottom: 10px;
  -webkit-user-select: none;
  user-select: none;
}

.ad-slot__unit {
  display: block;
}

.ad-slot .adsbygoogle {
  display: block;
  margin: 0 auto;
}

/* End-of-post unit sits a little further from the article body. */
.ad-slot--endcap {
  margin: 56px auto 40px;
  max-width: 720px;
}

/* -------------------------------------------------------------------------
   Unfilled slots and layout shift.

   Reserving height only pays off if we can also collapse the slot when
   AdSense returns no fill. Both depend on :has(), so both are gated behind
   the same @supports test. In a browser without :has() we reserve nothing
   and accept a little shift, rather than leaving an empty labelled box
   with rules around it.
   ---------------------------------------------------------------------- */

@supports selector(:has(*)) {
  .ad-slot__unit {
    min-height: 110px;
  }

  .ad-slot--endcap .ad-slot__unit {
    min-height: 180px;
  }

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

@media (max-width: 700px) {
  .ad-slot {
    margin: 32px auto;
    max-width: 100%;
  }

  .ad-slot--endcap {
    margin: 40px auto 32px;
  }
}

@media print {
  .ad-slot {
    display: none;
  }
}