/*==========================================================
    THE FIRE MONK JOURNAL
    blog.css
    Version 1.0
==========================================================*/


/*==========================================================
    PAGE
==========================================================*/

body{

    background:#F7F4EE;

}



/*==========================================================
    HERO
==========================================================*/

.journal-hero{

    padding-top:170px;

    padding-bottom:120px;

    background:

    linear-gradient(
        to bottom,
        #F7F4EE,
        #FCFBF9
    );

}



.journal-hero .hero-grid{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:80px;

    align-items:center;

}



/*==========================================================
    GOLD TAG
==========================================================*/

.journal-tag{

    display:inline-block;

    padding:8px 20px;

    border-radius:30px;

    border:1px solid #C79A2D;

    color:#C79A2D;

    font-size:.82rem;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:28px;

}



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

.journal-hero h1{

    font-size:5.2rem;

    line-height:.95;

    color:#102B45;

    margin-bottom:35px;

    font-weight:700;

}



/*==========================================================
    EDITORIAL QUOTE
==========================================================*/

.editorial-quote{

    margin-bottom:35px;

}



.editorial-quote p{

    font-size:1.45rem;

    color:#C79A2D;

    margin-bottom:8px;

    font-weight:500;

}



/*==========================================================
    DESCRIPTION
==========================================================*/

.hero-description{

    max-width:680px;

    font-size:1.12rem;

    line-height:1.9;

    color:#5F5F5F;

    margin-bottom:45px;

}



/*==========================================================
    BUTTONS
==========================================================*/

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}



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

.hero-image{

    text-align:center;

}



.hero-image img{

    width:100%;

    max-width:560px;

    border-radius:22px;

    box-shadow:

    0 35px 80px rgba(0,0,0,.14);

    transition:.45s;

}



.hero-image img:hover{

    transform:

        translateY(-10px)

        scale(1.02);

}



/*==========================================================
    STATS
==========================================================*/

.journal-stats{

    padding:90px 0;

    background:white;

    border-top:1px solid #ECE6DA;

    border-bottom:1px solid #ECE6DA;

}



.journal-stats .container{

    display:grid;

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

    gap:40px;

}



.stat-card{

    text-align:center;

}



.stat-card h2{

    color:#C79A2D;

    font-size:3rem;

    margin-bottom:15px;

}



.stat-card p{

    color:#6D6D6D;

    line-height:1.6;

}



/*==========================================================
    PLACEHOLDER
==========================================================*/

.coming-next{

    padding:120px 0;

    text-align:center;

}



.coming-next h2{

    color:#102B45;

    margin-bottom:20px;

}



.coming-next p{

    font-size:1.1rem;

    color:#777;

}



/*==========================================================
    HERO LIGHT
==========================================================*/

.journal-hero{

    position:relative;

    overflow:hidden;

}



.journal-hero::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    right:-180px;

    top:-150px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(199,154,45,.09),

        transparent 70%

    );

}



.journal-hero::after{

    content:"";

    position:absolute;

    left:-200px;

    bottom:-200px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(16,43,69,.05),

        transparent 70%

    );

}



/*==========================================================
    GOLD DIVIDER
==========================================================*/

.hero-description::before{

    content:"";

    display:block;

    width:70px;

    height:2px;

    background:#C79A2D;

    margin-bottom:28px;

}



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

.stat-card{

    transition:.35s;

}



.stat-card:hover{

    transform:translateY(-8px);

}



.stat-card:hover h2{

    color:#B68413;

}



/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1100px){

.journal-hero .hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-description{

margin:auto;

margin-bottom:45px;

}

.hero-description::before{

margin:0 auto 28px;

}

.hero-buttons{

justify-content:center;

}

.hero-image{

margin-top:60px;

}

}



@media(max-width:768px){

.journal-hero h1{

font-size:3.5rem;

}

.editorial-quote p{

font-size:1.2rem;

}

.journal-stats .container{

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

}

}



@media(max-width:480px){

.journal-hero{

padding-top:150px;

}

.journal-hero h1{

font-size:2.6rem;

}

.hero-description{

font-size:1rem;

}

.journal-stats .container{

grid-template-columns:1fr;

}

}