/* /css/ads.css: ad slots (§7.4). Two states, chosen before first paint so nothing ever shifts:
   compact (default): a quiet one-line house strip, no empty boxes;
   reserved: html[data-ad-consent="accepted"] body[data-ads="on"] (set by theme-init.js), or .is-reserved
   (set by ads.js for slots wholly below the viewport when the learner accepts mid-page). */

.ad-slot {
  margin-block: var(--s-6);
  clear: both;
  font-family: var(--font-sans);
  text-align: center;
}
.ad-label, .ad-box { display: none; }
.ad-why {
  font-size: .76rem;
  color: var(--ink-muted);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .2em .5em;
  flex-wrap: wrap;
}
.ad-why::before, .ad-why::after {
  content: "";
  flex: 1 1 2rem;
  max-width: 7rem;
  border-top: 1px solid var(--rule);
}
.ad-why a { color: var(--ink-muted); }
.ad-why a:hover { color: var(--ink); }

/* No ad will show: the slot takes no space (SPEC §10.11 supersedes §7.4's compact strip). Decided before first
   paint, so CLS stays 0; a slot reserved after a mid-page accept is wholly below the viewport. */
html:not([data-ad-consent="accepted"]) .ad-slot:not(.is-reserved) { display: none; }

html[data-ad-consent="accepted"] body[data-ads="on"] .ad-slot,
.ad-slot.is-reserved {
  min-height: 330px;
  margin-block: var(--s-7);
  contain: layout;
}
html[data-ad-consent="accepted"] body[data-ads="on"] .ad-label,
.ad-slot.is-reserved .ad-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-muted);
  margin-bottom: var(--s-2);
}
html[data-ad-consent="accepted"] body[data-ads="on"] .ad-box,
.ad-slot.is-reserved .ad-box {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 280px;
  background: var(--ad-bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-m);
  overflow: hidden;
}
@media (max-width: 699px) {
  html[data-ad-consent="accepted"] body[data-ads="on"] .ad-box,
  .ad-slot.is-reserved .ad-box { min-height: 250px; }
}
html[data-ad-consent="accepted"] body[data-ads="on"] .ad-why,
.ad-slot.is-reserved .ad-why { margin-top: var(--s-2); }
.ad-box ins.adsbygoogle { display: block; width: 100%; }
.ad-house { font-size: .8rem; color: var(--ink-muted); padding: var(--s-5); max-width: 36ch; }
/* House content replaces an unfilled or blocked ad: the empty <ins> takes no grid row, and the slot's own
   "Why ads?" line is hidden (visibility, so the reserved height never changes) to avoid saying it twice. */
.ad-box:has(> .ad-house) > ins.adsbygoogle { display: none; }
.ad-slot:has(.ad-house) > .ad-why { visibility: hidden; }