/* ==========================================================================
   Ad Manager — front-end ad slot containers
   Loaded globally via mam_enqueue_ad_styles().
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base container
   -------------------------------------------------------------------------- */
.mam-ad-slot {
  display: block;
  width: 100%;
  overflow: hidden;
}

.mam-ad {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mam-ad__img {
  display: block;
  max-width: 100%;
  height: auto;
}

.mam-ad__link {
  display: block;
  line-height: 0;
  transition: opacity 0.15s;
}

.mam-ad__link:hover {
  opacity: 0.88;
}

/* Subtle label above each slot (optional — add class mam-ad-slot--labelled) */
.mam-ad-slot--labelled::before {
  content: 'Advertisement';
  display: block;
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mam-text-muted, #a0aab4);
  text-align: center;
  margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   Slot-specific sizing
   -------------------------------------------------------------------------- */

/* Leaderboard — 728 × 90 */
.mam-ad-slot--leaderboard {
  max-width: 728px;
  margin-inline: auto;
  padding: 20px 0;
  border-top: 1px solid var(--mam-border, #e0dbd2);
  border-bottom: 1px solid var(--mam-border, #e0dbd2);
}
.mam-ad-slot--leaderboard .mam-ad {
  min-height: 90px;
}

/* Sidebar Rectangle — 300 × 250 */
.mam-ad-slot--sidebar {
  max-width: 300px;
  margin-inline: auto;
}
.mam-ad-slot--sidebar .mam-ad {
  min-height: 250px;
}

/* In-Article — 300 × 250, centred inline */
.mam-ad-slot--in-article {
  max-width: 300px;
  margin: 28px auto;
}
.mam-ad-slot--in-article .mam-ad {
  min-height: 250px;
}

/* Mobile Banner — 320 × 50 */
.mam-ad-slot--mobile-banner {
  max-width: 320px;
  margin-inline: auto;
  display: none; /* shown via media query below */
}
.mam-ad-slot--mobile-banner .mam-ad {
  min-height: 50px;
}

/* Footer Banner — 728 × 90 */
.mam-ad-slot--footer-banner {
  max-width: 728px;
  margin-inline: auto;
  padding: 24px 0;
}
.mam-ad-slot--footer-banner .mam-ad {
  min-height: 90px;
}

/* --------------------------------------------------------------------------
   HTML / embed ads — let the embed control its own sizing
   -------------------------------------------------------------------------- */
.mam-ad--html {
  display: block;
  width: 100%;
}
.mam-ad--html iframe,
.mam-ad--html ins,
.mam-ad--html > * {
  display: block;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Responsive adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Leaderboard degrades gracefully on small screens */
  .mam-ad-slot--leaderboard {
    max-width: 100%;
  }
  .mam-ad-slot--leaderboard .mam-ad {
    min-height: 50px;
  }

  /* Footer banner matches leaderboard on mobile */
  .mam-ad-slot--footer-banner {
    max-width: 100%;
  }
  .mam-ad-slot--footer-banner .mam-ad {
    min-height: 50px;
  }

  /* Show mobile-banner slot on small screens */
  .mam-ad-slot--mobile-banner {
    display: block;
  }
}

@media (min-width: 769px) {
  /* Hide mobile-only slot on desktop */
  .mam-ad-slot--mobile-banner {
    display: none !important;
  }
}