/**
 * catalogo.css — MOBILE OVERRIDE
 * Carregado apenas em telas <= 768px
 * Sobrescreve catalogo.css desktop
 *
 * Design: toolbar compacta inline, cards 2 colunas, animacoes app-like
 */

/* ========================================================================
   CABECALHO — compacto, sem padding excessivo
   ======================================================================== */

.catalogo-header {
    padding: 0.75rem 0 0.5rem;
    margin-bottom: 0.5rem;
    min-height: unset;
    border-bottom: none;
}

.catalogo-header h1 {
    font-size: 1.3rem;
}

.catalogo-para-voce {
    font-size: 0.5em;
}

/* ========================================================================
   TOOLBAR — mobile: busca em cima, selects + contagem embaixo
   ======================================================================== */

.catalogo-toolbar-sticky {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    margin-left: 0;
    margin-right: 0;
    top: 0;
}

/* Linha 1: Busca ocupa linha inteira */
.toolbar-grupo-busca {
    order: 1;
    width: 100%;
}

.toolbar-busca {
    flex: 1;
    min-width: unset;
}

.toolbar-input {
    padding: 0.4rem 2rem 0.4rem 2.25rem;
    font-size: 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border);
}

/* Grid 2x2: alinhamento vertical entre linhas
   Linha 1: busca + contagem
   Linha 2: categorias + ordenacao
   649 fica exatamente acima de "Mais relevantes" */
.catalogo-toolbar-sticky {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0.4rem;
}

.toolbar-grupo-busca {
    grid-column: 1;
    grid-row: 1;
    display: flex;
}

.toolbar-grupo-contagem {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    padding: 0;
}

/* Linha 2: dropdowns nas mesmas colunas 1fr 1fr */
.toolbar-grupo-filtros {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    min-width: 0;
}

/* Todos os elementos filhos ocupam 100% */
.toolbar-categoria,
.toolbar-filtros-campo {
    min-width: 0;
}

.toolbar-busca {
    width: 100%;
}

.cat-dropdown,
.cat-dropdown-trigger {
    width: 100%;
    min-width: unset;
    box-sizing: border-box;
}

.cat-dropdown-trigger {
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.cat-dropdown-texto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-dropdown-panel {
    min-width: 220px;
    max-height: 280px;
}

/* Menu de ordenacao: nunca mais largo que a tela. O max-height do painel e so
   rede de seguranca pra tela baixa — no caso normal o conteudo cabe inteiro.
   O teto de 152px da lista saiu com o bloco de preco (2026-08-09): sem ele,
   as ordenacoes cabem inteiras e nao precisam rolar por dentro. */
.toolbar-filtros-panel {
    min-width: min(320px, calc(100vw - 1.5rem));
    max-height: 78vh;
    overflow-y: auto;
}

.toolbar-filtros-panel .filtros-opcoes {
    max-height: none;
}

.cat-dropdown-option {
    padding: 0.5rem 0.6rem;
    font-size: 0.8rem;
}

/* Contagem: estilo simples igual desktop, centralizado */
.catalogo-count {
    display: flex !important;
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    white-space: nowrap;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    font-size: 0.78rem;
}

.catalogo-count svg {
    display: inline-flex;
    width: 14px;
    height: 14px;
}

.catalogo-count strong {
    font-size: 0.78rem;
    line-height: 1;
    font-weight: 700;
}

.catalogo-count-label {
    display: inline;
    font-size: 0.72rem;
}

.catalogo-count::after {
    display: none;
}

/* ========================================================================
   GRID DE CURSOS — 2 colunas compactas
   ======================================================================== */

.cursos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
}

/* ========================================================================
   CARDS — menores, mais compactos
   ======================================================================== */

.curso-card {
    border-radius: 10px;
}

.curso-card-conteudo {
    padding: 0.5rem 0.6rem;
}

.curso-categoria {
    font-size: 0.58rem;
    margin-bottom: 0.15rem;
}

.curso-titulo {
    font-size: 0.78rem;
    -webkit-line-clamp: 2;
    line-height: 1.3;
}

.curso-instrutor {
    font-size: 0.75rem;
    margin-bottom: 0.35rem;
}

.curso-instrutor svg {
    width: 12px;
    height: 12px;
}

/* Avaliacao */
.curso-avaliacao {
    gap: 0.25rem;
}

.curso-nota {
    font-size: 0.72rem;
}

.curso-estrelas {
    font-size: 0.6rem;
}

.curso-alunos {
    font-size: 0.65rem;
}

/* Footer do card */
.curso-card-footer {
    padding: 0.5rem 0.6rem;
}

.curso-preco .preco-atual {
    font-size: 0.9rem;
}

.curso-preco .preco-original {
    font-size: 0.62rem;
}

.btn-add-cart {
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.btn-add-cart svg {
    width: 17px;
    height: 17px;
}

/* Badges */
.curso-badges .badge {
    font-size: 0.55rem;
    padding: 0.2rem 0.35rem;
}

/* Meta na imagem */
.curso-imagem-meta .meta-item {
    font-size: 0.62rem;
}

/* ========================================================================
   SECOES TEMATICAS — cards menores no scroll
   ======================================================================== */

/* Cards dentro de secoes tematicas: animacao propria (nao herdar do grid) */
.secao-tematica-card .curso-card {
    opacity: 1;
    transform: none;
    animation: none;
}

.secao-tematica-card {
    flex: 0 0 170px;
}

.secao-tematica-titulo {
    font-size: 0.9rem;
}

.secao-tematica-icone {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

.secao-tematica-icone svg {
    width: 16px;
    height: 16px;
}

/* ========================================================================
   ANIMACOES DE ENTRADA — slide up suave
   ======================================================================== */

.catalogo-toolbar-sticky {
    animation-delay: 0.3s;
}

.curso-card {
    opacity: 0;
    transform: translateY(16px);
    animation: mobileCatSlideUp 0.35s ease-out forwards;
}

@keyframes mobileCatSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger mais rapido que desktop */
.curso-card:nth-child(1)  { animation-delay: 0.5s; }
.curso-card:nth-child(2)  { animation-delay: 0.58s; }
.curso-card:nth-child(3)  { animation-delay: 0.66s; }
.curso-card:nth-child(4)  { animation-delay: 0.74s; }
.curso-card:nth-child(5)  { animation-delay: 0.82s; }
.curso-card:nth-child(6)  { animation-delay: 0.90s; }
.curso-card:nth-child(7)  { animation-delay: 0.96s; }
.curso-card:nth-child(8)  { animation-delay: 1.02s; }
.curso-card:nth-child(9)  { animation-delay: 1.08s; }
.curso-card:nth-child(10) { animation-delay: 1.14s; }
.curso-card:nth-child(11) { animation-delay: 1.20s; }
.curso-card:nth-child(12) { animation-delay: 1.26s; }
.curso-card:nth-child(n+13) { animation-delay: 1.30s; }

/* ========================================================================
   LOADING E ESTADO VAZIO — ajustes mobile
   ======================================================================== */

.catalogo-loading {
    padding: 3rem 1rem;
}

.catalogo-vazio {
    padding: 2.5rem 1.5rem;
    border-radius: 12px;
}

.catalogo-vazio h3 {
    font-size: 1.15rem;
}

/* ========================================================================
   INFINITE SCROLL — mais compacto
   ======================================================================== */

.catalogo-load-more {
    padding: 1.5rem 1rem;
}

.catalogo-fim {
    padding: 1rem;
    font-size: 0.8rem;
}

/* ========================================================================
   LAYOUT SIDEBAR (pagina de categoria) — mobile
   ======================================================================== */

.catalogo-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.catalogo-filtros {
    position: static;
    padding: 1rem;
    border-radius: 10px;
}

.filtros-titulo {
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.35rem;
}

.categoria-item {
    padding: 0.4rem 0.5rem;
    font-size: 0.8rem;
}

.categoria-count {
    font-size: 0.7rem;
}

.catalogo-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
}

.paginacao {
    gap: 0.25rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.paginacao-item {
    min-width: 32px;
    height: 32px;
    padding: 0 0.5rem;
    font-size: 0.8rem;
    border-radius: 6px;
}