/* ==========================================================================
   VotingSite · ad inventory.

   Loaded after style.css and reusing its tokens (--bg, --panel, --panel-2,
   --border, --text, --muted, --accent, --r, --gap, --shadow-sm). Dark by
   default, light under html[data-theme="light"], exactly like everything else.

   NAMESPACE: every selector here starts with .adx. The older placeholder in
   src/views/partials.js owns the un-prefixed .ad-slot / .ad-box / .ad-tag rules
   in discovery.css; the two systems coexist without touching each other.

   THE ONE RULE THIS FILE EXISTS FOR: the box is sized before anything loads.
   src/views/ads.js writes --adx-w / --adx-h (and --adx-w-1/-2 … for the
   narrower alternatives) inline from the size registry; everything below reads
   those variables. No ad, however slow, can move the page after paint.

   THE OTHER RULE: no position: fixed. There is no full-screen interstitial and
   no sticky footer unit in this file, on purpose · a mobile visitor who cannot
   scroll past an ad does not come back, and the credibility of the list is the
   product.
   ========================================================================== */

/* ------------------------------------------------------------- container -- */
.adx {
  display: block;
  margin: 0 auto var(--gap);
  width: var(--adx-w, 300px);
  max-width: 100%;
  /* min-height is also set inline, so the reservation survives a stylesheet
     that has not arrived yet. */
  min-height: var(--adx-h, 250px);
  text-align: center;
}

/* The reserved box itself. `height` holds the space outright; aspect-ratio is
   the backstop for a viewport narrower than the unit, where the box shrinks to
   100% width and must keep its proportions instead of letterboxing. The ratio
   arrives as a unitless --adx-r (e.g. "728/90"), because aspect-ratio does not
   accept pixel values. */
.adx-box {
  position: relative;
  width: 100%;
  height: var(--adx-h, 250px);
  aspect-ratio: var(--adx-r, 6 / 5);
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
}

/* An ad tag that overflows its box must clip, never widen the layout. */
.adx-box > ins,
.adx-box > iframe,
.adx-box img { max-width: 100%; }
.adx-box ins.adsbygoogle { display: block; margin: 0 auto; }

/* ----------------------------------------------------------------- label -- */
/* Required by AdSense policy ("Advertisement" / "Sponsored links" only · do not
   reword it to something that implies endorsement), and the honest thing to do
   regardless. Small, quiet, always present, never overlapping the creative. */
.adx-label {
  display: block;
  font-size: .62rem;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
  margin: 0 0 3px;
  text-align: left;
}

/* ------------------------------------------------------------- collapsing -- */
/* src/views/ads.js returns '' when a slot has no inventory, so in production
   there is usually no element at all. These rules cover the belt-and-braces
   cases: a container explicitly marked empty, and the legacy .ad-empty class
   when it appears inside one of ours.

   Scoped rather than global: an unqualified `.ad-empty { display: none }` would
   also hide the size placeholder that discovery.css draws for the older
   partials.js slot, which is a debugging aid worth keeping. */
.adx.is-empty,
.adx-empty,
.adx .ad-empty,
.adx:empty {
  display: none !important;
}

/* ------------------------------------------------------------ house ads --- */
.adx-house {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 8px 10px;
  color: var(--text);
  text-decoration: none;
}
.adx-house:hover { text-decoration: none; }
.adx-house.has-img { padding: 0; }
.adx-house-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Image + copy: the copy sits in a readable strip over the bottom edge. */
.adx-house.has-img .adx-house-copy {
  position: absolute;
  inset: auto 0 0 0;
  padding: 6px 8px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
}
.adx-house-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.adx-house-text {
  font-size: .9rem;
  line-height: 1.35;
  max-width: 30ch;
}
.adx-house-cta {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}
.adx-house:hover .adx-house-cta { background: var(--accent-dim); }

/* --------------------------------------------------------- sponsor units -- */
.adx-sponsor {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 10px;
  text-align: left;
  color: var(--text);
  text-decoration: none;
}
.adx-sponsor:hover { text-decoration: none; background: var(--panel-2); }
.adx-sponsor-banner {
  width: 100%;
  height: auto;
  max-height: 60px;
  object-fit: contain;
  border-radius: var(--r-sm);
}
.adx-sponsor-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adx-sponsor-name { font-size: .95rem; line-height: 1.25; }
.adx-sponsor-ip {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adx-sponsor-desc {
  font-size: .8rem;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* A leaderboard-shaped sponsor unit reads better as a row than a column. */
.adx-header-leaderboard .adx-sponsor,
.adx-footer .adx-sponsor,
.adx-server-below-fold .adx-sponsor {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.adx-header-leaderboard .adx-sponsor-banner,
.adx-footer .adx-sponsor-banner,
.adx-server-below-fold .adx-sponsor-banner { width: auto; max-width: 234px; }
.adx-header-leaderboard .adx-sponsor-desc,
.adx-footer .adx-sponsor-desc { -webkit-line-clamp: 1; }

/* ------------------------------------------------------------- placements -- */

/* In-feed: full width of the table cell, a little breathing room, and a hairline
   above so it reads as a break in the list rather than another row of results. */
.adx-in-feed {
  width: 100%;
  margin: 4px auto;
}
.adx-feed-row > td {
  padding: 10px 8px;
  background: var(--bg-elev);
  border-top: 1px solid var(--border-soft);
}

/* Sidebar units stay put inside the aside; the half page may stick, gently,
   but only where there is room for it and only if the sidebar is taller. */
.adx-sidebar-mpu,
.adx-sidebar-halfpage { margin-left: auto; margin-right: auto; }

/* Swipe interstitial: an ordinary card in the deck. Same width as the cards
   around it, dismissible by simply swiping on · never an overlay. */
.adx-interstitial {
  width: min(100%, var(--card-max, 460px));
  margin: 0 auto var(--gap);
}

/* Footer unit gets extra separation so it is not mistaken for site chrome. */
.adx-footer { margin-top: calc(var(--gap) * 1.5); }

/* ----------------------------------------------------- responsive sizing --
   size[0] is the desktop box; each later entry in the registry becomes
   --adx-w-1/--adx-h-1 …  The breakpoints below match the `media` strings in
   src/ads.js · keep the two in sync when you add a size.

   728x90 -> 320x50 (header/footer) and 728x90 -> 320x100 (in-feed, server page)
   are both just "use the second reserved box", so one rule covers them. */
@media (max-width: 759px) {
  .adx {
    width: var(--adx-w-1, var(--adx-w, 300px));
    min-height: var(--adx-h-1, var(--adx-h, 250px));
  }
  .adx-box {
    height: var(--adx-h-1, var(--adx-h, 250px));
    aspect-ratio: var(--adx-r-1, var(--adx-r, 6 / 5));
  }
}

/* The swipe interstitial lists mobile first (300x250) and desktop second
   (336x280), so it needs the mirror-image rule. */
@media (min-width: 760px) {
  .adx-swipe-interstitial {
    width: var(--adx-w-1, var(--adx-w, 300px));
    min-height: var(--adx-h-1, var(--adx-h, 250px));
  }
  .adx-swipe-interstitial .adx-box {
    height: var(--adx-h-1, var(--adx-h, 250px));
    aspect-ratio: var(--adx-r-1, var(--adx-r, 6 / 5));
  }
}

/* Desktop-only inventory (the 300x600 half page). Below 1100px it is not
   hidden · it is removed from the flow entirely, so it reserves nothing and
   costs nothing on a phone. */
.adx-desktop-only { display: none; }
@media (min-width: 1100px) {
  .adx-desktop-only { display: block; }
}

/* ------------------------------------------------------------- test mode --
   ADS_TEST=1. A dashed outline and the slot key, so you can see the inventory
   map on a real page without waiting for fill, plus data-adx-reason in the DOM
   explaining why an empty slot is empty. Never shipped to visitors: the class
   only appears when the env var is set. */
.adx.is-test .adx-box {
  border: 1px dashed var(--gold);
  background: repeating-linear-gradient(
    45deg,
    transparent 0 8px,
    color-mix(in srgb, var(--gold) 8%, transparent) 8px 16px
  );
}
.adx.is-test::after {
  content: attr(data-adx-slot) " (" attr(data-adx-kind) ")";
  display: block;
  font-family: var(--font-mono);
  font-size: .62rem;
  color: var(--gold);
  padding-top: 2px;
}

/* ------------------------------------------------------------ light theme -- */
html[data-theme="light"] .adx-box {
  background: var(--panel-2);
  border-color: var(--border);
}
html[data-theme="light"] .adx-feed-row > td { background: var(--panel-2); }
html[data-theme="light"] .adx-sponsor:hover { background: var(--bg-elev); }
html[data-theme="light"] .adx-house.has-img .adx-house-copy {
  background: color-mix(in srgb, var(--bg-elev) 82%, transparent);
}

/* -------------------------------------------------------- print / reduced -- */
@media print {
  .adx { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .adx, .adx * { animation: none !important; transition: none !important; }
}