/* =============================================================================
   Ad Slots — TCG Value
   All ad units wrapped in .ad-slot with .ad-label for Google policy compliance.
   Mobile: all units are full-width responsive. Desktop: use specified sizes.
   Rules: no ads above fold, max 3 per page, no overlay/auto-play.
   ============================================================================= */

/* ── Container ───────────────────────────────────────────────────────────── */
.ad-slot {
  padding: 8px;
  margin: 24px auto;
  /* Subtle separator — doesn't compete with content */
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  background: transparent;
  text-align: center;
  max-width: 100%;
}

/* Hide disabled slots (ADS_ENABLED=false) */
.ad-slot--disabled,
.ad-slot[aria-hidden="true"] {
  display: none !important;
}

/* ── Label ───────────────────────────────────────────────────────────────── */
.ad-label {
  font-size: 10px;
  font-weight: 500;
  color: #9ca3af;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
  text-align: center;
}

/* ── Ad unit wrapper ─────────────────────────────────────────────────────── */
.ad-unit-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90px; /* reserve space for leaderboard to prevent CLS */
}

/* ── Mobile: always full-width responsive ───────────────────────────────── */
@media (max-width: 767px) {
  .ad-slot {
    margin: 20px 0;
    padding: 6px 0;
  }

  .ad-unit-wrap {
    min-height: auto;
  }

  /* Force all ins elements to 100% width on mobile */
  .ad-slot ins.adsbygoogle {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 50px;
  }

  /* Leaderboard stacks to full-width on small screens */
  .ad-slot--leaderboard .ad-unit-wrap,
  .ad-slot--footer .ad-unit-wrap {
    min-height: 60px;
  }

  /* Medium rectangle goes full-width on mobile */
  .ad-slot--medium-rect .ad-unit-wrap {
    display: flex;
    justify-content: center;
  }
  .ad-slot--medium-rect ins.adsbygoogle {
    width: 100% !important;
    max-width: 336px; /* max 300 content + 36 padding */
    height: auto !important;
    min-height: 250px;
  }
}

/* ── Desktop sizing ─────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  /* Leaderboard: constrain to 728px centered */
  .ad-slot--leaderboard .ad-unit-wrap,
  .ad-slot--footer .ad-unit-wrap {
    min-height: 90px;
  }

  /* Sidebar rectangle: max 300px, can float in sidebar layouts */
  .ad-slot--sidebar_rectangle {
    max-width: 300px;
    margin: 16px auto;
  }

  /* Card detail bottom: full-width responsive, follows card content */
  .ad-slot--card_detail_bottom {
    margin: 32px auto;
    padding: 12px 0;
  }
  .ad-slot--card_detail_bottom .ad-unit-wrap {
    min-height: 100px;
  }

  /* Medium rectangle: centered, no wider than 300px */
  .ad-slot--medium-rect {
    /* On pages with sidebar (future), can float right.
       On landing/main pages, stay centered. */
  }
}

/* ── In-feed ad unit (after every 5th deal card) ───────────────────────── */
.ad-slot--in-feed {
  margin: 24px 0;
  padding: 12px 8px;
  background: #f9fafb; /* slight contrast so in-feed is visually distinct */
  border-radius: 8px;
}

.ad-slot--in-feed .ad-label {
  text-align: left;
  margin-bottom: 4px;
}

@media (max-width: 767px) {
  .ad-slot--in-feed {
    border-radius: 0;
    background: transparent;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    padding: 6px 0;
    margin: 16px 0;
  }
}

/* ── CLS prevention: reserve space before ad loads ─────────────────────── */
.ad-slot ins.adsbygoogle:before {
  content: '';
  display: block;
}

/* ── Disable styling on non-Google slots (placeholders in disabled state) ── */
.ad-slot--disabled .ad-label {
  display: none;
}