/* ad-wells.css — the one home for ad-well presentation on / and the 110 skeleton
   game pages (spec: docs/GAMES_DISPLAY.md §E-ads). Linked AFTER site.css; the
   site.css .ad-well block stays as-is for the 208 guide/house pages, and the 14
   custom pages own their wells.

   Cascade: every selector carries [data-ad-slot] (0,2,0) so it beats the
   site.css .ad-well rule (0,1,0) regardless of source order; the state rules
   are listed twice, plain (0,2,0, the spec's literal) and with the slot
   attribute (0,3,0) so they also beat site.css .ad-well[data-ad-state="empty"].

   Three states, driven by js/ads.js through data-ad-state:
     (none)   reserve — the unit's box is held before the loader runs
     mounted  hairline rules above and below the creative
     empty    no box, no reserve; the caption ads.js appends is one 27px line
   A well is never collapsed to 0x0, never concealed, and never wrapped: the
   reserve keeps layout stable and no-fill shrinks to the caption only.
   Tokens only (tokens.css arrives through site.css). */

/* 1. Reserve — before ads.js mounts. Min-height is the unit's reserved box. */
.ad-well[data-ad-slot] {
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.ad-well[data-ad-slot="leaderboard"] { min-height: 50px; }
.ad-well[data-ad-slot="rectangle"] { min-height: 250px; }
.ad-well[data-ad-slot="native"] { min-height: 240px; }
@media (min-width: 480px) {
  .ad-well[data-ad-slot="leaderboard"] { min-height: 60px; }
}
@media (min-width: 768px) {
  .ad-well[data-ad-slot="leaderboard"] { min-height: 90px; }
}

/* 2. Mounted — hairline rules top and bottom, a breath of padding. */
.ad-well[data-ad-state="mounted"],
.ad-well[data-ad-slot][data-ad-state="mounted"] {
  padding: var(--space-xs) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

/* 3. Empty — the reserve is released; only the caption remains (27px). */
.ad-well[data-ad-state="empty"],
.ad-well[data-ad-slot][data-ad-state="empty"] {
  min-height: 0;
  padding: 0;
  border: 0;
}
.ad-well .ad-empty {
  margin: 0;
  padding: 8px 0;
  max-width: none;
  font: 500 11px/1 var(--font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-dim);
  text-align: center;
}

/* Home stacks: one column on phone; rectangle + native side by side from 768.
   The top stack holds only the leaderboard, which always spans the full row. */
.pip-home .ad-stack {
  display: grid;
  gap: var(--space-lg);
}
.pip-home .ad-stack > .ad-well[data-ad-slot="leaderboard"] { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .pip-home .ad-stack {
    grid-template-columns: 300px minmax(240px, 1fr);
    align-items: start;
  }
}