/*
 * ads.css — CLS-Safe Advertisement Slot Styles
 * NextAIWorks Theme v3.0
 *
 * All ad slots use explicit min-height to prevent Cumulative Layout Shift (CLS).
 * Never use height: 0 or auto for ad containers — browsers need reserved space.
 * ============================================================ */

/* ============================================================
   Common Ad Container Styles
   ============================================================ */
.ad-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: transparent;
  position: relative;
}

/* Label shown above ad — Accessibility + AdSense policy compliance */
.ad-label {
  display: block;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  font-family: var(--font-ui);
}

/* Placeholder visible in non-production / before JS loads */
.ad-placeholder {
  background: var(--bg-muted);
  border: 1px dashed var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-family: var(--font-ui);
  font-weight: 500;
  text-align: center;
  border-radius: var(--radius-sm);
}

/* ============================================================
   Leaderboard — 728x90 (Header / Mid-Page / Before Footer)
   ============================================================ */
.ad-slot--leaderboard {
  min-height: 110px; /* 90px ad + 20px buffer = no CLS */
  padding-block: var(--space-3);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
}

.ad-slot--leaderboard .ad-placeholder {
  width: 728px;
  height: 90px;
  max-width: 100%;
}

/* Mid-page leaderboard (inside content area, not full-width) */
.ad-slot--infeed {
  min-height: 110px;
  padding-block: var(--space-5);
  margin-block: var(--space-8);
}
.ad-slot--infeed .ad-placeholder {
  width: 728px;
  height: 90px;
  max-width: 100%;
}

/* Native / Responsive In-Feed Ad */
.ad-slot--native {
  min-height: 140px;
  padding-block: var(--space-4);
  margin-block: var(--space-8);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.ad-slot--native .ad-placeholder {
  width: 100%;
  height: 120px;
}

/* ============================================================
   Rectangle — 300x250 (Sidebar Top & Bottom)
   ============================================================ */
.ad-slot--rectangle {
  min-height: 280px; /* 250px + 30px buffer */
  margin-bottom: var(--space-8);
  flex-direction: column;
}
.ad-slot--rectangle .ad-placeholder {
  width: 300px;
  height: 250px;
  max-width: 100%;
}

/* ============================================================
   Half Page / Sticky — 300x600 (Sidebar Middle)
   ============================================================ */
.ad-slot--halfpage {
  min-height: 640px; /* 600px + 40px buffer */
  margin-bottom: var(--space-8);
  flex-direction: column;
  position: sticky;
  top: 72px; /* Stick below the sticky nav */
}
.ad-slot--halfpage .ad-placeholder {
  width: 300px;
  height: 600px;
  max-width: 100%;
}

/* ============================================================
   Mobile Banner — 320x50 (Mobile Only)
   ============================================================ */
.ad-slot--mobile-banner {
  display: none;
  min-height: 70px;
  padding-block: var(--space-2);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
}
.ad-slot--mobile-banner .ad-placeholder {
  width: 320px;
  height: 50px;
  max-width: 100%;
}

/* ============================================================
   Responsive Overrides
   ============================================================ */
@media (max-width: 768px) {
  /* Hide leaderboard on small screens — shows mobile banner instead */
  .ad-slot--leaderboard .ad-placeholder {
    width: 320px;
    height: 50px;
  }
  .ad-slot--leaderboard {
    min-height: 70px;
  }
  .ad-slot--mobile-banner {
    display: flex;
  }
  .ad-slot--halfpage {
    position: static;
    min-height: auto;
  }
  .ad-slot--halfpage .ad-placeholder {
    width: 300px;
    height: 250px;
  }
  .ad-slot--halfpage {
    min-height: 280px;
  }
}