/* =========================================================
   GRUPO LAS LETRAS
   EL RINCÓN DE LAS LETRAS
   BLOG — RESPONSIVE
   ========================================================= */


/* =========================================================
   TABLET
   1000 PX
   ========================================================= */

@media screen and (max-width: 1000px) {

    /* =====================================================
       CONTENEDOR PRINCIPAL
    ===================================================== */

    .blog-content-grid {

        grid-template-columns:
            minmax(0, 1fr)
            250px;

        gap: 40px;

        padding-left: 25px;
        padding-right: 25px;
    }


    /* =====================================================
       DESTACADO
    ===================================================== */

    .blog-featured {

        grid-template-columns:
            0.9fr 1.1fr;
    }


    .blog-featured-content {

        padding:
            35px 35px;
    }


    /* =====================================================
       ENTRADAS
    ===================================================== */

    .blog-post-preview {

        grid-template-columns:
            180px
            minmax(0, 1fr);

        gap: 22px;
    }


    /* =====================================================
       SIDEBAR
    ===================================================== */

    .blog-sidebar {

        min-width: 0;
    }

}


/* =========================================================
   TABLET PEQUEÑA
   800 PX
   ========================================================= */

@media screen and (max-width: 800px) {

    /* =====================================================
       CONTENIDO
       
       El sidebar pasa debajo del contenido.
    ===================================================== */

    .blog-content-grid {

        display: flex;

        flex-direction: column;

        width: 100%;
        max-width: 100%;

        gap: 45px;

        padding-left: 25px;
        padding-right: 25px;
    }


    .blog-posts {

        width: 100%;
        max-width: 100%;

        min-width: 0;
    }


    /* =====================================================
       SIDEBAR
    ===================================================== */

    .blog-sidebar {

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 25px;

        width: 100%;
    }


    /* =====================================================
       DESTACADO
    ===================================================== */

    .blog-featured {

        grid-template-columns:
            0.85fr 1.15fr;
    }


    .blog-featured-image {

        min-height: 280px;
    }


    .blog-featured-content {

        padding:
            30px;
    }


    .blog-featured-content h2 {

        font-size:
            2.1rem;
    }

}


/* =========================================================
   CELULAR
   700 PX

   Desde acá TODO el contenido editorial se convierte
   en una lectura vertical.
   ========================================================= */

@media screen and (max-width: 700px) {

    /* =====================================================
       SEGURIDAD GENERAL
    ===================================================== */

    html,
    body {

        width: 100%;

        max-width: 100%;

        overflow-x: hidden;
    }


    .blog-main {

        width: 100%;

        max-width: 100%;

        overflow-x: hidden;
    }


    /* =====================================================
       CABECERA
    ===================================================== */

    .blog-header {

        width: 100%;

        padding:
            55px 0
            45px;
    }


    .blog-header-inner {

        width: 100%;
        max-width: 100%;

        padding:
            0 18px;
    }


    .blog-header h1 {

        width: 100%;
        max-width: 100%;

        font-size:
            clamp(2.7rem, 12vw, 4rem);

        line-height:
            0.96;

        overflow-wrap:
            break-word;
    }


    .blog-header p {

        width: 100%;
        max-width: 100%;

        font-size:
            0.9rem;

        line-height:
            1.65;
    }

/* =====================================================
   SUSCRIPCIÓN
===================================================== */

.blog-subscribe form input[type="email"] {

    font-size: 0.84rem;
}


.blog-subscribe form input[type="submit"] {

    padding: 11px 14px;

    font-size: 0.67rem;
}

    /* =====================================================
       CONTENEDOR PRINCIPAL
    ===================================================== */

    .blog-content {

        width: 100%;

        max-width: 100%;

        padding:
            25px 0
            30px;
    }


    /*
       MUY IMPORTANTE:

       En desktop esta clase es GRID.

       En celular desaparece completamente esa estructura
       de columnas.
    */

    .blog-content-grid {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding:
            0 18px !important;

        gap:
            35px !important;

        box-sizing:
            border-box !important;
    }


    /* =====================================================
       COLUMNA PRINCIPAL
    ===================================================== */

    .blog-posts {

        display: block;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0;

        padding: 0;
    }


    /* =====================================================
       CATEGORÍAS
    ===================================================== */

    .blog-categories {

        display: flex;

        flex-wrap: wrap;

        align-items: center;

        width: 100%;

        max-width: 100%;

        gap: 3px;

        margin-bottom:
            25px;

        padding-bottom:
            12px;

        overflow: visible;
    }


    .blog-categories button {

        flex:
            0 0 auto;

        padding:
            6px 8px;

        font-size:
            0.67rem;

        white-space:
            nowrap;

        color:
            var(--blog-text);
    }


    /* =====================================================
       DESTACADO

       IMAGEN
       ↓
       TEXTO
    ===================================================== */

    .blog-featured-container {

        width: 100%;

        max-width: 100%;

        margin-bottom:
            30px;
    }


    .blog-featured {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        grid-template-columns:
            none !important;
    }


    /* -----------------------------------------------------
       IMAGEN DESTACADA
    ----------------------------------------------------- */

    .blog-featured-image {

        position: relative;

        display: block;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        min-height: 0 !important;

        height: auto !important;

        aspect-ratio:
            16 / 9;

        overflow: hidden;

        flex:
            0 0 auto;
    }


    .blog-featured-image img {

        display: block;

        width: 100% !important;

        max-width: 100% !important;

        height: 100% !important;

        object-fit: cover;
    }


    /* -----------------------------------------------------
       CONTENIDO DESTACADO
    ----------------------------------------------------- */

    .blog-featured-content {

        display: flex;

        flex-direction: column;

        justify-content: center;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        padding:
            27px 22px
            30px !important;

        box-sizing:
            border-box;
    }


    .blog-featured-content h2 {

        width: 100%;

        max-width: 100%;

        margin:
            0 0 13px;

        font-size:
            clamp(1.8rem, 8vw, 2.35rem);

        line-height:
            1.08;

        overflow-wrap:
            break-word;
    }


    .blog-featured-content p {

        width: 100%;

        max-width: 100%;

        margin:
            0 0 18px;

        font-size:
            0.87rem;

        line-height:
            1.65;
    }


    /* =====================================================
       TÍTULO DE ÚLTIMAS PUBLICACIONES
    ===================================================== */

    .blog-section-heading {

        width: 100%;

        max-width: 100%;

        margin:
            0 0 17px;

        padding-bottom:
            12px;
    }


    .blog-section-heading h2 {

        font-size:
            1.7rem;
    }


    /* =====================================================
       BUSCADOR
    ===================================================== */

    .blog-search {

        width: 100%;

        max-width: 100%;

        margin-bottom:
            20px;
    }


    .blog-search-field {

        display: flex;

        width: 100%;

        max-width: 100%;

        min-width: 0;

        box-sizing:
            border-box;
    }


    .blog-search input {

        display: block;

        width: 100%;

        max-width: 100%;

        min-width: 0;

        flex:
            1 1 auto;
    }


    .blog-search button {

        flex:
            0 0 auto;
    }


    /* =====================================================
       LISTA DE PUBLICACIONES
    ===================================================== */

    .blog-list {

        display: flex;

        flex-direction: column;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0;

        padding: 0;
    }


    /* =====================================================
       ENTRADA INDIVIDUAL

       ESTE ES EL SELECTOR CORRECTO.

       Tu blog.js genera:

       .blog-post-preview
            ├── .blog-post-image
            └── .blog-post-content

       En celular queremos:

            IMAGEN
               ↓
            CONTENIDO
    ===================================================== */

    .blog-post-preview {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        margin: 0 !important;

        padding:
            22px 0 !important;

        gap:
            15px !important;

        grid-template-columns:
            none !important;

        grid-template-rows:
            none !important;

        box-sizing:
            border-box !important;
    }


    /* =====================================================
       IMAGEN DE LA ENTRADA
    ===================================================== */

    .blog-post-image {

        display: block;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        aspect-ratio:
            16 / 9;

        margin: 0;

        overflow: hidden;

        flex:
            0 0 auto;

        grid-column:
            auto !important;

        grid-row:
            auto !important;

        box-sizing:
            border-box;
    }


    .blog-post-image img {

        display: block;

        width: 100% !important;

        max-width: 100% !important;

        height: 100% !important;

        object-fit: cover;
    }


    /* =====================================================
       CONTENIDO DE LA ENTRADA
    ===================================================== */

    .blog-post-content {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        margin: 0;

        padding: 0;

        grid-column:
            auto !important;

        grid-row:
            auto !important;

        box-sizing:
            border-box;
    }


    /* -----------------------------------------------------
       META
    ----------------------------------------------------- */

    .blog-post-content .blog-meta {

        display: flex;

        flex-wrap: wrap;

        width: 100%;

        max-width: 100%;

        margin:
            0 0 8px;

        font-size:
            0.62rem;

        line-height:
            1.4;
    }


    /* -----------------------------------------------------
       TÍTULO
    ----------------------------------------------------- */

    .blog-post-content h3 {

        display: block;

        width: 100% !important;

        max-width: 100% !important;

        margin:
            0 0 9px;

        padding: 0;

        font-size:
            1.4rem;

        line-height:
            1.15;

        overflow-wrap:
            break-word;
    }


    .blog-post-content h3 a {

        display: inline;

        max-width: 100%;
    }


    /* -----------------------------------------------------
       RESUMEN
    ----------------------------------------------------- */

    .blog-post-content p {

        display: block;

        width: 100% !important;

        max-width: 100% !important;

        margin:
            0 0 13px;

        padding: 0;

        font-size:
            0.86rem;

        line-height:
            1.65;

        overflow-wrap:
            break-word;
    }


    /* -----------------------------------------------------
       LEER
    ----------------------------------------------------- */

    .blog-post-content .blog-read-more {

        display: inline-flex;

        width: fit-content;

        max-width: 100%;

        flex:
            0 0 auto;
    }


    /* =====================================================
       SIN RESULTADOS
    ===================================================== */

    .blog-empty {

        width: 100%;

        max-width: 100%;

        padding:
            45px 15px;

        box-sizing:
            border-box;
    }


    .blog-empty h3 {

        max-width: 100%;

        overflow-wrap:
            break-word;
    }


    .blog-empty p {

        max-width: 100%;

        line-height:
            1.6;
    }


    /* =====================================================
       PAGINACIÓN
    ===================================================== */

    .blog-pagination {

        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        align-items: center;

        width: 100%;

        max-width: 100%;

        gap:
            5px;

        margin-top:
            20px;

        padding-top:
            18px;
    }


    /* =====================================================
       SIDEBAR

       En celular pasa debajo de todo.
    ===================================================== */

    .blog-sidebar {

        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        gap:
            22px;
    }


    .blog-sidebar-box {

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        padding:
            25px 21px;

        box-sizing:
            border-box;
    }


    /* =====================================================
       CIERRE
    ===================================================== */

    .blog-bottom {

        width: 100%;

        max-width: 100%;

        margin-top:
            0;

        padding:
            45px 18px
            50px;

        box-sizing:
            border-box;
    }


    .blog-bottom h2 {

        max-width: 100%;

        font-size:
            2.5rem;

        line-height:
            1;
    }


    .blog-bottom p {

        width: 100%;

        max-width: 480px;

        font-size:
            0.85rem;

        line-height:
            1.65;
    }

}


/* =========================================================
   CELULAR PEQUEÑO
   430 PX
   ========================================================= */

@media screen and (max-width: 430px) {

.blog-subscribe {

    padding:
        23px 19px;
}


.blog-subscribe form input[type="email"] {

    font-size: 0.82rem;
}


.blog-subscribe small {

    font-size: 0.65rem;
}
    /* =====================================================
       CABECERA
    ===================================================== */

    .blog-header {

        padding:
            45px 0
            40px;
    }


    .blog-header-inner {

        padding:
            0 15px;
    }


    .blog-header h1 {

        font-size:
            clamp(2.35rem, 13vw, 3.5rem);
    }


    /* =====================================================
       CONTENIDO
    ===================================================== */

    .blog-content-grid {

        padding-left:
            15px !important;

        padding-right:
            15px !important;
    }


    /* =====================================================
       FILTROS
    ===================================================== */

    .blog-categories {

        gap:
            2px;

        margin-bottom:
            22px;
    }


    .blog-categories button {

        padding:
            5px 7px;

        font-size:
            0.63rem;
    }


    /* =====================================================
       DESTACADO
    ===================================================== */

    .blog-featured-content {

        padding:
            24px 19px
            28px !important;
    }


    .blog-featured-content h2 {

        font-size:
            1.75rem;
    }


    .blog-featured-content p {

        font-size:
            0.84rem;
    }


    /* =====================================================
       SECCIÓN
    ===================================================== */

    .blog-section-heading h2 {

        font-size:
            1.5rem;
    }


    /* =====================================================
       BUSCADOR
    ===================================================== */

    .blog-search > label {

        font-size:
            0.61rem;
    }


    .blog-search input {

        font-size:
            0.85rem;
    }


    /* =====================================================
       PUBLICACIONES
    ===================================================== */

    .blog-post-preview {

        padding:
            21px 0 !important;

        gap:
            14px !important;
    }


    .blog-post-content h3 {

        font-size:
            1.3rem;
    }


    .blog-post-content p {

        font-size:
            0.83rem;
    }


    /* =====================================================
       SIDEBAR
    ===================================================== */

    .blog-sidebar-box {

        padding:
            23px 19px;
    }


    /* =====================================================
       CIERRE
    ===================================================== */

    .blog-bottom {

        padding:
            40px 15px
            45px;
    }


    .blog-bottom h2 {

        font-size:
            2.2rem;
    }

}


/* =========================================================
   TELÉFONO MUY PEQUEÑO
   350 PX
   ========================================================= */

@media screen and (max-width: 350px) {

    .blog-header-inner {

        padding:
            0 13px;
    }


    .blog-header h1 {

        font-size:
            2.25rem;
    }


    .blog-content-grid {

        padding-left:
            13px !important;

        padding-right:
            13px !important;
    }


    .blog-categories button {

        padding:
            5px 6px;

        font-size:
            0.6rem;
    }


    .blog-featured-content h2 {

        font-size:
            1.62rem;
    }


    .blog-section-heading h2 {

        font-size:
            1.4rem;
    }


    .blog-post-content h3 {

        font-size:
            1.23rem;
    }

}