/* ---------------------------------------------------------------------------
   Visor do card de Palpite em Destaque (`.odd-destaque`).

   Carregado DEPOIS do tema e do CSS do tenant de proposito: cada tenant recorta
   o `.odd-destaque:before` do seu jeito (50% ou 60% de largura, elipse ou
   poligono) e quem escolheu um modo de imagem no painel quer o SEU recorte.

   Vale SO para card com modo declarado (`.pd-visor`, emitido por
   `PalpiteDestaque::visor()`). Card antigo nao tem a classe e continua sendo
   desenhado pelo tema, byte-identico.

   As variaveis saem do PHP; aqui so' ficam os defaults.
   Ver _docs/PALPITES_DESTAQUE.md.
   --------------------------------------------------------------------------- */

.odd-destaque.pd-visor { position: relative; }

/* O conteudo (cota, pernas, botao) vive acima das camadas. */
.odd-destaque.pd-visor > .card-body { position: relative; z-index: 2; }

/* O icone do tema (`--logo-alt` no `:after`) vira camada com posicao propria. */
.odd-destaque.pd-visor:after { display: none !important; }

/* Com imagem propria, o fundo recortado do tema sai de cena: a camada cobre. */
.odd-destaque.pd-visor.pd-img:before { display: none !important; }

.odd-destaque.pd-visor .pd-camada {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    pointer-events: none;
    border-radius: inherit;
    background-repeat: no-repeat;
}

/* ponytail: camada `absolute` acompanha o scroll interno do card (max-height 280px).
   Vira `sticky` se algum card passar a rolar de verdade. */
.odd-destaque.pd-visor.pd-img .pd-camada-img {
    display: block;
    z-index: 0;
    background-image: var(--pd-img);
    background-size: cover;
    background-position: var(--pd-x, 50%) var(--pd-y, 50%);
    transform: scale(var(--pd-zoom, 1));
    transform-origin: var(--pd-x, 50%) var(--pd-y, 50%);
}

/* Veu de legibilidade: sem ele, foto clara apaga o texto do card. Denso a
   esquerda (onde ficam as pernas) e transparente a direita (onde a imagem
   costuma ter o rosto/escudo que o operador posicionou). */
.odd-destaque.pd-visor.pd-img .pd-camada-veu {
    display: block;
    z-index: 1;
    background-image: linear-gradient(90deg,
        rgba(0, 0, 0, var(--pd-veu, 0.55)) 0%,
        rgba(0, 0, 0, var(--pd-veu, 0.55)) 45%,
        rgba(0, 0, 0, calc(var(--pd-veu, 0.55) * 0.25)) 100%);
}

.odd-destaque.pd-visor.pd-icone .pd-camada-icone {
    display: block;
    z-index: 1;
    background-image: var(--pd-icone);
    background-size: var(--pd-icone-tam, 22%) auto;
    background-position: var(--pd-icone-x, 88%) var(--pd-icone-y, 50%);
}