.blog-hero { position: relative; overflow: hidden; padding: 90px 0; background: url('../images/blog-banner.png') center right / cover no-repeat, #FBF8F3; }
.blog-hero .container { position: relative; z-index: 2; }
.blog-hero-label { display: inline-flex; align-items: center; gap: 10px; color: #A68852; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 14px; }
.blog-hero-label::before { content: ''; width: 34px; height: 2px; background: #A68852; display: inline-block; }
.blog-hero h1 { font-size: 46px; font-weight: 700; color: #2c2c39; margin-bottom: 14px; }
.blog-hero-breadcrumb { font-size: 14px; color: #7a7a86; }
.blog-hero-breadcrumb a { color: #7a7a86; text-decoration: none; }
.blog-hero-breadcrumb a:hover { color: #A68852; }
.blog-hero-breadcrumb span { color: #A68852; font-weight: 600; }

.blog-filter-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 50px 0 45px; }
.blog-chip { display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px; border-radius: 100px; font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid #E5DFD3; color: #2c2c39; background: #fff; transition: 0.2s ease-in-out; }
.blog-chip:hover { border-color: #A68852; color: #A68852; }
.blog-chip.is-active { background: #A68852; border-color: #A68852; color: #fff; }
.blog-chip i { font-size: 12px; }

.blog-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(44, 44, 57, 0.06); height: 100%; display: flex; flex-direction: column; }
.blog-card-img { display: block; height: 220px; overflow: hidden; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.4s ease; }
.blog-card:hover .blog-card-img img { transform: scale(1.06); }
.blog-card-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex-grow: 1; }
.blog-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 13px; color: #8a8a94; margin-bottom: 12px; }
.blog-card-meta span { display: inline-flex; align-items: center; gap: 6px; }
.blog-card-meta i { color: #A68852; }
.blog-card-title { font-size: 20px; font-weight: 700; color: #2c2c39; line-height: 1.35; margin-bottom: 10px; }
.blog-card-title a { color: inherit; text-decoration: none; }
.blog-card-title a:hover { color: #A68852; }
.blog-card-desc { color: #7a7a86; font-size: 14.5px; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; }
.blog-card-more { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 10px 20px; border-radius: 100px; background: #F5EFE4; color: #2c2c39; font-weight: 700; font-size: 14px; text-decoration: none; transition: 0.2s ease-in-out; }
.blog-card-more i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #A68852; color: #fff; font-size: 10px; }
.blog-card-more:hover { background: #A68852; color: #fff; }

.blog-listing-section .pagination { gap: 8px; }
.blog-listing-section .pagination .page-item { list-style: none; }
.blog-listing-section .pagination .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 16px; border-radius: 100px; background: #fff; border: 1px solid #E5DFD3; color: #2c2c39; font-weight: 600; font-size: 14px; text-decoration: none; transition: 0.2s ease-in-out; }
.blog-listing-section .pagination .page-item.active .page-link { background: #2c2c39; border-color: #2c2c39; color: #fff; }
.blog-listing-section .pagination .page-link:hover { background: #A68852; border-color: #A68852; color: #fff; }
.blog-listing-section .pagination .separator .page-link { background: transparent; border-color: transparent; color: #8a8a94; }
.blog-listing-section .pagination .separator .page-link:hover { background: transparent; color: #8a8a94; }

@media (max-width: 767px) {
    .blog-hero { background-position: 70% center; padding: 60px 0; }
    .blog-hero h1 { font-size: 32px; }
}
