/* GLOBAL */
.blog-category{
padding:60px 3%;
background:#f5f5f5;
font-family:'Inter',sans-serif;
}

/* HEADER */
.category-header h1{
font-size:28px;
margin-bottom:30px;
font-weight:600;
}

/* GRID */
.post-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

/* CARD */
.post-card{
background:#fff;
border-radius:16px;
overflow:hidden;
transition:all 0.3s ease;
box-shadow:0 2px 10px rgba(0,0,0,0.04);
}

.post-card:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* IMAGE */
.post-image img{
width:100%;
height:220px;
object-fit:cover;
}

/* CONTENT */
.post-content{
padding:18px;
}

/* META */
.meta{
font-size:13px;
color:#777;
margin-bottom:10px;
display:flex;
align-items:center;
gap:6px;
}

/* TITLE */
.title{
font-size:18px;
margin-bottom:10px;
line-height:1.4;
}

.title a{
text-decoration:none;
color:#111;
font-weight:500;
transition:0.3s;
}

/* HOVER ARROW EFFECT */
.title a::after{
content:'↗';
margin-left:6px;
opacity:0;
transition:0.3s;
}

.title a:hover::after{
opacity:1;
}

.title a:hover{
color:#000;
}

/* EXCERPT */
.excerpt{
font-size:14px;
color:#555;
margin-bottom:15px;
line-height:1.6;
}

/* TAGS */
.tags{
display:flex;
flex-wrap:wrap;
gap:8px;
}

.tags span{
background:#eef1f5;
padding:6px 12px;
border-radius:20px;
font-size:12px;
color:#444;
transition:0.3s;
}

.tags span:hover{
background:#111;
color:#fff;
}

/* =========================
   PAGINATION (IMPROVED)
========================= */

.pagination{
margin-top:60px;
display:flex;
justify-content:center;
}

.pagination-inner{
display:flex;
align-items:center;
gap:30px;
flex-wrap:wrap;
}

/* PREV / NEXT */
.page-prev a,
.page-next a{
display:flex;
align-items:center;
gap:6px;
padding:10px 18px;
background:#fff;
border-radius:10px;
text-decoration:none;
font-size:14px;
color:#111;
box-shadow:0 2px 8px rgba(0,0,0,0.05);
transition:all 0.3s ease;
}

.page-prev a:hover,
.page-next a:hover{
background:#111;
color:#fff;
transform:translateY(-2px);
}

/* NUMBERS */
.page-numbers{
display:flex;
align-items:center;
gap:8px;
}

.page-numbers a,
.page-numbers span{
display:flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius:50%;
background:#eee;
text-decoration:none;
font-size:14px;
color:#111;
transition:all 0.3s ease;
}

/* ACTIVE */
.page-numbers .current{
background:#111;
color:#fff;
}

/* HOVER */
.page-numbers a:hover{
background:#111;
color:#fff;
transform:translateY(-2px);
}

/* DOTS (...) */
.page-numbers .dots{
background:transparent;
}

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

@media(max-width:992px){
.post-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:600px){

.post-grid{
grid-template-columns:1fr;
gap:20px;
}

.post-image img{
height:180px;
}

/* PAGINATION MOBILE */
.pagination-inner{
flex-direction:column;
gap:15px;
}

.page-prev a,
.page-next a{
width:100%;
justify-content:center;
}

}