/* ===================================
BLOG HERO
=================================== */
.blog-hero{
padding: var(--space-8) 0 var(--space-11) ;
}
/* ===================================
HEADER
=================================== */
.blog-hero-header{
max-width: 820px;
margin-bottom: var(--space-9);
}
.blog-hero-header h1{
font-size: var(--fs-h2);
line-height: 1.1;
letter-spacing: -1px;
margin-bottom: var(--space-4);
}
.blog-hero-header p{
max-width: 700px;
font-size: var(--fs-body-md);
line-height: 1.7;
color: var(--color-text);
margin: 0;
}
/* ===================================
FEATURED POST
=================================== */
.hero-featured-post{
display: block;
text-decoration: none;
}
.hero-post-image{
position: relative;
overflow: hidden;
border-radius: 20px;
margin-bottom: var(--space-6);
}
.hero-post-image img{
width: 100%;
height: 560px;
object-fit: cover;
object-position:top center;
display: block;
transition: .6s ease;
}
.hero-featured-post:hover img{
transform: scale(1.03);
}
/* ===================================
LATEST BADGE
=================================== */
.latest-badge{
position: absolute;
top: 20px;
left: 20px;
background: var(--color-highlight);
color: #fff;
padding: 10px 16px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
z-index: 2;
}
/* ===================================
CONTENT
=================================== */
.hero-post-content{
max-width: 100%;
}
.hero-post-meta{
display: flex;
align-items: center;
gap: 12px;
margin-bottom: var(--space-3);
}
.hero-post-meta .post-tag{
margin: 0;
}
.hero-post-meta .post-date{
font-size: 14px;
color: var(--color-text);
}
.hero-post-title{
font-size: var(--fs-h4);
line-height: 1.25;
color: var(--color-primary);
margin: 10px 0 0;
transition: .3s ease;
font-weight:500;
}
.hero-featured-post:hover .hero-post-title{
color: var(--color-highlight);
}
/* ===================================
TABLET
=================================== */
@media(max-width:991px){
.blog-hero{
padding: var(--space-9) 0;
}
.blog-hero-header{
max-width: 100%;
margin-bottom: var(--space-7);
}
.blog-hero-header h1{
font-size: var(--fs-h3);
}
.blog-hero-header p{
font-size: var(--fs-body);
}
.hero-post-image img{
height: 420px;
}
.hero-post-title{
font-size: var(--fs-h5);
}
}
/* ===================================
MOBILE
=================================== */
@media(max-width:767px){
.blog-hero{
padding: var(--space-8) 0;
}
.blog-hero-header{
margin-bottom: var(--space-6);
}
.blog-hero-header h1{
font-size: var(--fs-h4);
line-height: 1.15;
}
.blog-hero-header p{
font-size: 14px;
line-height: 1.7;
}
.hero-post-image{
border-radius: 16px;
}
.hero-post-image img{
height: 240px;
}
.hero-post-meta{
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.hero-post-title{
font-size: var(--fs-h5);
line-height: 1.3;
}
.latest-badge{
top: 14px;
left: 14px;
padding: 8px 12px;
font-size: 12px;
}
}

/* ===================================
ALL POSTS
=================================== */
.all-posts{
padding:var(--space-11) 0;
}
.posts-filter{
display:flex;
align-items:center;
gap:20px;
margin-bottom:50px;
}
.posts-tabs{
display:flex;
flex-wrap:wrap;
gap:12px;
}
/* Filter Buttons */
.post-filter{
padding:12px 18px;
border:1px solid var(--box-border);
border-radius:999px;
background:#F5F6F8;
color:var(--color-primary);
cursor:pointer;
transition:all .3s ease;
}
.post-filter:hover{
background:var(--color-highlight);
border-color:var(--color-highlight);
color:var(--color-text-light);
}
.post-filter.active{
background:var(--color-highlight);
border-color:var(--color-highlight);
color:var(--color-text-light);
}
/* Sort */
.sort-filter-wrap{
position:relative;
display:inline-block;
}
.sort-filter{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
min-width:150px;
padding:12px 42px 12px 18px;
border:1px solid var(--box-border);
border-radius:999px;
background:#F5F6F8;
color:var(--color-primary);
cursor:pointer;
transition:.3s ease;
}
.sort-filter:hover,
.sort-filter:focus{
border-color:var(--color-highlight);
outline:none;
}
.sort-filter-wrap::after{
content:"";
position:absolute;
top:50%;
right:18px;
width:7px;
height:7px;
border-right:2px solid var(--color-text);
border-bottom:2px solid var(--color-text);
transform:translateY(-65%) rotate(45deg);
pointer-events:none;
}
/* Section Title */
.section-title{
padding-bottom:20px;
margin-bottom:40px;
border-bottom:1px solid var(--box-border);
color:var(--color-primary);
}
/* Grid */
.all-post-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px 24px;
}
/* Load More */
.load-more-wrap{
margin-top:60px;
text-align:center;
}
#load-more-posts{
padding:0 32px;
height:52px;
line-height:52px;
border:1px solid var(--box-border);
border-radius:999px;
background:#F5F6F8;
color:var(--color-primary);
cursor:pointer;
transition:all .3s ease;
}
#load-more-posts:hover{
background:var(--color-highlight);
border-color:var(--color-highlight);
color:var(--color-text-light);
}
/* Tablet */
@media (max-width:991px){
.posts-filter{
flex-direction:column;
align-items:flex-start;
}
.all-post-grid{
grid-template-columns:repeat(2,1fr);
}
}
/* Mobile */
@media (max-width:767px){
.posts-tabs{
gap:10px;
}
.post-filter{
font-size:14px;
padding:10px 16px;
}
.sort-filter{
width:100%;
min-width:unset;
}
.all-post-grid{
grid-template-columns:1fr;
gap:24px;
}
}

/* ===================================
BLOG SEARCH
=================================== */
.blog-search{
padding:0 0 var(--space-10);
}
.blog-search-form{
position:relative;
}
.blog-search-form input{
width:100%;
height:72px;
padding:0 30px 0 64px;
border:none;
outline:none;
background:#F7F7F7;
border-radius:999px;
font-size:15px;
color:var(--color-primary);
transition:.3s ease;
}
.blog-search-form input::placeholder{
color:#9CA3AF;
}
.blog-search-form input:focus{
background:#F2F4F7;
}
.search-icon{
position:absolute;
left:24px;
top:50%;
transform:translateY(-50%);
width:24px;
height:24px;
border:none;
background:none;
color:#9CA3AF;
padding:0;
margin:0;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
}
/* ======================
TABLET
====================== */
@media(max-width:991px){
.blog-search-form input{
height:64px;
}
}
/* ======================
MOBILE
====================== */
@media(max-width:767px){
.blog-search-form input{
height:56px;
padding-left:56px;
font-size:14px;
}
.search-icon{
left:20px;
}
}
.post-filter{
flex:0 0 auto;
white-space:nowrap;
}
.posts-tabs {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
width: 100%;
max-width: 100%;
gap: 12px;
padding-bottom: 8px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin:3px 0 -3px
}
.posts-tabs::-webkit-scrollbar {
display: none;
}
.posts-tabs .post-filter {
flex: 0 0 auto;
white-space: nowrap;
}