/*
Theme Name: Astra Child
Template: astra
Version: 1.0
*/

/* === FUERZA 2 COLUMNAS Y ROMPE CONTENEDORES INTERIORES === */
.blog-grid {
    display: grid !important;
    grid-template-columns: repeat(2,1fr) !important;
    gap: 2rem !important;
}
/* En móviles 1 columna */
@media (max-width: 600px) {
    .blog-grid { grid-template-columns: 1fr !important; }
}

/* Por si Astra mete un inner-container */
.blog-verde > .ast-container,
.blog-verde > .ast-container-fluid,
.blog-grid > .ast-container,
.blog-grid > .ast-container-fluid {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
}
/* ========================================================= */
/* FUERZA DISEÑO 2 COLUMNAS PARA LA PLANTILLA "Blog Verde" */
/* ========================================================= */

/* --- 1. Anulación de Contenedores del Tema (Astra) --- */

/* Asegura que el área de contenido principal (donde están tus posts) use todo el ancho. */
/* Es clave el uso de !important y la especificidad. */
body.page-template-page_blog #primary {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Oculta la barra lateral por si está ocupando la segunda columna */
body.page-template-page_blog #secondary {
    display: none !important;
}

/* Fuerza el contenedor general del contenido a no tener límites de ancho de Astra */
body.page-template-page_blog .site-content > .ast-container,
body.page-template-page_blog .site-content > .ast-container-fluid {
    max-width: none !important; 
    width: 100% !important; 
    padding: 0 !important;
}

/* --- 2. Estilos para la Cuadrícula del Blog (page_blog.php) --- */

/* Asegura que la cuadrícula se muestre en 2 columnas */
.blog-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
    justify-content: space-between;
}
.blog-card {
    flex: 0 0 49%;
    max-width: 49%;
    /* Mantenemos tus estilos de diseño aquí */
    margin-bottom: 2rem;
    background: rgba(26, 58, 46, .6);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
}
.blog-card img {
    width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: cover;
    display: block;
}

/* --- 3. Móvil --- */
@media (max-width: 767px) {
    .blog-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}