/* =====================================
   BLOG SYSTEM
===================================== */


.blog-hero {
   background: var(--bg-light);
}


.blog-category {
   position: absolute;
   top: 20px;
   left: 20px;
   display: inline-flex;
   padding: 7px 16px;
   border-radius: 999px;
   background: var(--primary-soft);
   color: var(--primary);
   font-size: .85rem;
   font-weight: 600;
}


.blog-card {
   transition: var(--transition);
   position: relative;
}


.blog-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-hover);
}


.blog-card-image {
   height: 300px;
   border-radius: var(--radius-md);
   overflow: hidden;
   display: block;
}


.blog-card-image img {
   height: 100%;
   object-fit: cover;
   object-position: top;
   transition: .4s ease;
}


.blog-card:hover img {
   transform: scale(1.05);
}


.blog-card-body {
   padding: 25px;
}


.blog-card-footer {
   margin-top: 25px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 15px;
}


.blog-card-footer span {
   color: var(--text-muted);
   font-size: .85rem;
}



.featured-post {
   overflow: hidden;
}


.featured-post-image {
   height: 450px;
}


.featured-post-image img {
   height: 100%;
   object-fit: cover;
}


.featured-post-content {
   padding: 45px;
}


.blog-categories {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
}


.category-pill {
   padding: 10px 20px;
   border-radius: 999px;
   background: var(--bg-soft);
   border: 1px solid var(--border);
   color: var(--text-dark);
   transition: var(--transition);
}


.category-pill:hover {
   background: var(--primary);
   color: white;
}



.blog-pagination {
   display: flex;
   justify-content: center;
   gap: 10px;
}


.pagination-btn {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--bg-soft);
   color: var(--text-dark);
}


.pagination-btn.active,
.pagination-btn:hover {
   background: var(--primary);
   color: white;
}


@media(max-width:768px) {

   .featured-post-image {
      height: 300px;
   }

   .featured-post-content {
      padding: 25px;
   }


   .blog-card-footer {
      flex-direction: column;
      align-items: flex-start;
   }

}






/* =====================================
   BLOG DETAIL
===================================== */


.blog-detail-header {
   max-width: 900px;
   margin: auto;
}


.blog-meta {
   display: flex;
   justify-content: center;
   gap: 25px;
   color: var(--text-muted);
   font-size: .9rem;
}


.blog-detail-image {
   max-width: 1100px;
   margin-left: auto;
   margin-right: auto;
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-md);
}


.blog-detail-image img {
   width: 100%;
   max-height: 600px;
   object-fit: cover;
}


.blog-content {
   max-width: 900px;
   margin-left: auto;
   margin-right: auto;
   color: var(--text);
   line-height: 1.9;
   font-size: 1.05rem;
}


.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4 {
   color: var(--heading);
   margin-top: 35px;
   margin-bottom: 15px;
}


.blog-content p {
   margin-bottom: 20px;
}


.blog-content img {
   border-radius: var(--radius-md);
   margin: 30px 0;
}


.blog-content ul,
.blog-content ol {
   margin: 20px 0;
   padding-left: 25px;
}


.blog-content li {
   margin-bottom: 10px;
}


@media(max-width:768px) {

   .blog-meta {
      flex-direction: column;
      gap: 10px;
   }

}




/* =====================================
   CATEGORY PAGE
===================================== */


.blog-category-header {
   background: var(--bg-light);
}


.blog-category-header p {
   max-width: 700px;
}