/* ads.css - single source of truth for every ad container on the site.
   Horizontal placements are a fixed 728x90 leaderboard; the in-game side
   columns stay 160x600 skyscrapers. Values mirror public/css/game-shell.css so
   the games shell and the main app never drift apart.

   The size and the breathing room live on the base .ad-slot rule (not on
   :empty) so a slot keeps the exact same box whether it is still showing the
   grey "ADS" placeholder or already serving a live creative. Only the border
   and the placeholder label are :empty-only. */

.ad-slot {
  display: block;
  width: 100%;
  max-width: 728px;
  height: 90px;
  min-height: 90px;
  margin: 24px auto;
  overflow: hidden;
  text-align: center;
  position: relative;
  box-sizing: border-box;
}
.ad-slot > * { max-width: 100%; }

/* placeholder look - only while no ad code is configured */
.ad-slot:empty {
  border: 1.5px solid rgba(130,130,130,0.45);
  border-radius: 10px;
  background: rgba(130,130,130,0.06);
}
.ad-slot:empty::after {
  content: "ADS";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display), sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 3px;
  color: rgba(130,130,130,0.75);
}

/* Lessons is a flex column with gap:14px, so the ad's own top margin would
   double-count there. Offset it to keep the visual gap identical everywhere. */
.ls-shell > .ad-slot { margin-top: 10px; }

/* Bottom-anchored horizontal slots (.ad-bottom wrapper, used by the games hub
   and the practice / sentences / vocabulary pages).

   The wrapper is a flex column with no bottom padding. margin-top:auto on the
   anchor absorbs all leftover space so the ad settles at the bottom of the
   wrapper, right above the footer, while the page content stays at the top -
   the same result the lessons shell gets from flex:1 on its view container.

   The anchor exists so the ad keeps a guaranteed 24px gap even when there is
   no free space left (margin-top:auto collapses to 0). That happens on the
   games hub at narrow widths, where the hub scrolls internally and the ad
   simply follows the card grid. 42px below mirrors the lessons shell
   (18px shell padding + 24px ad margin). */
.ad-bottom {
  margin-top: auto;
}
.ad-bottom > .ad-slot {
  margin: 24px auto 42px;
}

/* vertical skyscraper columns inside the games shell */
.gs-ad-side .ad-slot {
  width: 160px;
  max-width: 160px;
  height: 600px;
  min-height: 600px;
  margin: 0;
}
.gs-ad-side .ad-slot:empty {
  border-radius: 8px;
}

@media (max-width: 1099px) {
  .gs-ad-side { display: none; }
}

/* ── FIXED EDGE RAILS (about, contact, privacy, terms, faq, disclaimer,
   blog, blog post, practice) ───────────────────────────────────────────────
   chrome.js injects one <aside class="page-ad-rail"> per side for those nine
   routes only. They are `fixed`, so they occupy the page GUTTER beside <main>
   and never disturb a page's own grid - a blog post keeps its 220px TOC and
   article column exactly as-is, with the rail sitting outside them.

   The rails are anchored to the CONTENT column centre, not the viewport edge,
   so they sit a games-like 16px outside <main> (whose half-width is 550px) and
   the outer margin grows with the viewport: left = 50% - 550px - 16px - 160px.
   max(10px, ...) keeps at least 10px off the edge at the threshold.

   Breakpoint: with a 16px inner gap the rails need 550 + 16 + 160 = 726px of
   half-gutter, i.e. 1452px viewport; below 1460px (the old 10px-gap number) both
   rails hide rather than overlap the content. Same "hide, never squeeze"
   behaviour as .gs-ad-side above.

   top uses --chrome-topbar-h (published by public/js/chrome.js) so the rail
   starts just below the pinned header, and z-index 5 keeps it under the
   header's 30 and clear of modals/dialogs. */
.page-ad-rail {
  position: fixed;
  top: var(--chrome-topbar-h, 64px);
  bottom: 16px;
  width: 160px;
  z-index: 5;
  display: flex;
  align-items: center;          /* centre the 600px slot between header + footer */
  pointer-events: none;        /* the gutter is empty space; only the ad takes clicks */
}
.page-ad-rail--left  { left:  max(10px, calc(50% - 550px - 16px - 160px)); }
.page-ad-rail--right { right: max(10px, calc(50% - 550px - 160px - 16px)); }
.page-ad-rail > .ad-slot {
  pointer-events: auto;
  width: 160px;
  max-width: 160px;
  height: 600px;
  min-height: 600px;
  margin: 0;
}
.page-ad-rail > .ad-slot:empty { border-radius: 8px; }

@media (max-width: 1459px) {
  .page-ad-rail { display: none; }
}

/* In-article blog ads. Injected by public/js/pages.js after every Nth <p>.
   It is a plain horizontal slot, but it sits inside the .page panel rather
   than in a shell, so the base 24px vertical margin is kept as-is. */
.page .ad-slot.ad-inarticle {
  margin: 26px 0;
}