/* ============================================================
   VENTACTIVE
   JOURNAL / BLOG HOME
============================================================ */

.vcJournal{
    position:relative;
    overflow:hidden;

    padding:
        115px
        0
        105px;

    background:#f2f1ed;

    color:#181819;
}


.vcJournal *{
    box-sizing:border-box;
}


.vcJournalInner{
    position:relative;
    z-index:2;

    width:
        min(
            1440px,
            calc(100% - 72px)
        );

    margin:0 auto;
}


/* ============================================================
   AMBIENT
============================================================ */

.vcJournalAmbient{
    position:absolute;
    inset:0;

    overflow:hidden;

    pointer-events:none;
}


.vcJournalGlow{
    position:absolute;

    display:block;

    border-radius:50%;

    filter:blur(100px);

    opacity:.15;
}


.vcJournalGlowOne{
    width:550px;
    height:550px;

    top:-280px;
    right:-160px;

    background:#d4b98d;
}


.vcJournalGlowTwo{
    width:500px;
    height:500px;

    bottom:-300px;
    left:-250px;

    background:#aeb8c5;
}


/* ============================================================
   HEADER
============================================================ */

.vcJournalHeader{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;

    gap:50px;

    margin-bottom:55px;
}


.vcJournalHeading{
    max-width:760px;
}


.vcJournalEyebrow{
    display:flex;
    align-items:center;

    gap:10px;

    margin-bottom:17px;

    color:#77777b;

    font-size:11px;
    font-weight:750;

    letter-spacing:.14em;

    text-transform:uppercase;
}


.vcJournalEyebrow > span{
    width:28px;
    height:1px;

    background:#272729;
}


.vcJournalHeading h2{
    max-width:760px;

    margin:0;

    font-size:
        clamp(
            42px,
            5vw,
            74px
        );

    line-height:.97;

    font-weight:430;

    letter-spacing:-.055em;
}


.vcJournalHeading h2 strong{
    font-weight:750;
}


.vcJournalHeading p{
    max-width:590px;

    margin:
        23px
        0
        0;

    color:#727276;

    font-size:16px;

    line-height:1.7;
}


/* ============================================================
   ALL BLOG
============================================================ */

.vcJournalAll{
    display:flex;
    align-items:center;

    gap:14px;

    flex:none;

    padding:
        13px
        2px;

    border-bottom:
        1px
        solid
        #cdccca;

    color:#1b1b1d;

    font-size:13px;
    font-weight:700;

    text-decoration:none;

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


.vcJournalAll:hover{
    gap:19px;

    border-color:#1b1b1d;
}


.vcJournalAll svg{
    width:17px;
    height:17px;
}


/* ============================================================
   LAYOUT
============================================================ */

.vcJournalLayout{
    display:grid;

    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(300px, .72fr);

    gap:28px;
}


/*
    Cuando solo existe un artículo,
    ocupa todo el espacio.
*/

.vcJournalLayoutSingle{
    display:block;
}


/* ============================================================
   FEATURED
============================================================ */

.vcJournalFeatured{
    display:grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, .85fr);

    min-height:590px;

    overflow:hidden;

    border-radius:30px;

    background:#fff;

    box-shadow:
        0
        25px
        60px
        rgba(0,0,0,.055);
}


/*
    CON UN SOLO ARTÍCULO
    lo hacemos todavía más editorial.
*/

.vcJournalLayoutSingle
.vcJournalFeatured{
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(370px, .65fr);

    min-height:620px;
}


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

.vcJournalFeaturedMedia{
    position:relative;

    display:block;

    overflow:hidden;

    min-height:100%;

    background:#dedddd;

    text-decoration:none;

    isolation:isolate;
}


.vcJournalFeaturedMedia img{
    display:block;

    width:100%;
    height:100%;

    min-height:590px;

    object-fit:cover;

    transition:
        transform
        .9s
        cubic-bezier(.2,.72,.2,1);
}


.vcJournalFeatured:hover
.vcJournalFeaturedMedia img{
    transform:scale(1.045);
}


.vcJournalFeaturedShade{
    position:absolute;

    z-index:1;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.03),
            rgba(0,0,0,.05) 50%,
            rgba(0,0,0,.35) 100%
        );
}


/* ============================================================
   FEATURED TAG
============================================================ */

.vcJournalFeaturedTag{
    position:absolute;

    z-index:3;

    top:21px;
    left:21px;

    display:flex;
    align-items:center;

    min-height:35px;

    padding:
        0
        14px;

    border-radius:999px;

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

    backdrop-filter:
        blur(14px);

    color:#29292b;

    font-size:9px;
    font-weight:800;

    letter-spacing:.06em;

    text-transform:uppercase;
}


/* ============================================================
   HOVER LABEL
============================================================ */

.vcJournalFeaturedHover{
    position:absolute;

    z-index:3;

    left:25px;
    bottom:24px;

    display:flex;
    align-items:center;

    gap:11px;

    color:#fff;

    font-size:12px;
    font-weight:700;

    opacity:0;

    transform:
        translateY(8px);

    transition:
        opacity .3s ease,
        transform .3s ease;
}


.vcJournalFeatured:hover
.vcJournalFeaturedHover{
    opacity:1;

    transform:
        translateY(0);
}


.vcJournalFeaturedHover svg{
    width:17px;
    height:17px;
}


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

.vcJournalFeaturedContent{
    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:
        55px
        50px;
}


.vcJournalMeta{
    display:flex;
    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:20px;
}


.vcJournalMeta time,
.vcJournalMeta span{
    color:#8d8d91;

    font-size:9px;
    font-weight:730;

    letter-spacing:.09em;

    text-transform:uppercase;
}


.vcJournalMeta time::after{
    content:"";

    display:inline-block;

    width:3px;
    height:3px;

    margin:
        0
        0
        2px
        10px;

    border-radius:50%;

    background:#c1c1c4;
}


.vcJournalFeaturedContent h3{
    margin:0;

    font-size:
        clamp(
            30px,
            3.15vw,
            49px
        );

    line-height:1.05;

    font-weight:620;

    letter-spacing:-.045em;
}


.vcJournalFeaturedContent h3 a{
    color:#19191b;

    text-decoration:none;
}


.vcJournalFeaturedContent p{
    margin:
        25px
        0
        0;

    color:#747478;

    font-size:14px;

    line-height:1.75;
}


/* ============================================================
   READ LINK
============================================================ */

.vcJournalRead{
    display:flex;
    align-items:center;

    gap:12px;

    width:max-content;

    margin-top:33px;

    color:#19191b;

    font-size:12px;
    font-weight:750;

    text-decoration:none;
}


.vcJournalRead > span{
    display:grid;
    place-items:center;

    width:36px;
    height:36px;

    border:
        1px
        solid
        #dddddf;

    border-radius:50%;

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


.vcJournalRead svg{
    width:15px;
    height:15px;
}


.vcJournalRead:hover > span{
    background:#19191b;

    border-color:#19191b;

    color:#fff;

    transform:
        translateX(4px);
}


/* ============================================================
   NO IMAGE
============================================================ */

.vcJournalNoImage{
    display:grid;
    place-items:center;

    width:100%;
    height:100%;

    min-height:590px;

    background:
        radial-gradient(
            circle at 50% 40%,
            #fafafa,
            #e7e6e3
        );
}


.vcJournalNoImageBrand{
    width:25%;
    max-width:150px;

    opacity:.18;
}


.vcJournalNoImageBrand img{
    display:block;

    width:100%;
    height:auto;

    object-fit:contain;

    filter:grayscale(1);
}


/* ============================================================
   SECONDARY
============================================================ */

.vcJournalSecondary{
    display:grid;

    grid-template-columns:1fr;

    gap:13px;
}


.vcJournalSmall{
    display:grid;

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

    min-height:170px;

    overflow:hidden;

    border-radius:20px;

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

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


.vcJournalSmall:hover{
    transform:
        translateY(-3px);

    background:#fff;

    box-shadow:
        0
        15px
        35px
        rgba(0,0,0,.055);
}


.vcJournalSmallMedia{
    display:block;

    overflow:hidden;

    background:#ddd;
}


.vcJournalSmallMedia img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .55s ease;
}


.vcJournalSmall:hover
.vcJournalSmallMedia img{
    transform:scale(1.06);
}


.vcJournalSmallNoImage{
    display:grid;
    place-items:center;

    width:100%;
    height:100%;

    background:#dededa;
}


.vcJournalSmallNoImage span{
    width:33px;
    height:33px;

    border-radius:50%;

    border:
        1px
        solid
        rgba(0,0,0,.12);
}


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

.vcJournalSmallContent{
    position:relative;

    display:flex;
    flex-direction:column;
    justify-content:center;

    min-width:0;

    padding:
        22px
        47px
        22px
        22px;
}


.vcJournalSmallContent time{
    margin-bottom:9px;

    color:#97979b;

    font-size:8px;
    font-weight:750;

    letter-spacing:.08em;

    text-transform:uppercase;
}


.vcJournalSmallContent h3{
    margin:0;

    font-size:16px;

    line-height:1.3;

    letter-spacing:-.025em;
}


.vcJournalSmallContent h3 a{
    color:#1c1c1e;

    text-decoration:none;
}


.vcJournalSmallArrow{
    position:absolute;

    right:16px;
    bottom:17px;

    display:grid;
    place-items:center;

    width:30px;
    height:30px;

    border-radius:50%;

    border:
        1px
        solid
        #dedee0;

    color:#19191b;

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


.vcJournalSmallArrow:hover{
    background:#19191b;

    color:#fff;
}


.vcJournalSmallArrow svg{
    width:14px;
    height:14px;
}


/* ============================================================
   FOOTER
============================================================ */

.vcJournalFooter{
    display:flex;
    align-items:center;

    gap:25px;

    margin-top:47px;
}


.vcJournalFooter > span{
    flex:none;

    color:#8b8b8f;

    font-size:11px;

    letter-spacing:.02em;
}


.vcJournalFooter > span strong{
    color:#252527;
}


.vcJournalFooter > div{
    width:100%;
    height:1px;

    background:#d9d8d4;
}


.vcJournalFooter > a{
    display:flex;
    align-items:center;

    flex:none;

    gap:10px;

    color:#1b1b1d;

    font-size:11px;
    font-weight:700;

    text-decoration:none;
}


.vcJournalFooter > a svg{
    width:15px;
    height:15px;

    transition:
        transform .25s ease;
}


.vcJournalFooter > a:hover svg{
    transform:
        translateX(4px);
}


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

@media(max-width:1050px){

    .vcJournalLayout{
        grid-template-columns:1fr;
    }


    .vcJournalSecondary{
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }


    .vcJournalSmall{
        display:block;
    }


    .vcJournalSmallMedia{
        aspect-ratio:
            1.4
            /
            1;
    }


    .vcJournalSmallContent{
        min-height:145px;
    }

}


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

@media(max-width:800px){

    .vcJournal{
        padding:
            78px
            0
            80px;
    }


    .vcJournalInner{
        width:
            calc(
                100% - 34px
            );
    }


    .vcJournalHeader{
        display:block;

        margin-bottom:36px;
    }


    .vcJournalAll{
        width:max-content;

        margin-top:25px;
    }


    .vcJournalFeatured,
    .vcJournalLayoutSingle
    .vcJournalFeatured{
        grid-template-columns:1fr;

        min-height:0;

        border-radius:22px;
    }


    .vcJournalFeaturedMedia{
        aspect-ratio:
            1.2
            /
            1;

        min-height:0;
    }


    .vcJournalFeaturedMedia img{
        min-height:0;
    }


    .vcJournalNoImage{
        min-height:0;

        aspect-ratio:
            1.2
            /
            1;
    }


    .vcJournalFeaturedContent{
        padding:
            34px
            27px
            38px;
    }


    .vcJournalFeaturedHover{
        opacity:1;

        transform:none;
    }


    .vcJournalSecondary{
        grid-template-columns:1fr;

        margin-top:15px;
    }


    .vcJournalSmall{
        display:grid;

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


    .vcJournalSmallMedia{
        aspect-ratio:auto;
    }


    .vcJournalFooter{
        margin-top:35px;
    }

}


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

@media(max-width:520px){

    .vcJournalHeading h2{
        font-size:
            clamp(
                39px,
                12vw,
                54px
            );
    }


    .vcJournalHeading p{
        font-size:14px;
    }


    .vcJournalFeaturedMedia{
        aspect-ratio:
            1
            /
            .78;
    }


    .vcJournalFeaturedContent h3{
        font-size:
            clamp(
                28px,
                8.5vw,
                40px
            );
    }


    .vcJournalFeaturedContent p{
        font-size:13px;
    }


    .vcJournalFooter{
        display:block;
    }


    .vcJournalFooter > div{
        margin:
            17px
            0;
    }

}