/*
 * Etiqueta de gênero dos cards (Home, Novidades, gênero, pesquisa) — 12/11/2026, pedido do Joel ("uma tag mais
 * bonita"). Mesmo desenho dos botões de gênero novos (partials/novidades/menu-generos): vidro espelhado na cor do
 * gênero, cantos chanfrados, ícone + nome em branco itálico com contorno fino.
 *
 * A classe pg-tag e a cor (--cor) vêm de App\Support\NovidadesListing::etiqueta(); desligar = ETIQUETA_NOVA false.
 * Camadas (mesmo recorte): ::before = moldura com bisel; ::after = miolo na cor + reflexo espelhado. O brilho em
 * volta fica no wrapper (o filter no próprio <a> seria cortado pelo clip-path).
 */
.pg-button-wrapper:has(> .pg-tag) {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}

.pg-button.pg-tag {
    --corte: 9px;
    --contorno: color-mix(in srgb, var(--cor) 30%, #000);
    position: relative;
    isolation: isolate;
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    padding: 8px 15px 8px 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    line-height: 1 !important;
    clip-path: polygon(var(--corte) 0, 100% 0, 100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%, 0 100%, 0 var(--corte));
}

.pg-button.pg-tag::before,
.pg-button.pg-tag::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

/* moldura: tom claro em cima → cor → tom fechado embaixo (bisel do card de jogo) */
.pg-button.pg-tag::before {
    inset: 0;
    z-index: -2;
    background: linear-gradient(180deg, color-mix(in srgb, var(--cor) 45%, #fff) 0%, var(--cor) 45%, color-mix(in srgb, var(--cor) 50%, #000) 100%);
}

/* miolo: cor + reflexo espelhado (metade de cima clara, corte seco) + faixa diagonal de luz */
.pg-button.pg-tag::after {
    --c: calc(var(--corte) - .8px);
    inset: 2px;
    z-index: -1;
    clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
    background:
        linear-gradient(105deg, transparent 55%, rgba(255, 255, 255, .25) 62%, transparent 72%),
        linear-gradient(180deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .14) 48%, rgba(255, 255, 255, 0) 49%),
        linear-gradient(180deg, var(--cor) 0%, color-mix(in srgb, var(--cor) 70%, #000) 100%);
}

.pg-button.pg-tag .pg-tag__icone {
    flex: none;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(1px 0 0 var(--contorno)) drop-shadow(-1px 0 0 var(--contorno)) drop-shadow(0 1px 0 var(--contorno)) drop-shadow(0 -1px 0 var(--contorno));
}

.pg-button.pg-tag .pg-button-content-wrapper { display: inline-flex; align-items: center; }

.pg-button.pg-tag .pg-button-text {
    color: #fff !important;
    font-family: Roboto, sans-serif;
    font-size: 15px !important;
    font-weight: 900 !important;
    font-style: italic;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-shadow: -1px -1px 0 var(--contorno), 1px -1px 0 var(--contorno), -1px 1px 0 var(--contorno), 1px 1px 0 var(--contorno);
}