/* ---------------------------------------------------------------------------
   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; }

/* Ordem das camadas: imagem (0) < veu (1) < icone (2) < conteudo (3: cota, pernas, botao).
   O icone e' marca d'agua: por cima da imagem e do escurecimento, por baixo dos textos. */
.odd-destaque.pd-visor > .card-body { position: relative; z-index: 3; }

/* 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%);
}

/* Recorte do fundo escolhido no painel (`midia.clip`), UM POR TELA. Sem a classe da tela
   (`pd-clip-m` celular / `pd-clip-d` desktop) o `:before` fica com o clip-path do TEMA do
   tenant naquela tela. Aqui as duas faixas sao complementares (e nao mobile-first) porque
   "recorte do tema" nao tem valor para voltar: o desktop pode querer o do tema com o celular
   recortado, e isso so' da' deixando a regra do celular fora do desktop.
   Valores de `PalpiteDestaque::recorte()`: `--pd-clip` na caixa do card (fundo do tema e
   veu) e `--pd-clip-img` ja' compensado pelo zoom/posicao da camada da imagem. */
@media (max-width: 767.98px) {

    .odd-destaque.pd-visor.pd-clip-m:before {
        -webkit-clip-path: var(--pd-clip);
        clip-path: var(--pd-clip);
    }

    .odd-destaque.pd-visor.pd-clip-m.pd-img .pd-camada-img {
        -webkit-clip-path: var(--pd-clip-img);
        clip-path: var(--pd-clip-img);
    }

    .odd-destaque.pd-visor.pd-clip-m.pd-img .pd-camada-veu {
        -webkit-clip-path: var(--pd-clip);
        clip-path: var(--pd-clip);
    }
}

@media (min-width: 768px) {

    .odd-destaque.pd-visor.pd-clip-d:before {
        -webkit-clip-path: var(--pd-d-clip);
        clip-path: var(--pd-d-clip);
    }

    .odd-destaque.pd-visor.pd-clip-d.pd-img .pd-camada-img {
        -webkit-clip-path: var(--pd-d-clip-img);
        clip-path: var(--pd-d-clip-img);
    }

    .odd-destaque.pd-visor.pd-clip-d.pd-img .pd-camada-veu {
        -webkit-clip-path: var(--pd-d-clip);
        clip-path: var(--pd-d-clip);
    }
}

/* ICONE (marca d'agua): <img> dentro da camada `.pd-camada-icone`, que cobre o card e RECORTA
   (overflow: hidden). O recorte fica na camada e nao no card: o card tem `overflow-y: auto` e
   `max-height: 280px` (em tela de 360px o conteudo rola), e `hidden` nele cortaria as pernas.
   Tudo em % do CARD, entao o mesmo ajuste acompanha o card em qualquer largura:
   - `width`  = tamanho (% da largura do card, altura proporcional da propria logo);
   - `left/top` + `translate(-X%, -Y%)`: a ancora ANDA com o slider -- centro da logo em 50%,
     borda da logo encostada na borda do card em 0% e 100%. A logo nunca sai do card, e os
     valores guardam o mesmo sentido do `background-position` usado antes. */
.odd-destaque.pd-visor.pd-icone .pd-camada-icone {
    display: block;
    z-index: 2;
    overflow: hidden;
}

.odd-destaque.pd-visor .pd-icone-img {
    position: absolute;
    left: var(--pd-icone-x, 88%);
    top: var(--pd-icone-y, 50%);
    width: var(--pd-icone-tam, 22%);
    height: auto;
    max-width: none;
    /* Logo mais alta que o card (tamanho grande num card baixo): encolhe para caber na altura,
       sem distorcer -- em vez de ser cortada em cima e embaixo. */
    max-height: 100%;
    object-fit: contain;
    transform: translate(calc(var(--pd-icone-x, 88%) * -1), calc(var(--pd-icone-y, 50%) * -1));
    pointer-events: none;
    user-select: none;
}

/* DESKTOP (>= 768px, onde o card do site troca de layout): enquadramento, zoom e veu
   proprios, mobile-first. O icone NAO entra aqui: e' % do card e vale em qualquer tela. Cada leitura cai na variavel do celular quando o card nao tem
   ajuste de desktop (`midia.desktop` ausente => nenhuma `--pd-d-*` no style) -- e ai' estas
   regras resolvem para os MESMOS valores das de cima. */
@media (min-width: 768px) {

    .odd-destaque.pd-visor.pd-img .pd-camada-img {
        background-position: var(--pd-d-x, var(--pd-x, 50%)) var(--pd-d-y, var(--pd-y, 50%));
        transform: scale(var(--pd-d-zoom, var(--pd-zoom, 1)));
        transform-origin: var(--pd-d-x, var(--pd-x, 50%)) var(--pd-d-y, var(--pd-y, 50%));
    }

    .odd-destaque.pd-visor.pd-img .pd-camada-veu {
        background-image: linear-gradient(90deg,
            rgba(0, 0, 0, var(--pd-d-veu, var(--pd-veu, 0.55))) 0%,
            rgba(0, 0, 0, var(--pd-d-veu, var(--pd-veu, 0.55))) 45%,
            rgba(0, 0, 0, calc(var(--pd-d-veu, var(--pd-veu, 0.55)) * 0.25)) 100%);
    }
}

/* BADGE DA COTA (fogo + odd total, `.b-cota`): configuravel por card em `midia.cota_*`.
   Card sem essas chaves nao recebe nenhuma classe daqui e fica com o badge do tema.
   - `pd-cota-sem-fogo` / `pd-cota-sem-odd`: esconde uma das partes;
   - `pd-cota-oculta`: as duas desligadas => some o badge inteiro (fundo junto);
   - `pd-cota-livre`: posicao em % do card, mesma logica do icone (ancora anda com o slider,
     o badge nunca sai do card). O tema ja' deixa o `.b-cota` em `position: fixed`, que dentro
     do slide do swiper (que tem `transform`) ancora NO CARD -- por isso so' left/top mudam. */
.odd-destaque.pd-visor.pd-cota-sem-fogo .b-cota .fa-beat-fade { display: none !important; }
.odd-destaque.pd-visor.pd-cota-sem-fogo .b-cota .fa-beat-fade + .pd-cota-valor { margin-left: 0; }
.odd-destaque.pd-visor.pd-cota-sem-odd .b-cota .pd-cota-valor { display: none !important; }
.odd-destaque.pd-visor.pd-cota-sem-odd .b-cota .fa-beat-fade { margin-right: 0 !important; }
.odd-destaque.pd-visor.pd-cota-oculta .b-cota { display: none !important; }

.odd-destaque.pd-visor.pd-cota-livre .b-cota {
    left: var(--pd-cota-x, 92%) !important;
    top: var(--pd-cota-y, 8%) !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(calc(var(--pd-cota-x, 92%) * -1), calc(var(--pd-cota-y, 8%) * -1));
}