/* Blog-specific styles */
.blog-container {
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* Main blog listing page */
.article-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.article-card .tag {
    background-color: #e0f2fe; /* primary-100 */
    color: #0369a1; /* primary-700 */
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8rem;
}

.dark .article-card .tag {
    background-color: #0c4a6e; /* primary-900 */
    color: #bae6fd; /* primary-200 */
}

/* Single article page */
.article-content {
    max-width: 800px;
    margin: 2rem auto;
    /* === YEH NAYI LINE ADD KI GAYI HAI === */
    padding: 0 1.5rem; /* Adds 1.5rem space on left and right sides */
}

.article-content .prose {
    font-size: 1.125rem;
    line-height: 1.75;
}

.article-content .prose h1 {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.article-content .prose .meta {
    font-size: 0.9rem;
    color: #6b7280; /* text-gray-500 */
    margin-bottom: 2rem;
}

.dark .article-content .prose .meta {
    color: #9ca3af; /* dark:text-gray-400 */
}

.article-content .prose h2 {
    font-size: 1.875rem;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb; /* border-gray-200 */
}

.article-content .prose p,
.article-content .prose ul,
.article-content .prose ol {
    margin-bottom: 1.5rem;
}

.article-content .prose a {
    color: #0284c7; /* primary-600 */
    text-decoration: underline;
    font-weight: 500;
}

.article-content .prose a:hover {
    color: #0369a1; /* primary-700 */
}

.article-content .prose img {
    border-radius: 0.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.article-content .prose blockquote {
    border-left: 4px solid #0ea5e9; /* primary-500 */
    padding-left: 1rem;
    font-style: italic;
    color: #4b5563; /* text-gray-600 */
    margin-left: 0;
}

.dark .article-content .prose blockquote {
    color: #d1d5db; /* dark:text-gray-300 */
}

/* Responsive styles for Mobile */
@media (max-width: 768px) {
    .article-content {
        /* Reduce top/bottom margin on mobile */
        margin-top: 1.5rem;
        /* Reduce side padding slightly for very small screens */
        padding: 0 1rem;
    }
    
    .article-content .prose h1 {
        /* Reduce heading size on mobile */
        font-size: 2rem; 
    }
    
    .article-content .prose {
        /* Reduce body text size on mobile */
        font-size: 1rem;
    }

    .article-content .prose h2 {
        /* Reduce subheading size on mobile */
        font-size: 1.5rem;
    }
}