.blog-layout{
display:flex;
gap:40px;
align-items:flex-start;
}

.blog-main{
flex:3;
}

.blog-sidebar{
flex:1;
background:#fff;
padding:20px;
border-radius:10px;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
position:sticky;
top:20px;
}
@media only screen and (max-width:768px){.blog-sidebar{width:100%}}
.featured{
background:#fff;
border-radius:12px;
overflow:hidden;
box-shadow:0 4px 20px rgba(0,0,0,0.06);
margin-bottom:30px;
transition:0.3s;
}

.featured:hover{
transform:translateY(-3px);
}

.featured img{
width:100%;
height:320px;
object-fit:cover;
}

.featured-content{
padding:20px;
}

.featured-content h2{
font-size:26px;
margin:10px 0;
line-height:1.4;
}

.featured-content p{
color:#555;
line-height:1.6;
}
.blog-item{
display:flex;
gap:15px;
padding:15px;
background:#fff;
border-radius:10px;
margin-bottom:15px;
box-shadow:0 2px 8px rgba(0,0,0,0.04);
transition:0.25s;
}

.blog-item:hover{
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(0,0,0,0.08);
}

.blog-thumb img{
width:150px;
height:95px;
object-fit:cover;
border-radius:6px;
}

.blog-content h3{
font-size:18px;
margin:5px 0;
line-height:1.4;
}

.blog-desc{
color:#666;
font-size:14px;
}
.blog-category{
display:inline-block;
font-size:12px;
background:#e6f0ff;
color:#0073e6;
padding:4px 10px;
border-radius:20px;
margin-bottom:6px;
text-decoration:none;
font-weight:500;
}

.blog-category:hover{
background:#0073e6;
color:#fff;
}

.blog-meta{
font-size:13px;
color:#999;
margin-bottom:6px;
}
.blog-sidebar h3{
margin-bottom:15px;
font-size:18px;
}

.cat-list{
list-style:none;
padding:0;
margin:0;
}

.cat-list li{
display:flex;
justify-content:space-between;
padding:10px 0;
border-bottom:1px solid #eee;
font-size:14px;
}

.cat-list a{
text-decoration:none;
color:#333;
transition:0.2s;
}

.cat-list a:hover{
color:#0073e6;
padding-left:3px;
}
@media(max-width:768px){

.blog-layout{
flex-direction:column;
}

.blog-item{
flex-direction:row;
}

.blog-thumb img{
width:110px;
height:75px;
}

.featured img{
height:220px;
}

}
a{
transition:0.2s;
}

a:hover{
opacity:0.8;
}
.blog-desc{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
/* ===== GRID ===== */
.blog-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-bottom:30px;
}

.grid-item{
background:#fff;
border-radius:10px;
overflow:hidden;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
transition:0.3s;
}

.grid-item:hover{
transform:translateY(-4px);
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

.grid-item img{
width:100%;
height:160px;
object-fit:cover;
}

.grid-content{
padding:12px;
}

.grid-content h3{
font-size:16px;
margin-top:5px;
line-height:1.4;
}

/* responsive */
@media(max-width:768px){
.blog-grid{
grid-template-columns:1fr 1fr;
}

.grid-item img{
height:120px;
}
}