/* ==========================================================================
   BLOG MODULE — Styles v2 (enriched design)
   ========================================================================== */

/* Layout */
.blog-layout { display: grid; grid-template-columns: 1fr 300px; gap: 32px; }
.blog-layout-article { grid-template-columns: 1fr 280px; }

/* Article Grid */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.blog-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Blog Card — elevated, colorful hover */
.blog-card {
    display: flex; flex-direction: column; overflow: hidden; padding: 0;
    border: 1px solid var(--gray-100); border-radius: var(--radius-lg);
    background: #fff; transition: all 0.3s var(--ease);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.blog-card:hover {
    box-shadow: 0 12px 28px -8px rgba(0,0,0,0.12), 0 4px 10px -4px rgba(0,0,0,0.06);
    transform: translateY(-4px);
    border-color: var(--primary-100);
}
.blog-card-img { display: block; overflow: hidden; aspect-ratio: 16/10; background: linear-gradient(135deg, var(--primary-50), var(--accent-50, var(--gray-50))); }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.blog-card:hover .blog-card-img img { transform: scale(1.08); }

/* Placeholder for cards without images */
.blog-card:not(:has(.blog-card-img)) .blog-card-body {
    border-top: 4px solid var(--primary-700);
}

.blog-card-body { padding: 20px 22px; flex: 1; display: flex; flex-direction: column; }
.blog-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.blog-card-cat {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
    color: #fff; text-decoration: none;
    background: linear-gradient(135deg, var(--primary-700), var(--accent-500));
    padding: 3px 10px; border-radius: var(--radius-full);
    transition: opacity 0.2s var(--ease);
}
.blog-card-cat:hover { opacity: 0.85; color: #fff; }
.blog-card-body h2, .blog-card-body h3 { font-size: 1.1rem; margin-bottom: 8px; line-height: 1.35; }
.blog-card-body h2 a, .blog-card-body h3 a { color: var(--gray-900); text-decoration: none; transition: color 0.2s var(--ease); }
.blog-card-body h2 a:hover, .blog-card-body h3 a:hover { color: var(--primary-700); }
.blog-card-body p { font-size: 0.875rem; color: var(--gray-500); margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.6; }
.blog-card-footer {
    display: flex; gap: 16px; margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--gray-50);
    font-size: 0.78rem; color: var(--gray-400); align-items: center;
}
.blog-card-footer span::before {
    content: '';
    display: inline-block; width: 3px; height: 3px; border-radius: 50%;
    background: var(--gray-300); margin-right: 8px; vertical-align: middle;
}
.blog-card-footer time::before { display: none; }

/* Sponsored badge */
.blog-sponsored-badge {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    background: var(--amber-500); color: #fff; font-size: 0.65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.blog-sponsored-notice {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    background: #fef3c7; border: 1px solid #fbbf24; border-radius: var(--radius);
    font-size: 0.85rem; color: #92400e; margin-bottom: 20px;
}

/* Pagination — pill style */
.blog-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 40px; }
.blog-page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 12px;
    border-radius: var(--radius-full); border: 1px solid var(--gray-200);
    font-size: 0.875rem; font-weight: 600; color: var(--gray-600);
    text-decoration: none; transition: all 0.2s var(--ease);
}
.blog-page-link:hover { border-color: var(--primary-500); color: var(--primary-700); background: var(--primary-50); }
.blog-page-link.active {
    background: linear-gradient(135deg, var(--primary-700), var(--primary-800));
    color: #fff; border-color: transparent;
    box-shadow: 0 2px 8px rgba(5, 13, 158, 0.3);
}

/* Sidebar — card styling */
.blog-sidebar .card {
    border-radius: var(--radius-lg); border: 1px solid var(--gray-100);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.blog-sidebar .card h3 {
    font-family: var(--font-display); font-size: 0.85rem; font-weight: 700;
    color: var(--gray-900); margin-bottom: 14px;
    padding-bottom: 10px; border-bottom: 2px solid var(--primary-100);
}
.blog-cat-list { list-style: none; }
.blog-cat-list li { border-bottom: 1px solid var(--gray-50); }
.blog-cat-list li:last-child { border-bottom: none; }
.blog-cat-list a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 6px; font-size: 0.875rem; color: var(--gray-600); text-decoration: none;
    border-radius: 0.375rem; transition: all 0.15s var(--ease);
}
.blog-cat-list a:hover { color: var(--primary-700); background: var(--primary-50); padding-left: 12px; }
.blog-cat-list a.active { color: var(--primary-700); font-weight: 600; background: var(--primary-50); }
.blog-cat-count {
    font-size: 0.7rem; font-weight: 600; color: var(--primary-700);
    background: var(--primary-50); padding: 2px 10px; border-radius: var(--radius-full);
}

/* Article Page */
.blog-article { max-width: 100%; }
.blog-article-header { margin-bottom: 24px; }
.blog-article-header h1 { font-size: clamp(1.5rem, 4vw, 2.25rem); margin: 8px 0 16px; }
.blog-article-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.85rem; color: var(--gray-500); }

.blog-featured-img { margin: 0 0 24px; }
.blog-featured-img img { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.blog-featured-img figcaption { font-size: 0.75rem; color: var(--gray-400); text-align: center; margin-top: 6px; }

/* TOC — accent bar */
.blog-toc {
    margin-bottom: 28px; padding: 20px 24px;
    border-radius: var(--radius-lg); background: var(--primary-50);
    border-left: 4px solid var(--primary-700);
}
.blog-toc h2 { font-size: 0.85rem; font-weight: 700; margin-bottom: 10px; color: var(--primary-800); text-transform: uppercase; letter-spacing: 0.5px; }
.blog-toc ul { list-style: none; }
.blog-toc li { padding: 4px 0; }
.blog-toc li a { font-size: 0.85rem; color: var(--gray-700); text-decoration: none; transition: color 0.15s var(--ease); }
.blog-toc li a:hover { color: var(--primary-700); }
.blog-toc .toc-h3 { padding-left: 16px; }

/* Prose (article body) — richer styling */
.prose { font-size: 1.05rem; line-height: 1.8; color: var(--gray-800); }
.prose h2 {
    font-size: 1.5rem; margin: 40px 0 14px; color: var(--gray-900);
    padding-bottom: 8px; border-bottom: 2px solid var(--primary-100);
}
.prose h3 { font-size: 1.2rem; margin: 28px 0 10px; color: var(--primary-800); }
.prose p { margin-bottom: 16px; }
.prose a { color: var(--primary-700); text-decoration: underline; text-decoration-color: var(--primary-200); text-underline-offset: 3px; transition: text-decoration-color 0.2s; }
.prose a:hover { text-decoration-color: var(--primary-700); }
.prose ul, .prose ol { margin-bottom: 16px; padding-left: 24px; }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--primary-700); }
.prose img { max-width: 100%; border-radius: var(--radius-lg); margin: 20px 0; box-shadow: var(--shadow-md); }
.prose blockquote {
    margin: 20px 0; padding: 18px 24px;
    background: linear-gradient(135deg, var(--primary-50), var(--accent-50, #e6f7fa));
    border-left: 4px solid var(--primary-700); border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--gray-700); font-style: normal;
}
.prose blockquote strong { color: var(--primary-800); }
.prose code { background: var(--gray-100); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
.prose pre { background: var(--gray-900); color: #e5e7eb; padding: 16px 20px; border-radius: var(--radius); overflow-x: auto; margin: 16px 0; font-size: 0.875rem; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: none; border-top: 2px solid var(--primary-100); margin: 36px 0; }
.prose strong { color: var(--gray-900); }

/* FAQ in articles */
.prose h2:has(+ p:first-of-type) { margin-top: 48px; }

/* Tags — colorful pills */
.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; padding-top: 24px; border-top: 2px solid var(--gray-100); }
.blog-tag {
    display: inline-block; padding: 5px 14px; border-radius: var(--radius-full);
    background: var(--gray-50); border: 1px solid var(--gray-200);
    font-size: 0.8rem; font-weight: 500; color: var(--gray-600); text-decoration: none;
    transition: all 0.2s var(--ease);
}
.blog-tag:hover {
    border-color: var(--primary-500); color: #fff;
    background: linear-gradient(135deg, var(--primary-700), var(--accent-500));
    transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Related — section with accent */
.blog-related { margin-top: 56px; padding-top: 32px; border-top: 2px solid var(--gray-100); }
.blog-related h2 { font-size: 1.4rem; margin-bottom: 20px; color: var(--gray-900); }

/* ═══════ Stats banner on guide page ═══════ */
.guide-stats {
    display: flex; justify-content: center; gap: 3rem;
    padding: 1.5rem 0; margin: -1.5rem auto 0;
    position: relative; z-index: 2;
    max-width: 36rem; background: #fff;
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.guide-stat { text-align: center; }
.guide-stat-number { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--primary-700); }
.guide-stat-label { font-size: 0.75rem; color: var(--gray-500); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }

/* Responsive */
@media (max-width: 768px) {
    .blog-layout, .blog-layout-article { grid-template-columns: 1fr; }
    .blog-sidebar { order: -1; }
    .blog-grid-3 { grid-template-columns: 1fr; }
    .blog-article-header h1 { font-size: 1.5rem; }
    .guide-stats { gap: 1.5rem; margin: -1rem 1rem 0; padding: 1rem 0; }
    .guide-stat-number { font-size: 1.25rem; }
}