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

/* FRASE no lugar de fogo + odd (`midia.cota_texto`, POR TELA): estilo de HQ, so' com frase.
   As classes `pd-cota-texto` (celular) / `pd-cota-texto-d` (desktop) so' existem quando uma
   frase foi escolhida; no padrao (fogo + odd) nada daqui se aplica e o badge e' o do tema.
   - Texto: vem do `visor()` numa variavel (`content: var(...)`, lista fechada no servidor).
   - Linhas: uma so' quando cabe; no celular, se nao couber, no maximo duas EQUILIBRADAS
     (`text-wrap: balance`) e sempre entre palavras (`word-break: keep-all`, sem hifen).
   - Caixa: o tema fixa `height: 30px`; aqui o fundo acompanha o texto.
   - Letra: Impact (Windows/Mac), senao Arial Black; peso 900, amarelo, contorno preto
     (`-webkit-text-stroke` + `paint-order` para o contorno nao comer o miolo) e sombra DURA
     (sem desfoque) para o efeito adesivo; inclinada para dar movimento. O inclinado fica no
     `::after`: o badge ja' usa `transform` na posicao livre. */
@media (max-width: 767.98px) {
    .odd-destaque.pd-visor.pd-cota-texto .b-cota > * { display: none !important; }
    .odd-destaque.pd-visor.pd-cota-oculta.pd-cota-texto .b-cota { display: flex !important; }
    .odd-destaque.pd-visor.pd-cota-texto .b-cota {
        height: auto; min-height: 30px; width: max-content; max-width: 60%;
        padding: 5px 10px 6px; white-space: normal; text-align: center; line-height: 1.05;
        text-wrap: balance; word-break: keep-all; overflow-wrap: normal; hyphens: none;
    }
    .odd-destaque.pd-visor.pd-cota-texto .b-cota::after { content: var(--pd-cota-texto); }
}

@media (min-width: 768px) {
    .odd-destaque.pd-visor.pd-cota-texto-d .b-cota > * { display: none !important; }
    .odd-destaque.pd-visor.pd-cota-oculta.pd-cota-texto-d .b-cota { display: flex !important; }
    .odd-destaque.pd-visor.pd-cota-texto-d .b-cota {
        height: auto; min-height: 30px; width: max-content; max-width: 92%;
        padding: 5px 12px 6px; white-space: nowrap; text-align: center; line-height: 1.05;
    }
    .odd-destaque.pd-visor.pd-cota-texto-d .b-cota::after { content: var(--pd-d-cota-texto); }
}

/* Visual de HQ: mesmo desenho nas duas telas (so' aparece onde o `content` acima existe). */
.odd-destaque.pd-visor.pd-cota-texto .b-cota::after,
.odd-destaque.pd-visor.pd-cota-texto-d .b-cota::after {
    display: inline-block;
    font-family: Impact, 'Arial Black', 'Arial Narrow Bold', sans-serif;
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #FFD000;
    -webkit-text-stroke: 1.2px #000;
    paint-order: stroke fill;
    text-shadow: 2px 2px 0 #000, 3px 3px 0 #000, 4px 4px 0 rgba(0, 0, 0, .45);
    transform: skew(-6deg) rotate(-2deg);
}