/**
 * Category Grid for Elementor - CSS Grid Styles
 * Estilos responsivos para grade de posts em páginas de categoria
 */

/* Reset básico para evitar conflitos */
.cge-grid-enabled .cge-posts-grid * {
    box-sizing: border-box;
}

/* Container principal da grade */
.cge-posts-grid,
.cge-grid-enabled .posts,
.cge-grid-enabled .elementor-posts,
.cge-grid-enabled .elementor-posts-container,
.cge-grid-enabled .site-main .posts-container,
.cge-grid-enabled #main .posts,
.cge-grid-enabled .content-area .posts {
    display: grid !important;
    gap: 20px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Aplicar grade automaticamente em seletores comuns */
.cge-grid-enabled .posts > article,
.cge-grid-enabled .elementor-posts > article,
.cge-grid-enabled .elementor-posts-container > article,
.cge-grid-enabled .site-main .posts-container > article,
.cge-grid-enabled #main .posts > article,
.cge-grid-enabled .content-area .posts > article,
.cge-grid-enabled .post,
.cge-grid-enabled .elementor-post {
    display: block;
    width: 100%;
    margin: 0;
    break-inside: avoid;
}

/* Mobile First - 1 coluna (< 768px) */
.cge-posts-grid,
.cge-grid-enabled .posts,
.cge-grid-enabled .elementor-posts,
.cge-grid-enabled .elementor-posts-container,
.cge-grid-enabled .site-main .posts-container,
.cge-grid-enabled #main .posts,
.cge-grid-enabled .content-area .posts {
    grid-template-columns: 1fr;
}

/* Tablet - 2 colunas (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .cge-posts-grid,
    .cge-grid-enabled .posts,
    .cge-grid-enabled .elementor-posts,
    .cge-grid-enabled .elementor-posts-container,
    .cge-grid-enabled .site-main .posts-container,
    .cge-grid-enabled #main .posts,
    .cge-grid-enabled .content-area .posts {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop - 3 colunas padrão (≥ 1024px) */
@media (min-width: 1024px) {
    .cge-posts-grid,
    .cge-grid-enabled .posts,
    .cge-grid-enabled .elementor-posts,
    .cge-grid-enabled .elementor-posts-container,
    .cge-grid-enabled .site-main .posts-container,
    .cge-grid-enabled #main .posts,
    .cge-grid-enabled .content-area .posts {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Desktop - 4 colunas quando configurado */
@media (min-width: 1024px) {
    .cge-grid-enabled.cge-columns-4 .posts,
    .cge-grid-enabled.cge-columns-4 .elementor-posts,
    .cge-grid-enabled.cge-columns-4 .elementor-posts-container,
    .cge-grid-enabled.cge-columns-4 .site-main .posts-container,
    .cge-grid-enabled.cge-columns-4 #main .posts,
    .cge-grid-enabled.cge-columns-4 .content-area .posts,
    .cge-columns-4 .cge-posts-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Estilos específicos para Elementor */
.cge-grid-enabled .elementor-widget-archive-posts .elementor-posts-container,
.cge-grid-enabled .elementor-widget-posts .elementor-posts-container {
    display: grid !important;
}

/* Ajustes para cards de post */
.cge-grid-enabled .post,
.cge-grid-enabled .elementor-post,
.cge-grid-enabled article {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 200px;
}

/* Imagens responsivas dentro dos cards */
.cge-grid-enabled .post img,
.cge-grid-enabled .elementor-post img,
.cge-grid-enabled article img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Ajustes para títulos */
.cge-grid-enabled .post-title,
.cge-grid-enabled .elementor-post__title,
.cge-grid-enabled .entry-title {
    font-size: 1.2em;
    line-height: 1.4;
    margin-bottom: 10px;
}

/* Ajustes para excerpts */
.cge-grid-enabled .post-excerpt,
.cge-grid-enabled .elementor-post__excerpt,
.cge-grid-enabled .entry-summary {
    flex-grow: 1;
    font-size: 0.9em;
    line-height: 1.5;
}

/* Meta informações */
.cge-grid-enabled .post-meta,
.cge-grid-enabled .elementor-post__meta-data,
.cge-grid-enabled .entry-meta {
    font-size: 0.85em;
    margin-top: auto;
    padding-top: 10px;
}

/* Fallback para temas que não seguem padrões */
.cge-grid-enabled .hentry,
.cge-grid-enabled .type-post {
    display: flex;
    flex-direction: column;
}

/* Ajustes para paginação */
.cge-grid-enabled .pagination,
.cge-grid-enabled .nav-links,
.cge-grid-enabled .posts-navigation {
    grid-column: 1 / -1;
    margin-top: 30px;
    text-align: center;
}

/* Classe manual para uso em templates customizados */
.cge-posts-grid {
    display: grid !important;
    gap: 20px;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .cge-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .cge-posts-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .cge-posts-grid.cge-columns-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Animações suaves */
.cge-grid-enabled .post,
.cge-grid-enabled .elementor-post,
.cge-grid-enabled article {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cge-grid-enabled .post:hover,
.cge-grid-enabled .elementor-post:hover,
.cge-grid-enabled article:hover {
    transform: translateY(-2px);
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
    .cge-grid-enabled .post,
    .cge-grid-enabled .elementor-post,
    .cge-grid-enabled article {
        transition: none;
    }
    
    .cge-grid-enabled .post:hover,
    .cge-grid-enabled .elementor-post:hover,
    .cge-grid-enabled article:hover {
        transform: none;
    }
}