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


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

:root {

    --bg-main: #02040a;

    --bg-card:
        rgba(
            255,
            255,
            255,
            .022
        );

    --bg-card-hover:
        rgba(
            255,
            255,
            255,
            .036
        );

    --bg-media: #05070b;

    --text-main: #f4f1f6;

    --text-soft:
        rgba(
            236,
            231,
            240,
            .68
        );

    --text-muted:
        rgba(
            210,
            204,
            215,
            .44
        );

    --accent: #ae90d6;

    --accent-soft:
        rgba(
            174,
            144,
            214,
            .12
        );

    --border-soft:
        rgba(
            255,
            255,
            255,
            .07
        );

    --border-hover:
        rgba(
            174,
            144,
            214,
            .18
        );

    --shadow-card:
        0 1.5rem 4rem
        rgba(
            0,
            0,
            0,
            .22
        );

    --radius-card: 1.125rem;

    --radius-pill: 999rem;

    --page-width: 87.5rem;

    --space-1: .5rem;
    --space-2: .75rem;
    --space-3: 1rem;
    --space-4: 1.25rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
}


/* ============================================================
   RESET
============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {

    width: 100%;

    margin: 0;

    padding: 0;

    overflow-x: hidden;

    scroll-behavior: smooth;
}


body {

    width: 100%;

    min-width: 0;

    min-height: 100vh;

    margin: 0;

    padding: 0;

    overflow-x: hidden;

    background:
        radial-gradient(
            circle at top,
            rgba(
                92,
                63,
                139,
                .055
            ),
            transparent 26rem
        ),
        var(--bg-main);

    color: var(--text-main);

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


img,
video {

    display: block;

    max-width: 100%;
}


button,
a {

    -webkit-tap-highlight-color:
        transparent;
}


/* ============================================================
   NAVBAR
============================================================ */

.navbar {

    position: relative;

    z-index: 100;

    width: 100%;

    min-height: 4rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    padding:
        0
        1rem;

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

    background:
        rgba(
            2,
            4,
            10,
            .90
        );

    backdrop-filter:
        blur(1rem);

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


.nav-left {

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

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

    font-size:
        clamp(
            1.05rem,
            4vw,
            1.25rem
        );

    font-weight: 500;

    letter-spacing: .04em;

    color: #f2edf5;
}


.nav-right {

    flex-shrink: 0;
}


.nav-right a {

    position: relative;

    color:
        rgba(
            239,
            234,
            242,
            .68
        );

    text-decoration: none;

    font-size: .78rem;

    font-weight: 500;

    letter-spacing: .02em;

    transition:
        color .25s ease;
}


.nav-right a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -.35rem;

    width: 0;

    height: .0625rem;

    background: var(--accent);

    transition:
        width .25s ease;
}


.nav-right a:hover {

    color: #ffffff;
}


.nav-right a:hover::after {

    width: 100%;
}


/* ============================================================
   FEED
   MOBILE FIRST = 1 COLUMNA
============================================================ */

.feed {

    width: min(
        100%,
        var(--page-width)
    );

    margin:
        0
        auto;

    padding:
        3rem
        .875rem
        4.5rem;

    display: grid;

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

    gap: 1.35rem;
}


/* ============================================================
   CARD
============================================================ */

.post {

    width: 100%;

    min-width: 0;

    overflow: hidden;

    display: flex;

    flex-direction: column;

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

    border-radius:
        var(--radius-card);

    background:
        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                .026
            ),
            rgba(
                255,
                255,
                255,
                .010
            )
        );

    box-shadow:
        0
        1rem
        3rem
        rgba(
            0,
            0,
            0,
            .12
        );

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.post:hover {

    border-color:
        var(--border-hover);

    background:
        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                .040
            ),
            rgba(
                255,
                255,
                255,
                .014
            )
        );
}


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

.post-media {

    width: 100%;

    min-width: 0;

    overflow: hidden;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

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


/* ============================================================
   IMÁGENES
============================================================ */

.post-media img {

    width: 100%;

    height: auto;

    max-height: 22rem;

    object-fit: contain;

    background:
        var(--bg-media);

    transition:
        transform .7s ease;
}


.post:hover
.post-media img {

    transform:
        scale(
            1.012
        );
}


/* ============================================================
   VIDEO
============================================================ */

.post-media-video {

    width: 100%;

    aspect-ratio:
        16 / 9;

    background: #000000;
}


.post-media-video video,
.post-media video {

    width: 100%;

    max-width: 100%;

    object-fit: contain;

    background: #000000;

    transform: none !important;
}


.post-media-video video {

    height: 100%;
}


.post-media video {

    height: auto;
}


.post:hover
.post-media video {

    transform:
        none !important;
}


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

.post-content {

    width: 100%;

    min-width: 0;

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: .7rem;

    padding:
        1.25rem
        1.1rem
        1.35rem;
}


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

.post-content h3 {

    width: 100%;

    margin: 0;

    color: #ffffff;

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

    font-size:
        clamp(
            1.4rem,
            6vw,
            1.7rem
        );

    font-weight: 500;

    line-height: 1.12;

    letter-spacing:
        -.01em;

    overflow-wrap:
        anywhere;
}


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

.post-content p {

    width: 100%;

    margin: 0;

    color:
        var(--text-soft);

    font-size:
        clamp(
            .88rem,
            3.5vw,
            .96rem
        );

    line-height: 1.72;

    overflow-wrap:
        anywhere;
}


/* ============================================================
   EXCERPT
============================================================ */

.blog-excerpt {

    width: 100%;

    min-width: 0;
}


.blog-excerpt p {

    display: -webkit-box;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp: 5;

    overflow: hidden;
}


/* ============================================================
   LEER MÁS
============================================================ */

.read-more-btn {

    width: 100%;

    min-height: 2.7rem;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-top: .3rem;

    padding:
        0
        1.15rem;

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

    border-radius:
        var(--radius-pill);

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

    color: #eee8f3;

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

    font-size: .73rem;

    font-weight: 600;

    letter-spacing: .025em;

    cursor: pointer;

    visibility: visible;

    opacity: 1;

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


.read-more-btn:hover {

    background:
        var(--accent-soft);

    border-color:
        rgba(
            183,
            151,
            219,
            .26
        );
}


/* ============================================================
   DATE
============================================================ */

.fecha {

    display: block;

    margin-top: .2rem;

    color:
        var(--text-muted);

    font-size: .65rem;

    font-weight: 500;

    letter-spacing: .08em;
}


/* ============================================================
   FILE LINK
============================================================ */

.file-link {

    min-height: 2.75rem;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin:
        2.5rem
        auto;

    padding:
        0
        1.2rem;

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

    border-radius:
        var(--radius-pill);

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

    color:
        #eee8f3;

    text-decoration:
        none;

    font-size: .75rem;

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


.file-link:hover {

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

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


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

.post-no-media
.post-content {

    min-height: 12rem;

    justify-content: center;
}


/* ============================================================
   EMPTY
============================================================ */

.empty-posts {

    grid-column:
        1 / -1;

    width: 100%;

    padding:
        3rem
        1.25rem;

    border:
        .0625rem dashed
        rgba(
            174,
            144,
            214,
            .16
        );

    border-radius:
        var(--radius-card);

    color:
        rgba(
            218,
            212,
            222,
            .48
        );

    text-align: center;
}


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

@media (
    max-width:
    24.375rem
) {

    .navbar {

        min-height: 3.75rem;

        padding:
            0
            .8rem;
    }


    .feed {

        padding:
            2.4rem
            .75rem
            3.5rem;

        gap: 1.05rem;
    }


    .post {

        border-radius:
            1rem;
    }


    .post-content {

        padding:
            1.05rem
            .95rem
            1.15rem;
    }


    .post-media img {

        max-height:
            18rem;
    }

}


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

@media (
    min-width:
    48rem
) {

    .navbar {

        min-height:
            4.5rem;

        padding:
            0
            1.75rem;
    }


    .feed {

        padding:
            4.25rem
            1.75rem
            5.5rem;

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

        gap:
            1.6rem;
    }


    .post-media img {

        width: 100%;

        height: 16rem;

        max-height: none;

        object-fit: contain;
    }


    .post-content {

        padding:
            1.45rem
            1.4rem
            1.55rem;
    }


    .read-more-btn {

        width: auto;
    }

}


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

@media (
    min-width:
    68.75rem
) {

    .navbar {

        width:
            min(
                100% - 5rem,
                var(--page-width)
            );

        min-height:
            4.75rem;

        margin:
            0
            auto;

        padding: 0;

        background:
            transparent;

        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;
    }


    .feed {

        padding:
            6rem
            2.5rem
            7.5rem;

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

        gap:
            1.85rem;
    }


    .post:hover {

        transform:
            translateY(
                -.25rem
            );

        box-shadow:
            var(--shadow-card);
    }


    .post-media img {

        height: 18.75rem;
    }


    .post-content {

        padding:
            1.7rem
            1.55rem
            1.8rem;
    }

}


/* ============================================================
   LARGE DESKTOP
============================================================ */

@media (
    min-width:
    90rem
) {

    .feed {

        gap: 2.1rem;
    }

}


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

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

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}
/* ============================================================
   DESKTOP — CARDS MÁS COMPACTAS
   No afecta tablet ni celular
============================================================ */

@media (min-width: 1100px) {

    /* CONTENEDOR DEL FEED */
    .feed {
        max-width: 1200px;
        gap: 2rem;
        margin-left: auto;
        margin-right: auto;
    }


    /* TARJETA */
    .post {
        min-height: 0;
        height: auto;
    }


    /* IMAGEN / VIDEO */
    .post-media {
        height: 230px;
        min-height: 0;
    }


    .post-media img,
    .post-media video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    /* CONTENIDO */
    .post-content {
        padding: 1.5rem;
        gap: .7rem;
    }


    /* TÍTULO */
    .post-content h3 {
        font-size: 1.45rem;
        line-height: 1.15;
        margin: 0;
    }


    /* TEXTO */
    .post-content p {
        font-size: .96rem;
        line-height: 1.6;
        margin: 0;
    }


    /* FECHA */
    .fecha {
        margin-top: .5rem;
        font-size: .72rem;
    }


    /* LEER MÁS */
    .read-more-btn {
        margin-top: .6rem;
    }

}