/* ============================================
   BLOG MAIN PAGE STYLES
   Main blog listing page layout and components
   ============================================ */

/* ========== BREADCRUMBS ========== */
.breadcrumb-section {
  background-color: var(--blog-gray-50);
  padding: var(--blog-spacing-md) 0;
  border-bottom: 1px solid var(--blog-gray-200);
  padding-top: calc(76px + 15px);
}

.breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: var(--blog-font-sm);
}

.breadcrumb-item {
  color: var(--blog-gray-600);
}

.breadcrumb-item a {
  color: var(--blog-gray-600);
  text-decoration: none;
  transition: color var(--blog-transition-fast);
}

.breadcrumb-item a:hover {
  color: var(--blog-accent);
}

.breadcrumb-item.active {
  color: var(--blog-primary);
  font-weight: var(--blog-font-medium);
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: var(--blog-gray-400);
  padding: 0 var(--blog-spacing-sm);
}

.breadcrumb-item i {
  margin-right: var(--blog-spacing-xs);
}

/* ========== BLOG HEADER ========== */
.blog-header-section {
  padding: var(--blog-spacing-3xl) 0 var(--blog-spacing-2xl);
  background: linear-gradient(135deg, var(--blog-primary) 0%, var(--blog-gray-800) 100%);
  color: var(--blog-secondary);
  text-align: center;
}

.blog-main-title {
  font-size: var(--blog-font-5xl);
  font-weight: var(--blog-font-bold);
  color: var(--blog-secondary);
  margin-bottom: var(--blog-spacing-md);
  font-family: var(--blog-font-heading);
  line-height: 1.2;
}

.blog-main-subtitle {
  font-size: var(--blog-font-xl);
  color: var(--blog-gray-300);
  font-weight: var(--blog-font-regular);
  max-width: 600px;
  margin: 0 auto;
}

/* ========== BLOG CONTENT SECTION ========== */
.blog-content-section {
  padding: var(--blog-spacing-3xl) 0;
  background-color: var(--blog-secondary);
}

/* ========== CATEGORY FILTER ========== */
.category-filter-container {
  margin-bottom: var(--blog-spacing-2xl);
  padding: var(--blog-spacing-lg);
  background-color: var(--blog-gray-50);
  border-radius: var(--blog-border-radius-lg);
  border: 1px solid var(--blog-gray-200);
}

.filter-label {
  font-size: var(--blog-font-sm);
  font-weight: var(--blog-font-semibold);
  color: var(--blog-gray-700);
  margin-bottom: var(--blog-spacing-md);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--blog-spacing-sm);
}

.category-pill {
  padding: var(--blog-spacing-sm) var(--blog-spacing-lg);
  background-color: var(--blog-secondary);
  border: 2px solid var(--blog-gray-300);
  color: var(--blog-gray-700);
  font-size: var(--blog-font-sm);
  font-weight: var(--blog-font-medium);
  border-radius: var(--blog-border-radius-full);
  cursor: pointer;
  transition: all var(--blog-transition-base);
  white-space: nowrap;
}

.category-pill:hover {
  background-color: var(--blog-gray-100);
  border-color: var(--blog-gray-400);
  transform: translateY(-2px);
}

.category-pill.active {
  background-color: var(--blog-primary);
  color: var(--blog-secondary);
  border-color: var(--blog-primary);
}

/* ========== BLOG POSTS GRID ========== */
.blog-posts-grid {
  display: grid;
  gap: var(--blog-spacing-xl);
  margin-bottom: var(--blog-spacing-2xl);
}

/* ========== SCROLL TO TOP BUTTON ========== */
.scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: var(--blog-primary);
  color: var(--blog-secondary);
  border: none;
  border-radius: var(--blog-border-radius-full);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: var(--blog-font-xl);
  box-shadow: var(--blog-shadow-lg);
  transition: all var(--blog-transition-base);
  z-index: var(--blog-z-sticky);
}

.scroll-to-top:hover {
  background-color: var(--blog-accent);
  transform: translateY(-5px);
  box-shadow: var(--blog-shadow-xl);
}

.scroll-to-top.show {
  display: flex;
}

/* ========== UTILITY CLASSES ========== */
.text-center {
  text-align: center;
}

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--blog-spacing-sm); }
.mb-2 { margin-bottom: var(--blog-spacing-md); }
.mb-3 { margin-bottom: var(--blog-spacing-lg); }
.mb-4 { margin-bottom: var(--blog-spacing-xl); }
.mb-5 { margin-bottom: var(--blog-spacing-2xl); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--blog-spacing-sm); }
.mt-2 { margin-top: var(--blog-spacing-md); }
.mt-3 { margin-top: var(--blog-spacing-lg); }
.mt-4 { margin-top: var(--blog-spacing-xl); }
.mt-5 { margin-top: var(--blog-spacing-2xl); }