/* ============================================================
   post-grid.css
   La retícula de tarjetas del listado de un tema (#PostContainer).

   CUANTAS COLUMNAS

       hasta 767px     1     movil
       768 - 1023      2     tableta
       1024 - 1920     3     portatil y escritorio
       desde 1921      5     ultrawide

   Estos cuatro numeros estan tambien en Pagination.js -que multiplica
   por las filas para pedirle al servidor el numero justo de
   articulos- y los tamaños resultantes en Helpers/PostGrid.cs. Si se
   cambian aqui, hay que cambiarlos en los otros dos. Es duplicacion a
   sabiendas: el CSS no puede decirle al servidor cuantas caben, y el
   servidor no puede leer una media query.

   POR QUE FLEX Y NO GRID

   Esto era una reticula (display: grid) con las columnas contadas a
   mano y justify-content: center. Centraba, si, pero solo las filas
   COMPLETAS. En una reticula las columnas existen aunque esten vacias:
   la ultima fila con menos tarjetas de la cuenta las coloca en las
   primeras columnas y deja las de la derecha vacias, asi que esa fila
   se ve pegada a la izquierda. Medido, se iba hasta 447px del centro
   en ultrawide con 7 tarjetas.

   Flex no reserva huecos: cada fila solo contiene lo que hay, y
   justify-content: center las centra TODAS, la ultima incluida.

   Lo que se pierde al dejar la reticula es el numero explicito de
   columnas, y eso importa porque el servidor manda una cantidad exacta
   de articulos. Se recupera acotando el ancho del contenedor a lo que
   miden justo N tarjetas con sus huecos: mas no caben, asi que el
   reparto por filas sigue siendo el mismo de antes. De ahi el calc()
   de abajo, y por eso el numero de columnas vive en --pg-columnas y no
   repetido en cada punto de corte.
   ============================================================ */

#PostContainer {
    /* Los dos numeros de los que sale todo lo demas. El ancho de la
       tarjeta es el de .card-container-altrn en PostCard.css. */
    --pg-columnas: 1;
    --pg-tarjeta: 250px;
    --pg-hueco: 1.5rem;

    display: flex;
    flex-wrap: wrap;
    /* Centra cada fila por separado, que es justo lo que la reticula no
       hacia con la ultima. */
    justify-content: center;
    gap: 2.5rem var(--pg-hueco);

    /* El tope de N tarjetas por fila. Sin esto, flex mete las que
       quepan y en anchos intermedios saldrian mas de las que el
       servidor mando, dejando filas descuadradas. */
    max-width: calc(var(--pg-columnas) * var(--pg-tarjeta)
                    + (var(--pg-columnas) - 1) * var(--pg-hueco));
    margin-left: auto;
    margin-right: auto;
}

/* Bulma le da a .column un flex-basis y un relleno pensados para su
   propio sistema de columnas; aqui sobran los dos y descuadran el
   ancho. El ancho fijo es el de la tarjeta que lleva dentro: asi la
   fila se mide igual que el calc() de arriba. */
#PostContainer > .column {
    flex: none;
    width: var(--pg-tarjeta);
    padding: 0;
}

@media screen and (min-width: 768px) {
    #PostContainer {
        --pg-columnas: 2;
    }
}

@media screen and (min-width: 1024px) {
    #PostContainer {
        --pg-columnas: 3;
    }
}

@media screen and (min-width: 1921px) {
    #PostContainer {
        --pg-columnas: 5;
        --pg-hueco: 3rem;
        gap: 3rem var(--pg-hueco);
    }
}