/* ==========================================================
   ABTECH BLOG
   PART 1
========================================================== */

:root{

    --primary:#142B63;
    --secondary:#2563EB;

    --text:#1E293B;
    --muted:#64748B;

    --bg:#F8FAFC;
    --white:#FFFFFF;

    --border:#E2E8F0;

    --radius:18px;

}

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

.blog-hero{

    
    padding:100px 0 25px;

    background:linear-gradient(180deg,#F4F8FF 0%,#FFFFFF 100%);

    text-align:center;

}

.blog-hero .container{

    max-width:900px;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 24px;

    border-radius:50px;

    background:#E8F0FF;

    color:var(--secondary);

    font-size:13px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.blog-hero h1{

    margin:28px 0 18px;

    font-size:26px;

    font-weight:800;

    line-height:1.15;

    color:var(--primary);

}

.blog-hero p{

    margin:0 auto;

    max-width:650px;

    font-size:14px;

    line-height:1.6;

}

/* ==========================================================
   FILTER
========================================================== */

.blog-filter{

        padding:20px 0 30px;

    background:#FFFFFF;

}

.blog-filter-form{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.search-box{

    width:450px;

}

.search-box input{

    width:100%;

    height:58px;

    border:1px solid var(--border);

    border-radius:14px;

    padding:0 20px;

    font-size:15px;

    background:#FFFFFF;

}

.search-box input:focus{

    outline:none;

    border-color:var(--secondary);

}

.category-select{

    width:240px;

    height:58px;

    border:1px solid var(--border);

    border-radius:14px;

    padding:0 18px;

    background:#FFFFFF;

}

.search-button{

    height:58px;

    padding:0 34px;

    border:none;

    border-radius:14px;

    background:var(--primary);

    color:#FFFFFF;

    font-weight:700;

    cursor:pointer;

}

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

.blog-list{

    background:var(--bg);

   
    padding:20px 0 80px;

}

.blog-grid{

    display:grid;

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

    gap:30px;

    align-items:start;

}

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

@media(max-width:1024px){

.blog-grid{

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

}

}

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

@media(max-width:768px){

.blog-grid{

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

    gap:18px;

}

.blog-hero{

    padding:140px 0 70px;

}

.blog-hero h1{

    font-size:40px;

}

.blog-hero p{

    font-size:15px;

}

.search-box,
.category-select,
.search-button{

    width:100%;

}

}

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

.blog-card{

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:18px;

    overflow:hidden;

    transition:.3s ease;

    display:flex;

    flex-direction:column;

    height:100%;

}

.blog-card:hover{

    transform:translateY(-6px);

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

}

/* ==========================================================
   THUMBNAIL
========================================================== */

.blog-image{

    display:block;

    width:100%;

    
    height:180px;

    overflow:hidden;

    background:#F3F4F6;

}

.blog-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}

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

    transform:scale(1.05);

}

/* ==========================================================
   BODY
========================================================== */

.blog-body{

    padding:14px;

    display:flex;

    flex-direction:column;

    flex:1;

}

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

.blog-meta{

    display:flex;

    justify-content:space-between;

    align-items:center;

    
    margin-bottom:4px;

}

.blog-category{

    font-size:12px;

    font-weight:700;

    color:#2563EB;

    text-transform:uppercase;

    letter-spacing:.05em;

}

.blog-date{

    font-size:12px;

    color:#94A3B8;

}

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

.blog-title{

    margin:0 0 14px;

    font-size:14px;

    font-weight:700;

    line-height:1.5;

}

.blog-title a{

    color:#142B63;

    text-decoration:none;

    overflow:hidden;

    display:block;

    line-height:1.5;

    max-height:3em;

}
.blog-title a:hover{

    color:#2563EB;

}

/* ==========================================================
   EXCERPT
========================================================== */

.blog-excerpt{

    display:none;

}

/* ==========================================================
   READ MORE
========================================================== */

.read-more{

    margin-top:auto;

    display:inline-flex;

    align-items:center;

    font-size:14px;

    font-weight:700;

    color:#142B63;

    text-decoration:none;

}

.read-more::after{

    content:"→";

    margin-left:8px;

    transition:.25s;

}

.read-more:hover{

    color:#2563EB;

}

.read-more:hover::after{

    margin-left:14px;

}

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

@media(max-width:768px){

    .blog-image{

        height:170px;

    }

    .blog-body{

        padding:15px;

    }

    .blog-title{

        font-size:16px;

    }

    .blog-meta{

        flex-direction:column;

        align-items:flex-start;

        gap:4px;

    }

}

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

.pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin-top:60px;

    flex-wrap:wrap;

}

.pagination a{

    width:42px;

    height:42px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:10px;

    background:#FFFFFF;

    border:1px solid #E2E8F0;

    color:#475569;

    font-weight:600;

    text-decoration:none;

    transition:.25s;

}

.pagination a:hover{

    background:#142B63;

    color:#FFFFFF;

    border-color:#142B63;

}

.pagination a.active{

    background:#142B63;

    color:#FFFFFF;

    border-color:#142B63;

}

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

.blog-empty{

    grid-column:1/-1;

    background:#FFFFFF;

    border:1px solid #E5E7EB;

    border-radius:18px;

    padding:80px 30px;

    text-align:center;

}

.blog-empty h3{

    color:#142B63;

    font-size:28px;

    margin-bottom:12px;

}

.blog-empty p{

    color:#64748B;

    font-size:15px;

    margin:0;

}

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

.blog-card{

    min-height:380px;

}

.blog-title{

    min-height:58px;

}

.read-more{

    margin-top:auto;

}

/* ==========================================================
   DESKTOP
========================================================== */

@media(min-width:1400px){

.blog-grid{

    gap:34px;

}

.blog-image{

    height:230px;

}

}

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

@media(max-width:1024px){

.blog-card{

    min-height:340px;

}

.blog-image{

    height:190px;

}

}

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

@media(max-width:768px){

.blog-list{

    padding:50px 0 70px;

}

.blog-card{

    min-height:auto;

}

.blog-image{

    height:160px;

}

.blog-title{

    min-height:auto;

    font-size:17px;

    line-height:1.45;

}

.pagination{

    gap:8px;

}

.pagination a{

    width:38px;

    height:38px;

}

}

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

@media(max-width:480px){

.blog-grid{

    gap:16px;

}

.blog-body{

    padding:14px;

}

.blog-image{

    height:140px;

}

.blog-category{

    font-size:11px;

}

.blog-date{

    font-size:11px;

}

.blog-title{

    font-size:15px;

}

.read-more{

    font-size:13px;

}

}