/**
 * Estimei — ad-slots.css
 * Slots de anúncio com dimensão reservada em CSS — garante CLS = 0
 * (o espaço já existe no layout antes de qualquer script de ads carregar,
 * então o preenchimento do anúncio nunca empurra o conteúdo ao redor).
 *
 * Uso: <div class="ad-slot ad-slot-rectangle ad-slot--placeholder"> ... </div>
 * Em produção, remova o modificador "ad-slot--placeholder" (ou deixe o
 * script de ads substituir o conteúdo do slot) — a reserva de tamanho
 * continua valendo mesmo sem ele, porque vem das classes de tamanho.
 */

.ad-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
    overflow: hidden;
    width: 100%;
}

/* ─── Placeholder visual (ambiente de teste) ───
   Modificador — some em produção assim que o slot for preenchido pelo
   script de ads real; a reserva de espaço (min-height/aspect-ratio) das
   classes de tamanho abaixo não depende deste modificador. */
.ad-slot--placeholder {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    color: #64748b;
    font-family: var(--font-ui, system-ui, sans-serif);
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

[data-theme="dark"] .ad-slot--placeholder {
    background: #1a2233;
    border-color: #3a4a63;
    color: #8a97ad;
}

.ad-slot--placeholder::after {
    content: attr(data-ad-label);
}

/* ─── Leaderboard — topo/rodapé de página ───
   Desktop: 728x90. Mobile: 320x100 (ver nota sobre 320x50 abaixo). */
.ad-slot-leaderboard {
    max-width: 728px;
    min-height: 90px;
    aspect-ratio: 728 / 90;
}

@media (max-width: 767px) {
    .ad-slot-leaderboard {
        max-width: 320px;
        min-height: 100px;
        aspect-ratio: 320 / 100;
    }
    /* Variante mais compacta (320x50) — use ad-slot-leaderboard--compact
       no mobile quando 100px de altura for demais pro contexto (ex.: logo
       abaixo do header, antes do primeiro campo do formulário). */
    .ad-slot-leaderboard.ad-slot-leaderboard--compact {
        min-height: 50px;
        aspect-ratio: 320 / 50;
    }
}

/* ─── Retângulo — in-content, entre seções ─── */
.ad-slot-rectangle {
    max-width: 300px;
    min-height: 250px;
    aspect-ratio: 300 / 250;
}

/* Variante maior (336x280) — geralmente CPM melhor que 300x250 quando o
   espaço em volta permite; use ad-slot-rectangle--large. */
.ad-slot-rectangle.ad-slot-rectangle--large {
    max-width: 336px;
    min-height: 280px;
    aspect-ratio: 336 / 280;
}

/* ─── Sticky bottom bar — mobile, persiste durante o scroll ───
   z-index abaixo do Modal (#pf-modal usa 10000) e do CommandMenu, pra
   nunca cobrir um modal aberto. */
.ad-slot-sticky-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    min-height: 50px;
    max-width: 100%;
    margin: 0;
    box-shadow: 0 -2px 8px var(--shadow-color, rgba(0,0,0,0.1));
}

@media (min-width: 768px) {
    /* Sticky bottom é um padrão mobile — no desktop vira um leaderboard
       fixo, mais discreto (a maioria dos formatos de ad network trata os
       dois tamanhos como o mesmo slot, então isto é só o wrapper visual). */
    .ad-slot-sticky-bottom {
        min-height: 90px;
    }
}

/* Espaço reservado no fim da página pra sticky bottom não cobrir o
   rodapé/último elemento — aplicar na página que usa o slot, ex.:
   body.tem-ad-sticky { padding-bottom: 60px; } */