/*
 * ads.css — Google AdSense ad unit layout & styling
 * Minecraft Master Guide
 *
 * IMPLEMENTATION NOTES:
 * - Replace ca-pub-XXXXXXXXXXXXXXXX with your AdSense Publisher ID
 * - Replace data-ad-slot values with your actual slot IDs from AdSense dashboard
 * - All containers use min-height to prevent Cumulative Layout Shift (CLS)
 * - Google policy: every ad must be clearly labelled "Advertisement"
 * - Fixed/sticky ads are prohibited on desktop (only mobile anchor shown on mobile)
 */

/* ════════════════════════════════════════
   AD LABEL — Google policy requirement
════════════════════════════════════════ */
.ad-unit { position: relative; text-align: center; }
.ad-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
  user-select: none;
}

/* ════════════════════════════════════════
   AD 1: LEADERBOARD (728×90 responsive)
   Position: Below breadcrumb, above content fold
   Rationale: Highest above-the-fold viewability score.
   Leaderboards avg 2× CTR of standard banners (Google data).
════════════════════════════════════════ */
.ad-leaderboard {
  background: var(--bg-card);
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
  padding: 10px 32px;
  min-height: 110px; /* CLS prevention: 90px ad + label + padding */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ad-leaderboard ins.adsbygoogle {
  display: block;
  min-height: 90px;
  width: 100%;
  max-width: 728px;
}

/* ════════════════════════════════════════
   AD 2: IN-CONTENT RECTANGLE (336×280)
   Position: After 2nd topic card, mid-article
   Rationale: Google's #1 performing format in
   the #1 performing position. Mid-content readers
   show 45% higher CTR than above-fold viewers.
════════════════════════════════════════ */
.ad-in-content {
  margin: 24px 0;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  min-height: 296px; /* CLS prevention */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ad-in-content ins.adsbygoogle {
  display: block;
  min-height: 280px;
  width: 100%;
  max-width: 336px;
}

/* ════════════════════════════════════════
   AD 3: SIDEBAR HALF-PAGE (300×600)
   Position: Sidebar, above reading progress bar
   Rationale: Visible for entire session (avg 6+ min
   on guide pages). 300×600 earns ~40% higher CPM
   than 300×250 per Google publisher benchmarks.
════════════════════════════════════════ */
.ad-sidebar {
  padding: 14px 12px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  min-height: 634px; /* CLS prevention */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ad-sidebar .ad-label { color: rgba(255,255,255,0.3); }
.ad-sidebar ins.adsbygoogle {
  display: block;
  min-height: 600px;
  width: 300px;
}

/* ════════════════════════════════════════
   AD 4: MID-SECTION BANNER (responsive)
   Position: Between section divider and timeline
   Rationale: Natural reading pause — users slow/stop
   at section headers. High viewability window.
════════════════════════════════════════ */
.ad-mid-section {
  margin: 20px 0 24px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-card), #f8f6f0);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-2);
  padding: 10px;
}
.ad-mid-section ins.adsbygoogle { display: block; min-height: 90px; width: 100%; }

/* ════════════════════════════════════════
   AD 5: END-OF-CONTENT RECTANGLE (336×280)
   Position: After all content cards
   Rationale: End-of-content readers have 3× higher
   purchase intent than entry-point readers (Google).
   Marked with green top border to signal "done reading".
════════════════════════════════════════ */
.ad-end-content {
  margin: 32px 0 0;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-top: 3px solid var(--green);
  border-radius: var(--radius-lg);
  min-height: 306px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ad-end-content ins.adsbygoogle {
  display: block;
  min-height: 280px;
  width: 100%;
  max-width: 336px;
}

/* ════════════════════════════════════════
   AD 6: MOBILE ANCHOR (320×50) — mobile only
   Position: Fixed bottom, mobile only (<768px)
   Rationale: Google's highest-revenue mobile format.
   Stays in view throughout entire session.
   POLICY: Fixed ads are prohibited on desktop.
   POLICY: Dismiss button is required by AdSense policy.
════════════════════════════════════════ */
.ad-mobile-anchor {
  display: none; /* Shown only in @media (max-width: 768px) */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 300;
  background: var(--bg-card);
  border-top: 2px solid var(--border);
  padding: 4px 0 env(safe-area-inset-bottom, 0px); /* iPhone notch support */
  box-shadow: 0 -2px 12px rgba(0,0,0,0.12);
  flex-direction: column;
  align-items: center;
  min-height: 60px;
  justify-content: center;
}
.ad-mobile-anchor ins.adsbygoogle {
  display: block;
  height: 50px;
  width: 320px;
  max-width: 100%;
}
.ad-mobile-anchor .ad-dismiss {
  position: absolute;
  top: 4px; right: 8px;
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--ink-3);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

/* ════════════════════════════════════════
   RESPONSIVE AD ADJUSTMENTS
════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Show mobile anchor */
  .ad-mobile-anchor { display: flex; }
  /* Push content above anchor */
  main { padding-bottom: 60px; }
  /* Hide sidebar ad (not enough space) */
  .ad-sidebar { display: none; }
  /* Smaller in-content on mobile */
  .ad-in-content { min-height: 276px; }
  .ad-in-content ins.adsbygoogle { max-width: 300px; min-height: 250px; }
  /* Leaderboard becomes responsive on mobile */
  .ad-leaderboard { padding: 8px 16px; min-height: 68px; }
  .ad-leaderboard ins.adsbygoogle { max-width: 100%; min-height: 50px; }
}