/* =====================================================================
   ProAprova Redação — Dashboard (grid de temas)
   Baseado nos estilos originais de .pa-grid/.pa-card, modernizados.
   Cards são VISÍVEIS por padrão; a animação de entrada é apenas um bônus
   e nunca esconde conteúdo (ver bloco prefers-reduced-motion).
   ===================================================================== */

.pa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
    padding: 20px 0;
}

.pa-card {
    background: var(--pa-surface);
    border-radius: var(--pa-radius, 14px);
    overflow: hidden;
    box-shadow: var(--pa-shadow-md, 0 4px 15px rgba(0, 0, 0, .05));
    cursor: pointer;
    border: 1px solid var(--pa-border, var(--pa-border));
    opacity: 1; /* visível por padrão, mesmo sem JS/animações */
    transition: transform var(--pa-t, .22s ease), border-color var(--pa-t, .22s ease), box-shadow var(--pa-t, .22s ease);
}
.pa-card:hover {
    transform: translateY(-5px);
    border-color: var(--pa-blue, var(--pa-blue));
    box-shadow: var(--pa-shadow-lg, 0 12px 30px rgba(15, 23, 42, .10));
}

.pa-card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    background: var(--pa-surface-2); /* fundo enquanto a imagem carrega */
    transition: transform .35s var(--pa-ease, ease);
}
.pa-card:hover .pa-card-img { transform: scale(1.04); }

.pa-card-content { padding: 20px; }
.pa-tag {
    background: var(--pa-info-bg);
    color: var(--pa-blue, var(--pa-blue));
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    margin-bottom: 10px;
    display: inline-block;
}
.pa-card-title { font-size: 15px; font-weight: 700; color: var(--pa-dark, var(--pa-dark)); margin: 0; line-height: 1.4; }

/* Animação de entrada escalonada — só quando o usuário não pediu menos
   movimento. Fora daqui, os cards permanecem estáticos e visíveis. */
@media (prefers-reduced-motion: no-preference) {
    .pa-card {
        animation: paFadeUp .5s var(--pa-ease, ease) both;
        animation-delay: calc(var(--pa-i, 0) * 60ms);
    }
    @keyframes paFadeUp {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}