/* ============================================================
   blocks.css
   El relleno de cada bloque de contenido, uno por uno.

   EL PROBLEMA QUE RESUELVE

   El layout envuelve todo en un <section>, y varias vistas volvian a
   abrir <section class="section"> dentro. Bulma le da relleno a esa
   clase, asi que el relleno se SUMABA: bajar el del layout para
   acercar el contenido a las ondas y al pie tambien se lo bajaba a
   cada bloque de dentro. Un solo mando para cinco cosas distintas.

   COMO ESTA ORGANIZADO, Y POR QUE ASI

   Cada bloque tiene UNA clase y UNA regla propia por punto de corte.
   Nada se comparte entre bloques, ni siquiera una regla base: al
   inspeccionar cualquiera de ellos en el navegador se ve su propia
   regla, con sus propios valores, y se cambia ahi mismo.

   Si, eso significa repetir los mismos numeros seis veces. Es
   deliberado. Una regla compartida ahorraria lineas pero volveria a
   traer el problema de arriba en pequeño: tocar una cosa moveria
   otras, que es justo lo que no queremos.

   Ninguno de estos bloques lleva ya la clase .section de Bulma, asi
   que nada les suma relleno por detras.

   LOS VALORES

   Los de aqui abajo son EXACTAMENTE los que .section daba hasta ahora
   en cada punto de corte. Este archivo reparte los mandos; no mueve
   nada. Lo que se mueva a partir de aqui lo mueves tu.
   ============================================================ */

/* ------------------------------------------------------------
   .page-shell
   El <section> del layout. Envuelve TODO el contenido de
   cualquier pagina: es lo que lo separa de las ondas y del pie.
   ------------------------------------------------------------ */

.page-shell {
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

@media screen and (max-width: 767px) {
    .page-shell {
        padding-top: 6rem;
        padding-bottom: 0rem;
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

@media screen and (min-width: 1024px) {
    .page-shell {
        padding-top: 0rem;
        padding-bottom: 3rem;
        padding-right: 0rem;
        padding-left: 0rem;
    }
}

@media screen and (min-width: 1921px) {
    .page-shell {
        padding-top: 6rem;
        padding-bottom: 6rem;
        padding-right: 0rem;
        padding-left: 0rem;
    }
}

/* ------------------------------------------------------------
   .home-about
   Portada: "¿Quienes somos?"
   ------------------------------------------------------------ */

.home-about {
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

@media screen and (max-width: 767px) {
    .home-about {
        padding-top: 0rem;
        padding-bottom: 0rem;
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

@media screen and (min-width: 1024px) {
    .home-about {
        padding-top: 0rem;
        padding-bottom: 0rem;
        padding-right: 0rem;
        padding-left: 0rem;
    }
}

@media screen and (min-width: 1921px) {
    .home-about {
        padding-top: 0rem;
        padding-bottom: 6rem;
        padding-right: 0rem;
        padding-left: 0rem;
    }
}

/* ------------------------------------------------------------
   .home-upcoming
   Portada: "Proximos articulos", el carrusel.
   ------------------------------------------------------------ */

.home-upcoming {
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

@media screen and (max-width: 767px) {
    .home-upcoming {
        padding-top: 4rem;
        padding-bottom: 0rem;
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

@media screen and (min-width: 1024px) {
    .home-upcoming {
        padding-top: 4rem;
        padding-bottom: 0rem;
        padding-right: 0rem;
        padding-left: 0rem;
    }
}

@media screen and (min-width: 1921px) {
    .home-upcoming {
        padding-top: 0rem;
        padding-bottom: 0rem;
        padding-right: 0rem;
        padding-left: 0rem;
    }
}

/* ------------------------------------------------------------
   .home-recommended
   Portada: el titulo "Recomendados".
   ------------------------------------------------------------ */

.home-recommended {
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

@media screen and (max-width: 767px) {
    .home-recommended {
        padding-top: 4rem;
        padding-bottom: 3rem;
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

@media screen and (min-width: 1024px) {
    .home-recommended {
        padding-top: 0rem;
        padding-bottom: 0rem;
        padding-right: 2rem;
        padding-left: 2rem;
    }
}

@media screen and (min-width: 1921px) {
    .home-recommended {
        padding-top: 6rem;
        padding-bottom: 6rem;
        padding-right: 0rem;
        padding-left: 0rem;
    }
}

/* ------------------------------------------------------------
   .blog-author
   Articulo: la ficha del autor, al pie.
   ------------------------------------------------------------ */

.blog-author {
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

@media screen and (max-width: 767px) {
    .blog-author {
        padding-top: 2rem;
        padding-bottom: 0rem;
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

@media screen and (min-width: 1024px) {
    .blog-author {
        padding-top: 2rem;
        padding-bottom: 0rem;
        padding-right: 2rem;
        padding-left: 2rem;
    }
}

@media screen and (min-width: 1921px) {
    .blog-author {
        padding-top: 6rem;
        padding-bottom: 0rem;
        padding-right: 0rem;
        padding-left: 0rem;
    }
}

/* ------------------------------------------------------------
   .blog-related
   Articulo: el titulo "Tambien interesante".
   ------------------------------------------------------------ */

.blog-related {
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

@media screen and (max-width: 767px) {
    .blog-related {
        padding-top: 6rem;
        padding-bottom: 3rem;
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

@media screen and (min-width: 1024px) {
    .blog-related {
        padding-top: 0rem;
        padding-bottom: 0rem;
        padding-right: 2rem;
        padding-left: 2rem;
    }
}

@media screen and (min-width: 1921px) {
    .blog-related {
        padding-top: 6rem;
        padding-bottom: 6rem;
        padding-right: 0rem;
        padding-left: 0rem;
    }
}

/* ============================================================
   UN SOLO ANCHO PARA TODO LO QUE VA DENTRO DE .page-shell
   (portatil y escritorio: de 1024px a 1920px)

   POR QUE CADA COSA MEDIA DISTINTO

   El sitio trae este reset, heredado y facil de pasar por alto:

       article, aside, figure, header, hgroup, section {
           display: grid;
           justify-content: center;
       }

   O sea que .page-shell no es un bloque normal: es una rejilla, y
   con justify-content: center su unica columna se dimensiona por el
   CONTENIDO, no por el contenedor. El resultado es que el ancho de
   toda la portada lo acababa fijando el elemento mas ancho que
   hubiera dentro: la diapositiva del carrusel, que lleva un
   width: 1020px escrito en linea por Glider. Un numero que sale de
   una libreria y no de ninguna decision de diseño.

   Encima, .general-container-recomended se metia 2em de margen a
   cada lado por su cuenta (site.css, banda 768-1370), asi que ese
   panel salia 64px mas estrecho que sus hermanos.

   COMO SE ARREGLA

   Se le da a la rejilla una columna EXPLICITA, y a partir de ahi el
   ancho deja de depender del contenido. Los hijos la ocupan entera,
   asi que todos miden exactamente lo mismo.

   EL MANDO

   --shell-ancho: lo que mide el contenido. Es el unico numero que
   hay que tocar para ensanchar o estrechar la pagina entera.
   --shell-aire: lo minimo que queda a cada lado cuando la ventana
   es mas estrecha que --shell-ancho. Evita que el contenido llegue
   a tocar el borde.

   Movil y tablet no entran aqui: alli todo ocupa el ancho completo
   y ya se veia bien. Ultrawide (1921px o mas) tampoco, para no
   moverlo sin querer; si algun dia lo quieres igual, basta con
   quitar el "and (max-width: 1920px)" de la linea de abajo.
   ============================================================ */

@media screen and (min-width: 1024px) and (max-width: 1920px) {
    .page-shell {
        --shell-aire: 1.5rem;
        /* minmax con el 0 abajo es lo que impide que un hijo con
           contenido ancho -el carrusel, una tabla, un bloque de
           codigo- vuelva a estirar la columna. Sin ese 0 la columna
           tiene un minimo automatico igual al contenido y estariamos
           donde empezamos. */
        grid-template-columns: minmax(0, min(var(--shell-ancho), 100% - var(--shell-aire) * 2));
        justify-content: center;
    }

        /* Los hijos ocupan la columna y nada mas. Las tres
           declaraciones son las tres formas en que un hijo se salia:

             - width: algunos traen width: -webkit-fill-available o un
               ancho propio de site.css.
             - margin lateral: .general-container-recomended se metia
               2em por lado.
             - max-width: por si alguno lo trae de Bulma. */
        .page-shell > * {
            width: auto;
            max-width: none;
            margin-left: 0;
            margin-right: 0;
        }
}

/* ------------------------------------------------------------
   La imagen del carrusel, atada a su contenedor

   glider.css la tenia asi, y es la MISMA clase de fallo que la de
   arriba pero un piso mas abajo:

       @media (min-width: 768px) and (max-width: 1370px) {
           .glider-slide img { min-width: 1020px; max-width: 1020px; }
       }
       @media (min-width: 1371px) {
           .glider-slide img { min-width: 1020px; max-width: 1020px; }
       }

   Un ancho fijo de 1020px, el mismo numero a mano en dos sitios, sin
   relacion con lo que mida la diapositiva que la contiene. Mientras la
   columna media justo 1020 no se notaba; en cuanto mide otra cosa la
   imagen se sale por los lados y parece "mas ancha que todo lo demas",
   que es exactamente lo que se veia.

   Con width: 100% la imagen mide lo que mida su diapositiva, y su
   diapositiva la mide Glider a partir del contenedor. Nunca se pasa.
   El min-width: 0 hace falta porque sin el sigue mandando el 1020 de
   glider.css.

   Movil (767px o menos) no se toca: alli la imagen se recorta a
   315x320 a proposito, con object-fit: cover, y eso esta bien.
   ------------------------------------------------------------ */

@media screen and (min-width: 768px) {
    .glider-slide img {
        min-width: 0;
        max-width: 100%;
        width: 100%;

        /* La altura la manda el carrusel, NO la imagen.

           Con height: auto -que es lo que habia aqui- la altura salia de
           la proporcion de cada portada. Una imagen 1180x654 pedia unos
           560px de alto dentro de un visor de 286: sobraba la mitad, y
           como .glider recorta lo que se sale, se veia el trozo de ARRIBA
           de la foto en vez de su centro. Por eso una portada apaisada
           entraba bien y otra mas cuadrada salia descabezada.

           Fijando la altura al alto del visor, la caja de la imagen es
           siempre la misma y el recorte lo decide object-fit. El valor
           sale de --glider-alto, definido una sola vez ahi abajo junto a
           .glider: si cambia el alto del carrusel, esto lo sigue solo. */
        height: var(--glider-alto);

        /* cover llena la caja y recorta lo que sobra, sin deformar nada.
           Con contain no se recortaria, pero quedarian franjas vacias a
           los lados en las portadas que no sean tan apaisadas.

           El recorte va desde el centro, que es donde suele estar el
           motivo de una portada. Es el valor por omision, pero escrito
           se ve de un vistazo por que la foto se recorta como se recorta.

           componets.css ya declara object-fit para estas imagenes y para
           las tarjetas; se repite aqui porque es esta regla la que fija
           la caja, y las dos piezas -caja y recorte- deben leerse juntas
           o el proximo que toque la altura no entendera el efecto. */
        object-fit: cover;
        object-position: center;
    }
}

/* ------------------------------------------------------------
   Que ninguna rejilla se salga de su contenedor

   El reset del principio (article, aside, figure, header, hgroup,
   section -> display: grid; justify-content: center) no aplica solo
   a .page-shell: aplica a CADA <section> anidado. Y en todos ellos
   pasa lo mismo, que su unica columna se dimensiona por el contenido.

   Se veia asi: .home-upcoming quedaba en 1002px, correcto, pero su
   columna interna se estiraba a 1020 por la imagen del carrusel, y el
   carrusel entero se salia por los lados de su propia seccion. Arreglar
   solo el nivel de arriba no basta si el de abajo repite el fallo.

   minmax(0, 1fr) dice justo eso: ocupa lo que haya, nunca mas. El 0 de
   abajo es lo que quita el minimo automatico -que es igual al contenido-
   y sin el volveriamos a empezar.

   Va sin media query a proposito: una columna que se sale de su
   contenedor no es correcta en ningun tamaño de pantalla.

   Solo se listan las etiquetas que el reset convierte en rejilla. Los
   <div> quedan fuera aposta: varios definen sus propias columnas
   (.contenedor2, .sf-body, las tarjetas) y esto se las borraria.
   ------------------------------------------------------------ */

.page-shell section,
.page-shell article,
.page-shell aside,
.page-shell figure,
.page-shell header,
.page-shell hgroup {
    grid-template-columns: minmax(0, 1fr);
}

/* ------------------------------------------------------------
   El bloque del carrusel, tambien atado al contenedor

   Y aqui estaba el 1020 de verdad, el que arrastraba a todos los demas:

       /*Portatil*\/
       @media (min-width: 768px) and (max-width: 1370px) {
           .glider-complements { width: 1020px; ... }
       }

   Ancho fijo otra vez. De ahi salia el 1020 de .glider, el de la
   diapositiva y el de la imagen: los tres solo estaban obedeciendo a
   este. Por eso el carrusel se veia mas ancho que la tarjeta de
   Recomendados aunque sus secciones midieran lo mismo.

   Con width: 100% el bloque mide lo que le de su seccion, y el tope
   real lo pone --shell-ancho ahi arriba, que es donde tiene que estar:
   un solo numero para toda la pagina en vez de uno repetido por cada
   pieza. Los grid-template-areas de glider.css no se tocan, que esos
   si son la maqueta del carrusel y estan bien.

   Movil (767px o menos) sigue con sus 315px, que es el recorte que
   lleva a proposito.
   ------------------------------------------------------------ */

@media screen and (min-width: 768px) {
    .glider-complements {
        width: 100%;
    }
}

/* ------------------------------------------------------------
   Y el ultimo ancho fijo: el visor del carrusel

   glider.css repite el numero una vez mas, en las dos bandas de 768
   para arriba:

       .glider { width: 1020px; height: 286px; ... }

   Ademas la regla base le pone "margin: 0px 30px 0px 0px": 30px solo
   por la derecha, que descentraban el carrusel respecto a todo lo
   demas aunque los anchos coincidieran.

   La altura NO se toca: los 286px son el recorte del carrusel y con
   object-fit: cover se ve bien a cualquier ancho.
   ------------------------------------------------------------ */

@media screen and (min-width: 768px) {
    .glider {
        /* El alto del visor, y la unica vez que este numero se escribe.
           Lo hereda .glider-slide img de mas arriba, que lo usa para su
           propia caja: asi el recorte de las portadas siempre coincide
           con lo que se ve, sin repetir el valor en dos sitios.

           286px es el que ya venia de glider.css. */
        --glider-alto: 286px;

        width: 100%;
        margin-right: 0;
        height: var(--glider-alto);
    }
}