/* =================================================================
   1. CONTENEDOR DE LA REJILLA (GRID)
   ================================================================= */
.category-grid-container {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 25vh);
    grid-auto-flow: dense;
}

/* =================================================================
   2. TARJETA INDIVIDUAL DE CATEGORÍA (HIJO INTERNO)
   ================================================================= */
.category-card {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    color: white;
    padding: 1.5rem;
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
}

/* =================================================================
   3. TIPOGRAFÍA (REINTEGRADA)
   ================================================================= */
/* Título en la tarjeta grande */
#brxe-ewuksy .brxe-heading {
    font-size: calc(var(--text-s) * 1.3) !important;
    line-height: 1.2 !important;
}

/* Título en las tarjetas pequeñas */
.category-grid-container > *:nth-child(n+2) .brxe-heading {
    font-size: calc(var(--text-s) * 1.2) !important;
    line-height: 1.2 !important;
}

/* Fecha en la tarjeta grande */
#brxe-ewuksy .post-card-date {
    font-size: calc(var(--text-s) * 0.8) !important;
    line-height: 1.2 !important;
    margin-top: 0.5em;
}

/* Fecha en las tarjetas pequeñas */
.category-grid-container > *:nth-child(n+2) .post-card-date {
    font-size: calc(var(--text-s) * 0.8) !important;
    line-height: 1.2 !important;
    margin-top: 0.5em;
}

/* =================================================================
   4. POSICIONAMIENTO DE ELEMENTOS EN LA REJILLA
   ================================================================= */
.category-grid-container > *:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}
.category-grid-container > *:nth-child(2) {
    grid-column: 3 / 5;
    grid-row: 1 / 2;
}
.category-grid-container > *:nth-child(3) {
    grid-column: 5 / 7;
    grid-row: 1 / 2;
}
.category-grid-container > *:nth-child(4) {
    grid-column: 3 / 5;
    grid-row: 2 / 3;
}
.category-grid-container > *:nth-child(5) {
    grid-column: 5 / 7;
    grid-row: 2 / 3;
}

/* =================================================================
   5. DISEÑO ADAPTABLE (RESPONSIVE)
   ================================================================= */
@media (max-width: 1024px) {
    .category-grid-container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .category-grid-container > * {
        grid-column: auto !important;
        grid-row: auto !important;
        aspect-ratio: 1 / 1;
    }
}

@media (max-width: 767px) {
    .category-grid-container {
        grid-template-columns: 1fr;
    }
}

/* =================================================================
   6. ESTILOS ESPECÍFICOS Y HOVER
   ================================================================= */
.category-grid-container > *:hover {
    transform: translateY(-8px);
}
#brxe-ewuksy .category-card {
    border-bottom-right-radius: 100px !important;
    border-top-left-radius: 100px !important;
}