/* ─────────────────────────────────────────────────────────────────────
   Leaderboard strips for the hand-written pages (about, blog, advertise,
   merch, legal …). Those pages load their own stylesheet and none of the
   shared .ad-banner rules from ads.css/style.css, so the top + bottom
   slots injected by scripts/stamp-origin.mjs would render as bare links.

   Mirrors the .ad-banner/.ad-strip block in style.css on purpose: the
   server-rendered pages and the SPA homepage keep their rules, these
   pages get an equivalent copy in one small file (~1 KB). Keep the two
   in sync if the box design changes.
   ───────────────────────────────────────────────────────────────────── */

.ad-strip {
  display: flex;
  justify-content: center;
  /* Full width even when the page body is a centred flex column (the
     server-rendered shells are) — otherwise the strip shrink-to-fits to its
     own 32px padding and a not-yet-loaded creative collapses it to 0. */
  width: 100%;
  max-width: 1440px;
  margin: 16px auto;
  padding: 0 16px;
}

.ad-strip .ad-banner {
  width: 100%;
  max-width: 728px;
  min-height: 90px;
}
.ad-strip-top { margin-top: 18px; }
.ad-strip-bottom { margin: 30px auto 6px; }

/* Shared ad box. */
.ad-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px dashed #232326;
  border-radius: 12px;
  background: #111113;
  text-align: center;
  padding: 22px 14px;
  text-decoration: none;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ad-banner:hover,
.ad-banner:focus-visible {
  border-color: #e50914;
  box-shadow: 0 0 34px rgba(229, 9, 20, 0.2);
}

.ad-banner-h {
  flex-direction: row;
  gap: 22px;
  padding: 20px 32px;
}
.ad-banner-h .ad-text { font-size: 20px; }
.ad-banner-h .ad-contact { font-size: 15px; }

.ad-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #8b8b93;
  border: 1px solid #232326;
  border-radius: 4px;
  padding: 2px 7px;
}
.ad-text {
  font-family: "Archivo Black", "Arial Black", Impact, sans-serif;
  letter-spacing: 2px;
  color: #fff;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}
.ad-contact {
  font-weight: 700;
  color: #fff;
  font-size: 12px;
  word-break: break-all;
}

@media (max-width: 560px) {
  .ad-strip { padding: 0 12px; margin: 12px auto; }
  .ad-strip .ad-banner { min-height: 74px; }
  .ad-banner-h { flex-direction: column; gap: 8px; padding: 16px 14px; }
  .ad-banner-h .ad-text { font-size: 15px; }
  .ad-banner-h .ad-contact { font-size: 12px; }
}

/* Sponsor creative swapped in by /js/ads.js from /api/ad/stats. */
.ad-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}
.ad-banner-h .ad-img { max-height: 120px; }

/* ─────────────────────────────────────────────────────────────────────
   House creatives — a real shop banner pre-rendered into the slot by
   functions/_shared/house-ads.js (stamp time for the static pages, render
   time for the server-rendered ones).

   The creative fills the box edge to edge instead of a text placeholder,
   and the AD label overlays its top-left corner. That label is absolutely
   positioned INSIDE the box: `overflow: hidden` clips it there, so it can
   never sit over page content, and it is pointer-events:none. The <img>
   ships width/height (or max-height in a fixed-height rail), so the space
   is reserved before first paint — filling a slot costs zero CLS.
   ───────────────────────────────────────────────────────────────────── */
.ad-banner.ad-house {
  position: relative;
  padding: 0;
  gap: 0;
  /* The creative's own reserved box is the height — the rotating
     .ad-size-* min-heights must not pad it out with empty background. */
  min-height: 0;
  border: 0;
  background: #0b0b0c;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 0 1px #1c1c20;
}
.ad-banner.ad-house .ad-tag {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  pointer-events: none;
  background: rgba(6, 6, 6, 0.72);
  border-color: rgba(255, 255, 255, 0.16);
  color: #d8d8de;
}
.ad-banner.ad-house .ad-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 0;
}
/* Fixed-height rail box (160px wide, 600px tall): keep the skyscraper at its
   natural 160x600 inside the box instead of stretching it to the rail width. */
.ad-rail .ad-banner.ad-house .ad-img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
}