/*
 * Ad unit styling. Hand-written, unlike the `_`-prefixed files in this folder
 * which were extracted from the old Lucee pages.
 *
 * Heights are reserved up front so the page does not reflow when an ad loads.
 * The two variants map to how AdSense actually fills responsive units:
 *   banner  - wide and short. ~320x100 on phones, ~728x90 on desktop.
 *   inline  - between content blocks. ~300x250 on phones, larger on desktop.
 */

.omni-ad {
  display: block;
  margin: 32px auto;
  max-width: 100%;
  text-align: center;
  /* Ads must never widen the page on small screens. */
  overflow: hidden;
}

/* Small, unobtrusive, and worded exactly as Google's policy expects. */
.omni-ad__label {
  display: block;
  margin-bottom: 6px;
  color: #a0a0a0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}

.omni-ad__ins,
.omni-ad__placeholder {
  display: block;
  width: 100%;
}

/* ---- Mobile first ---- */
.omni-ad--banner .omni-ad__ins,
.omni-ad--banner .omni-ad__placeholder {
  min-height: 100px;
}

.omni-ad--inline .omni-ad__ins,
.omni-ad--inline .omni-ad__placeholder {
  min-height: 250px;
}

/* ---- Desktop ---- */
@media (min-width: 768px) {
  .omni-ad {
    margin: 40px auto;
  }
  .omni-ad--banner .omni-ad__ins,
  .omni-ad--banner .omni-ad__placeholder {
    min-height: 90px;
  }
  .omni-ad--inline .omni-ad__ins,
  .omni-ad--inline .omni-ad__placeholder {
    min-height: 280px;
  }
}

/* ---- Fallback shown when no ad renders ---- */
.omni-ad__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed #d0d0d0;
  border-radius: 6px;
  background: #fafafa;
  color: #b0b0b0;
  box-sizing: border-box;
}

.omni-ad__placeholder-text {
  font-size: 13px;
  letter-spacing: 0.04em;
}

.omni-ad__placeholder-sub {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #c8c8c8;
}