/*
 * ads.css — Ad zone layouts, responsive ad styling
 * All ad containers use CSS custom properties for colors
 * No hardcoded hex values
 */

/* ─── Base Ad Zone Container ─────────────────────────────────────────────────── */

.compare-ad-zone {
  overflow: hidden;
  position: relative;
  text-align: center;
}

/* Hide all ad zones when ads are off */
.ads-off .compare-ad-zone,
.ads-hidden .compare-ad-zone {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ─── In-Article Top Ad (after paragraph 2) ──────────────────────────────────── */

.compare-ad-zone--in_article_top {
  margin: var(--space-8) 0;
  min-height: 90px;
}

.compare-ad-zone--in_article_top::before {
  content: 'Advertisement';
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

/* ─── In-Article Mid Ad (after paragraph 6) ─────────────────────────────────── */

.compare-ad-zone--in_article_mid {
  margin: var(--space-10) 0;
  min-height: 250px;
  padding: var(--space-4);
  background-color: var(--color-bg-soft);
  border-radius: var(--radius-md);
}

.compare-ad-zone--in_article_mid::before {
  content: 'Advertisement';
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

/* ─── Sidebar Ad Zones ───────────────────────────────────────────────────────── */

.compare-ad-zone--sidebar_top {
  margin-bottom: var(--space-8);
  min-height: 250px;
}

.compare-ad-zone--sidebar_sticky {
  position: sticky;
  top: var(--space-6);
  min-height: 250px;
}

/* ─── Footer Banner Ad ───────────────────────────────────────────────────────── */

.compare-ad-zone--footer_banner {
  width: 100%;
  max-width: 970px;
  margin: 0 auto var(--space-8);
  min-height: 90px;
  padding: var(--space-4) 0;
}

.compare-ad-zone--footer_banner::before {
  content: 'Advertisement';
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

/* ─── Ad Wrapper (sidebar widget area) ──────────────────────────────────────── */

.compare-ad-widget {
  margin-bottom: var(--space-8);
}

.compare-ad-widget__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  display: block;
  margin-bottom: var(--space-2);
}

/* ─── Above-Footer Ad Area ───────────────────────────────────────────────────── */

.compare-above-footer {
  padding: var(--space-8) var(--space-6);
  background-color: var(--color-bg-soft);
  border-top: 1px solid var(--color-border);
}

.ads-off .compare-above-footer:empty {
  display: none;
}

/* ─── Responsive Ad Sizing ───────────────────────────────────────────────────── */

/* Leaderboard (728×90) — hide on mobile, show on desktop */
.compare-ad--leaderboard {
  display: none;
}

@media (min-width: 768px) {
  .compare-ad--leaderboard {
    display: block;
  }
}

/* Mobile banner (320×50 or 320×100) — show only on mobile */
.compare-ad--mobile-banner {
  display: block;
}

@media (min-width: 768px) {
  .compare-ad--mobile-banner {
    display: none;
  }
}

/* Medium rectangle (300×250) — always visible */
.compare-ad--medium-rect {
  display: block;
  width: 300px;
  min-height: 250px;
  margin: 0 auto;
}

/* Large rectangle (336×280) */
.compare-ad--large-rect {
  display: block;
  width: 336px;
  min-height: 280px;
  margin: 0 auto;
}

/* Half page (300×600) — sidebar only */
.compare-ad--half-page {
  display: block;
  width: 300px;
  min-height: 600px;
}

/* ─── AdSense Responsive Override ────────────────────────────────────────────── */

.adsbygoogle {
  display: block;
}

/* ─── Placeholder Skeleton (while ad loads) ──────────────────────────────────── */

.compare-ad-zone::after {
  content: '';
  display: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--color-bg-soft) 25%,
    var(--color-border) 50%,
    var(--color-bg-soft) 75%
  );
  background-size: 200% 100%;
  animation: compare-ad-shimmer 1.5s infinite;
  border-radius: var(--radius-md);
  z-index: 0;
}

.compare-ad-zone--loading::after {
  display: block;
}

@keyframes compare-ad-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ─── Affiliate Disclosure Banner ────────────────────────────────────────────── */

.compare-disclosure {
  background-color: var(--color-primary-light);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-8);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.compare-disclosure p {
  margin: 0;
}

.compare-disclosure a {
  color: var(--color-link);
  font-weight: var(--font-weight-medium);
}

/* ─── Affiliate Table ────────────────────────────────────────────────────────── */

.compare-affiliate-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-8) 0;
}

.compare-affiliate-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.compare-affiliate-table thead tr {
  background-color: var(--color-table-header);
  color: var(--color-table-text);
}

.compare-affiliate-table thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.compare-affiliate-table tbody tr {
  border-bottom: 1px solid var(--color-border);
}

.compare-affiliate-table tbody tr:nth-child(even) {
  background-color: var(--color-table-alt);
}

.compare-affiliate-table tbody td {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
}

.compare-affiliate-table__name {
  font-weight: var(--font-weight-semibold);
}

/* ─── Admin: Below Header Banner Area ────────────────────────────────────────── */

.compare-below-header {
  text-align: center;
}

.compare-below-header-widget {
  display: flex;
  justify-content: center;
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border);
}

/* ─── CLS Prevention (Cumulative Layout Shift) ───────────────────────────────── */

/* Reserve space for common ad sizes before they load */
.compare-ad-zone--in_article_top {
  min-height: 90px; /* Leaderboard fallback */
}

@media (min-width: 768px) {
  .compare-ad-zone--in_article_top {
    min-height: 90px;
  }
}

.compare-ad-zone--in_article_mid {
  min-height: 250px;
}

.compare-ad-zone--sidebar_top,
.compare-ad-zone--sidebar_sticky {
  min-height: 250px;
  width: 300px;
  max-width: 100%;
}

.compare-ad-zone--footer_banner {
  min-height: 90px;
}