/* ============================================================
   noise-remover.com — Blog CSS
   Used by: blog/index.html + all 30 blog post pages
   ============================================================ */

/* ============================================================
   1. BLOG LISTING LAYOUT
   ============================================================ */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-8);
  align-items: start;
}

/* ============================================================
   2. BLOG HERO
   ============================================================ */
.blog-hero {
  background: linear-gradient(160deg, #fff 0%, #FFF8F2 55%, #FFF0E0 100%);
  padding: 72px 0 56px;
  text-align: center;
  border-bottom: 1px solid var(--color-dark-200);
  position: relative;
  overflow: hidden;
}

.blog-hero::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(255,107,0,0.07), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.blog-hero h1 {
  font-size: clamp(var(--text-3xl), 5vw, 3.2rem);
  font-weight: var(--font-black);
  color: var(--color-dark);
  margin-bottom: var(--space-4);
  position: relative;
}

.blog-hero h1 span { color: var(--color-primary); }

.blog-hero-sub {
  font-size: var(--text-md);
  color: var(--color-dark-500);
  max-width: 500px;
  margin: 0 auto var(--space-6);
  line-height: var(--leading-loose);
}

/* Search */
.blog-search-wrap {
  max-width: 500px;
  margin: 0 auto;
  position: relative;
}

.blog-search-input {
  width: 100%;
  padding: 13px 48px 13px 48px;
  background: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  color: var(--color-dark);
  outline: none;
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-base);
}

.blog-search-input:focus {
  box-shadow: 0 0 0 4px rgba(255,107,0,0.12), var(--shadow-md);
}

.blog-search-input::placeholder { color: var(--color-dark-400); }

.blog-search-icon {
  position: absolute;
  left: 18px; top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--color-primary);
  pointer-events: none;
}

.blog-search-clear {
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  cursor: pointer;
  color: var(--color-dark-400);
  font-size: 16px;
  display: none;
  padding: 4px;
  border-radius: 50%;
  transition: all var(--transition-base);
}

.blog-search-clear:hover { color: var(--color-primary); }

/* ============================================================
   3. CATEGORY FILTER PILLS
   ============================================================ */
.blog-category-bar {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-dark-200);
  padding: var(--space-4) 0;
  position: sticky;
  top: var(--nav-height);
  z-index: 10;
}

.blog-category-pills {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.blog-category-pills::-webkit-scrollbar { display: none; }

.blog-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 18px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: var(--font-semi);
  cursor: pointer;
  border: 1.5px solid var(--color-dark-200);
  background: var(--color-white);
  color: var(--color-dark-600);
  white-space: nowrap;
  transition: all var(--transition-base);
  flex-shrink: 0;
}

.blog-cat-pill:hover  { border-color: var(--color-primary); color: var(--color-primary); }
.blog-cat-pill.active { background: var(--color-dark); border-color: var(--color-dark); color: var(--color-white); }
.blog-cat-pill i      { font-size: 13px; }

/* ============================================================
   4. FEATURED POST CARD
   ============================================================ */
.blog-featured-card {
  background: var(--color-white);
  border: 1px solid var(--color-dark-200);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  margin-bottom: var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  transition: all var(--transition-base);
}

.blog-featured-card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-3px);
  border-color: var(--color-primary-100);
}

.blog-featured-img-wrap {
  overflow: hidden;
  min-height: 320px;
  background: var(--color-primary-50);
  position: relative;
}

.blog-featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  position: absolute;
  inset: 0;
}

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

.blog-featured-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary-50), var(--color-amber-50));
  font-size: 80px;
  position: absolute;
  inset: 0;
}

.blog-featured-badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 11px;
  font-weight: var(--font-bold);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  z-index: 1;
}

.blog-featured-content {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-featured-category {
  font-size: 11px;
  font-weight: var(--font-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: var(--space-3);
}

.blog-featured-title {
  font-size: clamp(var(--text-xl), 2vw, var(--text-2xl));
  font-weight: var(--font-black);
  color: var(--color-dark);
  line-height: 1.3;
  margin-bottom: var(--space-4);
  display: block;
  text-decoration: none;
}

.blog-featured-title:hover { color: var(--color-primary); }

.blog-featured-excerpt {
  font-size: var(--text-sm);
  color: var(--color-dark-500);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-5);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-featured-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-dark-100);
}

.blog-meta-author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.blog-meta-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-primary-50);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  font-weight: var(--font-black);
  color: #92400E;
  flex-shrink: 0;
}

.blog-meta-name {
  font-size: 12px;
  font-weight: var(--font-semi);
  color: var(--color-dark-700);
}

.blog-meta-divider {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--color-dark-300);
  flex-shrink: 0;
}

.blog-meta-date, .blog-meta-read {
  font-size: 12px;
  color: var(--color-dark-400);
}

/* ============================================================
   5. BLOG CONTROLS BAR
   ============================================================ */
.blog-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  gap: var(--space-4);
  flex-wrap: wrap;
}

.blog-results-label {
  font-size: var(--text-sm);
  color: var(--color-dark-500);
  font-weight: var(--font-medium);
}

.blog-sort-select {
  padding: 7px 32px 7px 12px;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-size: 12px;
  font-weight: var(--font-semi);
  color: var(--color-dark);
  cursor: pointer;
  outline: none;
  font-family: var(--font-sans);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  min-width: 140px;
}

.blog-sort-select:focus { box-shadow: 0 0 0 3px rgba(255,107,0,0.12); }

/* ============================================================
   6. BLOG POSTS GRID
   ============================================================ */
.blog-posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

/* Blog card (used in listing) */
.blog-post-card {
  background: var(--color-white);
  border: 1px solid var(--color-dark-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-base);
  cursor: pointer;
  text-decoration: none;
}

.blog-post-card:hover {
  border-color: var(--color-primary-100);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.blog-post-thumb-wrap {
  height: 180px;
  overflow: hidden;
  background: var(--color-primary-50);
  position: relative;
  flex-shrink: 0;
}

.blog-post-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

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

.blog-post-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  background: linear-gradient(135deg, var(--color-primary-50), var(--color-amber-50));
}

.blog-post-category-tag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: var(--color-dark);
  color: var(--color-white);
  font-size: 10px;
  font-weight: var(--font-bold);
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

.blog-post-body {
  padding: var(--space-4) var(--space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-post-cat-label {
  font-size: 10px;
  font-weight: var(--font-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
  display: block;
}

.blog-post-title {
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  line-height: 1.4;
  margin-bottom: var(--space-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 0 0 auto;
}

.blog-post-excerpt {
  font-size: 13px;
  color: var(--color-dark-500);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--space-4);
  flex: 1;
}

.blog-post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-dark-100);
  margin-top: auto;
}

.blog-post-read-time {
  font-size: 11px;
  color: var(--color-dark-400);
  display: flex;
  align-items: center;
  gap: 4px;
}

.blog-post-read-time i { font-size: 12px; }

.blog-post-date {
  font-size: 11px;
  color: var(--color-dark-400);
}

/* ============================================================
   7. LOAD MORE
   ============================================================ */
.blog-load-more {
  text-align: center;
  margin-bottom: var(--space-8);
}

.blog-load-more-info {
  font-size: 12px;
  color: var(--color-dark-400);
  margin-top: var(--space-3);
}

/* Progress bar for loaded posts */
.blog-load-progress {
  height: 4px;
  background: var(--color-dark-200);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin: var(--space-4) auto 0;
  max-width: 300px;
}

.blog-load-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
}

/* No results */
.blog-no-results {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  display: none;
}

.blog-no-results-icon {
  font-size: 48px;
  color: var(--color-dark-300);
  display: block;
  margin-bottom: var(--space-4);
}

/* ============================================================
   8. BLOG SIDEBAR
   ============================================================ */
.blog-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + 60px);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sidebar-widget {
  background: var(--color-white);
  border: 1px solid var(--color-dark-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.sidebar-widget-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-dark-200);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sidebar-widget-header i { color: var(--color-primary); }

.sidebar-widget-body { padding: var(--space-4) var(--space-5); }

/* Popular posts widget */
.popular-post-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-dark-100);
  text-decoration: none;
  transition: all var(--transition-base);
}

.popular-post-item:first-child { padding-top: 0; }
.popular-post-item:last-child  { border-bottom: none; padding-bottom: 0; }

.popular-post-item:hover .popular-post-title { color: var(--color-primary); }

.popular-post-num {
  font-size: var(--text-xl);
  font-weight: var(--font-black);
  color: var(--color-dark-200);
  line-height: 1;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.popular-post-title {
  font-size: 13px;
  font-weight: var(--font-semi);
  color: var(--color-dark-700);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition-base);
}

.popular-post-reads {
  font-size: 11px;
  color: var(--color-dark-400);
  margin-top: 3px;
}

/* Newsletter widget */
.sidebar-newsletter {
  background: var(--color-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  text-align: center;
}

.sidebar-newsletter h3 {
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.sidebar-newsletter p {
  font-size: 12px;
  color: var(--color-dark-400);
  margin-bottom: var(--space-4);
  line-height: 1.6;
}

.sidebar-newsletter-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--color-dark-800);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--color-white);
  outline: none;
  font-family: var(--font-sans);
  margin-bottom: var(--space-2);
  transition: box-shadow var(--transition-base);
}

.sidebar-newsletter-input:focus { box-shadow: 0 0 0 3px rgba(255,107,0,0.15); }
.sidebar-newsletter-input::placeholder { color: var(--color-dark-500); }

/* Tags widget */
.sidebar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sidebar-tag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-dark-50);
  border: 1px solid var(--color-dark-200);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: var(--font-medium);
  color: var(--color-dark-600);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base);
}

.sidebar-tag:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Sidebar CTA */
.sidebar-cta-card {
  background: linear-gradient(135deg, var(--color-primary-50), var(--color-amber-50));
  border: 1.5px solid var(--color-primary-100);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  text-align: center;
}

.sidebar-cta-card h3 {
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-2);
}

.sidebar-cta-card p {
  font-size: 12px;
  color: var(--color-dark-500);
  margin-bottom: var(--space-4);
  line-height: 1.6;
}

/* ============================================================
   9. BLOG POST PAGE (single post styles)
   ============================================================ */
.post-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-8);
  align-items: start;
}

.post-hero {
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--color-dark-200);
  background: var(--color-white);
}

.post-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-primary-50);
  color: #92400E;
  font-size: 11px;
  font-weight: var(--font-bold);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-primary-100);
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.post-title {
  font-size: clamp(var(--text-2xl), 4vw, 2.8rem);
  font-weight: var(--font-black);
  color: var(--color-dark);
  line-height: 1.2;
  margin-bottom: var(--space-5);
}

.post-meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.post-author-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.post-author-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-primary-50);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  font-weight: var(--font-black);
  color: #92400E;
  flex-shrink: 0;
}

.post-author-name {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  display: block;
}

.post-author-title {
  font-size: 11px;
  color: var(--color-dark-400);
}

.post-meta-items {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.post-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--color-dark-400);
}

.post-meta-item i { font-size: 13px; color: var(--color-primary); }

.post-featured-img {
  width: 100%;
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-8);
  display: block;
}

/* Article content */
.article-content {
  font-size: var(--text-base);
  color: var(--color-dark-700);
  line-height: 1.85;
}

.article-content h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-black);
  color: var(--color-dark);
  margin: var(--space-8) 0 var(--space-4);
  line-height: 1.3;
  scroll-margin-top: 90px;
}

.article-content h3 {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin: var(--space-6) 0 var(--space-3);
  line-height: 1.35;
  scroll-margin-top: 90px;
}

.article-content p {
  margin-bottom: var(--space-5);
  color: var(--color-dark-700);
}

.article-content ul,
.article-content ol {
  padding-left: 24px;
  margin-bottom: var(--space-5);
}

.article-content li {
  margin-bottom: var(--space-2);
  line-height: 1.75;
}

.article-content strong { color: var(--color-dark); font-weight: var(--font-bold); }

.article-content a {
  color: var(--color-primary);
  font-weight: var(--font-semi);
  text-decoration: underline;
  text-decoration-color: rgba(255,107,0,0.3);
}

.article-content a:hover { text-decoration-color: var(--color-primary); }

.article-content blockquote {
  border-left: 4px solid var(--color-primary);
  background: var(--color-primary-50);
  padding: var(--space-4) var(--space-5);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: var(--space-6) 0;
  font-style: italic;
  color: var(--color-dark-700);
}

.article-content code {
  background: var(--color-dark-100);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--color-dark);
}

.article-content pre {
  background: var(--color-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  overflow-x: auto;
  margin: var(--space-5) 0;
}

.article-content pre code {
  background: none;
  padding: 0;
  color: #E5E7EB;
  font-size: 13px;
}

/* Article CTA box */
.article-cta-box {
  background: var(--color-primary-50);
  border: 1.5px solid var(--color-primary-100);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin: var(--space-8) 0;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.article-cta-box h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-black);
  color: var(--color-dark);
  margin-bottom: var(--space-2);
}

.article-cta-box p {
  font-size: var(--text-sm);
  color: var(--color-dark-600);
  margin-bottom: 0;
  line-height: 1.6;
}

/* TOC (table of contents) */
.article-toc {
  background: var(--color-dark-50);
  border: 1px solid var(--color-dark-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin: var(--space-6) 0;
}

.article-toc-title {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.article-toc-title i { color: var(--color-primary); }

.toc-link {
  display: block;
  font-size: 13px;
  color: var(--color-dark-600);
  text-decoration: none;
  padding: 5px 0;
  border-bottom: 1px solid var(--color-dark-100);
  transition: color var(--transition-base);
}

.toc-link:last-child { border-bottom: none; }
.toc-link:hover, .toc-link.active { color: var(--color-primary); }
.toc-link.h3 { padding-left: 14px; font-size: 12px; }

/* Author bio */
.author-bio-card {
  background: var(--color-dark-50);
  border: 1px solid var(--color-dark-200);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin: var(--space-8) 0;
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

.author-bio-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--color-primary-50);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  font-weight: var(--font-black);
  color: #92400E;
  flex-shrink: 0;
  border: 2px solid var(--color-primary-100);
}

.author-bio-name {
  font-size: var(--text-md);
  font-weight: var(--font-black);
  color: var(--color-dark);
  display: block;
  margin-bottom: 4px;
}

.author-bio-role {
  font-size: 12px;
  color: var(--color-primary);
  font-weight: var(--font-semi);
  display: block;
  margin-bottom: var(--space-3);
}

.author-bio-text {
  font-size: 13px;
  color: var(--color-dark-600);
  line-height: 1.65;
  margin: 0;
}

/* Social share */
.share-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-dark-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-dark-200);
}

.share-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  color: var(--color-dark-500);
  flex-shrink: 0;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: var(--font-semi);
  cursor: pointer;
  border: 1px solid;
  text-decoration: none;
  transition: all var(--transition-base);
}

.share-btn.twitter  { background: #EFF6FF; border-color: #BFDBFE; color: #1D4ED8; }
.share-btn.linkedin { background: #EFF6FF; border-color: #BFDBFE; color: #0A66C2; }
.share-btn.facebook { background: #EFF6FF; border-color: #BFDBFE; color: #1877F2; }
.share-btn.whatsapp { background: #F0FDF4; border-color: #BBF7D0; color: #15803D; }
.share-btn.copy     { background: var(--color-dark-50); border-color: var(--color-dark-200); color: var(--color-dark-600); }

.share-btn:hover { opacity: 0.85; transform: translateY(-1px); }

/* Related posts */
.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

/* Post sidebar (sticky TOC + newsletter) */
.post-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.post-sidebar-toc {
  background: var(--color-white);
  border: 1px solid var(--color-dark-200);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
}

/* Reading progress bar (fixed top) */
.reading-progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--color-primary);
  z-index: 9999;
  transition: width 0.1s linear;
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

/* ============================================================
   10. PAGINATION
   ============================================================ */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-6) 0;
}

.blog-page-btn {
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-dark-200);
  background: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  color: var(--color-dark-700);
  cursor: pointer;
  transition: all var(--transition-base);
  font-family: var(--font-sans);
}

.blog-page-btn:hover         { border-color: var(--color-primary); color: var(--color-primary); }
.blog-page-btn.active        { background: var(--color-dark); border-color: var(--color-dark); color: var(--color-white); }
.blog-page-btn:disabled      { opacity: 0.4; cursor: not-allowed; }
.blog-page-btn.dots          { border: none; background: none; cursor: default; color: var(--color-dark-400); }

/* ============================================================
   11. RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .blog-layout     { grid-template-columns: 1fr; }
  .blog-sidebar    { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .post-layout     { grid-template-columns: 1fr; }
  .post-sidebar    { position: static; }
}

@media (max-width: 768px) {
  .blog-featured-card { grid-template-columns: 1fr; }
  .blog-featured-img-wrap { min-height: 220px; }
  .blog-posts-grid  { grid-template-columns: 1fr; }
  .blog-sidebar     { grid-template-columns: 1fr; }
  .related-posts-grid { grid-template-columns: 1fr; }
  .article-cta-box  { flex-direction: column; }
  .author-bio-card  { flex-direction: column; }
  .share-row        { gap: var(--space-2); }
}

@media (max-width: 480px) {
  .blog-controls { flex-direction: column; align-items: flex-start; }
  .post-meta-row { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}