/**
 * Ad slot — Zigg 2026
 *
 * Componente compartilhado entre home, archives, category, taxonomies
 * e singles. Sempre reserva espaço (CLS=0) com `aspect-ratio` no formato.
 *
 * Markup esperado:
 *   <aside class="ad-slot ad-slot--<format> [ad-slot--sticky]"
 *          data-context="..." data-slot="...">
 *     <span class="ad-slot__label">Publicidade</span>
 *     <div class="ad-slot__box">[conteúdo do anúncio]</div>
 *   </aside>
 *
 * Formatos:
 *   - native       — horizontal moderado (728×~140)
 *   - mrec         — bloco 300×250 (centralizado)
 *   - lb           — leaderboard 728×90
 *   - sidebar-mrec — 300×250 para sidebar (sem aspect-ratio horizontal)
 *
 * Sticky: aplicado em desktop apenas (>=1080px). Mobile sempre normal.
 */

.ad-slot {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 10px;
  text-align: center;
}
.ad-slot__label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
  opacity: .85;
}
.ad-slot__box {
  background: var(--paper);
  border-radius: 6px;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 100%;
}

/* Formatos com reserva de espaço (CLS=0) */
.ad-slot--native .ad-slot__box {
  max-width: 728px;
  margin: 0 auto;
  aspect-ratio: 8/1;
  min-height: 90px;
  max-height: 140px;
}
.ad-slot--mrec .ad-slot__box {
  max-width: 300px;
  margin: 0 auto;
  aspect-ratio: 300/250;
  min-height: 200px;
  max-height: 250px;
}
.ad-slot--lb .ad-slot__box {
  max-width: 728px;
  margin: 0 auto;
  aspect-ratio: 728/90;
  min-height: 60px;
  max-height: 90px;
}
.ad-slot--sidebar-mrec .ad-slot__box {
  max-width: 300px;
  margin: 0 auto;
  aspect-ratio: 300/250;
  min-height: 250px;
}

/* Sticky em desktop — usado em sidebar (offset cobre header fixo) */
@media (min-width: 1080px) {
  .ad-slot--sticky {
    position: sticky;
    top: calc(var(--header-h, 72px) + 16px);
  }
}

/* ==========================================================================
   Slot vazio (sem ad real) — REALMENTE invisível pra não criar buracos.
   ==========================================================================
   Quando .ad-slot--empty é aplicado (sem action `zigg/render_ad/*` ativa),
   o slot ocupa altura mínima: só uma label "publicidade" 9px discreta,
   sem background, sem border, sem reserva de espaço.
   Quando o AdSense for integrado e a action emitir conteúdo, a classe
   --empty some e o slot retoma sua altura completa (CLS reservado pelo
   aspect-ratio continua válido pra carregamento assíncrono).

   Uso de !important: necessário pra blindar contra otimizadores de CSS
   externos (LiteSpeed CSS minify estava removendo especificidade composta).
*/
.ad-slot--empty {
  padding: 2px 8px !important;
  gap: 0 !important;
  background: transparent !important;
  border: 0 !important;
  opacity: .5;
  margin: 0 !important; /* sem margem extra além do gap do parent */
}
.ad-slot--empty .ad-slot__label {
  font-size: 9px !important;
  opacity: .6 !important;
}
.ad-slot--empty .ad-slot__box {
  display: none !important;
}

/* Mobile: padding menor + aspect-ratios mais compactos */
@media (max-width: 720px) {
  .ad-slot { padding: 8px; }
  .ad-slot--native .ad-slot__box  { aspect-ratio: 320/100; min-height: 80px; max-height: 120px; }
  .ad-slot--mrec .ad-slot__box    { max-width: 280px; }
  .ad-slot--lb .ad-slot__box      { aspect-ratio: 320/50;  min-height: 50px;  }
  .ad-slot--sidebar-mrec .ad-slot__box { max-width: 280px; }
  /* Nunca sticky em mobile */
  .ad-slot--sticky { position: static; top: auto; }
}

/* Desktop: espaçamento extra vertical entre slot de ad e seções vizinhas */
@media (min-width: 720px) {
  .ad-slot {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
}