/* ==========================================================================
   Categorias: grade da home (3 linhas visíveis + expandir) e barra lateral
   ========================================================================== */

/* Grade da home: 8/6/4/3 colunas. Sem .expandida, mostra só 3 linhas em cada largura */
.grade-categorias { display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 1fr; gap: 12px; }
.card-categoria {
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    padding: 16px 8px 12px; color: var(--jj-text);
    background: var(--jj-surface); border: 1px solid var(--jj-border); border-radius: var(--jj-radius);
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.card-categoria:hover { color: var(--jj-text); border-color: var(--jj-primary); transform: translateY(-3px); box-shadow: var(--jj-shadow); }
.card-categoria .cat-ico { width: 48px; height: 48px; border-radius: 14px; }
.card-categoria .cat-ico img { width: 24px; height: 24px; }
/* Nome sempre com espaço para 2 linhas (corta com "…" se passar): todos os quadrados do mesmo tamanho */
.card-categoria .nome {
    font-size: .8rem; font-weight: 500; line-height: 1.25; min-height: 2.5em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.grade-categorias:not(.expandida) .card-categoria:nth-child(n+25) { display: none; }
.grade-categorias.expandida .card-categoria { animation: entrarCategoria .25s ease-out both; }
@keyframes entrarCategoria { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 1199.98px) {
    .grade-categorias { grid-template-columns: repeat(6, 1fr); }
    .grade-categorias:not(.expandida) .card-categoria:nth-child(n+19) { display: none; }
}
@media (max-width: 767.98px) {
    .grade-categorias { grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .grade-categorias:not(.expandida) .card-categoria:nth-child(n+13) { display: none; }
}
@media (max-width: 479.98px) {
    .grade-categorias { grid-template-columns: repeat(3, 1fr); }
    .grade-categorias:not(.expandida) .card-categoria:nth-child(n+10) { display: none; }
    .card-categoria { padding: 12px 4px 10px; }
    .card-categoria .cat-ico { width: 42px; height: 42px; }
    .card-categoria .nome { font-size: .72rem; }
}
.ver-todas-categorias .fa-chevron-down { transition: transform .2s; font-size: .75rem; }
.ver-todas-categorias[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }

/* Barra lateral (páginas de categoria e busca) */
.barra-categorias {
    position: sticky; top: 108px; padding: 12px;
    max-height: calc(100vh - 124px); overflow: auto;
    background: var(--jj-surface); border: 1px solid var(--jj-border); border-radius: var(--jj-radius);
}
.barra-categorias h6 { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--jj-muted); padding: 6px 10px 8px; margin: 0; }
.barra-categorias .cat-link { font-size: .84rem; }
.barra-categorias .cat-ico { width: 28px; height: 28px; }
.barra-categorias .cat-ico img { width: 20px; height: 20px; }

/* Ícone grande ao lado do título da categoria */
.titulo-pagina .cat-ico { width: 52px; height: 52px; border-radius: 14px; }
.titulo-pagina .cat-ico img { width: 28px; height: 28px; }