/* =========================================================
   GRUPO LAS LETRAS
   RESPONSIVE — ARTÍCULO DEL BLOG
   ========================================================= */


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {


    /* -----------------------------------------------------
       ENCABEZADO
    ----------------------------------------------------- */

    .article-header {

        padding:
            90px
            25px
            55px;

    }


    .article-title {

        font-size:
            clamp(
                2.6rem,
                8vw,
                4.2rem
            );

    }


    /* -----------------------------------------------------
       IMAGEN PRINCIPAL
    ----------------------------------------------------- */

    .article-cover {

        width:
            calc(100% - 40px);

        margin-bottom:
            55px;

    }


    /* -----------------------------------------------------
       NAVEGACIÓN
    ----------------------------------------------------- */

    .article-navigation {

        width:
            calc(100% - 40px);

        margin:
            60px
            auto
            80px;

    }


    .article-navigation-inner {

        grid-template-columns:
            1fr
            auto
            1fr;

    }


    .article-nav-item {

        padding:
            22px
            20px;

    }


    .article-nav-center {

        min-width:
            130px;

        padding:
            22px
            20px;

    }


    .article-nav-item strong {

        max-width:
            220px;

        font-size:
            1.15rem;

    }


    /* -----------------------------------------------------
       RELACIONADOS
    ----------------------------------------------------- */

    .article-related {

        width:
            calc(100% - 40px);

        margin-bottom:
            80px;

    }


    .article-related-grid {

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

    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 600px) {


    /* -----------------------------------------------------
       ENCABEZADO
    ----------------------------------------------------- */

    .article-header {

        padding:
            70px
            20px
            45px;

    }


    .article-back {

        margin-bottom:
            30px;

        font-size:
            0.62rem;

    }


    .article-category {

        margin-bottom:
            16px;

    }


    .article-category span {

        font-size:
            0.58rem;

    }


    .article-title {

        font-size:
            clamp(
                2.4rem,
                11vw,
                3.4rem
            );

        line-height:
            1.05;

    }


    .article-intro {

        margin-top:
            20px;

        font-size:
            0.86rem;

        line-height:
            1.7;

    }


    .article-meta {

        margin-top:
            18px;

        font-size:
            0.56rem;

        gap:
            7px;

    }


    /* -----------------------------------------------------
       IMAGEN PRINCIPAL
    ----------------------------------------------------- */

    .article-cover {

        width:
            calc(100% - 30px);

        margin-bottom:
            45px;

    }


    .article-cover img {

        max-height:
            none;

        height:
            auto;

    }


    /* -----------------------------------------------------
       CUERPO
    ----------------------------------------------------- */

    .article-body {

        width:
            calc(100% - 30px);

    }


    .article-body p {

        font-size:
            0.9rem;

        line-height:
            1.85;

    }


    .article-body .article-lead {

        font-size:
            1.3rem;

        line-height:
            1.45;

    }


    .article-body h2 {

        margin:
            45px
            0
            20px;

        font-size:
            1.85rem;

    }


    .article-body blockquote {

        margin:
            40px
            0;

        padding:
            5px
            0
            5px
            18px;

        font-size:
            1.3rem;

    }


    /* -----------------------------------------------------
       IMÁGENES INTERNAS
    ----------------------------------------------------- */

    .article-image {

        margin:
            40px
            0;

    }


    /* =====================================================
       INFORMACIÓN COMPLEMENTARIA
    ===================================================== */

    .article-sidebar {

        width:
            calc(100% - 30px);

        margin-top:
            55px;

    }


    .article-sidebar-box {

        padding:
            22px
            0;

    }


    .article-about p {

        font-size:
            0.72rem;

        line-height:
            1.7;

    }


    .article-tags {

        gap:
            6px;

    }


    .article-tags a {

        padding:
            7px
            9px;

        font-size:
            0.55rem;

    }


    /* =====================================================
       NAVEGACIÓN ENTRE ARTÍCULOS
    ===================================================== */

    .article-navigation {

        width:
            calc(100% - 30px);

        margin:
            50px
            auto
            65px;

    }


    .article-navigation-inner {

        display:
            flex;

        flex-direction:
            column;

        border-top:
            1px
            solid
            var(--color-borde);

        border-bottom:
            1px
            solid
            var(--color-borde);

    }


    /* -----------------------------------------------------
       ANTERIOR / SIGUIENTE
    ----------------------------------------------------- */

    .article-nav-item {

        width:
            100%;

        min-height:
            100px;

        box-sizing:
            border-box;

        padding:
            20px;

        justify-content:
            center;

    }


    .article-nav-prev {

        align-items:
            flex-start;

        border-right:
            none;

        border-bottom:
            1px
            solid
            var(--color-borde);

    }


    .article-nav-next {

        align-items:
            flex-end;

        border-left:
            none;

        border-top:
            1px
            solid
            var(--color-borde);

    }


    .article-nav-item span {

        margin-bottom:
            7px;

        font-size:
            0.55rem;

    }


    .article-nav-item strong {

        max-width:
            85%;

        font-size:
            1.15rem;

        line-height:
            1.2;

    }


    /* -----------------------------------------------------
       VOLVER AL BLOG
    ----------------------------------------------------- */

    .article-nav-center {

        width:
            100%;

        min-width:
            0;

        box-sizing:
            border-box;

        padding:
            18px
            20px;

        min-height:
            55px;

        font-size:
            0.56rem;

    }


    /* =====================================================
       RELACIONADOS
    ===================================================== */

    .article-related {

        width:
            calc(100% - 30px);

        margin-bottom:
            65px;

    }


    .article-related-heading {

        margin-bottom:
            20px;

    }


    .article-related-heading h2 {

        font-size:
            1.85rem;

    }


    .article-related-grid {

        grid-template-columns:
            1fr;

        gap:
            15px;

    }


    .related-card-image {

        height:
            180px;

    }


}


/* =========================================================
   MÓVIL PEQUEÑO
========================================================= */

@media (max-width: 420px) {


    .article-header {

        padding:
            60px
            15px
            40px;

    }


    .article-title {

        font-size:
            2.3rem;

    }


    .article-intro {

        font-size:
            0.82rem;

    }


    .article-cover,
    .article-body,
    .article-sidebar {

        width:
            calc(100% - 24px);

    }


    .article-navigation,
    .article-related {

        width:
            calc(100% - 24px);

    }


    .article-nav-item {

        min-height:
            95px;

        padding:
            18px 15px;

    }


    .article-nav-item strong {

        font-size:
            1.05rem;

    }


}