.newscard-ads { display: grid; gap: 12px; padding: 10px; box-sizing: border-box; max-width: 100%; margin: 0 auto; }
.newscard-ads .ad-item { display: flex; align-items: center; justify-content: center; background: #f5f5f5; border: none; box-sizing: border-box; position: relative; overflow: hidden; }
.newscard-ads .ad-placeholder { color: #666; font-weight: 600; }

/* default: mobile <470 -> 4 rows of 1 */
@media (max-width: 469px) {
  .newscard-ads { grid-template-columns: 1fr; }
  .newscard-ads .ad-item { height: 120px; }
}

/* 470 - 944: 2 rows of 2 */
@media (min-width: 470px) and (max-width: 944px) {
  .newscard-ads { grid-template-columns: repeat(2, 1fr); }
  .newscard-ads .ad-item { height: 180px; }
}

/* 945 - 1493: show at top (fixed strip) */
@media (min-width: 945px) and (max-width: 1493px) {
  /* top strip: visible in this range — flow in document (below header) */
  .ads-top-strip.newscard-ads { position: relative !important; display: flex !important; justify-content: center !important; gap: 12px !important; padding: 8px !important; background: rgba(255,255,255,0.95) !important; z-index: 160 !important; box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important; margin-top: 12px !important; margin-bottom: 12px !important; }
  /* make ad boxes match expected image height so strip doesn't collapse */
  .ads-top-strip.newscard-ads .ad-item { width: 225px; height: 225px; flex: 0 0 auto; }
}

  /* Safety: ensure flank ads are hidden on non-desktop widths */
  @media (max-width: 1493px) {
    .ads-flank { display: none !important; }
  }

/* >=1494: desktop 225x225 ads */
@media (min-width: 1494px) {
  /* desktop: default ad block sizing (used for below-calendar if needed) */
  .newscard-ads { grid-template-columns: 1fr; width: 225px; }
  .newscard-ads .ad-item { width: 225px; height: 225px; }
  .newscard-ads .ad-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

  /* flank ads (left and right outside the content wrapper) */
  .ads-flank { display: block; }
  .ads-flank .ad-item {
    display: block !important;
    width: 225px !important;
    height: 225px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #2ecc40 !important; /* green for debug, remove if not needed */
    box-sizing: border-box !important;
    position: relative !important;
    border: none !important;
    align-items: unset !important;
    justify-content: unset !important;
  }
  .ads-desktop-left, .ads-desktop-right { position: fixed; z-index: 999; }
  /* position left: center - half wrapper - ad width - gap (wrapper max-width assumed 1000px) */
  /* place flank ads at the viewport edges to avoid layout-dependent calculations */
}

/* Additional fixes: ensure flank ads are visible, not clipped, and sit above header */
@media (min-width: 1494px) {
  /* force the newscard output inside the flank to render */
  .ads-flank { display: block !important; visibility: visible !important; }
  .ads-flank .newscard-ads { display: grid !important; width: 225px !important; box-sizing: border-box; gap: 15px !important; }
  .ads-flank .newscard-ads .ad-item { display: block !important; width: 225px !important; height: 225px !important; }

  /* increase stacking so flank ads are visible (must be above header if header uses high z-index) */
  .ads-desktop-left, .ads-desktop-right { z-index: 100001 !important; pointer-events: auto !important; }

  /* make sure positioning calculations don't send ads off-screen on some layouts */
}

/* hide flank and top by default on small screens */
.ads-flank { display: none; }
.ads-top-strip { display: none; }
.ads-below-calendar { display: none; }

/* below 919: show ads below calendar area */
@media (max-width: 944px) {
  .ads-below-calendar.newscard-ads { display: grid; gap: 12px; padding: 8px; }
}

/* expose ads-below-calendar grid columns based on width */
@media (min-width: 470px) and (max-width: 944px) {
  .ads-below-calendar.newscard-ads { grid-template-columns: repeat(2, 1fr); }
  .ads-below-calendar.newscard-ads .ad-item { height: 180px; }
}
@media (max-width: 469px) {
  .ads-below-calendar.newscard-ads { grid-template-columns: 1fr; }
  .ads-below-calendar.newscard-ads .ad-item { height: 120px; }
}

/* Ensure header sits above ads if header is fixed or positioned */
header, .site-header, #masthead {
  position: relative;
  z-index: 99999;
}

/* Small safety spacing for the ads container inside the content wrapper */
.ads-top-wrap { margin-top: 12px; }

/* Prevent the top-strip from behaving as fixed/sticky; force it into document flow */
.ads-top-strip.newscard-ads,
.ads-top-wrap {
  position: static !important;
  top: auto !important;
  transform: none !important;
  z-index: 60 !important;
}

/* Additional safeguard: force all newscard-ads to be non-fixed and lower stacking */
.newscard-ads, .newscard-ads.ads-top-strip {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 1 !important;
}

/* Ensure main content stacks above ads to prevent overlap */
.directory-content-wrapper, .events-main, .events-grid {
  position: relative;
  z-index: 10;
}

/* Make sure top-strip uses full container width and doesn't overflow */
.ads-top-strip.newscard-ads { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }

/* High-specificity override to defeat other fixed/sticky rules from parent themes/plugins */
@media (min-width: 945px) and (max-width: 1493px) {
  .ads-top-wrap {
    /* reserve space equal to ad height to avoid overlap */
    min-height: 240px !important;
  }
  html body .newscard-ads.ads-top-strip,
  html body .ads-top-wrap .newscard-ads.ads-top-strip {
    position: static !important;
    min-height: 225px !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 1 !important;
    width: 100% !important;
  }
  /* ensure main content sits above ads */
  html body .directory-content-wrapper,
  html body .events-main { position: relative !important; z-index: 10 !important; }
}

/* Persist the runtime fixes: ensure ad items and wrapper keep the necessary heights */
@media (min-width: 945px) and (max-width: 1493px) {
  .newscard-ads.ads-top-strip .ad-item {
    height: 225px !important;
    min-height: 225px !important;
    width: 225px !important;
  }
  .newscard-ads.ads-top-strip {
    min-height: 240px !important;
  }
}

/* Ensure ad images fill their containers and use cover to avoid letterboxing */
.newscard-ads .ad-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}