/* ============================================
   M2 REPORTER BLOG - TIMELINE STYLE (OPTION 3)
   Add this CSS to your existing blog page
   ============================================ */

/* Main blog posts container */
.blog-posts {
    position: relative;
    padding-left: 40px;
    max-width: 800px;
    margin: 0 auto;
}

/* Vertical timeline line */
.blog-posts::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #3b82f6, #60a5fa);
}

/* Individual blog post */
.blog-post {
    position: relative;
    margin-bottom: 60px;
    padding-left: 30px;
}

/* Timeline dot for each post */
.blog-post::before {
    content: '';
    position: absolute;
    left: -43px;
    top: 8px;
    width: 12px;
    height: 12px;
    background: #3b82f6;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #dbeafe;
}

/* Post metadata (date and author) */
.post-meta {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: white;
    padding: 8px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.meta-date {
    color: #3b82f6;
    font-weight: 600;
    font-size: 0.9rem;
}

.meta-divider {
    color: #cbd5e1;
}

.meta-author {
    color: #64748b;
    font-size: 0.9rem;
}

/* Blog post title */
.blog-post h2 {
    color: #0f172a;
    font-size: 1.9rem;
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.3;
}

/* Blog post content container */
.blog-content {
    background: white;
    padding: 32px;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Paragraphs */
.blog-content p {
    color: #475569;
    margin-bottom: 16px;
    font-size: 1.05rem;
    line-height: 1.8;
}

/* Subheadings */
.blog-content h3 {
    color: #1e293b;
    font-size: 1.35rem;
    margin-top: 28px;
    margin-bottom: 14px;
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 2px solid #e2e8f0;
}

/* Lists */
.blog-content ul {
    margin-left: 20px;
    margin-bottom: 16px;
}

.blog-content li {
    margin-bottom: 10px;
    color: #475569;
    padding-left: 8px;
}

.blog-content li::marker {
    color: #3b82f6;
}

/* Contact/CTA boxes */
.contact-cta {
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    padding: 16px 20px;
    border-radius: 6px;
    margin-top: 24px;
}

.contact-cta p {
    margin-bottom: 0;
    color: #1e40af;
    font-weight: 500;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .blog-posts {
        padding-left: 20px;
    }
    
    .blog-post {
        padding-left: 20px;
    }
    
    .blog-content {
        padding: 24px;
    }
}