/* =========================================================
   CATÁLOGO /jogos/
   Complementa css/portal.css (cabeçalho, rodapé, .feature-card,
   .game-meta, esqueleto, botões). Só o que é do catálogo mora aqui.
========================================================= */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Cabeçalho da página ---------- */

.cat-cabecalho {
    padding: 34px 0 20px;
}

.cat-cabecalho h1 {
    font-size: clamp(1.9rem, 4.2vw, 3rem);
    line-height: 1;
}

.cat-cabecalho h1:focus {
    outline: none;
}

.cat-contagem {
    margin-top: 12px;
    min-height: 1.4em;
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* ---------- Barra: busca, filtros (celular), ordenação ---------- */

.cat-barra {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.cat-busca {
    flex: 1 1 280px;
    max-width: 520px;
}

.cat-busca input,
.cat-ordem select {
    width: 100%;
    min-height: 48px;
    padding: 0 18px;
    background: rgba(255,255,255,.05);
    border: 2px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font: inherit;
    font-size: .95rem;
}

.cat-busca input::placeholder {
    color: var(--text-muted);
}

.cat-busca input:focus,
.cat-ordem select:focus-visible {
    outline: none;
    border-color: var(--cyan);
    background: rgba(22,217,255,.06);
}

.cat-ordem {
    flex: 0 0 auto;
}

.cat-ordem select {
    width: auto;
    padding-right: 14px;
    border-radius: 12px;
    color-scheme: dark;
    cursor: pointer;
}

.cat-btn-filtros {
    display: none;
    min-height: 48px;
    padding: 0 18px;
    background: var(--bg-2);
    border: 2px solid var(--border);
    border-radius: 12px;
    color: var(--text-soft);
    font-weight: 900;
    cursor: pointer;
    transition: var(--transition);
}

.cat-btn-filtros:hover {
    color: #fff;
    background: rgba(255,255,255,.06);
}

@media (max-width: 959.98px) {
    .cat-btn-filtros:not([hidden]) {
        display: inline-flex;
        align-items: center;
    }
}

/* ---------- Chips de gênero ---------- */

.cat-chips {
    display: flex;
    gap: 8px;
    min-height: 56px;
    overflow-x: auto;
    padding: 6px 4px 10px;
    margin: 0 -4px 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}

.cat-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border: 2px solid var(--border);
    border-radius: 999px;
    color: var(--text-soft);
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: var(--transition);
}

.cat-chip:hover {
    color: #fff;
    background: rgba(255,255,255,.06);
}

.cat-chip[aria-current="true"] {
    background: var(--cyan);
    border-color: var(--cyan);
    color: #0b0d1b;
}

.cat-chip small {
    margin-left: 7px;
    opacity: .7;
    font-size: .72rem;
    font-weight: 800;
}

/* ---------- Layout: painel + resultados ---------- */

.cat-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-bottom: 68px;
}

.cat-resultados {
    min-width: 0;
    scroll-margin-top: 100px;
}

@media (min-width: 960px) {
    .cat-layout:not(.cat-layout--sem-painel) {
        grid-template-columns: 240px minmax(0, 1fr);
        align-items: start;
    }

    .cat-painel {
        position: sticky;
        top: 100px;
        padding: 20px;
        border: 2px solid var(--border);
        border-radius: var(--radius);
        background: rgba(255,255,255,.03);
    }

    .cat-painel-topo,
    .cat-painel-ver,
    .cat-fundo {
        display: none !important;
    }
}

.cat-painel[hidden] {
    display: none;
}

.cat-painel-corpo {
    display: grid;
    gap: 22px;
}

/* Enquanto as facetas não chegam o painel está vazio, mas a coluna já está
   reservada; a altura mínima evita um quadrado de 40 px parecendo defeito. */
@media (min-width: 960px) {
    .cat-painel-corpo:empty {
        min-height: 280px;
    }
}

.cat-painel fieldset {
    border: 0;
    min-inline-size: 0;
}

.cat-painel legend {
    margin-bottom: 8px;
    padding: 0;
    color: var(--cyan);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.cat-opcao {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    color: var(--text-soft);
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
}

.cat-opcao:hover {
    color: #fff;
}

.cat-opcao input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    accent-color: var(--cyan);
}

.cat-opcao small {
    margin-left: auto;
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 800;
}

.cat-limpar {
    margin-top: 18px;
    padding: 10px 0;
    background: none;
    border: 0;
    color: var(--pink);
    font: inherit;
    font-size: .84rem;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

.cat-limpar[hidden] {
    display: none;
}

.cat-painel-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.cat-painel-topo strong {
    font-family: var(--heading);
    font-size: 1.1rem;
    font-weight: 400;
}

.cat-fechar {
    width: 44px;
    height: 44px;
    background: none;
    border: 2px solid var(--border);
    border-radius: 12px;
    color: var(--text-soft);
    font-size: 1.1rem;
    cursor: pointer;
}

.cat-painel-ver {
    width: 100%;
    margin-top: 22px;
}

/* Gaveta no celular: fechada fica `visibility: hidden`, o que já a tira
   da ordem de tabulação sem precisar de `inert`. */
@media (max-width: 959.98px) {
    .cat-painel {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: 1100;
        width: min(88vw, 360px);
        padding: 20px;
        overflow-y: auto;
        background: var(--bg-2);
        border-left: 2px solid var(--border);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform var(--transition), visibility 0s linear 180ms;
    }

    .cat-painel.is-aberto {
        transform: none;
        visibility: visible;
        transition: transform var(--transition);
    }

    .cat-fundo {
        position: fixed;
        inset: 0;
        z-index: 1090;
        background: rgba(0,0,0,.55);
    }

    .cat-fundo[hidden] {
        display: none;
    }

    body.cat-travado {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cat-painel,
    .cat-painel.is-aberto {
        transition: none;
    }
}

/* ---------- Grade ---------- */

.cat-grade {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

/* content-visibility corta a pintura fora da tela. O padding-top absorve o
   hover de 7 px do .feature-card, que o contain: paint (implícito) cortaria;
   a margem negativa devolve o espaço. */
.cat-item {
    content-visibility: auto;
    contain-intrinsic-size: auto 430px;
    padding-top: 8px;
    margin-top: -8px;
}

.cat-grade .feature-card {
    height: 100%;
    min-height: 0;
    padding: 20px;
}

.cat-grade .feature-card-imagem {
    margin: -20px -20px 12px;
}

.cat-grade .feature-card.is-skeleton {
    min-height: 400px;
}

/* No portal as etiquetas ficam numa linha só e truncam ("DISPONÍV…"); aqui
   o card tem altura livre, então elas quebram linha em vez de cortar. */
.cat-grade .game-meta {
    flex-wrap: wrap;
}

.cat-grade .game-meta span {
    overflow: visible;
    text-overflow: clip;
}

/* O link ocupa o card inteiro; só existe para jogo disponível com url_jogo. */
.cat-grade .card-link {
    position: static;
}

.cat-grade a.card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}

.cat-grade a.card-link:focus-visible {
    outline: none;
}

.cat-grade a.card-link:focus-visible::after {
    outline: 3px solid var(--cyan);
    outline-offset: -3px;
    border-radius: var(--radius);
}

/* Slot de in-feed (T10/T11). Escondido por padrão: reservar a célula em
   branco deixaria um buraco que parece defeito. Quando for exibido, o
   anúncio usa o mesmo raio/borda do card, SEM selo e SEM "Jogar". */
.cat-slot-infeed[hidden] {
    display: none;
}

.cat-slot-infeed:not([hidden]) {
    min-height: 320px;
    border: 2px solid rgba(255,255,255,.09);
    border-radius: var(--radius);
    background: var(--bg-card);
}

/* ---------- Avisos (vazio / erro) ---------- */

.cat-aviso {
    padding: 36px 24px;
    text-align: center;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-soft);
}

.cat-aviso[hidden] {
    display: none;
}

.cat-aviso p {
    margin-bottom: 16px;
    font-weight: 700;
}

.cat-aviso.is-erro {
    border-color: rgba(255,61,157,.5);
}

/* ---------- Paginação ---------- */

.cat-paginacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 36px;
}

.cat-paginacao[hidden] {
    display: none;
}

.cat-paginacao a,
.cat-paginacao span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    border: 2px solid var(--border);
    border-radius: 12px;
    color: var(--text-soft);
    font-size: .9rem;
    font-weight: 900;
}

.cat-paginacao a:hover {
    color: #fff;
    background: rgba(255,255,255,.06);
}

.cat-paginacao [aria-current="page"] {
    background: var(--cyan);
    border-color: var(--cyan);
    color: #0b0d1b;
}

.cat-paginacao [aria-disabled="true"],
.cat-paginacao .cat-reticencias {
    border-color: transparent;
    opacity: .45;
}