/* BR Times — Ad slots (portado 1:1 do bundle BR Times Design System) */

/* ── Ad slot ──────────────────────────────────────── */
.brt-ad { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; display:grid; place-items:center; padding: 24px; width: 100%; }
.brt-ad__inner { text-align:center; display:flex; flex-direction:column; gap: 4px; }
.brt-ad__label { font-weight:700; font-size:14px; line-height:21px; color: var(--fg); letter-spacing:.02em; text-transform: uppercase; }
.brt-ad__size { font-size:12px; line-height:18px; color: var(--fg-muted); }

.brt-top-ad { margin-top: 32px; }

/* ── Banner real (com imagem) — sem caixa/borda, a imagem preenche ── */
/* Slot SEM altura fixa: cresce com a peça (não reserva espaço a mais). Padding =
   margem sempre (a peça nunca encosta nas bordas). Sem overflow:hidden: o hover
   eleva/sombreia a imagem e isso não pode ser cortado. Centralização vem do
   place-items:center do .brt-ad. */
.brt-ad--live { border: 0; background: none; padding: 12px 16px; }
/* Banner cabe no placeholder: encolhe se maior (W ou H), mantém original se menor,
   centralizado, com margem; nunca estica/upscale/recorta. Teto de altura = altura
   da zona (--ad-h, valor absoluto → não exige altura definida no slot). Regra global. */
.brt-ad--live img { display: block; max-width: 100%; max-height: var(--ad-h, 147px); width: auto; height: auto; border-radius: 10px; }

/* ── CTA "Anuncie aqui" (estado sem banner) — clicável, espelha o PantaNews ── */
.brt-ad--cta {
  text-decoration: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
}
.brt-ad__cta-title { font-weight: 800; font-size: 18px; line-height: 1.3; color: var(--fg); letter-spacing: -.01em; text-decoration: none; }
.brt-ad__cta-sub { font-size: 13px; line-height: 1.45; color: var(--fg-muted); max-width: 280px; text-align: center; text-decoration: none; }

/* ── Hover = efeito 3D (elevação + sombra), SEM sublinhado nem realce de borda ──
   CTA (sem anúncio): eleva o BLOCO todo. Banner real (com anúncio): eleva SÓ a
   IMAGEM, não o slot/letterbox em volta. ── */
.brt-ad--cta { transition: transform .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease; }
.brt-ad--live img { transition: transform .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease; }
.brt-ad--cta:hover,
.brt-ad--live:hover { text-decoration: none; }
.brt-ad--cta:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.28), 0 4px 10px -4px rgba(0, 0, 0, 0.14);
}
.brt-ad--live:hover img {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.28), 0 4px 10px -4px rgba(0, 0, 0, 0.14);
}
html.dark .brt-ad--cta:hover { box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6), 0 5px 12px -4px rgba(0, 0, 0, 0.45); }
html.dark .brt-ad--live:hover img { box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6), 0 5px 12px -4px rgba(0, 0, 0, 0.45); }