/* ===================================
CATEGORY PAGE
=================================== */
.blog-category{
padding:var(--space-8) 0;
}
/* ===================================
HEADER
=================================== */
.category-header{
margin-bottom:var(--space-8);
}
.category-header h1{
font-size:var(--fs-h2);
line-height:var(--lh-heading);
margin:0;
}
/* ===================================
LAYOUT
=================================== */
.category-layout{
display:grid;
grid-template-columns:minmax(0,1fr) 240px;
gap:var(--space-10);
}
/* ===================================
MAIN CONTENT
=================================== */
.category-main{
min-width:0;
}
/* ===================================
POST GRID
=================================== */
.archive-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:40px 30px;
}
/* ===================================
CARD
=================================== */
.archive-card{
height:100%;
}
.archive-card a{
display:block;
text-decoration:none;
height:100%;
}
.archive-image{
overflow:hidden;
border-radius:var(--radius-md);
margin-bottom:var(--space-4);
}
.archive-image img{
width:100%;
height:260px;
object-fit:cover;
display:block;
transition:.5s ease;
}
.archive-card:hover img{
transform:scale(1.05);
}
.archive-tag{
display:inline-flex;
align-items:center;
padding:5px 10px;
border:1px solid #239DEA;
border-radius:100px;
font-size:11px;
line-height:1;
color:#239DEA;
margin-bottom:var(--space-3);
}
.archive-content h3{
font-size:var(--fs-h5);
line-height:1.3;
color:var(--color-primary);
margin-bottom:var(--space-3);
}
.archive-content p{
color:var(--color-text);
margin-bottom:var(--space-4);
line-height:1.7;
}
.archive-date{
display:block;
font-size:12px;
color:#999;
}
/* ===================================
PAGINATION
=================================== */
.archive-pagination{
margin-top:var(--space-10);
display:flex;
justify-content:center;
}
.archive-pagination nav{
display:flex;
}
.archive-pagination .page-numbers{
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid var(--box-border);
border-radius:8px;
text-decoration:none;
margin:0 4px;
transition:.3s ease;
}
.archive-pagination .page-numbers:hover{
background:var(--color-highlight);
color:#fff;
}
.archive-pagination .current{
background:var(--color-highlight);
border-color:var(--color-highlight);
color:#fff;
}
/* ===================================
TABLET
=================================== */
@media(max-width:991px){
.category-layout{
grid-template-columns:1fr;
gap:var(--space-8);
}
.category-sidebar{
position:relative;
top:auto;
order:-1;
}
.category-sidebar ul{
display:flex;
flex-wrap:wrap;
gap:12px;
}
.category-sidebar li{
margin:0;
}
.archive-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:30px 20px;
}
.archive-image img{
height:220px;
}
}
/* ===================================
MOBILE
=================================== */
@media(max-width:767px){
.blog-category{
padding:var(--space-9) 0;
}
.category-header h1{
font-size:var(--fs-h3);
}
.archive-grid{
grid-template-columns:1fr;
gap:var(--space-7);
}
.archive-image img{
height:220px;
}
.category-sidebar ul{
display:block;
}
.category-sidebar li{
margin-bottom:var(--space-3);
}
}