/*******************************************************************************
  File Name : root/assets/css/hero-post.css
  Purpose   : Blog Post Hero
*******************************************************************************/

.hero-post{

    position:relative;

    min-height:340px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--hero-bg) center center / cover no-repeat;

    overflow:hidden;

}

.hero-post-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(0,0,0,.65),

        rgba(0,0,0,.65)

    );

}

.hero-post .container{

    position:relative;

    z-index:2;

}

.hero-post-content{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.hero-post h1{

    color:#fff;

    font-size:3rem;

    font-weight:700;

    line-height:1.2;

    margin-bottom:20px;

    text-shadow:0 3px 10px rgba(0,0,0,.4);

}

.hero-post p{

    color:rgba(255,255,255,.92);

    font-size:1.15rem;

    line-height:1.8;

    margin:0 auto;

    max-width:760px;

    text-shadow:0 2px 6px rgba(0,0,0,.4);

}

/* =====================================================
   BOTTOM ACCENT
===================================================== */

.hero-post::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 4px;

    background: linear-gradient(

        90deg,

        #0d6efd,

        #4dabff,

        #74c0fc

    );

    z-index: 3;

}

@media (max-width:992px){

    .hero-post{

        min-height:300px;

    }

    .hero-post h1{

        font-size:2.3rem;

    }

}

@media (max-width:768px){

    .hero-post{

        min-height:240px;

        padding:50px 0;

    }

    .hero-post h1{

        font-size:1.8rem;

    }

    .hero-post p{

        font-size:1rem;

    }

}