/* ═══════════════════════════════════════════════════════════════════════════
   ads.css — AdSense placement styling for Podcast.ma
   Loaded AFTER mobile.css. GENERATED by adsense-implement.sh.

   Every unit reserves a min-height per breakpoint so ads never cause
   Cumulative Layout Shift (CLS) — matters for Core Web Vitals + SEO.
   ═══════════════════════════════════════════════════════════════════════════ */

.ads-unit {
  display: block;
  width: 100%;
  box-sizing: border-box;
  clear: both;
  position: relative;
  overflow: hidden;
}

/* A unit whose slot id is not configured yet renders nothing and takes no space. */
.ads-unit--unconfigured { display: none !important; }

.ads-label {
  display: block;
  font-size: .66rem;
  line-height: 1.4;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted, #8b8ba7);
  opacity: .8;
  margin: 0 0 8px;
  text-align: left;
}

.ads-unit .adsbygoogle { display: block; width: 100%; }

/* ── 1. In-content / in-article ─────────────────────────────────────────── */
.ads-unit--in-article {
  min-height: 300px;          /* reserved: mobile fluid in-article */
  margin: 36px 0 40px;
  padding: 0 16px;
}
@media (min-width: 768px) {
  .ads-unit--in-article {
    min-height: 280px;        /* reserved: desktop fluid in-article */
    margin: 48px 0;
    padding: 0;
  }
}

/* ── 2. In-feed — GRID cell (podcasts grid / radio station grid) ────────── */
/* Spans 2 grid tracks: full width in the 2-col mobile grid, and a clean
   2-cell block on desktop auto-fill grids (no holes thanks to dense flow). */
.ads-unit--infeed-grid {
  grid-column: span 2;
  min-height: 260px;          /* reserved: mobile in-feed */
  margin: 6px 0;
  padding: 12px;
  background: var(--bg-card, rgba(255,255,255,.03));
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: var(--card-radius, 16px);
}
@media (min-width: 768px) {
  .ads-unit--infeed-grid { min-height: 300px; }
}
/* Only switch the grid to dense flow when an ad cell is actually present,
   so the surrounding cards never leave an empty hole. */
.podcasts-grid-full:has(.ads-unit--infeed-grid),
.station-grid:has(.ads-unit--infeed-grid) { grid-auto-flow: row dense; }

/* ── 3. In-feed — LIST row (episode lists) ──────────────────────────────── */
/* Generous vertical separation keeps the creative well away from the play
   buttons on the rows above and below (accidental-click protection). */
.ads-unit--infeed-list {
  min-height: 250px;          /* reserved: mobile in-feed list */
  margin: 32px 0;
  padding: 14px;
  background: var(--bg-card, rgba(255,255,255,.03));
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 14px;
}
@media (min-width: 768px) {
  .ads-unit--infeed-list { min-height: 200px; margin: 28px 0; }
}

/* ── 4. Sidebar — desktop only, genuinely sticky ────────────────────────── */
/* The unit is the LAST child of the sidebar column on purpose: a sticky
   first-child would be scrolled over by the widget below it. As the last
   child it pins cleanly and stays viewable for the whole column scroll.
   The :has() rules only fire when the ad is actually present, so the site's
   own sticky behaviour is untouched when the slot is not configured. */
.ads-unit--sidebar { display: none !important; }
@media (min-width: 768px) {
  .ads-unit--sidebar {
    display: block !important;
    min-height: 260px;        /* reserved: 300x250 on small desktops */
    margin: 24px 0 0;
    position: sticky;
    top: calc(var(--app-header-h, 70px) + 16px);
  }
  .two-col-section:has(.ads-unit--sidebar),
  .episode-layout:has(.ads-unit--sidebar)   { align-items: stretch; }
  .two-col-sidebar:has(.ads-unit--sidebar),
  .episode-sidebar:has(.ads-unit--sidebar)  { position: static; }
}
@media (min-width: 1024px) {
  .ads-unit--sidebar { min-height: 620px; }   /* reserved: 300x600 */
}

/* ── 5. Mobile anchor — sits ABOVE the player bar AND the bottom nav ────── */
/* --ads-player-h is written by the guard script (0px when no player). */
.ads-anchor { display: none; }
@media (max-width: 767px) {
  .ads-anchor {
    display: block;
    position: fixed;
    left: 0; right: 0;
    bottom: calc(var(--bottom-nav-h, 60px) + var(--ads-player-h, 0px) + var(--safe-b, 0px));
    z-index: 455;             /* below .player-bar (470) and #bottom-nav (600) */
    padding: 6px 10px 8px;
    background: var(--glass-bg, rgba(8,8,22,.96));
    border-top: 1px solid var(--glass-border, rgba(255,255,255,.07));
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transition: bottom .25s ease;
  }
  .ads-anchor .ads-label { margin-bottom: 4px; font-size: .6rem; }
  .ads-anchor-close {
    position: absolute;
    top: -34px; right: 10px;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--glass-border, rgba(255,255,255,.12));
    background: var(--glass-bg, rgba(8,8,22,.96));
    color: var(--text-secondary, #c9c9e0);
    font-size: 18px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  /* Reserve page space so the anchor never overlays real content. */
  body.ads-anchor-open {
    padding-bottom: calc(var(--bottom-nav-h, 60px) + var(--ads-player-h, 0px) + 78px + var(--safe-b, 0px));
  }
}

/* ── 6. Never let an AdSense unit collide with the house partner ads ────── */
.sponsor-card + .ads-unit,
.ads-unit + .sponsor-card,
.ad-container + .ads-unit,
.ads-unit + .ad-container { margin-top: 48px; }

/* ── 7. Belt & braces: no ads inside the auth modal or the app drawer ───── */
#auth-modal .ads-unit,
.modal-overlay .ads-unit,
.app-drawer .ads-unit,
#app-drawer .ads-unit { display: none !important; }

/* Print: never print ads */
@media print { .ads-unit, .ads-anchor { display: none !important; } }