/*
 * AdSlot reserved space.
 * The wrapper always keeps its desktop/mobile height, with or without an ad,
 * so nothing below it moves when an ad loads.
 */
.ad-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--ad-h, 280px);
  margin: 26px 0;
}

.ad-slot__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ad-w, 336px);
  max-width: 100%;
  height: var(--ad-h, 280px);
  overflow: hidden;
}

/* Debug view: open any page with ?ads=debug to see the reserved boxes. */
.ad-slot.is-debug {
  outline: 1px dashed #c3d0e4;
  outline-offset: 4px;
  background: rgba(36, 87, 214, .03);
}

.ad-slot.is-debug::before {
  content: "ad slot: " attr(data-ad-slot);
  position: absolute;
  top: 6px;
  left: 8px;
  color: #8a99ad;
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (max-width: 700px) {
  .ad-slot {
    min-height: var(--ad-h-m, 100px);
    margin: 20px 0;
  }

  .ad-slot__box {
    width: var(--ad-w-m, 320px);
    height: var(--ad-h-m, 100px);
  }
}