/* ── Ad slot shapes (aspect-ratio driven) ───────────────────────────
   Six branded shapes. The container holds its aspect ratio at all
   viewport widths so the same creative serves mobile + desktop. Empty
   slots collapse to zero height (display:none is set by the renderer)
   so layout never gets pushed. See docs/ads-monetization-plan.md and
   app/assets/js/shared/ad-placements.js for the registry. */

/* Common — every shape uses cover-fit so the creative fills its box. */
.public-ad-slot {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
.public-ad-slot .public-ad-banner,
.public-ad-slot .public-ad-inner {
  width: 100%;
  height: 100%;
}
.public-ad-slot .public-ad-banner img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ── STRIP — primary banner, 3.2:1 (320×100 native, file 640×200 @2×)
   The workhorse. Sits in-content. Capped at 640px so it doesn't go
   absurd on large desktops. */
.public-ad-slot--strip {
  aspect-ratio: 320 / 100;
  max-width: 640px;
}
.public-ad-slot--strip .public-ad-name { font-size: 16px; }
.public-ad-slot--strip .public-ad-tag  { font-size: 11px; }
.public-ad-slot--strip .public-ad-badge { width: 40px; height: 40px; font-size: 14px; }

/* ── SLIM — low-intrusion separator, 6.4:1 (320×50, file 640×100 @2×)
   For between-list-item use. Same width cap as strip — just thinner. */
.public-ad-slot--slim {
  aspect-ratio: 320 / 50;
  max-width: 640px;
}
.public-ad-slot--slim .public-ad-name { font-size: 13px; }
.public-ad-slot--slim .public-ad-tag  { font-size: 10px; }
.public-ad-slot--slim .public-ad-badge { width: 26px; height: 26px; font-size: 11px; }

/* ── BLOCK — AdMob MREC, 6:5 (300×250, file 600×500 @2×).
   Capped at 360px so the slot is comfortably visible on modern phones
   (375 px+ viewports) without overflowing narrow columns. Aspect ratio
   keeps the creative valid — anything from native 300×250 up to 360×300
   on the same image. */
.public-ad-slot--block {
  aspect-ratio: 300 / 250;
  max-width: 360px;
}
.public-ad-slot--block .public-ad-inner {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  text-align: center;
}
.public-ad-slot--block .public-ad-badge { width: 64px; height: 64px; margin: 0 auto; font-size: 24px; }
.public-ad-slot--block .public-ad-name { font-size: 22px; white-space: normal; margin-top: 8px; }
.public-ad-slot--block .public-ad-tag  { font-size: 13px; white-space: normal; margin-top: 4px; }

/* ── TOWER — AdMob Half Page, 1:2 (300×600, file 600×1200 @2×)
   Hidden on narrow viewports — too tall for mobile. Renders centered
   up to its native 300px width on tablet/desktop. The aspect-ratio
   and inner layout are set unconditionally so the cs-admin preview
   can render the shape correctly even on a narrow admin window —
   only the `display: none` is media-gated. */
.public-ad-slot--tower {
  display: none;
  aspect-ratio: 300 / 600;
  max-width: 300px;
}
.public-ad-slot--tower .public-ad-inner {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  text-align: center;
}
@media (min-width: 900px) {
  .public-ad-slot--tower { display: block; }
}

/* ── HERO — premium full-bleed, 16:9 (ScoreChom-direct only) */
.public-ad-slot--hero {
  aspect-ratio: 16 / 9;
  max-width: 100%;
}
.public-ad-slot--hero .public-ad-inner {
  padding: 20px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
}
.public-ad-slot--hero .public-ad-name { font-size: 28px; white-space: normal; }
.public-ad-slot--hero .public-ad-tag  { font-size: 14px; white-space: normal; }

/* ── FULLSCREEN — interstitial overlay. Container is fixed and full
   viewport, so we override the common rules for this shape. */
.public-ad-slot--fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  border-radius: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  max-width: none;
  aspect-ratio: auto;
}
.public-ad-slot--fullscreen .public-ad-banner img {
  object-fit: contain;
}

/* ── Mascot overlay add-on (R1,799) ─────────────────────────────────
   One transparent PNG drives both placements. Never blocks taps; low
   opacity so the brand reads without dominating. Empty when no
   adMascotOverlay set on the org. */

.mascot-overlay--bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 0.06;
  display: none;
}
@media (min-width: 768px) {
  .mascot-overlay--bg {
    display: block;
    opacity: 0.08;
    background-size: 60vmin 60vmin;
  }
}

.mascot-overlay--watermark {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  opacity: 0.18;
  pointer-events: none;
  z-index: 1;
}
@media (min-width: 768px) {
  .mascot-overlay--watermark {
    width: 96px;
    height: 96px;
    opacity: 0.16;
  }
}

.has-mascot-watermark { position: relative; }