.bf-featured-vertical{
display:flex;
flex-direction:column;
gap:25px;
max-width:100%;
box-sizing:border-box;
}

.bf-featured-item{
background:#1f1f1f;
border:2px solid transparent;
border-radius:14px;
overflow:hidden;
background-image:
linear-gradient(#1f1f1f,#1f1f1f),
linear-gradient(45deg,gold,orange,red);
background-origin:border-box;
background-clip:padding-box,border-box;
box-shadow:0 4px 12px rgba(0,0,0,0.4);
transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
position:relative;
}

.bf-featured-item:hover{
transform:translateY(-5px);
box-shadow:0 0 15px gold,0 8px 20px rgba(0,0,0,.6);
background:linear-gradient(135deg,#2a2a2a,#1f1f1f);
}

.bf-featured-image{
width:100%;
height:auto;
display:block;
transition: transform .3s ease;
}

.bf-featured-item:hover .bf-featured-image{
transform:scale(1.03);
}

.bf-featured-link::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.3));
pointer-events:none;
}

.bf-featured-content{
padding:18px 20px;
color:#eee;
}

.bf-featured-content h3{
margin:0 0 10px;
font-weight:600;
background: linear-gradient(90deg,gold,orange);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
color:transparent;
}

.bf-featured-content p{
margin:0;
color:#ccc;
line-height:1.6;
}

.bf-featured-item a{
text-decoration:none;
color:inherit;
}

.bf-post-views{
position:absolute;
bottom:10px;
right:10px;
background:rgba(0,0,0,.6);
color:#fff;
font-size:13px;
padding:4px 8px;
border-radius:6px;
font-weight:500;
}

.bf-badge{
position:absolute;
top:10px;
left:10px;
padding:4px 8px;
border-radius:6px;
font-size:12px;
font-weight:600;
color:#fff;
}

.hot{
background:#ff9800;
}

.viral{
background:#e91e63;
}

@media(max-width:768px){
.bf-post-views{
font-size:10px;
padding:2px 4px;
}
}

@media(max-width:480px){
.bf-post-views{
display:none;
}
}