/* ============================================================
   THE MIND LUMEN
   BLOG READER
   PREMIUM / MOBILE FIRST
============================================================ */


/* ============================================================
   VARIABLES LOCALES
============================================================ */

:root {

    --reader-bg:
        #08090d;

    --reader-panel:
        #0b0d12;

    --reader-panel-soft:
        #0e1016;

    --reader-text:
        #f2eef5;

    --reader-text-soft:
        rgba(
            238,
            232,
            243,
            .78
        );

    --reader-muted:
        rgba(
            214,
            207,
            220,
            .46
        );

    --reader-accent:
        #ae90d6;

    --reader-border:
        rgba(
            255,
            255,
            255,
            .08
        );
}


/* ============================================================
   BODY LOCK
============================================================ */

body.blog-reader-open {

    overflow: hidden;
}


/* ============================================================
   OVERLAY
   MOBILE = FULLSCREEN
============================================================ */

.blog-reader-overlay {

    position: fixed;

    inset: 0;

    z-index: 99999;

    width: 100%;

    height: 100dvh;

    display: none;

    align-items: stretch;

    justify-content: stretch;

    padding: 0;

    overflow: hidden;

    background:
        var(--reader-bg);
}


.blog-reader-overlay.active {

    display: flex;
}


/* ============================================================
   MODAL
============================================================ */

.blog-reader-modal {

    position: relative;

    width: 100%;

    min-width: 0;

    height: 100dvh;

    min-height: 0;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border: 0;

    border-radius: 0;

    background:
        var(--reader-panel);

    box-shadow:
        none;
}


/* ============================================================
   CLOSE BUTTON
============================================================ */

.blog-reader-close {

    position: absolute;

    top:
        max(
            .75rem,
            env(
                safe-area-inset-top
            )
        );

    right:
        max(
            .75rem,
            env(
                safe-area-inset-right
            )
        );

    z-index: 50;

    width: 2.65rem;

    height: 2.65rem;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border:
        .0625rem solid
        rgba(
            255,
            255,
            255,
            .16
        );

    border-radius: 50%;

    background:
        rgba(
            0,
            0,
            0,
            .72
        );

    color:
        #ffffff;

    font-size: 1rem;

    line-height: 1;

    cursor: pointer;

    backdrop-filter:
        blur(.75rem);

    -webkit-backdrop-filter:
        blur(.75rem);

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.blog-reader-close:hover {

    background:
        rgba(
            255,
            255,
            255,
            .08
        );

    border-color:
        rgba(
            255,
            255,
            255,
            .28
        );
}


/* ============================================================
   MEDIA
============================================================ */

.blog-reader-media {

    width: 100%;

    min-width: 0;

    height:
        min(
            33dvh,
            17rem
        );

    min-height:
        10rem;

    flex:
        0
        0
        auto;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        #05070b;

    border-bottom:
        .0625rem solid
        rgba(
            255,
            255,
            255,
            .04
        );
}


.blog-reader-media[hidden] {

    display: none !important;
}


.blog-reader-media img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    background:
        #05070b;
}


/* ============================================================
   CONTENT
============================================================ */

.blog-reader-content {

    width: 100%;

    min-width: 0;

    min-height: 0;

    flex:
        1
        1
        auto;

    overflow-y: auto;

    overflow-x: hidden;

    padding:
        1.6rem
        1.15rem
        3rem;

    -webkit-overflow-scrolling:
        touch;

    background:
        linear-gradient(
            180deg,
            var(--reader-panel),
            #090b0f
        );
}


/* ============================================================
   EYEBROW
============================================================ */

.reader-eyebrow {

    display: block;

    margin-bottom:
        .65rem;

    color:
        var(--reader-accent);

    font-size:
        .65rem;

    font-weight: 600;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;
}


/* ============================================================
   TITLE
============================================================ */

.blog-reader-content h2 {

    width: 100%;

    margin:
        0
        0
        1.15rem;

    padding-right:
        3rem;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:
        clamp(
            1.85rem,
            9vw,
            2.65rem
        );

    font-weight:
        400;

    line-height:
        1.05;

    letter-spacing:
        -.015em;

    color:
        var(--reader-text);

    overflow-wrap:
        anywhere;
}


/* ============================================================
   TEXT
============================================================ */

.blog-reader-content p {

    width: 100%;

    margin: 0;

    color:
        var(--reader-text-soft);

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size:
        clamp(
            .92rem,
            3.8vw,
            1rem
        );

    line-height:
        1.78;

    white-space:
        pre-line;

    overflow-wrap:
        anywhere;
}


/* ============================================================
   SIN MEDIA
============================================================ */

.reader-without-media
.blog-reader-modal {

    justify-content:
        stretch;
}


.reader-without-media
.blog-reader-content {

    padding-top:
        4.5rem;
}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (
    max-width:
    24.375rem
) {

    .blog-reader-media {

        height:
            min(
                29dvh,
                13.5rem
            );

        min-height:
            8.5rem;
    }


    .blog-reader-content {

        padding:
            1.35rem
            .95rem
            2.5rem;
    }


    .blog-reader-content h2 {

        font-size:
            clamp(
                1.6rem,
                8.5vw,
                2rem
            );

        padding-right:
            2.7rem;
    }


    .blog-reader-content p {

        font-size:
            .91rem;

        line-height:
            1.7;
    }


    .reader-without-media
    .blog-reader-content {

        padding-top:
            4rem;
    }

}


/* ============================================================
   TABLET
   >= 48rem
============================================================ */

@media (
    min-width:
    48rem
) {

    .blog-reader-overlay {

        align-items:
            center;

        justify-content:
            center;

        padding:
            1.4rem;

        background:
            rgba(
                0,
                0,
                0,
                .94
            );

        backdrop-filter:
            blur(1rem);

        -webkit-backdrop-filter:
            blur(1rem);
    }


    .blog-reader-modal {

        width:
            min(
                47rem,
                calc(
                    100vw -
                    2.8rem
                )
            );

        height:
            min(
                53rem,
                calc(
                    100dvh -
                    2.8rem
                )
            );

        border:
            .0625rem solid
            var(--reader-border);

        border-radius:
            1.35rem;

        box-shadow:
            0
            2rem
            5.5rem
            rgba(
                0,
                0,
                0,
                .64
            );
    }


    .blog-reader-media {

        height:
            38%;

        max-height:
            20rem;

        min-height:
            14rem;
    }


    .blog-reader-content {

        padding:
            2.4rem
            2.15rem
            3rem;
    }


    .blog-reader-content h2 {

        font-size:
            clamp(
                2.2rem,
                5vw,
                2.8rem
            );
    }


    .blog-reader-content p {

        font-size:
            1rem;

        line-height:
            1.82;
    }


    .reader-without-media
    .blog-reader-content {

        padding-top:
            4.8rem;
    }

}


/* ============================================================
   DESKTOP
   >= 68.75rem
============================================================ */

@media (
    min-width:
    68.75rem
) {

    .blog-reader-overlay {

        padding:
            2rem;
    }


    .blog-reader-modal {

        width:
            min(
                76rem,
                calc(
                    100vw -
                    4rem
                )
            );

        max-width:
            76rem;

        height:
            min(
                47rem,
                calc(
                    100dvh -
                    4rem
                )
            );

        display:
            grid;

        grid-template-columns:
            minmax(
                0,
                44%
            )
            minmax(
                0,
                56%
            );

        flex-direction:
            initial;

        border-radius:
            1.5rem;
    }


    .blog-reader-media {

        width: 100%;

        height: 100%;

        min-height: 0;

        max-height: none;

        border-bottom: 0;

        border-right:
            .0625rem solid
            rgba(
                255,
                255,
                255,
                .04
            );
    }


    .blog-reader-media img {

        width: 100%;

        height: 100%;

        object-fit:
            contain;
    }


    .blog-reader-content {

        width: 100%;

        height: 100%;

        padding:
            4.4rem
            3.6rem;

        overflow-y:
            auto;
    }


    .blog-reader-content h2 {

        margin-bottom:
            1.6rem;

        padding-right:
            1.5rem;

        font-size:
            clamp(
                2.6rem,
                4vw,
                3.6rem
            );
    }


    .blog-reader-content p {

        font-size:
            1.05rem;

        line-height:
            1.9;
    }


    .blog-reader-close {

        top:
            1.1rem;

        right:
            1.1rem;

        width:
            2.8rem;

        height:
            2.8rem;
    }


    /* =========================================
       DESKTOP SIN IMAGEN
    ========================================== */

    .reader-without-media
    .blog-reader-modal {

        display:
            flex;

        width:
            min(
                54rem,
                calc(
                    100vw -
                    4rem
                )
            );
    }


    .reader-without-media
    .blog-reader-content {

        padding:
            5rem
            4.5rem;
    }

}


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

@media (
    max-width:
    56.25rem
)
and
(
    orientation:
    landscape
)
and
(
    min-height:
    20rem
) {

    .blog-reader-modal {

        display:
            grid;

        grid-template-columns:
            minmax(
                0,
                42%
            )
            minmax(
                0,
                58%
            );

        grid-template-rows:
            1fr;
    }


    .blog-reader-media {

        width: 100%;

        height: 100%;

        min-height: 0;

        max-height: none;

        border-bottom: 0;

        border-right:
            .0625rem solid
            rgba(
                255,
                255,
                255,
                .04
            );
    }


    .blog-reader-content {

        height: 100%;

        padding:
            1.8rem
            1.5rem
            2rem;
    }


    .blog-reader-content h2 {

        font-size:
            clamp(
                1.7rem,
                4vw,
                2.3rem
            );
    }


    .reader-without-media
    .blog-reader-modal {

        display:
            flex;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (
    prefers-reduced-motion:
    reduce
) {

    .blog-reader-close {

        transition:
            none;
    }

}