/* Ad slots — markup comes from ads.js on the server (and post-content.js for
   between-card ads). The box gets its exact on-screen width from the server
   (style="max-width"), and the image keeps its real proportions from its
   width/height attributes, so space is reserved before it loads: no jumping. */
.ad { position: relative; width: 100%; margin: 0 auto; line-height: 0; }
.ad a { display: block; }
.ad img { display: block; width: 100%; height: auto; border-radius: 12px; }
/* banner without a known size (uploaded before sizes were recorded) */
.ad-nodims img { width: auto; max-width: 100%; max-height: 280px; margin: 0 auto; }
.ad-label {
  position: absolute; top: 6px; left: 6px; z-index: 1;
  font: 500 10px/1.6 'Inter', system-ui, sans-serif; letter-spacing: .02em;
  color: #fff; background: rgba(7, 11, 20, .6); padding: 0 7px; border-radius: 999px;
  pointer-events: none;
}

/* thin strips */
.ad-header_strip { margin: 16px auto 4px; }
.ad-header_strip, .ad-post_top, .ad-post_bottom { box-sizing: content-box; }
.ad-post_top { margin: 0 auto 1.4em; }
.ad-post_bottom { margin: 1.6em auto 0; }
/* page gutter for the strip under the menu */
.ad-header_strip { width: calc(100% - 32px); }

/* inside the article */
.post-content .ad-post_middle { margin: 1.6em auto; }
.post-content .ad-post_middle img { margin: 0; }

/* between post cards: sits in the grid like a card */
.ad-list_inline {
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px; overflow: hidden; min-height: 100%;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03);
}
.ad-list_inline img { border-radius: 0; width: var(--ad-scale, 100%); }
/* the same card-shaped ad among the "more posts" cards under an article */
.ad-related {
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; overflow: hidden; min-height: 100%;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03);
}
.ad-related img { border-radius: 0; width: var(--ad-scale, 100%); }
/* rails are fixed-width columns: a bigger size can't make them wider than 160px */
.ad-rail { max-width: 160px !important; }

/* side rails next to the article, on any screen wide enough to fit them
   (laptops included). A tall banner shrinks to fit the window height. */
.ad-rails { display: none; }
@media (min-width: 1240px) {
  .ad-rails { display: block; }
  .ad-rail { position: fixed; top: 96px; z-index: 30; width: 160px; }
  .ad-rail img { width: auto; max-width: 100%; max-height: calc(100vh - 120px); margin: 0 auto; }
  .ad-rail-right { right: max(12px, calc(50% - 430px - 180px)); }
  .ad-rail-left { left: max(12px, calc(50% - 430px - 180px)); }
}

/* popup ad */
.ad-popup { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ad-popup[hidden] { display: none; }
.ad-popup-backdrop { position: absolute; inset: 0; background: rgba(3, 6, 12, .72); backdrop-filter: blur(2px); opacity: 0; transition: opacity .2s ease; }
.ad-popup-box {
  position: relative; width: 100%; line-height: 0;
  transform: scale(.94); opacity: 0; transition: transform .2s ease, opacity .2s ease;
}
.ad-popup.is-open .ad-popup-backdrop { opacity: 1; }
.ad-popup.is-open .ad-popup-box { transform: none; opacity: 1; }
.ad-popup-box img { display: block; width: 100%; height: auto; max-height: calc(100vh - 96px); object-fit: contain; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .55); }
.ad-popup-box .ad-label { top: 10px; left: auto; right: 10px; }
.ad-popup-close {
  position: absolute; top: -14px; left: -14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff;
  background: #0b1220; color: #fff; font: 700 26px/1 Arial, sans-serif; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0 0 3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}
.ad-popup-close:hover, .ad-popup-close:focus-visible { background: #c8ff3d; color: #0b1017; outline: none; }
@media (max-width: 480px) { .ad-popup-close { top: -10px; left: -6px; } }
html.ad-popup-lock, html.ad-popup-lock body { overflow: hidden; }

/* above / below the green prediction frame */
.post-content .ad-pred_above { margin: 1.4em auto .8em; }
.post-content .ad-pred_below { margin: .8em auto 1.4em; }
.post-content .ad-pred_above img, .post-content .ad-pred_below img { margin: 0; }