/* ==========================================================
   BLOG SECTION
========================================================== */

.blogs{
    padding-top: clamp(0.9rem,2vw,4.5rem);
    padding-left: clamp(0.9rem,3vw,3rem);
    padding-right: clamp(0.9rem,3vw,3rem) ;
    padding-bottom: clamp(0.9rem,2vw,4.5rem) ;
}

/* ==========================================================
   BLOG GRID
========================================================== */

.blog-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:2rem;
}

.section-header{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.link-to-blog{
    display: flex;
    align-items: center;
    width: 100%;
}

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

.blog-card{
    position:relative;
    overflow:hidden;

    display:flex;
    flex-direction:column;

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

    text-decoration:none;
    color:inherit;

    background:#e6e6e6;

    box-shadow:0 10px 25px rgba(0,0,0,.18);

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}

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

.blog-image{

    position:relative;

    width:100%;
    height:240px;

    overflow:hidden;
    

}

.blog-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .6s ease,
        filter .6s ease;
    filter: grayscale(0.8);
}

.blog-image::after{

    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.25),
        transparent
    );

    transition:.35s;

}

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

.blog-content{
    display:flex;
    flex-direction:column;
    gap:1rem;

    padding:1.5rem;

    flex:1;
}

/* ==========================================================
   CATEGORY
========================================================== */

.blog-category{

    display:flex;
    flex-wrap:wrap;
    gap:.5rem;

}

.blog-category span{

    background:rgba(255,107,0,.15);

    color:var(--primary-color);

    padding:.45rem .9rem;

    border-radius:var(--radius);

    font-size:.8rem;

    font-weight:600;

}

/* ==========================================================
   META
========================================================== */

.blog-meta{

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:.85rem;

    color:#666;

}

.blog-date,
.blog-reading-time{

    display:flex;

    align-items:center;

    gap:.4rem;

}

.blog-meta img{

    width:15px;

}

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

.blog-content h3{

    font-size:1.45rem;

    line-height:1.35;

    color:var(--text-dark);

    transition:.35s;

}

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

.blog-description{

    color:#555;

    line-height:1.7;

    flex:1;

}

/* ==========================================================
   BUTTON
========================================================== */

.blog-link , .blog-page-link{
    display:flex;
    align-items:center;

    gap:.6rem;

    width:fit-content;

    padding:.7rem 1rem;

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

    font-weight:600;

    transition:.35s;
}

.blog-link{
    background:#7b7b7b;
    color:#fff;
}

.blog-page-link {
    margin-left : auto;
    color:var(--text-dark);
    border: #cbc9c9 solid 1px;
}


.blog-page-link:hover , .blog-card:hover {
    cursor: pointer;
    color: #fff;
    background-color: var(--primary-color);
}
.blog-link img ,.blog-page-link img{
    width:20px;
    transition:.35s;
}

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

.blog-card:hover{
    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.25);

}

.blog-card:hover .blog-image img{

    transform:scale(1.05);
    filter: grayscale(0);
}


.blog-card:hover .blog-content h3,
.blog-card:hover .blog-description,
.blog-card:hover .blog-meta{

    color:#fff;

}

.blog-card:hover .blog-category span{

    background:#fff;

    color:var(--primary-color);

}

.blog-card:hover .blog-link{

    background:#7b3a00;

}

.blog-card:hover .blog-link img ,
.blog-page-link:hover img{

    transform:translateX(4px);

}

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

@media(max-width:900px){

    .blog-grid{

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

    }

}

@media(max-width:700px){

    .blog-grid{

        grid-template-columns:1fr;

    }

    .link-to-blog {
        flex-direction: column;
        align-items: flex-start;
    }
    .blog-page-link{ 
        margin-left: 0px;; 
        margin-top: 12px;
        margin-bottom: 12px;
     }
}