/* |--------------------------------------------------------------------------
| BLOG CONTENT STYLES (.blog-content) - Optimized for Spacing & Responsiveness
| 
| Focus: Tighter vertical rhythm, clean left-alignment, and mobile adaptation.
|--------------------------------------------------------------------------
*/

.blog-content {
    /* Base Readability & Alignment */
    font-family: 'Inter', sans-serif;
    /* Reduced line height slightly for a tighter look while maintaining readability */
    line-height: 1.6; 
    color: #333;
    max-width: 100%; 
    /* Ensures clean wrapping of very long words (essential for mobile alignment) */
    overflow-wrap: break-word; 
    word-break: break-word;
}

/* ----------------- HEADINGS ----------------- */

.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4 {
    color: #10B981; 
    font-weight: 700;
    /* Reduced top margin for tighter rhythm */
    margin-top: 1.75rem; 
    /* Reduced bottom margin to pull the body text closer to the heading */
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #E5E7EB; 
    /* Ensure all headings are perfectly left-aligned */
    text-align: left;
}

.blog-content h1 { font-size: 2.25rem; border-bottom-width: 2px; }
.blog-content h2 { font-size: 1.8rem; }
.blog-content h3 { font-size: 1.4rem; border-bottom: none; }
.blog-content h4 { font-size: 1.15rem; border-bottom: none; }

/* ----------------- TEXT ELEMENTS ----------------- */

.blog-content strong {
    color: #10B981;
    font-weight: 700;
}

/* Paragraph spacing - slightly reduced for a tighter flow */
.blog-content p {
    margin-bottom: 1.25rem;
    /* Ensures text is always left-aligned */
    text-align: left;
}

/* Blockquotes (For quotes or call-outs) - Tighter margins top/bottom */
.blog-content blockquote {
    border-left: 5px solid #10B981; 
    padding: 1rem 1.5rem;
    /* Reduced top/bottom margin */
    margin: 1.5rem 0; 
    background-color: #F3F4F6;
    font-style: italic;
    color: #4B5563;
    border-radius: 0.5rem;
}

/* ----------------- LISTS ----------------- */

/* Tighter margins for lists */
.blog-content ul,
.blog-content ol {
    margin: 1.25rem 0 1.25rem 1.5rem;
    padding: 0;
    text-align: left;
}
.blog-content ul {
    list-style-type: disc; 
}
.blog-content li {
    /* Slightly less space between list items */
    margin-bottom: 0.35rem; 
}

/* ----------------- MEDIA ----------------- */

.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    /* Tighter margins for images */
    margin: 1.5rem auto; 
    display: block;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* ========================================================================= 
| RESPONSIVE DESIGN (SMALL DEVICES) 
| Targets screens up to 768px (mobile/small tablet) for optimal viewing.
| ========================================================================= */
@media (max-width: 768px) {
    .blog-content {
        /* Ensure text is not too wide on very small screens */
        padding: 0 0.5rem;
    }
    
    /* Reduce large heading sizes slightly for mobile screens */
    .blog-content h1 { font-size: 2rem; }
    .blog-content h2 { font-size: 1.5rem; }
    
    /* Reduce top margins again for a super tight mobile flow */
    .blog-content h1,
    .blog-content h2,
    .blog-content h3,
    .blog-content h4 {
        margin-top: 1.5rem; 
        margin-bottom: 0.5rem;
    }

    /* Reduce image margins for less empty space on mobile */
    .blog-content img {
        margin: 1rem auto;
    }
}