/**
 * plg_content_adbanners — in-article ad slot styling.
 *
 * T-4.7: reserve the slot's height with aspect-ratio BEFORE the creative loads, so there is
 * no layout shift when the ad script/module content resolves. The aspect-ratio is chosen from
 * the plugin's adsize{n} param (see data-ad-size) so the reservation tracks the real slot
 * dimensions instead of a generic oversized box.
 *
 * T-4.9: no viewport-scoped rule below changes WHEN or WHETHER an ad renders — the placement
 * decision is made once, server-side, in AdPlacementEngine. These breakpoints only resize the
 * same reserved box for narrower screens.
 */

.abn-ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  margin: 2rem auto;
  overflow: hidden;
  background: var(--abn-gray-6, #f9fafb);
  border: 1px solid var(--abn-gray-4, #e5e7eb);
  box-sizing: border-box;
}

.abn-ad-slot[data-ad-size="rectangle"] {
  max-width: 336px;
  aspect-ratio: 300 / 250;
}

.abn-ad-slot[data-ad-size="leaderboard"] {
  max-width: 728px;
  aspect-ratio: 728 / 90;
}

.abn-ad-slot > * {
  max-width: 100%;
}

.abn-ad-label {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--abn-sans, 'Montserrat', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--abn-gray-1, #6b7280);
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 720px) {
  .abn-ad-slot[data-ad-size="leaderboard"] {
    max-width: 320px;
    aspect-ratio: 320 / 100;
  }
}