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

.blog-hero{

    padding:45px 20px 35px;
    background:#f8fafc;
    text-align:center;

}

.blog-hero .container{

    max-width:760px;
    margin:auto;

}

.blog-badge{

    display:inline-block;
    padding:6px 14px;
    border-radius:50px;
    background:#eef2ff;
    color:#2563eb;
    font-size:.82rem;
    font-weight:600;
    margin-bottom:12px;

}

.blog-hero h1{

    font-size:2rem;
    margin-bottom:12px;
    color:#111827;

}

.blog-hero p{

    color:#6b7280;
    line-height:1.7;
    font-size:1rem;

}

/*==================================================
BLOG LIST
==================================================*/

.blog-list{

    padding:45px 20px 70px;

}

.blog-list .container{

    max-width:1000px;
    margin:auto;

}

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

.blog-card{

    display:flex;
    gap:25px;

    background:#fff;

    border-radius:16px;

    padding:18px;

    margin-bottom:22px;

    text-decoration:none;

    color:inherit;

    box-shadow:0 8px 24px rgba(0,0,0,.06);

    transition:.25s;

}

.blog-card:hover{

    transform:translateY(-4px);

    box-shadow:0 16px 38px rgba(0,0,0,.10);

}

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

.blog-image{

    width:240px;

    min-width:240px;

}

.blog-image img{

    width:100%;

    height:160px;

    object-fit:cover;

    border-radius:12px;

    display:block;

}

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

.blog-content{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.blog-content h2{

    font-size:1.45rem;

    line-height:1.35;

    color:#111827;

    margin-bottom:14px;

}

.blog-content p{

    color:#6b7280;

    line-height:1.8;

    margin-bottom:20px;

}

.blog-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:#9ca3af;

    font-size:.95rem;

}

.read-more{

    color:#2563eb;

    font-weight:600;

}

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

.empty-blog{

    text-align:center;

    padding:80px 20px;

}

/*==================================================
PAGINATION
==================================================*/

.blog-pagination{

    margin-top:40px;

    display:flex;

    justify-content:center;

}

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

@media(max-width:768px){

    .blog-hero{
        padding:30px 16px 22px;
    }
    
    .blog-hero h1{
        font-size:1.5rem;
    }
    
    .blog-card{
        display:flex;
        flex-direction:row;
        gap:14px;
        padding:12px;
        align-items:flex-start;
    }
    
    .blog-image{
        width:120px;
        min-width:120px;
    }
    
    .blog-image img{
        width:120px;
        height:90px;
        object-fit:cover;
        border-radius:10px;
    }
    
    .blog-content{
        flex:1;
        min-width:0;
    }
    
    .blog-content h2{
        font-size:1rem;
        line-height:1.35;
        margin-bottom:8px;
    }
    
    .blog-content p{
        font-size:.88rem;
        line-height:1.5;
        margin-bottom:10px;
    
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }
    
    .blog-footer{
        display:flex;
        justify-content:space-between;
        align-items:center;
        font-size:.82rem;
    }
    
    .read-more{
        font-size:.82rem;
    }

}