/* ============================================================
   ADS.CSS — The Capitol Wire
   All ad slot containers. Controls sizing, spacing, labels.
   Never touches layout or article styles.
   Requires: base.css loaded first.
   ============================================================ */


/* ── 1. Base Ad Slot ────────────────────────────────────────── */

.ad-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-paper-2);
  border: 1px dashed var(--color-line-strong);
  position: relative;
  overflow: hidden;
}

.ad-label {
  position: absolute;
  top: var(--space-1);
  left: var(--space-2);
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted-light);
  pointer-events: none;
  user-select: none;
}

/* When an actual ad loads, hide the dashed placeholder style */
.ad-slot.ad-loaded {
  background: transparent;
  border: none;
}

.ad-slot.ad-loaded .ad-label {
  display: none;
}


/* ── 2. Standard Sizes ──────────────────────────────────────── */

/* Leaderboard 728x90 — top of article, desktop */
.ad-leaderboard {
  width: 100%;
  max-width: 728px;
  height: 90px;
  margin: 0 auto var(--space-8);
}

/* Medium Rectangle 300x250 — sidebar, highest CTR */
.ad-rectangle {
  width: 300px;
  height: 250px;
  margin: 0 auto;
}

/* Large Rectangle 336x280 — in-article, best performing */
.ad-rectangle-lg {
  width: 336px;
  height: 280px;
  margin: 0 auto;
}

/* Half Page 300x600 — sidebar bottom */
.ad-halfpage {
  width: 300px;
  height: 600px;
  margin: 0 auto;
}

/* Mobile Banner 320x50 — mobile only */
.ad-mobile-banner {
  width: 320px;
  height: 50px;
  margin: 0 auto;
  display: none;
}

/* In-feed native ad — homepage between articles */
.ad-infeed {
  width: 100%;
  min-height: 120px;
  padding: var(--space-4);
  border-top: 2px solid var(--color-ink);
  border-bottom: var(--border-thin);
  margin: var(--space-6) 0;
  background: var(--color-paper-2);
  border-left: none;
  border-right: none;
}


/* ── 3. Political Ad Variant ────────────────────────────────── */

/* Direct political ad placement — styled differently from AdSense */
.ad-slot.ad-political {
  border: none;
  background: transparent;
  padding: 0;
}

.ad-political-label {
  display: block;
  font-size: 9px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted-light);
  text-align: center;
  margin-bottom: var(--space-1);
}

.ad-political img {
  width: 100%;
  height: auto;
  display: block;
}

.ad-political a {
  display: block;
  transition: opacity var(--transition-fast);
}

.ad-political a:hover {
  opacity: 0.9;
}


/* ── 4. Responsive Ad Behavior ──────────────────────────────── */

@media (max-width: 768px) {

  /* Hide desktop leaderboard on mobile */
  .ad-leaderboard {
    display: none;
  }

  /* Show mobile banner instead */
  .ad-mobile-banner {
    display: flex;
  }

  /* Sidebar rectangle becomes centered block on mobile */
  .ad-rectangle,
  .ad-halfpage {
    width: 100%;
    max-width: 320px;
    height: auto;
    min-height: 250px;
  }

  /* Half page becomes rectangle on mobile */
  .ad-halfpage {
    min-height: 250px;
    max-height: 250px;
  }

  /* In-article ad adjusts to fit */
  .ad-rectangle-lg {
    width: 100%;
    max-width: 336px;
    height: 280px;
  }
}

@media (max-width: 360px) {
  .ad-rectangle-lg {
    max-width: 300px;
    height: 250px;
  }
}


/* ── 5. Ad Break Divider (in article body) ──────────────────── */

.ad-break {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) 0;
  border-top: var(--border-thin);
  border-bottom: var(--border-thin);
  margin: var(--space-8) 0;
}


/* ── 6. Print — Hide All Ads ────────────────────────────────── */

@media print {
  .ad-slot,
  .ad-break,
  .ad-infeed {
    display: none !important;
  }
}